Disseny i composició

Al mòdul anterior vau treballar el mapa general de la web (practica_1), dissenyar un esbós (practica_2) de la pàgina principal on vau determinar els elements comuns a la resta de pàgines del lloc web com els específics de la portada, especialment pel que fa a la navegació (practica_3 i practica_4). Finalment vàreu seleccionar una paleta de colors (practica_5) i una tipografia (practica_6).

En aquest mòdul recuperareu l'esborrany de la pàgina principal. Recordeu que el nivell de detall d'aquest disseny és mínim i era de gran ajuda per ubicar els elements importants de la pàgina sense preocupar-vos excessivament de les seves mides. Ara fareu un pas més endavant i treballareu el concepte de composició de la pàgina des de la vessant estètica, prenent com a referència algunes tècniques tradicionals que provenen del món de l'Art: la Regla d'Or i la Regla dels Terços.

Què és la composició?
en termes generals, la composició és la pràctica de l'organització harmònica de l'espai de la representació, és a dir, disposar els elements sobre l'espai o àrea de treball de tal manera que proporcioni una sensació visual d'equilibri de tot el conjunt.

Tècniques tradicionals de composició

Llegiu ara una introducció a dues regles que provenen del món de l'Art i que van ser adoptades pels dissenyadors web en la creació d'una composició efectiva de la pàgina. Aquestes tècniques les podeu considerar com a punt de partida per al disseny base del vostre lloc web.

La Regla d'Or

Anomenada també secció àuria, la Regla d'Or ha estat objecte d'estudi i pràctica des de la civilització grega, però especialment va tenir una presència important en els treballs dels artistes i arquitectes del Renaixement, els quals varen representar les seves obres aproximant-se a la secció àuria -especialment en forma de rectangle, el qual ens diu que la relació entre el costat major al menor és la mateixa entre el total del rectangle i el costat major. Aquesta relació àuria o proporció té el valor de 1.618033988749895 ≈ 1.618. Vieu el següent exemple gràfic:

L'amplada de la composició és de 960px (píxels). Aquest rectangle està dividit en dos blocs: el de mida mes gran, contendria els continguts de la pàgina, i el de menor mida, contendria la navegació lateral. Com es calculen aquestes dues columnes donada la mida horitzontal del rectangle general?

  1. En primer lloc calculeu la mida del rectangle de costat major. Si sabeu que la relació entre la mida total del rectangle general i la mida del rectangle major és aproximadament 1.618, dividiu 960px entre 1.618. El resultat serà, aproximadament, de 593px.
  2. Restem 593px a la mida horitzontal del rectangle general. Obteniu 960px - 593px = 367px. Ja teniu la mida del segon rectangle.
  3. Si calculeu la relació entre les mides horitzontals dels dos rectangles us resultarà la relació 1.618.

Quina relació té aquesta regla i el disseny web? En paraules de Mark Boulton 1), en el seu article Design and the Divine Proportion:

L'ús de la Divina Proporció com a guia per les seves composicions poden millorar la comunicació del seu disseny.

Si bé la majoria de les pàgines web actuals no segueixen aquesta regla amb exactitud, és cert que, de manera intuïtiva, divideixen l'àrea de treball en dos blocs o rectangles, un de gran on anirà el contingut i un de més petit que contindrà la navegació i altres elements d'interès.

Finalment, aquí teniu dues eines que us permetran calcular ràpidament l'amplada de les columnes de composició de la pàgina seguint la relació àuria:

La Regla dels terços

Segons la Viquipèdia, la regla dels terços

divideix una imatge en nou parts iguals. Aquestes es divideixen per dues línies imaginàries iguals, dues de forma horitzontal i dues més de forma vertical.2)

Els quatre punts formats per les interseccions d'aquestes línies s'agafen com a referència per ubicar els elements més importants de la composició, és a dir, aquells elements que voleu que tinguin un paper predominant en el disseny del lloc web. Fixeu-vos en l'exemple visual de la Viquipèdia on es demostra el principi de la regla dels terços.

Disseny fix o flexible?

A diferència de la pintura o la fotografia, on les mides del suport de l'obra resultant la determina l'artista, a l'àmbit del disseny web no tenim una idea clara de quina mida de pantalla tindran els usuaris a casa o la feina, o si naveguen amb els mòbils o altres tipus de dispositius. Llavors, quina és la mida màxima amb la que podem començar a treballar el disseny del lloc web?

En primer lloc, és recomanable prendre com a referència la resolució de pantalla més utilitzada pels usuaris i usuàries. En aquests moments, un percentatge elevat d'usuaris i usuàries de la web fan servir una resolució de 1024x768 píxels o superior. La següent taula 3) us proporcionarà una idea més acurada

Dades Superior 1024x768 800x600 640x480 Desconegut
Gener 2009 57% 36% 4% 0% 3%
Gener 2008 38% 48% 8% 0% 6%
Gener 2007 26% 54% 14% 0% 6%
Gener 2006 17% 57% 20% 0% 6%
Gener 2005 12% 53% 30% 0% 5%
Gener 2004 10% 47% 37% 1% 5%
Gener 2003 6% 40% 47% 2% 5%
Gener 2002 6% 34% 52% 3% 5%
Gener 2001 5% 29% 55% 6% 5%
Gener 2000 4% 25% 56% 11% 4%

En qualsevol cas, aquesta informació és relativa. Molts usuaris i usuàries que treballen amb dues pantalles, pantalles panoràmiques, o no, acostumen a utilitzar tot l'ample del monitor quan obren el navegador. Però també cal que recordeu els usuaris de Mac. Els últims models d'ordinadors de sobretaula (els iMac) tenen una disposició panoràmica, que proporciona un ample del navegador que pot condicionar negativament la lectura del text del lloc web. D'altra banda, una part -petita encara- dels usuaris i usuàries naveguen amb dispositius mòbils com PDA, Smartphones o consoles de videojocs. Per aquest motiu, heu de tenir en consideració que la pàgina web sigui llegible a la majoria dels dispositius actuals.

Vegeu a continuació quines opcions teniu disponibles per tractar aquesta condició flexible de la web.

Disseny fix, fluid o elàstic

Els dissenys de la web es poden descriure com a disseny d'amplada fixa o dissenys líquids o elàstics.

En un disseny d'amplada fixa, les dimensions del disseny s'especifiquen en unitats de mesura, generalment en píxels. Els dissenys de mida fixa són independents de les mides de la finestra del navegador. Per tant, un disseny d'amplada de 760 píxels romandrà amb la mateixa mida encara que ampliem o reduïm les dimensions del navegador. Vegeu el següent exemple de disseny fix on es modifiquen les dimensions de la finestra del navegador però el disseny manté la mateixa amplada.

Un disseny líquid o fluid es defineix en relació a l'amplada de l'àrea de representació del navegador fent ús de percentatges. Si determineu que l'amplada del disseny de la web sigui de 60%, en un monitor de 1024 píxels d'amplada, el disseny tindrà una amplada de 614 píxels. En canvi, en un monitor de 1280 píxels, l'amplada del disseny tindrà un valor de 768 píxels. Veieu un disseny líquid en acció.

Finalment, un disseny elàstic, en paraules del dissenyador Jon Tan:

Un disseny elastic escala en funció de la mida del text4).

És a dir, el disseny variarà de les seves mides si modifiqueu la mida del text del navegador (per exemple, al Mozilla Firefox és possible a través de la combinació de tecles Ctrl + + i Ctrl + -).

Per aconseguir un disseny elàstic cal que assigneu a totes les dimensions dels elements del disseny un valor basat en unitats del tipus em.

Visiteu la següent pàgina http://jontangerine.com/silo/css/elastic-layout/ i proveu a modificar la mida del text del navegador. Comprovareu que el disseny es manté sempre proporcional a l'original.

Podeu llegir més sobre la discussió acalorada que hi ha al voltant dels avantatges i desavantatges d'un model o altre. Aquí teniu dos articles interessants al respecte: