Design101: gebruik van sterke uitlijningen
Vandaag gaan we een van de meest basale principes in ontwerp onderzoeken: uitlijning. Dit bedrieglijk eenvoudige onderwerp is eigenlijk vrij complex en behoort tot de meest opvallende tekortkomingen van ontwerpers van vandaag.
Een goed begrip van hoe en wanneer u bepaalde afstemmingen moet gebruiken, zal u onmiddellijk een betere ontwerper maken en een fundamentele bouwsteen blijven voor alles wat u gedurende de rest van uw carrière creëert.
Verken Envato Elements
Inleiding tot uitlijning
Voor velen klinkt een discussie over afstemming misschien als een willekeurige oefening. Een dergelijke basisontwerptheorie is zeker alleen voor individuen die nog nooit iets in hun leven hebben ontworpen, niet voor de professionele gemeenschap die dergelijke sites bezoekt. Rechtsaf?
Ik zou zelf het argument willen aanvoeren dat een dergelijke discussie voor beginners is door te stellen dat een goed begrip van visuele uitlijning een onverslaanbare basis is voor alle soorten ontwerpen. Het is het soort kennis dat u, eenmaal begrepen, zult gebruiken op elke afzonderlijke lay-out die u als ontwerper maakt.
Ondanks het idee dat deze concepten de kern vormen van wat wij als ontwerpers doen, lijkt uitlijning een primaire bron te zijn van de meeste slechte ontwerpen die ik tegenwoordig op internet zie.
Zelfopgeleide ontwerpers hebben vaak een intuïtief begrip van het gebruik van uitlijningen, maar dit kan en zal mislukken zonder expliciete kennis om dit te ondersteunen.
Dingen op een rijtje zetten
Het essentiële idee van uitlijning is geestdodend eenvoudig: dingen op een rij zetten. Buiten organisch ontwerp, wat een heel ander onderwerp is, moet elk element dat u op een pagina plaatst, vergezeld gaan van een logisch denkproces over de positionering ervan.
Nogmaals, dit zijn basisdingen toch? Iedereen doet dit al ... toch? Fout. Beschouw de volgende site die onlangs is ingediend bij onze CSS-galerij. Ik gebruik dit niet als een gemeen voorbeeld, maar als een leerinstrument. De ontwerper is een geweldige kerel die net begint. Hij verbetert zijn vaardigheden dagelijks en is leergierig.
Dit voorbeeld is buitengewoon typisch en is precies het soort dingen dat we elke dag zien in onze inzendingen voor galerijen. De esthetische waarde is hier niet slecht. De felle kleuren en interessante texturen trekken je aandacht vrij goed. De uitlijning hier miste echter echt het doel.
De problemen hier kunnen voor veel mensen moeilijk te herkennen zijn. Om deze reden raad ik altijd aan om een ontwerp te vereenvoudigen om de basisvormen te onderzoeken. Je zult me dit zien doen in verschillende artikelen die ik over ontwerp schrijf en je moet het zeker uitproberen op een paar van je eigen ontwerpen.
Nu we de grafische objecten in een vereenvoudigde staat zien, kunnen we het volume van de ruimte die ze innemen beter analyseren en eventuele uitlijningsproblemen aanpakken.
Merk op dat de elementen op de pagina plotseling verspreid lijken. Het belangrijkste inhoudsgebied onderaan komt niet overeen met de hangende banner linksboven of de verspreide elementen rechtsboven. Verder lijkt het Facebook-logo klein en is het vanzelf gestrand en is de kop verspringend weg van de rand van de navigatie, die versprongen is weg van de inhoudsrand.
Hoewel dit ontwerp behoorlijk goed aanvoelde toen we het net voelden, zien we nu dat het veel herstructurering kan gebruiken. Vanaf hier zijn er twee belangrijke dingen die u moet aanpakken: uitlijning en negatieve ruimte.
Deze concepten zijn zeer nauw met elkaar verbonden. Werken met de negatieve ruimte heeft veel te maken met het focussen op de gaten en het toepassen van basissymmetrie. Voor meer informatie over de juiste handelwijze met betrekking tot de negatieve ruimte, lees mijn Gids voor negatieve ruimte bij Six Revisions.
In dit artikel gaan we verder door ons meer te concentreren op het gebruik van de basisuitlijningen die u kent in complexe lay-outs.
Centreer uitlijning
Gecentreerde lay-outs zijn de voorkeursmethode voor zowat elke persoon op aarde ... behalve ontwerpers. Om de een of andere reden lijkt het centreren van items op de pagina gewoon wat je zou moeten doen. De belangrijkste taak van een ontwerper is toch zeker om items eenvoudig te centreren!
Ik kwam dit probleem een paar jaar geleden tegen toen ik een ontwerp dat ik had gemaakt aan een ontwikkelaar overhandigde om te coderen. Toen hij me de voltooide versie liet zien, was alles verplaatst van links uitgelijnd naar midden uitgelijnd! Hij legde eenvoudig uit dat hij altijd de voorkeur had gegeven aan alles in het midden uitlijnen "zodat het er goed uitziet".
De realiteit is dat het centreren van elk item de zwakste uitlijningskeuze is die u kunt maken.
Er zijn geen harde randen om te volgen, dus uw ogen moeten veel meer werk doen om zowel de algehele lay-out in zich op te nemen als de specifieke inhoud te absorberen.
Wanneer te gebruiken
Dit wil helemaal niet zeggen dat centrumuitlijningen altijd moeten worden vermeden. Ik heb ze zelf op demo's gebruikt voor deze site. De sleutel is om te weten wanneer je ze moet gebruiken.
Ik vind dat het best mogelijke scenario voor een centrale uitlijning is wanneer er heel weinig op een pagina staat. Hoe ingewikkelder de lay-out, hoe minder uitlijningen in het midden werken. Als er op een bepaalde pagina niet veel aan de hand is, kunnen middenuitlijningen een krachtig statement maken.
Uitlijning links
Links uitgelijnd, hoewel aantoonbaar saai, zijn rotsvast en zouden uw standaard uitlijning moeten zijn voor veel van het werk dat u doet.
We zijn gewend dat inhoud links uitgelijnd wordt weergegeven. Open een boek of krant en je zult veel links uitlijnen. Blader door de advertenties in uw ongewenste e-mail, nogmaals, veel links uitlijningen. Je ziet ze op Facebook, Google-zoekresultaten, Twitter-streams en elke andere grote website.
Linkse uitlijningen regeren de wereld, of in ieder geval die samenlevingen die van links naar rechts lezen. U moet niet voor alles volledig afhankelijk zijn van een uitlijning aan de linkerkant, weet alleen dat dit de veilige route is.
Wanneer te gebruiken
Gebruik in allerlei situaties, maar vooral als er veel tekst is. Kijk maar eens op de pagina die je nu leest. Als dit in het midden was uitgelijnd, zou het een nachtmerrie zijn.
Houd er rekening mee dat, vooral op internet, iets links uitlijnen niet betekent dat u het niet kunt centreren. Een HTML-div bevat bijvoorbeeld vaak een heleboel links uitgelijnde alinea's en afbeeldingen, maar wordt vervolgens met CSS gecentreerd op de pagina.
Juiste uitlijning
Juiste uitlijningen zijn waarschijnlijk de zeldzaamste. Omdat we van links naar rechts lezen, voelt het gewoon raar dat iets zich aan de rechterkant vastklampt.
Het is echter een perfect sterke uitlijning die grondig kan worden gebruikt in uw ontwerpen, vooral in print (het is vaak nog onverwachts online).
Wanneer te gebruiken
Vaak, maar niet altijd, zal een juiste afstemming een gevoel van uniciteit uitstralen. Als je iets ontwerpt dat moet opvallen en anders moet aanvoelen, is een goede uitlijning een goed begin.
Uitlijningen op het web rechtvaardigen
De uitlijning die we hebben weggelaten is duidelijk gerechtvaardigd. Dit komt sterk van pas wanneer u een hele site als conceptueel element aan elkaar koppelt.
Het interessante van ontwerpen voor het web is dat het vaak een combinatie van uitlijningen inhoudt. Je hebt vast wel eens gehoord dat ontwerpers suggereren om nooit uitlijningen te combineren, maar dit advies werkt gewoon niet in de echte wereld.
In plaats daarvan moet u beslissingen nemen voor zowel de elementen binnen een pagina als voor de pagina-elementen als geheel. Merk op hoe ik deze discussie begon door te kijken naar een voorbeeld van het bekijken van de uitlijning van een site als geheel, maar ging vervolgens verder met het bespreken van individuele itemuitlijningen.
Als u eenmaal een uitlijning voor de tekst en afbeeldingen op uw pagina hebt gekozen, betekent het samenvoegen vaak dat u alles op de pagina in een gerechtvaardigde uitlijning gooit. Hoewel u een rafelige rand kunt hebben, kan het rechtvaardigen van alles die finishing touch toevoegen die in het oorspronkelijke voorbeeld ontbrak.
Merk op dat er op de site hierboven een sterke linkse uitlijning is, maar alles aan de rechterkant is ook uitgelijnd om een samenhangende, gerechtvaardigde look te creëren. De kleine inlogknop komt overeen met de browserafbeeldingen, die in lijn staan met de rechterkant van het kalenderpictogram.
Dit is een schoon, professioneel ontwerp. Het is misschien niet geschikt voor alle projecten, maar ik zie vaak dat ontwerpers het proberen te bereiken en falen en ik wilde enkele van de waarschijnlijke oorzaken aanpakken.
Dit is een van de redenen waarom rastersystemen zo populair zijn. Door alles op een raster te gooien, zorgt u ervoor dat uw uitlijningen stevig en gemakkelijk te volgen zijn.
Gevolgtrekking
Samenvattend, gebruik indien mogelijk sterke uitlijningen die het voor uw oog gemakkelijk maken om de informatiestroom te volgen. Middenuitlijningen zijn acceptabel, maar worden moeilijker om correct te implementeren naarmate de inhoud op een pagina toeneemt.
Onthoud dat uitlijning verwijst naar specifieke items op een pagina en naar de rangschikking van de objecten als geheel. Besteed tijd aan elk ontwerp en zorg ervoor dat al uw elementen goed aansluiten bij alles op de pagina. Dit geldt verticaal en horizontaal langs alle randen van het ontwerp.
