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

Com incorporar jerarquia en el contingut gràcies al disseny

by
Length:ShortLanguages:
This post is part of a series called Design School for Developers.
An Introduction to Hierarchy
Building Visual Hierarchy into Your Designs

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

Al principi d'aquesta sèrie, vam parlar molt del contingut i de la importància que té en qualsevol treball de disseny. Òbviament és quelcom que s'ha de mirar i organitzar abans d'iniciar qualsevol projecte, però només s'arriben a veure els resultats reals d'aquesta tasca una vegada que es comença el disseny.

Quan treballem amb continguts al principi del procés, hem de mirar d'establir una estructura que funcioni pel contingut. Recordeu les etapes de l'esboç i el propotip del procés. En aquella fase, vam mirar les idees que teníem per disposar el contingut d'una manera que funcionés bé i es prestés a una bona jerarquia. Ara, volem fer que aquella jerarquia del contingut funcioni visiblement i visualment a través dels nostres dissenys.

The Fusion Ads homepage uses content to introduce the user to its product, whilst also showing the product in action.
La pàgina principal de Fusion Ads introdueix l'usuari al seu producte mitjançant el contingut, mentre mostra el producte en acció.

I com ho fem? D'entrada, hem de decidir què és rellevant en els nostres continguts pels usuaris i per què — hem de ser capaços de justificar les decisions que prenem. També hem de controlar quin és el focus en els nostres continguts, les parts d'informació que volem realment en què es fixin els usuaris. En acabat, hem de començar a traduir-ho d'una manera més visual.

Ho fem disposant el contingut de manera que s'adigui a l'estructura original desitjada. No només es tracta de títols i paràgrafs, hem de controlar més aviat com es llegeix el contingut un cop és a la pàgina i quin èmfasi s'hi posa en els diferents elements. Un cop tenim el contingut bàsic col·locat, podem començar a utilitzar diferents eines i ajudes per concentrar-nos en posar en relleu certes parts i destacar-les.

At the bottom of the Fusion Ads homepage, they have a FAQ where all the information is balanced and easy to read, which is super important for those kinds of content.
A la part inferior de la pàgina principal de Fusion Ads, hi tenen una secció de preguntes freqüents on tota la informació és equilibrada i fàcil de llegir, cosa que és importantíssim per a aquesta mena de contingut.

Eines i ajudes pràctiques

Mida & Contrast

La mida pot relacionar-se tant amb les porcions individuals de contingut que hi ha en el disseny, com amb altres elements, com ara imatges i com aquestes es contraposen entre elles. Per exemple, posem en relleu els títols mitjançant la mida. En procurar que siguin més grans que el contingut principal, s'indica que tenen un grau diferent d'importància i que l'usuari ha de fixar-s'hi.

La mida també va bé per dividir el contingut de la pàgina en fragments més petits i subratllar-ne algunes parts que són cabdals. També pot servir per treure èmfasi a certs elements o parts del contingut que volem que siguin menys evidents o que no són tan importants com la resta. Això també passa amb el contrast: quan creem una jerarquia visual del contingut que contrasta bastant, el disseny té més impacte visual.

Pesos & estils de font

Els pesos i els estils de font, quan s'usen amb gràcia, afegeixen un èmfasi més subtil a parts del contingut que podrien passar desapercebudes ennuagades amb la resta del contingut principal. Els pesos de font que són més gruixuts que la resta de contingut (com ara la versió en negreta de la font que fem servir en el disseny) o un estil de font diferent (per exemple la cursiva) son fantàstics per donar èmfasi a parts reduïdes de contingut que volem destacar, sense que aclaparin la resta del disseny.

Els pesos i estils de font també serveixen per afegir impacte i èmfasi al disseny. Per exemple, si l'estil de disseny s'hi presta, l'ús d'un pes lleuger ("light") de font (que sovint és molt més prim que els pesos de font estàndard) va d'allò més bé per afegir impacte als grans títols, com es pot veure en el exemple de més avall.

Although many of the A List Apart articles are extremely content-heavy, they still manage to display that content in a really balanced, digestible way - and their use of different font sizes and styles helps with this.
Tot i que molts dels articles de A List Apart són feixucs de contingut, es presenten d'una manera força equilibrada i fàcil de pair. L'ús de diferents mides i estils tipogràfics hi contribueix.

Color

Les variacions de color són una altra manera eficaç de dividir i mostrar contingut en els dissenys. Això no vol dir que s'hagi d'anar esquitxant color a tort i a dret. Es tracta més aviat de fer-ne ús per ressaltar subtilment certes zones del disseny, ja sigui bloquejant algunes parts de contingut o destacant el text que ho demana.

Posició & alineació

La manera de col·locar el contingut té un gran impacte en la manera de percebre'l els usuaris. És importantíssim assegurar-nos que ens aferrem al sistema de graella i que alineem el contingut com cal. L'alineació també fa que el disseny tingui una aparença ordenada, tot explicant la història de la pàgina web i orientant els usuaris en un recorregut a través de la nostra web.

Colour, alignment and grids play a large part in The Verge's website design. There's a lot of content to look at, but using colour they can make it easier to focus on what modules or bits of text are different to each other.
Color, alineació i graelles són cabdals en el disseny de la web de The Verge. Hi ha un munt de contingut per mirar, però el color facilita de centrar-se en quins mòduls o parts del text són diferents entre si.

Proximitat & espai en blanc

Per construir una jerarquia visual de contingut que tingui impacte i sentit, és imprescindible controlar com estant espaiats els elements del disseny. Si els elements que es relacionen estan massa allunyats, l'usuari, en llegir la pàgina, perdrà el ritme. Ara bé, passa el mateix amb els elements que estan massa junts. Si els components estan massa atapeïts, costarà d'entendre què té més importància o hauria de ressaltar més. A l'usuari, li costarà aleshores d'entendre com trobar el camí.

Gridset use a lot of whitespace on their homepage - along with different text styles and accompanying imagery - to highlight key features and examples.
Gridset utilitza molt d'espai en blanc a la pàgina principal – juntament amb estils de text diferents acompanyats d'imatges – per destacar les característiques i exemples claus.

Deures

Ara que coneixeu diferents maneres d'afegir pes o èmfasi visual a elements particulars, vull que ho poseu en pràctica en els propis dissenys. Mireu d'integrar cada una de les tècniques que es mostren prèviament per tal d'afegir més jerarquia visual de contingut en el disseny.

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.