Principii di a Gerarchia Visiva per i Designers

I principii di a gerarchia visuale per i diseggiani sò un cuncettu di disignu chì hè utilizatu per guidà cumu l'ochji di u visore si movenu attraversu un disignu è determinanu quali elementi sò più impurtanti o visualmente attrattivi.

À u principiu c'eranu tavule di petra, rotuli di papiru è carta. Dopu venenu schermi di computer è tablette elettroniche. Quandu a tecnulugia di visualizazione di a pagina evoluzione, i diseggiani sò lasciati cun un modu chjaru per urganizà u cuntenutu. Ma quale hè megliu? In cortu , gerarchia visuale.

Eccu a definizione di a gerarchia visuale: A gerarchia visuale hè l'arrangementu elementi grafichi in u disignu in ordine di impurtanza di ogni elementu. U pesu visuale determina impurtanza di l'elementu in a ghjerarchia di u disignu, dicendu à u visore nantu à quale fucalizza è in quale ordine.

Risorse per i Designers. 50 gratis

Questu hè diventatu un prublema sempre più impurtante, postu chì i frameworks responsivi forzanu i diseggiani à pensà à parechje pagine diverse in una volta. Di fronte à un testu densu è brevi attenti, i diseggiani anu sviluppatu 6 principii per dirige l'ochju di u lettore à l'infurmazioni più impurtanti.

Questi 6 principii di gerarchia visuale vi aiuteranu à cuncepisce tuttu, da brochure à app, assicurendu chì l'utilizatore finale hà una sperienza di lettura positiva per i diseggiani.

Tutte e culture sò leghjite da u cima à u fondu, è a maiò parte di e culture sò leghjite da manca à diritta. Ma ancu chì sta cunniscenza hè impurtante per disignu di pagina, i diseggiani sapemu chì u compitu hè assai più difficiule.

Studi recenti anu dimustratu chì a ghjente scanne una pagina prima per vede s'ellu hè interessatu prima di leghje. I mudelli di scansione tendenu à piglià una di duie forme, "F" è "Z", è pudete prufittà di questu in u vostru disignu.

F-Patterns. Principi di gerarchia visuale

F-templates applicà à e pagine di testu tradiziunali cum'è articuli o post di blog. U lettore scansa u latu manca e pagine cerchendu e parolle chjave interessanti in intestazioni allineate à manca o frasi iniziali di u tema, poi si ferma è leghje (à a diritta) quandu ellu o ella scontra qualcosa interessante. U risultatu s'assumiglia à una F (o una E, o qualcosa cù strisce ancu più horizontale; ma u terminu "F" hè appiccicatu).

Cumu pudete aduprà questu? Allineate l'infurmazioni impurtanti à a manca è utilizate intestazioni brevi, grasse, bullets, è altri elementi simili chì attiranu l'attenzione per rompe i blocchi di paragrafi.

U mudellu Z. Principi di gerarchia visuale

Modelli Z applicà à altri tipi di pagine, cum'è publicità o siti web, induve l'infurmazione ùn hè micca necessariamente presentata in paragrafi di bloccu. U lettore scansa prima a cima di a pagina, induve l'infurmazioni impurtanti sò prubabilmente truvate, poi si move à l'angulu oppostu in diagonale è face u listessu in u fondu di a pagina.

I disinfettori web tipicamente cuncepiscenu e so pagine per currispondenu esplicitamente à stu cumpurtamentu, pusendu l'infurmazioni più impurtanti in i cantoni è orientendu altre informazioni impurtanti nantu à i bars superiori è inferiori è cunnette a diagonale.

In u sottu In u disignu di l'assemblea di cunferenza 2010, elementi impurtanti sò u logò (in cima à manca), un buttone "registrà avà" (in cima à destra), è una lista di parlanti (in fondu), chì sò strategicamente posti in boni lochi Z-pattern.

2. A dimensione importa. Principi di gerarchia visuale
_

Hè abbastanza simplice: a ghjente leghje prima cose grandi. Se i vostri ochji sò attirati à "a prestazione" prima di "split" in l'annunziu sottu per u Young Vic, duvete cuntattà immediatamente un psicologu perceptual: puderete prubabilmente guadagnà boni soldi per esse pruvatu cum'è una anomalia rara.

Ciò chì hè interessante hè chì sta tendenza hè veramente abbastanza forte per ricusà a regula di u top-down. In l'imaghjini di sopra, "hack" annulla u "tempu per agisce" perchè hè più grande è à manca (per quessa, a regula di manca à diritta aiuta).

Ma nantu à a pagina dopu di u Rapportu Annuale: Campagna di i Diritti Umani 2012 (sviluppatu in a quinta colonna media) leghjemu in grande font "A lotta per l'ugualità nantu à a Campagna Trail" davanti à u testu direttamente sopra "Election 2012". Principi di gerarchia visuale

"Elezzione 2012" hè l'ordine di u più altu livellu di l'infurmazioni: ci dice u tema generale à quale l'infurmazioni sottu si tratta. Ma u designer hà decisu chì u tìtulu di l'articulu era più interessante per i lettori, è dunque l'hà valutatu per esse lettu prima.

3. Spaziu è texture. Principi di gerarchia visuale

Un altru modu per piglià l'attenzione hè dà u cuntenutu abbastanza spaziu per respira . Se ci hè un spaziu negativu significativu intornu à u buttone o i linii in u bloccu di testu sò largamente seguiti, questi elementi seranu più facilmente visibili à i lettori.

Comu pudete vede in l'imaghjini sottu (parti di u situ di DrawtoClick), u spaziu pò esse una alternativa elegante o cumplementarii per utilizà a dimensione. Quì, u puntu di vendita, "Notre agence vouscompagne...", hè scrittu in stampa assai chjuca, ma hè circundatu da una bundanza di spazi bianchi, chì indicanu a so impurtanza. Sottu, i frasi "Le Compendre", "Le Réaliser" è "Le Partager" ricevenu un enfasi supplementu, essendu staccati da u spaziu circundante.

Quandu a ghjente parla di "texture" in relazione à a ghjerarchia visuale, ùn significheghja micca l'effetti grafichi di a texture. Piuttostu, stu tipu di "texture" si riferisce à l'arrangementu generale o struttura di u spaziu, u testu è altri dettagli in una pagina. Questu esempiu da Bright Pink illustra bè u cuncettu:

In a prima imagine, a parolla "Sport" hè più altu in a ghjerarchia chì "badminton" perchè hè più altu, più grande è più audace. In l'imaghjini 2, e duie parolle sò apprussimatamente equivalenti, grazia à u rettangulu neru chì face "badminton" spiccà è u mette in u so propiu spaziu.

In a terza maghjina, u scribble di fondo interrompe u spaziu "Sports" ma micca u spaziu "badminton", è per quessa risultatu in una inversione induve "badminton" hè u più altu in a ghjerarchia. Stu sviluppu hè difficiule di predichendu, cusì i diseggiani spessu l'associanu cù un sensu olisticu di "texture".

4. Pesu di font è accoppiamentu. Principi di gerarchia visuale

A selezzione di fonti hè critica per stabilisce a gerarchia visuale. Trà l'attributi più impurtanti di un font sò u pesu, a larghezza di i tratti chì custituiscenu e so lettere, è u stilu, cum'è serif è sans serif. Altre mudificazioni, cum'è i corsi, ponu ancu ghjucà un rolu.

Avvisu cumu casque influenza l'ordine di a gerarchia di a parolla in u web design sottu per The Tea Factory: "tè perfetti per aiutà à riscaldassi" hè u nome di u ghjocu, ma e differenze in u pesu di fonti è i corsi, in più di u piazzamentu di e parolle, creanu un più. dinamica, menu lineare, sperienza di lettura. "://azbyka.com.ua/foto/tea-factory.jpg" />

In certi casi, u scopu hè di prisentà una varietà di infurmazioni cum'è ugualmente urgente. Pone tutti à a listessa dimensione è u pesu assicurarà l'equivalenza, ma farà ancu vede monotonu. A differenziazione di fonti hè una manera di evità questu, cum'è a copertina di a rivista Trendi quì sottu. Principi di gerarchia visuale

Preparazione di una brochure per a stampa.

Quì, i cinque teasers intornu à a periferia di a pagina sò listessi in a ghjerarchia, ma ottene varietà cambiendu dui fonti ben accoppiati - unu un serif di pesu mediu è l'altru un sans-serif ligeru ma altu.

5. Culore è ombra. 

Eccu un altru no-brainer: i culori brillanti si distinguenu da i culori muti o sfumaturi di grisgiu, mentre chì i sfumaturi più chjaru pareanu più "distanti" è cusì falanu più bassu in a ghjerarchia cà i sfumaturi più ricchi è scuri. U situ web Induve si trovanu cuntrasta a luce luminosa è a retroilluminazione culurata cù un effettu di griglia bianca è negra à l'effettu di luminosità:

U situ web Guggenheim usa u culore per enfatizà l'infurmazioni impurtanti cum'è a selezzione di u locu, una lista di l'esibizioni attualmente viste, è i ligami à esibizioni speciali. Principi di gerarchia visuale

U megliu Font per Imballaggi Personalizzati

U situ web di u Whitney Museum, invece, stabilisce una gerarchia in un font, pesu è tonu (nìuru) cù tinta (chì significa aghjunghje biancu à u tonu di basa, facendu più liggeru). "Cory Archangel on Pop Culture" hè chjaramente sottu "New on Whitney Stories" in a ghjerarchia visuale, micca solu perchè hè più bassu, ma ancu perchè a so ombra hè più ligera, facendu menu visibile contru à u fondu biancu. Principi di gerarchia visuale

U culore hà un significatu particulari disignu mobile applicazioni induve a dimensione di u schermu chjuca limita a vostra capacità di utilizà altre strategie, cum'è a variazione di a dimensione è u spaziu largu. In l'app Grainger Industrial Supply, u buttone "Proceed to Checkout" hè di culore rossu, facendu chì si distingue in ogni pagina induve appare. U pannellu Narrow Search Results, per cuntrastu, hè grisgiu, facendu quasi equivalenti in a ghjerarchia à altri elementi cum'è a barra di ricerca è i ligami di i prudutti.

6. Direzzione per i diseggiani.

I layout di pagina sò generalmente pensati per seguità una griglia di linee verticali è horizontali, sia per cunvenzione sia perchè hè u formatu più leggibile. In un tali sistema, ci hè una nova manera di stabilisce a ghjerarchia: rompe a griglia.

U testu chì hè posizionatu longu una curva o diagonale si distingue automaticamente contr'à u testu circundante bluccatu da a griglia, pigliandu u centru. Questa hè stata longa una strategia efficace in a publicità, cum'è u cartellu di a fermata di l'autobus di Frost Design.