10
10. Guia de disseny de pàgines web

L’objectiu de la desena lliçó és conèixer idees bàsiques sobre el disseny d’una pàgina web que fa als següents aspectes:


 


 

Activitat 10.1 Tipus de pàgines web

Quan anem a elaborar una pàgina web, el primer que hem de considerar és quin tipus de pàgina volem crear, perquè no és el mateix, per exemple, la pàgina digital d’un diari que la d’un cantant de moda. Per això, és convenient navegar per Internet i observar com estan fetes les pàgines que visitem. Quan ho fem, de seguida distingim entre pàgines que han realitzat professionals del mitjà i pàgines realitzades per aficionats. No totes les d’aquells són bones ni totes les d’aquests són dolentes, i de tots dos tipus de pàgines es pot aprendre.

Sempre cal tenir clars els objectius que pretenem aconseguir i el contingut que anem a incloure en la nostra pàgina web, perquè ells ens dictaran tots els aspectes que es relacionin amb el disseny i la navegació principalment. Existeixen actualment dues tendències predominants a la Xarxa: la de la utilitat (usability) i la del disseny avançat (per dir-ne d’alguna manera):

  • Els partidaris de la utilitat conceben la pàgina web com un servei per a l’usuari, a qui cal donar-li totes les facilitats perquè trobi la informació que busca. El disseny i la navegació han de ser molt senzills i han de complir amb les normes establertes per l’ús, de manera que els usuaris naveguin de forma intuïtiva i sense obstacles, eliminant per això les tecnologies més sofisticades i descarregant els documents d’imatges i d’altres elements multimèdia superflus. Aquest tipus de disseny sol estar enfocat a pàgines de caràcter comercial i informatiu ia pàgines que allotgen bases de dades, ja que se suposa que el pragmatisme ha de ser la seva principal característica.Aquesta tendència sol seguir les pautes de la accessibilitat, amb què es vol fer la Xarxa accessible per a totes les persones que tenen impediments físics i psíquics.
     

  • Els partidaris del disseny avançat conceben la pàgina web com un conglomerat d’elements visuals i sonors atractius que destaquen el costat més innovador del disseny gràfic. L’originalitat de les seves propostes xoca amb els convencionalismes de la Xarxa, encara que les exageracions dels mals dissenyadors produeixin possiblement altres convencionalismes. Les armes preferides d’aquests creadors solen ser les tecnologies que han anat naixent aquests últims anys per millorar els aspectes multimèdia de la Xarxa, i la seva bandera l’aplicació Flash, de Macromedia, que se sol utilitzar per a l’elaboració d’animacions complexes. Aquest tipus de disseny té molta demanda per part dels usuaris més joves, que visiten pàgines d’entreteniment que destaca el atractiu visual.

Ambdues tendències portades als seus extrems solen produir pàgines asèptiques, en el cas de la utilitat, i pàgines pesades i recarregades, en el cas del disseny avançat. Entre ambdós extrems hi ha una àmplia gamma de possibilitats.
 

Activitat 10.2 El color

El primer que salta a la vista quan visitem una pàgina web és el coloritReferent a això cal recomanar que no s’utilitzin molts colors diferents i que aquests produeixin una sensació de coherència i unitat a la pàgina. Si un lloc d’Internet té, per exemple, cinc seccions, el millor és adjudicar a cadascuna d’elles un color preferent perquè l’usuari sàpiga distingir on es troba en cada moment. Cada secció d’aquesta pàgina, per exemple, podria tenir un mateix fons blanc on estigués el text del contingut i una banda superior o lateral d’un color diferent per a cada secció. Les modalitats són moltes, però totes elles han d’anar encaminades a facilitar a l’usuari l’ comprensió visual d’una pàgina.Errors molt comuns a això són, per exemple:

  • Establir un color de fons i un color de la lletra que no contrasten prou com per permetre la lectura fàcil del text.
     

  • Utilitzar colors que no peguen o que cansen visualment en moltes parts de la pàgina.
     

  • Utilitzar massa colors de text o massa colors de fons en un mateix document.
     

Activitat 10.3 La navegació

Un altre aspecte important d’una pàgina web és la navegació, és a dir, els elements de la pàgina que permeten a l’usuari moure d’una secció a una altra, que solen consistir en hipervincles. No cal dir que aquests elements han de ser abundants i fàcils de trobar, però no han de ser massa grans o evidents (una imatge o un text de grans dimensions) per cridar la nostra atenció; han d’estar situats al marge, en un lloc on no molestin i l’usuari sàpiga que sempre els va a trobar. Com a norma general, en cada un dels documents que elaborem ha d’haver, com a mínim, un enllaç al inici de la pàgina ( home ) i l’ inici de la secció a la qual pertany, ja que sempre cal evitar carrerons sense sortida, és dir, documents on el lector es perd. Els hipervincles solen ser imatges i textos; les imatges han de ser de mida petita i contenir pocs colors, a manera d’icones; i els textos haurien de ser breus i indicatius del contingut que anuncien, evitant el "punxi aquí ".


 

Activitat 10.4 El contingut

El contingut ha de ser sempre el més important, ja es comuniqui amb text, amb imatges o amb elements multimèdia. El text, però, impera a la Xarxa, i serà així fins que s’aconsegueixi una major velocitat de navegació que permeti introduir més elements multimèdia, sobretot el vídeo i el so. Però el text d’una pàgina d’Internet no té les mateixes característiques que el d’una revista, un diari o un llibre de paper. A Internet els textos han de ser breus i resumir molt la idea que es vol comunicar; en cas contrari, és probable que l’usuari no els llegeixi i es vagi a una altra pàgina. Per aquest motiu no es pot recarregar de text un document, i convé dividir-lo en diversos documents connectats entre si. No obstant això, les pàgines de caràcter informatiu poden incorporar, si cal, text més abundant, ja que l’usuari sempre pot imprimir el document per llegir-lo amb més comoditat. També és convenient no usar molt les lletres majúscules per als títols, ja que es llegeixen pitjor que les minúscules ; cal augmentar la mida de la lletra amb aquests fins, però sense exagerar, ja que els tipus de lletra molt grans atreuen massa l’atenció. A més, les línies de text no han de ser molt llargues, és a dir, no han d’ocupar tota la pantalla, sinó que cal procurar, mitjançant la seva inclusió en taules, per exemple, que siguin de longitud mitjana perquè resultin fàcils de llegir.


 

Activitat 10.5 Imatge i multimèdia

Un aspecte molt criticat pels usuaris d’Internet és la lentitud de moltes pàgines web causada per la gran quantitat d’imatges, sons o animacions que incorporen. Per tant, cal procurar introduir només les imatges i els elements multimèdia que siguin necessaris. I tot i així, cal intentar reduir la mida de les imatges i el nombre de colors dels arxius GIF el màxim possible. Pel que fa als arxius JPG, convé reduir la seva qualitat per reduir la seva grandària, llevat que aquesta sigui imprescindible. En tot cas, cal tenir en compte que les imatges no són només un aspecte visual gratificant, sinó que poden i han d’ajudar l’usuari a comprendre millor una pàgina web ja moure amb facilitat pels seus continguts.

Pel que fa a les animacions, se sol abusar d’elles només pel fet que resulten atractives, però en molts casos no afegeixen res de valor a una pàgina. Només quan s’utilitzen de forma pedagògica o informativa poden ser de gran utilitat. I el mateix passa amb els sons i els enregistraments de veu.
 

Activitat 10.6 Els navegadors

El problema dels navegadors és un d’aquests incordios que molts intenten esquivar. El fet que les pàgines web no es vegin sempre igual en tots els navegadors és la causa de molts errors en les pàgines. Com el Internet Explorer és actualment el navegador més utilitzat a Internet, molts administradors elaboren les seves pàgines tenint en compte només les característiques d’aquest navegador, sense comprovar si les seves pàgines són compatibles amb altres navegadors. Però si es volen fer bé les coses, cal comprovar si la nostra pàgina es veu bé en els navegadors més utilitzats i en les seves diferents versions. En general, aquest problema no és important quan la nostra pàgina no conté molts elements multimèdia ni es basa en capes (una altra forma de crear pàgines web d ’"última generació"), ja que els navegadors comparteixen gairebé totes les seves característiques bàsiques.
 

Activitat 10.7 La resolució dels monitors

Pel que fa a la resolució dels monitors, fa poc temps es recomanava sempre crear pàgines que es poguessin veure en monitors la resolució fora de 640x480 píxels i de 256 colors, perquè es considerava que encara quedaven molts ordinadors amb aquest tipus de monitors. El problema segueix vigent, però la limitació que suposa aquesta resolució ha portat a molts administradors a crear les seves pàgines preferentment per a monitors de 800x600 píxels i de color d’alta densitat (milers de colors), tenint en compte a més que els ordinadors es van renovant i que ara la majoria d’usuaris té monitors que accepten aquesta última resolució.

De tota manera, resulta aconsellable estructurar les pàgines mitjançant percentatges o altres mesures relativesPer exemple, si es crea una taula amb una amplada de 90%, aquesta taula ocuparà sempre aquest percentatge de la pantalla sigui quina sigui la resolució del monitor. El mateix convé fer amb la mida de les lletres: si s’utilitzen fulls d’estil, el millor és establir una mida de lletra de 100% o un altre percentatge, i aquest tipus de lletra s’adaptarà al tipus de resolució en què es mostri.
 

Activitat 10.8 Els tipus de lletres

Un problema important i real és el de l’ús de diferents tipus de lletra en els documents d’Internet. Tècnicament només es poden utilitzar els tipus de lletra que sabem que tenen tots els ordinadors per defecte, que són molt pocs: Times New RomanArial i uns quants més que s’inclouen en la instal·lació dels navegadors, però mai estarem segurs que tots els usuaris que visitin les nostres pàgines tinguin en els seus ordinadors els tipus de lletres que utilitzem. És a dir, si emprem un tipus de lletra que no sigui de les habituals, el tipus de lletra que es veurà a la pantalla possiblement serà diferent del que hem usat en la creació de la pàgina, amb el que això pot suposar de dificultats en els ajustos dels documents. Aquest problema es pot solucionar en part amb les fulles d’estil, que inclouen famílies de tipus de lletra en el seu codi en cas que no es trobi el primer tipus seleccionat. Existeixen altres solucions, com les d’incloure els tipus de lletra en un arxiu de la pàgina web, però no s’utilitza molt per problemes de compatibilitat. La solució més viable, de moment, és la d’inserir alguns textos en forma de imatge de tipus GIF, però això només es fa per títols o botons de navegació, ja que no seria lògic introduir textos extensos d’aquesta manera.
 

Activitat 10.9 Públic i mig

En definitiva, el disseny d’una pàgina web, com tota publicació, depèn de dos elements: el públic a què va dirigida i el medi en què es publica. Les característiques de les persones que van a visitar una pàgina han d’influir en l’aparença i en el contingut. Aquest curs, per exemple, se suposa que serà utilitzat principalment per estudiants, que esperen trobar una pàgina de continguts senzills, clars i pràctics, amb una navegació àgil i un disseny agradable però no espectacular. El text és el més important, i les imatges ajuden a la comprensió del contingut. Cal tenir en compte, en fi, que Internet és un mitjà diferent als altres i que per tant requereix un disseny adequat a les seves característiques.