Share
Ontwerp zit vol met "onzichtbare krachten", die allemaal helpen bij een schone en duidelijke communicatie. Zoveel als je misschien in de verleiding komt om te obsederen over het krijgen van precies het juiste lettertype, of het kiezen van precies de juiste kleurencombinatie, zal je ontwerp jammerlijk falen als je geen aandacht schenkt aan deze onzichtbare krachten..
Dit is de eerste in een driedelige serie over deze krachten, dus laten we beginnen met uitlijning, richting en focus.
Om echt de onzichtbare krachten van het ontwerp te overdenken, moet je stoppen met je ontwerp als lettertypen, kleuren, afbeeldingen en tekst te beschouwen en al deze dingen als "elementen" gaan beschouwen.
Elk van uw koppen is een "element", elke alinea van de hoofdtekst is een groot "element", en elke afbeelding is een "element".
Binnen elk van deze elementen is een ander element - je kunt ze ook 'subelementen' noemen. Uw logo kan een "symbool" -element en een "tekst" -element bevatten. En elke letter in het tekstgedeelte kan als zijn eigen element worden beschouwd.
Al deze elemententaal doet me denken aan de chemieklasse (die ik nooit heb gehouden), maar dat is eigenlijk juist. Wanneer u elementen correct rangschikt, krijgt u iets explosief dat van de pagina springt. Als je ze lukraak ordent, krijg je een blindganger.
Design is een uitdaging omdat je een saaie tweedimensionale ruimte moet nemen en het interessant moet maken, terwijl je duidelijk communiceert. Vooral vandaag, met kleine mobiele en draagbare schermen, is het belangrijk om dit zo efficiënt mogelijk te doen. Elke kleine pixel moet zijn werk doen.
Daarom is afstemming zo belangrijk. Door elementen met elkaar uit te lijnen, kun je veel zeggen.
Deze vierkanten zijn bijvoorbeeld allemaal uitgelijnd.
En als we de manier wijzigen waarop ze zijn uitgelijnd, verandert dit de compositie volledig.
En als we die afstemming doorbreken, ziet het er chaotisch uit.
Als we in plaats van vierkantjes sociale media-pictogrammen gebruiken, kunt u direct zien hoe uitlijning nuttig wordt. Wat als deze social media-pictogrammen:
In plaats daarvan zag het er zo uit:
Wanneer u elementen uitlijnt, creëert u een richtinggevoel met een denkbeeldige lijn. Echt mooie ontwerpers noemen deze denkbeeldige lijn een "as". Zie het als een as op een wiel: al het gewicht van het wiel draait om die as. Het moet in balans zijn. Evenzo helpt een as om de balans van een compositie te beheersen.
Zie al deze elementen die in de rij staan? Je zou ze een as kunnen noemen op deze compositie.
Als u andere elementen in de buurt van die as uitlijnt, domineert deze nog steeds en bestuurt de compositie.
Je opa had gelijk: je moet voorzichtig zijn met je bijlen. Vermijd bijvoorbeeld om gecentreerde tekst te mengen met een "asymmetrische" compositie.
Hoe u uw tekst ook rangschikt: gecentreerd, gelijk links of gelijk naar rechts (vermijd uitvulling van het type op het web), u maakt een as langs die uitlijning.
Wanneer u tekst centreert, maakt u een as en draait het hele gewicht van de tekst rond die as. De rest van de compositie wil ook rond die as gecentreerd zijn.
Dus, als je wat gladde linker tekst naast die gecentreerde tekst gooit, begint de compositie verwarrend te worden. Nu heb je twee assen die met elkaar vechten, en dat is geen enge gedachte?
De uitzondering hierop is wanneer een in het midden uitgelijnd element de breedte van de compositie overspant en flush left of flush right-elementen binnen die compositie vallen. Dan vechten de bijlen niet met elkaar.
Merk op dat beide kolommen met inhoud gelijk links zijn geplaatst.
Dit is een patroon dat u vaak ziet bij mobiel ontwerpen. In dit screenshot van de Yelp-app hebben de bovenste en onderste menubalken een gecentreerde oriëntatie, terwijl de rest van het scherm gelijk links is ingesteld.
Of u kunt een as uit de goot maken door een kolom rechts te laten lopen en de andere kolom links uit te spoelen.
Tot nu toe heb ik me geconcentreerd op verticale assen. Je kunt ook horizontale assen hebben (of diagonaal, maar dat zal zeldzaam zijn in web en mobiel ontwerp).
Wanneer twee sterke assen elkaar kruisen, maak je meestal een focusgebied. Het oog volgt vanzelfsprekend elke sterke as, dus als twee assen elkaar kruisen, zal het oog veel tijd op die plek doorbrengen.
Op een bepaald moment in een web of mobiel ontwerp, is er waarschijnlijk iets waarop u wilt dat uw gebruiker zich concentreert, zodat u assen kunt gebruiken die elkaar kruisen om de aandacht op die plek te vestigen, zoals op deze landingspagina:
De tekst 'links' maakt één as en de uitlijning van de knop 'Nu kopen' met de afbeelding maakt een nieuwe. Waar ze elkaar kruisen, heeft het een focusgebied gecreëerd.
Door uitlijning te gebruiken om assen te bouwen, richting te sturen en focusgebieden in te stellen, kunt u beter voldoen aan uw ontwerpdoelen: of het de leesbaarheid verbetert of een conversie genereert.
Blijf bij mijn volgende artikel, waar ik het heb over hoe je de dimensionering van je elementen kunt aanpassen om ontwerpen te maken die harmonieus, mooi en duidelijk zijn.
Accentsconagua