Principis de jerarquia visual per a dissenyadors

Els principis de jerarquia visual per als dissenyadors són un concepte de disseny que s'utilitza per guiar com es mouen els ulls de l'espectador a través d'un disseny i determinar quins són els elements més importants o visualment atractius.

Al principi hi havia tauletes de pedra, rotlles de papir i paper. Després van venir les pantalles d'ordinador i tauletes electròniques. A mesura que la tecnologia de visualització de pàgines evoluciona, els dissenyadors es queden amb una manera clara d'organitzar el contingut. Però quina és millor? En resum , jerarquia visual.

Aquí teniu la definició de jerarquia visual: La jerarquia visual és la disposició elements gràfics en el disseny per ordre d'importància de cada element. El pes visual determina importància de l'element en la jerarquia del disseny, dient a l'espectador en què s'ha de centrar i en quin ordre.

Recursos per a dissenyadors. 50 gratuïts

Aquest s'està convertint en un problema cada cop més important, ja que els marcs responsius obliguen els dissenyadors a pensar en moltes pàgines diferents alhora. Davant d'un text dens i curts intervals d'atenció, els dissenyadors van desenvolupar 6 principis per dirigir l'ull del lector a la informació més important.

Aquests 6 principis de jerarquia visual us ajudaran a dissenyar tot, des de fullets fins a aplicacions, assegurant que l'usuari final tingui una experiència de lectura positiva per als dissenyadors.

Totes les cultures es llegeixen de dalt a baix i la majoria de les cultures es llegeixen d'esquerra a dreta. Però encara que aquest coneixement és important per disseny de la pàgina, els dissenyadors saben que la tasca és molt més difícil.

Estudis recents han demostrat que la gent escaneja una pàgina primer per veure si hi està interessat abans de llegir-la. Els patrons d'escaneig solen prendre una de les dues formes, "F" i "Z", i podeu aprofitar-ho en el vostre disseny.

Patrons F. Principis de la jerarquia visual

Plantilles F s'apliquen a pàgines de text tradicionals, com ara articles o publicacions de bloc. El lector escaneja el costat esquerre pàgines busca paraules clau interessants en encapçalaments alineats a l'esquerra o frases de tema inicials, després s'atura i llegeix (a la dreta) quan es troba amb alguna cosa interessant. El resultat sembla una F (o una E, o alguna cosa amb ratlles encara més horitzontals; però el terme "F" s'ha enganxat).

Com pots utilitzar això? Alineeu la informació important a l'esquerra i utilitzeu encapçalaments curts i en negreta, vinyetes i altres elements similars que critin l'atenció per dividir els blocs de paràgrafs.

Model Z. Principis de la jerarquia visual

Patrons en Z s'aplica a altres tipus de pàgines, com ara anuncis o llocs web, on la informació no es presenta necessàriament en paràgrafs de bloc. El lector primer escaneja la part superior de la pàgina, on és probable que es trobi informació important, després es mou a la cantonada oposada en diagonal i fa el mateix a la part inferior de la pàgina.

Els dissenyadors web solen dissenyar les seves pàgines perquè coincideixin explícitament amb aquest comportament, col·locant la informació més important a les cantonades i orientant altra informació important al llarg de les barres superior i inferior i connectant la diagonal.

A continuació En el disseny de l'assemblea de la conferència 2010, elements importants són el logotip (a dalt a l'esquerra), un botó "Registrar-se ara" (a dalt a la dreta) i una llista d'altaveus (a baix), que estan col·locats estratègicament en llocs agradables del patró Z.

2. La mida importa. Principis de la jerarquia visual
_

És bastant senzill: la gent llegeix primer les coses grans. Si els teus ulls se senten atrets per "l'actuació" abans de "separar" a l'anunci següent del Young Vic, hauries de contactar immediatament amb un psicòleg perceptiu: probablement podries guanyar molts diners fent-te la prova com una anomalia rara.

El que és interessant és que aquesta tendència és prou forta com per rebutjar la regla de dalt a baix. A la imatge de dalt, "hack" anul·la el "temps d'actuar" perquè és més gran i a l'esquerra (per tant, la regla d'esquerra a dreta ajuda).

Però a la pàgina següent de l'Informe anual: Campanya pels drets humans 2012 (desenvolupat a la cinquena columna dels mitjans) llegim en gran Font "La lluita per la igualtat en el camí de la campanya" abans del text just a sobre "Eleccions 2012". Principis de la jerarquia visual

"Eleccions 2012" és l'ordre d'informació de més alt nivell: ens indica el tema general al qual es refereix la informació següent. Però el dissenyador va decidir que el títol de l'article era més interessant per als lectors i, per tant, el va valorar perquè es llegís primer.

3. Espai i textura. Principis de la jerarquia visual

Una altra manera de cridar l'atenció és donar espai suficient al contingut per respirar . Si hi ha un espai negatiu significatiu al voltant del botó o les línies del bloc de text es segueixen àmpliament, aquests elements seran més fàcilment visibles per als lectors.

Com podeu veure a la imatge següent (part del lloc de DrawtoClick), l'espaiat pot ser una alternativa elegant o un complement per utilitzar la mida. Aquí, l'argument de venda, “Notre agence vouscompagne...”, està escrit en lletra molt petita, però està envoltat d'abundància d'espais en blanc, que indica la seva importància. A continuació, les frases "Le Compendre", "Le Réaliser" i "Le Partager" reben un èmfasi addicional, desvinculades de l'espai circumdant.

Quan la gent parla de "textura" en relació a la jerarquia visual, no es refereix als efectes gràfics de la textura. Més aviat, aquest tipus de "textura" es refereix a la disposició o estructura general de l'espai, el text i altres detalls d'una pàgina. Aquest exemple de Bright Pink il·lustra bé el concepte:

A la primera imatge, la paraula "Esport" és més alta a la jerarquia que "bàdminton" perquè és més alta, més gran i més atrevida. A la imatge 2, les dues paraules són aproximadament equivalents, gràcies al rectangle negre que fa ressaltar el “bàdminton” i el posa al seu espai.

A la tercera imatge, el gargot de fons interromp l'espai "Esports", però no l'espai "bàdminton" i, per tant, provoca una inversió on "bàdminton" és el més alt de la jerarquia. Aquest desenvolupament és difícil de predir, de manera que els dissenyadors sovint l'associen amb un sentit holístic de "textura".

4. Pes de lletra i aparellament. Principis de la jerarquia visual

La selecció de tipus de lletra és fonamental per establir una jerarquia visual. Entre els atributs més importants d'una font es troben el pes, l'amplada dels traços que formen les seves lletres i l'estil, com ara serif i sans serif. Altres modificacions, com ara la cursiva, també poden tenir un paper.

Fixeu-vos com auriculars influeix en l'ordre de la jerarquia de paraules al disseny web següent de The Tea Factory: "te perfecte per ajudar-vos a escalfar" és el nom del joc, però les diferències en el pes de la lletra i la cursiva, a més de la ubicació de les paraules, creen experiència de lectura dinàmica, menys lineal. "://azbyka.com.ua/foto/tea-factory.jpg" />

En alguns casos, l'objectiu és presentar una varietat d'informació com a igualment urgent. Establir tots a la mateixa mida i pes garantirà l'equivalència, però també farà que sembli monòton. La diferenciació de tipus de lletra és una manera d'evitar-ho, com la portada de la revista Trendi a continuació. Principis de la jerarquia visual

Elaboració d'un fulletó per a la impressió.

Aquí, els cinc teasers a la perifèria de la pàgina són els mateixos en jerarquia, però aconsegueixen varietat canviant dos tipus de lletra ben emparellats: un un serif de pes mitjà i l'altre un sans-serif lleuger però alt.

5. Color i ombra. 

Aquí hi ha una altra obvietat: els colors brillants destaquen dels colors apagats o dels tons de gris, mentre que els tons més clars semblen més "allunyats" i, per tant, cauen més avall en la jerarquia que els tons més rics i foscos. El lloc web Where Are They contrasta la llum brillant i la retroil·luminació de colors amb un efecte de quadrícula en blanc i negre amb l'efecte de lluminositat:

El lloc web del Guggenheim utilitza el color per emfatitzar la informació important, com ara la selecció d'ubicacions, una llista d'exposicions que s'estan visualitzant actualment i enllaços a exposicions especials. Principis de la jerarquia visual

Millor font per a embalatges personalitzats

El lloc web del Whitney Museum, d'altra banda, estableix una jerarquia dins d'un tipus de lletra, pes i to (negre) amb tint (el que significa afegir blanc al to base, fent-lo més clar). "Cory Archangel on Pop Culture" està clarament per sota de "New on Whitney Stories" a la jerarquia visual, no només perquè és més baix, sinó també perquè la seva ombra és més clara, la qual cosa la fa menys visible sobre el fons blanc. Principis de la jerarquia visual

El color té un significat especial disseny mòbil aplicacions on la mida de pantalla petita limita la vostra capacitat d'utilitzar altres estratègies, com ara la variació de mida i l'espai ampli. A l'aplicació Grainger Industrial Supply, el botó "Procedir a la compra" està de color vermell, cosa que el fa destacar a qualsevol pàgina on aparegui. El tauler de resultats de cerca restringits, en canvi, és gris, cosa que el fa aproximadament equivalent a la jerarquia a altres elements com ara la barra de cerca i els enllaços de productes.

6. Direcció per a dissenyadors.

Els dissenys de pàgina solen estar dissenyats per seguir una graella de línies verticals i horitzontals, tant per convenció com perquè és el format més llegible. En aquest sistema, hi ha una nova manera d'establir la jerarquia: trencar la graella.

El text que es col·loca al llarg d'una corba o diagonal es destaca automàticament contra el text que l'envolta, bloquejat per la quadrícula, prenent el protagonisme. Aquesta ha estat durant molt de temps una estratègia eficaç en publicitat, com ara el cartell de la parada d'autobús de Frost Design.