Principes van visuele hiërarchie voor ontwerpers

Visuele hiërarchieprincipes voor ontwerpers zijn een ontwerpconcept dat wordt gebruikt om te bepalen hoe de ogen van de kijker door een ontwerp bewegen en om te bepalen welke elementen het belangrijkst of visueel aantrekkelijk zijn.

Aanvankelijk waren er stenen tafelen, papyrusrollen en papier. Toen kwamen computerschermen en elektronische tablets. Naarmate de technologie voor paginaweergave evolueert, beschikken ontwerpers over een duidelijke manier om inhoud te organiseren. Maar wat is beter? Kortom , visuele hiërarchie.

Hier is de definitie van visuele hiërarchie: Visuele hiërarchie is de rangschikking grafische elementen in ontwerp in volgorde van belangrijkheid van elk element. Visueel gewicht bepaalt element belang in de hiërarchie van het ontwerp, waarbij de kijker wordt verteld waar hij zich op moet concentreren en in welke volgorde.

Hulpbronnen voor ontwerpers. 50 gratis

Dit wordt een steeds belangrijker probleem omdat responsieve raamwerken ontwerpers dwingen om over veel verschillende pagina's tegelijk na te denken. Geconfronteerd met dichte tekst en een korte aandachtsspanne, ontwikkelden ontwerpers zes principes om de aandacht van de lezer op de belangrijkste informatie te richten.

Deze zes principes van visuele hiërarchie helpen je bij het ontwerpen van alles, van brochures tot apps, en zorgen ervoor dat de eindgebruiker een positieve leeservaring voor ontwerpers heeft.

Alle culturen worden van boven naar beneden gelezen, en de meeste culturen worden van links naar rechts gelezen. Maar hoewel deze kennis belangrijk is voor pagina ontwerpOntwerpers weten dat de taak veel moeilijker is.

Recente onderzoeken hebben aangetoond dat mensen eerst een pagina scannen om te zien of ze erin geïnteresseerd zijn voordat ze deze lezen. Scanpatronen hebben meestal twee vormen, "F" en "Z", en u kunt hiervan profiteren in uw ontwerp.

F-patronen. Principes van visuele hiërarchie

F-sjablonen van toepassing op traditionele tekstpagina's zoals artikelen of blogposts. De lezer scant de linkerkant pagina zoekt naar interessante trefwoorden in links uitgelijnde koppen of beginzinnen, stopt dan en leest (naar rechts) wanneer hij of zij iets interessants tegenkomt. Het resultaat ziet eruit als een F (of een E, of iets met nog meer horizontale strepen; maar de term "F" bleef hangen).

Hoe kun je dit gebruiken? Lijn belangrijke informatie links uit en gebruik korte, vetgedrukte koppen, opsommingstekens en andere soortgelijke opvallende elementen om alineablokken op te splitsen.

Z-model. Principes van visuele hiërarchie

Z-patronen zijn van toepassing op andere soorten pagina's, zoals advertenties of websites, waar informatie niet noodzakelijkerwijs in blokparagrafen wordt gepresenteerd. De lezer scant eerst de bovenkant van de pagina, waar waarschijnlijk belangrijke informatie te vinden is, gaat vervolgens diagonaal naar de tegenoverliggende hoek en doet hetzelfde onderaan de pagina.

Webontwerpers ontwerpen hun pagina's doorgaans zo dat ze expliciet bij dit gedrag passen, waarbij ze de belangrijkste informatie in de hoeken plaatsen en andere belangrijke informatie langs de bovenste en onderste balk oriënteren en de diagonaal met elkaar verbinden.

In het onderstaande Belangrijke elementen in het ontwerp van de conferentievergadering van 2010 zijn het logo (linksboven), een knop "nu registreren" (rechtsboven) en een lijst met sprekers (onder), die strategisch op mooie Z-patroonplekken zijn geplaatst.

2. Grootte is belangrijk. Principes van visuele hiërarchie
_

Het is heel simpel: mensen lezen eerst grote dingen. Als uw ogen worden getrokken door 'de voorstelling' voordat u zich 'opsplitst' in de onderstaande advertentie voor de Young Vic, moet u onmiddellijk contact opnemen met een perceptueel psycholoog: u kunt waarschijnlijk goed geld verdienen door te worden getest als een zeldzame afwijking.

Wat interessant is, is dat deze tendens feitelijk sterk genoeg is om de top-downregel te verwerpen. In de bovenstaande afbeelding heeft 'hack' voorrang boven 'tijd om te handelen' omdat deze groter is en naar links (dus de regel van links naar rechts helpt).

Maar op de volgende pagina van het Jaarverslag: Mensenrechtencampagne 2012 (ontwikkeld in de vijfde mediakolom) lezen we in grote lijnen lettertype ‘De strijd voor gelijkheid op het campagnepad’ vóór de tekst er direct boven ‘Verkiezingen 2012’. Principes van visuele hiërarchie

"Verkiezingen 2012" is de informatievolgorde op het hoogste niveau: het vertelt ons het algemene thema waarop de onderstaande informatie betrekking heeft. Maar de ontwerper besloot dat de titel van het artikel interessanter was voor de lezers en beoordeelde het daarom zo dat het als eerste zou worden gelezen.

3. Ruimte en textuur. Principes van visuele hiërarchie

Een andere manier om aandacht te trekken is geef de inhoud voldoende ruimte om te ademen . Als er veel negatieve ruimte rond de knop is of als de regels in het tekstblok breed worden gevolgd, zullen deze elementen gemakkelijker zichtbaar zijn voor lezers.

Zoals je kunt zien in de onderstaande afbeelding (onderdeel van de DrawtoClick-site), kan de spatiëring een elegant alternatief of aanvulling zijn op het gebruik van de grootte. Hier is het verkoopargument, “Notre agence vouscompagne...”, in zeer kleine letters geschreven, maar omgeven door een overvloed aan witruimte, wat het belang ervan aangeeft. Hieronder krijgen de zinsneden “Le Compendre”, “Le Réaliser” en “Le Partager” extra nadruk, los van de omringende ruimte.

Wanneer mensen praten over ‘textuur’ in relatie tot visuele hiërarchie, bedoelen ze niet de grafische effecten van textuur. In plaats daarvan verwijst dit type 'textuur' naar de algehele rangschikking of structuur van ruimte, tekst en andere details op een pagina. Dit voorbeeld van Bright Pink illustreert het concept goed:

In de eerste afbeelding staat het woord 'Sport' hoger in de hiërarchie dan 'badminton' omdat het groter, groter en brutaler is. In afbeelding 2 zijn de twee woorden ongeveer gelijkwaardig, dankzij de zwarte rechthoek die ‘badminton’ doet opvallen en het in zijn eigen ruimte plaatst.

In de derde afbeelding onderbreekt het achtergrondkrabbel de ruimte 'Sport', maar niet de ruimte 'badminton', en resulteert daarom in een omkering waarbij 'badminton' de hoogste in de hiërarchie is. Deze ontwikkeling is moeilijk te voorspellen, daarom associëren ontwerpers het vaak met een holistisch gevoel van 'textuur'.

4. Lettertypegewicht en koppeling. Principes van visuele hiërarchie

Lettertypeselectie is van cruciaal belang voor het vaststellen van een visuele hiërarchie. Tot de belangrijkste kenmerken van een lettertype behoren het gewicht, de breedte van de lijnen waaruit de letters bestaan, en de stijl, zoals schreefloos en schreefloos. Andere wijzigingen, zoals cursief, kunnen ook een rol spelen.

Merk op hoe koptelefoon beïnvloedt de volgorde van de woordhiërarchie in het onderstaande webontwerp voor The Tea Factory: "perfecte thee om je te helpen opwarmen" is de naam van het spel, maar verschillen in lettertypegewicht en cursief, naast woordplaatsing, zorgen voor een meer dynamische, minder lineaire leeservaring. "://azbyka.com.ua/foto/tea-factory.jpg" />

In sommige gevallen is het doel om een ​​verscheidenheid aan informatie als even urgent voor te stellen. Door iedereen dezelfde maat en hetzelfde gewicht te geven, zorg je voor gelijkwaardigheid, maar oogt het ook eentonig. Differentiatie in lettertypen is een manier om dit te voorkomen, zoals op de cover van het tijdschrift Trendi hieronder. Principes van visuele hiërarchie

Een brochure voorbereiden voor druk.

Hier zijn de vijf teasers aan de rand van de pagina hetzelfde in hiërarchie, maar bereiken ze variatie door twee goed gepaarde lettertypen te veranderen: de ene is een middelzware schreef en de andere is licht maar hoog schreefloos.

5. Kleur en schaduw. 

Hier is nog een goed idee: felle kleuren onderscheiden zich van gedempte kleuren of grijstinten, terwijl lichtere tinten ‘ver weg’ lijken en dus lager in de hiërarchie vallen dan rijkere, donkerdere tinten. De Where Are They-website contrasteert fel licht en gekleurde achtergrondverlichting met een zwart-wit rastereffect met het effect van helderheid:

De Guggenheim-website gebruikt kleur om belangrijke informatie te benadrukken, zoals locatieselectie, een lijst met tentoonstellingen die momenteel worden bekeken en links naar speciale tentoonstellingen. Principes van visuele hiërarchie

Beste lettertype voor aangepaste verpakking

De website van het Whitney Museum daarentegen stelt een hiërarchie vast binnen één lettertype, gewicht en toon (zwart) met behulp van tint (wat betekent dat wit aan de basistoon wordt toegevoegd, waardoor deze lichter wordt). ‘Cory Archangel on Pop Culture’ staat duidelijk onder ‘New on Whitney Stories’ in de visuele hiërarchie, niet alleen omdat het lager is, maar ook omdat de tint lichter is, waardoor het minder opvalt tegen de witte achtergrond. Principes van visuele hiërarchie

Kleur heeft een speciale betekenis mobiel ontwerp toepassingen waarbij een klein schermformaat uw mogelijkheden beperkt om andere strategieën te gebruiken, zoals groottevariatie en grote spatiëring. In de Grainger Industrial Supply-app is de knop 'Doorgaan naar afrekenen' rood gekleurd, waardoor deze opvalt op elke pagina waar deze verschijnt. Het venster Smalle zoekresultaten is daarentegen grijs, waardoor het in de hiërarchie ongeveer gelijk is aan andere elementen, zoals de zoekbalk en productlinks.

6. Richting voor ontwerpers.

Pagina-indelingen zijn doorgaans ontworpen om een ​​raster van verticale en horizontale lijnen te volgen, zowel volgens afspraak als omdat dit het best leesbare formaat is. In zo’n systeem is er een nieuwe manier om hiërarchie tot stand te brengen: het doorbreken van het raster.

Tekst die langs een curve of diagonaal is geplaatst, steekt automatisch af tegen de omringende, in het raster geblokkeerde tekst en komt centraal te staan. Dit is lange tijd een effectieve strategie geweest in advertenties, zoals de bushalteposter van Frost Design.