La secció àuria en disseny web

Fa poc vaig llegir l’article “The Golden Ratio in Web Design” a Nettuts. El seu autor és Jarel Remick. Com que m’ha semblat molt interessant i útil, he pensat d’incloure una adaptació en català al bloc.

Anatomia d’un web

Els elements d’un web són vitals per a un correcte funcionament i una estètica satisfactòria.

Container (contenidor), header (capçalera), logotip, navigation (menú), main content (contingut principal), sidebar (columna lateral) i footer (peu de pàgina).

Aquests són els elements principals del web. Hi ha moltes maneres diferents d’organitzar-los però aquesta és potser la disposició bàsica més comuna.

El contenidor

Tots els webs fan servir un contenidor pel mateix propòsit: contenir els elements de la pàgina. No obstant les maneres de fer-ho són diferents. Per exemple, actualment l’etiqueta més usada és el div (les taules ja no es fan servir, ja que actualment la taula de maquetació no és un element vàlid). El contenidor vindria a ser com la paret externa de la casa, dins la qual es van situant els dormitoris, la cuina, etc.
Tipus de contenidor:

1. Líquid: s’amplia per ocupar l’amplada del navegador
2. Fixe: té una amplada específica que no canvia, sense importar la mida de finestra del navegador.

Capçalera (header)

S’utilitza generalment per referir a la secció superior d’un web, on es localitza el logotip, el menú, etc. Molta gent fa servir la etiqueta div per maquetar-lo, i pot ser líquid o fixe segons l’esmentat abans.

Logotip

El logotip és la identitat. La col·locació més comuna per al logotip és dins la capçalera i aliniat a l’esquerra. Llegim d’esquerra a dreta i de dalt a baix, així que molt probablement serà el primer element que visualitzaran els visitants.

Navegació (menú)

És un dels elements més importants del web. És necessari per a que els visitants “utilitzin” el web. Ha de ser fàcil de trobar i d’utilitzar, pel que gairebé sempre està situat dins la capçalera o, almenys, a prop d’ella.

Tipus de navegació:

1. Horitzontal: enllaços disposats en línia. Generalment se l’anomena “navegació”.
2. Vertical: enllaços disposats en columna. Generalment se l’anomena “menú”.

Contingut principal (main content)

Com sap tothom, el contingut és el rei! Quan la gent visita el teu web, aquest és l’element que buscarà per sobre de tot. Ha de ser el punt focal principal del web per a que els visitants trobin ràpidament el que estiguin buscant.

Columna lateral (sidebar)

És un element amb contingut secundari tal com publicitat, cerca al web, subscripcions RSS, etc. No és un element necessari tot i que molts webs el facin servir. Normalment el trobem alineat a la dreta, però també pot anar alineat a ambdós costats en forma de dues columnes laterals (sempre que no interfereixi en la correcta visualització del contingut principal). Per a webs que facin servir navegació horitzontal i vertical, normalment, la columna lateral se sol substituir per l’element de la navegació vertical.

Peu de pàgina (footer)

El final del web sempre ha de tenir un peu de pàgina per deixar clar, als seus visitants, que han arribat al final. A l’igual que la capçalera, el peu de pàgina no és realment un element específic si no una secció del web. Dins el peu sobretot hi anirà informació legal, drets reservats, contacte, etc. Alguns webs el fan servir com a oportunitat d’esmentar contingut addicional o relacionat amb altra informació important.

Espais en blanc

És tota l’àrea del web que no està coberta per tipografia o altres continguts. Els espais en blanc són gairebé tan importants per a un bon disseny com el contingut que s’utilitzarà. Els espais buits són una guia a través del contingut i separen les diferents àrees de contingut o els diferents elements.

Les retícules i la secció àuria

Milers d’artistes, arquitectes, dissenyadors, etc. de la història han fet servir, intencionadament o no, proporcions o ràtios comunes per satisfer els seus criteris estètics. Així va aparèixer la secció àuria. Quin és el número màgic? Realment 1,618… però per eliminar decimals i buscar un número més rodó el deixarem en 1,62.

Fer servir el número d’or pel disseny web és simple. Ajuda a trobar l’amplada de la columna principal i la columna lateral del web. Cal que prenem l’amplada total de l’àrea continguda (com a exemple farem servir una amplada total de 900 px.). Dividirem aquests 900 per 1,62 i obtindrem 555,55 px. No ens cal ser exactes, així que el deixarem en 555 px. Així doncs, per al contingut principal farem servir una amplada de 555 px., i l’amplada de la barra lateral tindrà els 345 px. restants.

També podem fer servir la secció àuria per definir l’alçada d’un element prenent com a referència la seva amplada, o viceversa.

Fent servir retícules

Potser no voldreu fer servir una calculadora cada cop que volem fer servir aquest ràtio. Per simplificar el procés podem fer servir una retícula simple. L’únic que cal fer és dividir l’amplada i alçada per terços.

Per produir una retícula més detallada, podem reduir encara més la divisió tenint en compte els terços de la divisió inicial

Fer servir retícules no fa el disseny més fàcil o ràpid, però ajuda a crear una disposició estètica satisfactòria.

Si no feu servir retícules per dissenyar, podeu fer servir les retícules en format imatge (Photoshop, Fireworks…) o en format CSS que trobareu a http://960.gs