Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Com incorporar jerarquia visual en el disseny

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Building Content Hierarchy Through Design
All About Trends in Web Design

Catalan (Català) translation by Mireia Porta Arnau (you can also view the original English article)

Cal recordar que la jerarquia no només té a veure amb el contingut i el text que hi ha en una pàgina. Les imatges que s'inclouen en el disseny, ja siguin fotos, icones, botons o qualsevol altre element visual llevat del text, tenen un gran impacte en la jerarquia i la percepció d'un lloc web.

Quan s'està dissenyant una web, les imatges que s'utilitzen contribuiran en gran mesura a definir el to del lloc, juntament amb el color, la tipografia i altres elements. Si els elements visuals no s'avenen amb un disseny, solen esguerrar la impressió que volem crear.

Neonmob is all about the visuals on their website - and rightly so as it has everything to do with their product Neonmob display their images in a great way though almost semi-realistically as if youre holding the card decks themselves
Neonmob:  tots els grafics de la web s'adiuen amb el seu producte. Neonmob mostra les imatges amb molta gràcia i realisme, gairebé com si estiguéssiu sostenint un joc de cartes. Això és una encertada, ja que ajuda a explicar més coses d'una història.

Per crear una bona jerarquia visual, cal entendre com treure partit dels elements visuals de manera a millorar l'experiència dels usuaris al lloc web, sense que els continguts deixin de fluir.

Les imatges també narren històries que poden ajudar-nos encara més a explicar als nostres usuaris on anar, què fer i què esperar d'una web. La nostra història, els usuaris la visualitzaran molt millor amb imatges que amb contingut.

Amb elements visuals com imatges i icones, aconseguim atraure l'atenció dels usuaris d'una manera visual més emocionant i creativa, i ens permet posar de relleu les àrees clau d'un disseny que volem destacar.


Jerarquia visual a través de les imatges

Heus aquí uns quants consells per aconseguir una jerarquia visual potent.

El to que hi volem donar

Les imatges que incorpores al disseny retraten el to del lloc web. Si l'estil que vols mostrar és professional, relaxat, informal, pràctic o el que sigui, has d'assegurar-te que les imatges ho reflecteixen.

És més important que les imatges serveixin per millorar la web que per donar indicacions a l'usuari sobre el que ha de fer. Un lloc web sense imatges hauria de transmetre la mateixa història com si en tingués, ja que l'objectiu de les imatges és de potenciar aquesta història i millorar-la. Ara bé, les imatges no són producte d'un rampell; han de presentar-se amb la mateixa la cura i atenció que es prodiga a d'altres parts del disseny de manera que s'avinguin al màxim amb el contingut.

Hopskoch need to tell their users about their product - and to do that they show it in action This type of strong single visual works well as it helps immediately attract users attention
Hopskoch vol parlar als usuaris del seu producte i la manera de fer-ho és mostrant-lo en acció. Aquesta mena de representació visual forta i única funciona d'allò més bé, i crida de seguida l'atenció.

Les imatges no han de substituir mai el text

No s'ha d'assumir mai que les imatges són fàcils d'entendre. Sempre recomano que vagin amb llegendes o subtítols perquè els usuaris comprenguin la història i connectin imatge amb text. Així el contingut segueix accessible en cas que estiguin desactivades les imatges.

Fotos d'estoc o personalitzades?

Tot depèn de l'estil de la web i la quantitat de disseny que s'hi vol posar, però la tria entre fotografia d'estoc o personalitzada ens correspon a nosaltres.

Al meu parer, la fotografia d'estoc dóna un aire genèric, sobretot si busques un estil tipus oficina. Val a dir que la fotografia personalitzada també pot fer el mateix efecte, sobretot si és deliberadament hortera.

La fotografia personalitzada, però, especialment quan es contracta un professional, realça el disseny, ja que sovint li dóna una força visual que l'enlaira i hi afegeix contrast.

Hi ha també casos en què ens cal la fotografia d'estoc com amb les webs de comerç electrònic; llavors, és important recordar que la fotografia ha d'adir-se amb el to, l'estil i l'aparença del disseny. Si no, ens arrisquem a crear una web amb un disseny preciós i unes fotografies impressionants, però que junts formen un poti-poti de mira'm i no em toquis.

Hopskoch also use custom icons to display their product and how it works - if these had been done in a stockdefault style the brand message and look wouldnt have been half as strong
Hopskoch també mostra el seu producte i com funciona amb icones personalitzades. Si aquestes haguessin estat d'estoc/per defecte, el missatge corporatiu i l'aparença haurien perdut la meitat de força.

Alerta amb les dimensions i el contrast

Un petit detall que cal considerar és la mida de les imatges que fem servir. Hem de mirar de triar imatges que s'escaiguin amb el ritme vertical que haguem creat prèviament. Així el contingut anirà fluint i no donarà la impressió que s'hi navega aquí caic, aquí m'aixeco .

També s'ha de tenir en compte que la mida real de les imatges i elements visuals que fem servir afectarà la manera de llegir el contingut. Si creem un contrast massa dràstic entre la mida de les imatges i el text, aquest es tornarà il·legible i deixarà totalment de fluir. Per descomptat, es pot trencar aquesta norma sense manies i fer servir imatges més grans, quan són útils per al disseny perquè afegeixen interès visual a la pàgina.

Fitbit is all about the product - and they use size and contrast to help display their products in action whilst also displaying the other products that they also have
Pels de Fitbit, el producte és l'amo – i llueixen els seus productes en acció mitjançant mida i contrast, tot mostrant-ne d'altres també.

Cal treure partit als colors 

Si s'utilitzen elements visuals en el disseny, és per algun motiu. Ara bé, quan es decideix utilitzar el color, generalment un d'aquests motius serà per cridar l'atenció en aquella part del disseny o separar-la de la següent o anterior secció.

Aquest ús del color resulta d'allò més eficaç i permet als elements d'obtenir el pes visual que se'ls vol donar. El color també serveix per contrastar hàbilment els elements de manera a posar en relleu el que és més important. Jugueu així amb els colors per veure com els d'algunes icones, per exemple, potser són capaços de canviar la percepció i el missatge interpretat per aquest particular element del disseny.

Fitbit are one of those companies that seem to get their brand and how they should work with it on the web - they use their colours consistently throughout their website - and also their other online services - and in their badge designs which helps subtly bring the whole design together
Fitbit és una de les empreses que destaca la seva marca corporativa i sap com cal treballar-la a la xarxa (ús consistent dels colors tant de punta a punta de la web com en d'altres serveis en línia com també en els disseny de la insígnies), cosa que contribueix subtilment a harmonitzar tot el disseny.

No oblidem la forma!

La forma és un d'aquells atributs subestimats i sovint oblidats quan es tracta d'elements visuals. No tingueu por de jugar amb la forma barrejant contingut i imatges. Tot i que els cercles es fan servir força en els dissenys actuals, convé experimentar amb d'altres formes i veure com encaixen en el nostre disseny. Ja sigui la forma d'una icona o la manera de tapar parcialment una foto amb una màscara poden fer un gran impacte al disseny de la pàgina web.


Patrons típics de la jerarquia visual

Hi ha un parell d'esquemes de composició visual als quals podem recórrer quan mirem de treballar en una jerarquia visual forta. Se'n parla amb més detall en els articles sobre composició, però convé esmentar-los breument aquí perquè ens poden realment resultar útils quan pensem en el tema.

La disposició en forma de Z

La disposició en Z és una disposició comuna de composició que s'ha vist a molts dissenys. Es refereix al recorregut que fa l'ull seguint un patró en un lloc web, en què comença a la part superior esquerra, creua cap a la dreta, baixa en diagonal fins a l'esquerra i travessa altra vegada a la dreta; en forma de la lletra 'Z'.

The Z-Layout as seen in action on BBC News
La disposició en Z en acció a BBC News.

Secció Àuria

La Secció Àuria és força coneguda a les indústries de la impressió i el disseny. Es refereix a una manera molt particular (i basada en les matemàtiques) de descobrir quina és la part d'un disseny més eficaç per col·locar un element i com l'hi pot conferir un pes visual particular. Molt similar a la regla dels terços, el contingut principal es col·loca normalment a la porció més gran d'aquesta secció mentre que el contingut menys important i secundari se situa a la més petita.

The golden ratio seen in action on Twitter Screenshot taken by Ryan Schroeder
La raó àuria, vista en acció a Twitter. Captura de pantalla feta per Ryan Schroeder.

Això també pot funcionar d'allò més bé amb els nostres elements visuals: decidim mostrar les imatges més importants a les seccions més grans al costat del contingut principal, i les imatges secundàries a les seccions més reduïdes. Una altra opció és barrejar les dues disposicions, per exemple alineant fotos mitjanes a una altra columna a la nostra graella i acabant al final de la secció més petita. Val la pena experimentar per veure què ens funciona bé en el context del disseny propi.


Deures

En principi, ara ja ho sabeu tot sobre jerarquia, tant pel que fa a contingut com la visual. Ja heu tingut l'ocasió d'experimentar amb la jerarquia del contingut i ara m'agradaria que féssiu el mateix, però amb els elements visuals a la vostra pàgina. Comproveu si s'alineen amb el ritme vertical del disseny, mireu com resulten més interessants o contrastats i traieu partit de les tècniques anteriors per millorar els dissenys.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.