Share
Vandaag gaan we een ontwerpprincipe bekijken dat een grote rol speelt in het succes van een webontwerp: Unity. Zoals met veel ontworpen elementen in de wereld, kan eenheid het ontwerp van een site maken of breken. Een goed 'uniforme' site voelt natuurlijk, organisch en naadloos aan; Waar een site zonder eenheid zich onsamenhangend, discontinu en discombobulated kan voelen (met andere woorden, het valt visueel uit elkaar). Lees verder om meer te weten te komen!
Eenheid is een interessant concept. Als we de technische definitie bekijken, zijn er een paar die kunnen worden toegepast in de context van webdesign? zoals "de staat van verenigd zijn of samengevoegd als geheel" en "harmonie of overeenkomst tussen mensen of groepen". In het bijzonder kunnen we echter naar één definitie kijken die van toepassing is op dit scenario als van de gouden regels van goed webontwerp: "de staat van vormen van een compleet en aangenaam geheel".
Eenheid is erg belangrijk omdat het helpt een consistent merk en dezelfde identiteit voor uw site te creëren. Het vormt een verbinding tussen uw elementen, zodat gebruikers een gemakkelijke tijd doormaken tussen die elementen en ook tussen de verschillende pagina's van uw website. Kortom, het concept van eenheid creëert een sterke relatie tussen elementen, zodat de gebruiker ze als één ziet, niet als een groep.
Zie het op deze manier. Als je in een bakstenen huis woont, zeg je niet: "Ik woon in een hoop stenen". In plaats daarvan zeg je: "Ik woon in een huis". Dat komt omdat je een groep verschillende elementen hebt (namelijk de stenen) die verenigd zijn als een huis en mensen de structuur opnemen als een enkel gebouw dankzij de connecties en sterke relaties tussen de (letterlijke) bouwstenen.
Hetzelfde geldt voor veel dingen in de natuurlijke wereld. Beschouw het blad aan de rechterkant. Het bevat miljoenen cellen en andere bouwsteenstructuren, maar de meeste mensen zien het gewoon als een blad.
Eenheid houdt uw ontwerp samen als de structuur, zowel visueel als conceptueel. Het voegt organisatie toe en vergemakkelijkt de reis van de gebruiker over uw webpagina omdat ze niet elk element afzonderlijk hoeft te verwerken. Dit helpt, indirect, de inhoud naar buiten te duwen en stelt de gebruiker in staat zich te concentreren op het primaire bericht van de webpagina.
Er zijn veel factoren die bijdragen aan een gevoel van eenheid binnen een webpagina. Voordat u echter een van deze probeert toe te passen, moet u ervoor zorgen dat u begrijpt wat het belangrijkste doel van het ontwerp is. Het doel van het ontwerp moet worden ondersteund door het uniforme ontwerp dat alles zichtbaar verbonden en gemakkelijker te zien maakt.
Laten we nu een beetje meer uitleggen hoe elk van deze factoren kan worden gebruikt om een sterke relatie tussen elementen te creëren.
Zoals we al hebben vastgesteld, kan kleur een uitstekende manier zijn om een verband tussen objecten tot stand te brengen. Bijna alles houdt vast aan een kleurenschema - website of niet - omdat het helpt om een relatie te creëren, vooral wanneer het wordt gebruikt in combinatie met een product of een niet-web-entiteit. De Coca-Cola-website (zie hieronder) gebruikt bijvoorbeeld primaire rode en witte kleuren, hetzelfde als het vlaggenschipproduct. Daarom kan ons gebruik van het product direct worden gekoppeld aan de site vanwege de consistentie van de kleur.
Eenheid door middel van kleur kan ook worden gegenereerd door ervoor te zorgen dat u een bepaald kleurenschema volgt in uw ontwerpen. Niet consistent zijn in dit opzicht zal resulteren in een ontwerp dat onthecht aanvoelt omdat een van de grootste invloeden op een visuele link ontbreekt. We kunnen zelfs zo ver gaan dat je je eenheid kunt schaden als je keuze niet gerelateerd is aan je type product, zoals hoe groen gerelateerd kan zijn aan financiën.
Terugkerende elementen die er identiek uitzien, vormen een verbinding, omdat je hersenen zullen denken: "Hé, dat heb ik al eerder gezien!". Het creëert vertrouwdheid binnen het ontwerp, zodat uw gebruikers niet verplicht zijn om dat specifieke deel van uw website opnieuw te verwerken. Het verbindt de pagina's door hun gelijkenis, dus uw belangrijkste focus ligt op de inhoud en het bericht dat u wilt pushen.
Natuurlijk is de herhaling van elementen niet de enige methode om eenheid te creëren in je ontwerp. Het gebruik van vergelijkbare factoren (zoals kleur of typografie) kan de elementen van uw ontwerp met elkaar verbinden omdat ze er hetzelfde uitzien. Met hetzelfde kleurenschema, dezelfde randstijl of hetzelfde lettertype kunnen de pagina's of de objecten in uw ontwerp worden bijgevoegd.
Laten we voor een beter begrip naar een analogie kijken. We kunnen de herhaling vanuit een ander perspectief bekijken: veel kwaadwillende sites repliceren het ontwerp van een populaire site, dus het lijkt erop dat de gebruiker net als een andere pagina van een service die ze elke dag gebruiken. Een nep Facebook-inlogscherm repliceert het kleurenschema en de lay-out van Facebook.com zodat het voor de onschuldige gebruiker lijkt op een officiële pagina van het sociale netwerk. De ongeschoolde gebruiker zal niet twee keer nadenken, omdat zijn brein niet wordt gedwongen om deze specifieke elementen op de pagina opnieuw te verwerken.
Het behouden van een consistente uitlijning draagt bij aan visuele eenheid binnen een element. Het ontwerpen rond een gemeenschappelijke as zorgt ervoor dat elementen gerelateerd lijken. Een aantal paragrafen met dezelfde uitlijning zien eruit alsof ze deel uitmaken van een artikel, niet alleen verschillende stukjes tekst die samen worden gegooid en er uiteindelijk georganiseerd en netjes uitzien.
Meerdere uitlijningen vereisen alleen meer inspanning om een verbinding tot stand te brengen, en het is gewoon overdreven beter om geen tijd te spenderen om dat te doen.
Overweeg hoe een raster ook een rol kan spelen in uitlijning. Zo beperkend als een rooster voor een nieuwe ontwerper, biedt het een solide basis voor u om een breed scala aan elementen op één raster uit te lijnen. Overweeg de Squarespace-website hieronder:
Merk op hoe het eenvoudige raster met drie kolommen een pagina met veel informatie omtovert in een netjes ontworpen, goed uitgelijnde pagina die aanvoelt unified. Niet slecht toch?
Nabijheid is een ander concept dat bijdraagt aan de algehele eenheid van uw ontwerp. Naarmate je elementen dichterbij duwt, worden ze gemakkelijker als één geheel opgenomen. In een poging om een analogie te creëren, kon ik alleen aan het volgende denken, als je een stel schapen bij elkaar had in een veld, zouden ze een kudde kunnen worden genoemd. Als ze echter in verschillende velden zijn gestationeerd, kun je ze misschien niet meteen herkennen als onderdeel van dezelfde menigte (en ja, dat is een correcte verzamelterm voor schapen). Misschien is een meer passende analogie om naar twee mensen te kijken die de straat opgaan, samen lachen en praten. Vanwege hun nabijheid kunnen we raden dat ze een eerdere soort relatie hebben.
Aangezien we dit gaan toepassen op webdesign, is het niet te verschillend. Hoe dichter de elementen bij elkaar zijn, hoe sterker de relatie die de gebruiker herkent en hoe beter de eenheid die het creëert. Als we een moment teruggaan en beseffen dat alle eenheid echt de interactie tussen elementen betekent, kunnen we herkennen dat een sterkere relatie soepel correleert met het niveau van interactie, en in die mate, eenheid.
We hebben een geweldig artikel hier bij Tuts + over visuele richting en hoe het een ontwerp kan beïnvloeden. In een notendop, het is de theorie dat we een specifieke richting van een gebruiker via een webpagina kunnen beïnvloeden door onze inhoud aan dat doel aan te passen. Tot op zekere hoogte kunnen we visuele richting gebruiken in dit scenario om gebruikers te helpen op natuurlijke wijze naar een ander element over te stappen.
Ik duw het hier misschien een beetje, maar door dit soort manipulatie te introduceren, kunnen we de elementen van een pagina samenvoegen om sterkere banden te maken, zodat je naadloos tussen elke pagina glijdt, maar alle gebieden raakt die de ontwerper wil zien. Deze relatie kan in een context worden gebruikt om de aandacht van de gebruiker te vestigen op een ander verhaal op uw webpagina of om mogelijk door te gaan met het lezen van een pagina. Je zou het concept kunnen gebruiken om, onbewust, natuurlijk iemand aan te moedigen om te kijken en interactie te hebben met de tweetknop, of de "Voeg toe aan winkelwagen".
Consistentie in uw webdesign is een basisprincipe dat bijdraagt aan de eenheid. Een voetbalteam zou niet uit gaan en in shirts met een andere kleur per speler spelen. In plaats daarvan zijn ze verenigd als een team met één ontwerp dat hun merk vertegenwoordigt (of in dit geval een team).
Consistentie wordt bereikt door te proberen de stijl van vergelijkbare elementen hetzelfde te houden en heeft betrekking op thema's als kleur, aangezien dit juist de factoren zijn die zorgen voor een succesvolle consistentie. Om dit te bereiken, is er niet veel te doen anders dan vasthouden aan een schema in al uw elementen.
Eenheid maakt gewoon dat je je verbonden voelt en samen voelt door ze eruit te laten zien zoals ze zouden moeten zijn. Een website is een website, geen navigatiebalk en een zijbalk, en een logo en een stukje inhoud. Nee, het is één ding dat we bezoeken: een website.
Als we echter te veel kleuren en lettertypen hebben of als de items worden weggedrukt of de uitlijning verschilt binnen uw tekst, zijn de bindingen verbroken en voelt u zich niet meer verbonden. U kunt zich echter afvragen waarom mijn ontwerp moet worden verenigd? Simpel gezegd betekent dit dat de gebruiker elk element of elke pagina niet hoeft te verwerken telkens wanneer ze een nieuw element tegenkomen, omdat het herkenbaar is. Het verbetert ook de reis over een pagina, omdat het menu er niet uitziet alsof het zich in een ander gebied van de inhoud bevindt.
Accentsconagua