Vegeu també:
HTML
Javascript i Java
Shockwave/Flash
Fitxers comprimits (ZIP)
Preparar la web pas a pas. Una fitxa pràctica.
Notes sobre el disseny d'aquestes pàgines.

La utilització de plantilles simplifica la tasca de crear una web consistent en els seus esquemes de navegació i disseny de pàgina.

Aquí recollim algunes idees generals a considerar abans, durant i després del disseny d'una Web, i ens fixam en l'anatomia d'una web. Al final de la pàgina us proporcionem alguns recursos per aprendre més.

No és cap material original; hem recollit les propostes de diferents fonts durant uns quants anys. Totes aquestes idees convé tenir-les en compte ( i són en un 90% sentit comú.)

Idees generals per preparar una web.
  La web ha de tenir uns objectius clars, tant si són educatius, comercials, publicitaris... i l'usuari ha de saber què hi trobarà (en general) des d'un principi.

  La navegació a través de la web ha de ser fàcil, intuïtiva i consistent. El navegant ha de saber on es troba a cada moment.

  La interfície ha de ser el més uniforme possible a través de la web: un mateix sistema de colors, ús de tipografia, col.locació dels elements de navegació...

  Actualitzeu la informació i elimineu parts caduques. La informació més actual o les seccions noves s'han de poder localitzar ràpidament.

  Els nous efectes, aquells que necessitin plugins i altres trucs no han de constituir el nucli de la pàgina, en especial si es tracta d'elements no estàndard dins de l'HTML.

  Convé utilitzar el colors amb moderació, de forma consistent i assenyada. Hi ha que tenir especial esment de que el text sigui fàcilment legible amb els colors escollits.

  El text ha de ser concís, ben estructurat i fàcil de llegir. La lectura en pantalla no és tan agradable com al paper. (Es pot proporcionar també una versió més extensa per imprimir.)

  Manejar la tipografia amb cura; no mesclar massa tipus de lletra i tamanys a cada pàgina. La informació essencial ha de ser text editable, no un text en forma de gràfic.

  Tenir compte amb el tamany i format de les imatges. Utilitzar-les de forma pertinent, no com a simple ornamentació.

  Els gràfics de fons poden ser vistosos i interessants, però s'han d'evitar aquells que dificulten la lectura del text.

  Dissenyar les pàgines pensant en tots els usuaris, no tan sols aquells que tenen els millors monitors i targetes gràfiques; provar el disseny a diferents ressolucions i verificar la seva validesa.

  Utilitzar les animacions amb prudència; poden ser francament molestes i vulgars, i només cal emprar-les per un motiu ben justificat.

  Els frames són una font de problemes per al manteniment i indexació d'una web i confonen a molts navegants; és preferible evitar-los i utilitzar barres de navegació laterals i/o a dalt i baix de la pàgina.

  Evitar els tòpics i certes indicacions que s'usaven molt als primers anys de la www, tals com "en construcció" "necessiteu aquesta configuració per veure aquesta pàgina..."; tampoc cal exhibir comptadors ni condecoracions...

Anatomia d'una pàgina web.
Aquí consideram algunes de les alternatives principals per al disseny de les pàgines web als diferents nivells de l'estructura que preparem.

Típicament, una web té una pàgina d'inici, portada o homepage; d'aquesta depenen una sèrie de pàgines de secció que permeten accedir a les diferents pàgines amb els continguts reals: articles, pàgines de catàleg, llistes, fitxes de productes... Aquesta estructura essencial pot complicar-se més o menys, per exemple, afegint diferents subseccions i aprofundint així l'estructura. En general no és una bona idea fer un esquema de navegació massa detallat a la portada, perquè dificulta als usuaris arribar allà on els interessa.

Els criteris per dissenyar les pàgines a cada un dels nivells són distints, pel que fa a l'organització de l'espai, l'ús del color i l'elecció de la tipografia:

En general, podem considerar que a cada un dels tres nivells (portada / seccions / articles) les restriccions que es poden aplicar són les que figuren a aquest gràfic.
Naturalment, ha d'haver-hi una certa consistència en l'estil gràfic i de lletres entre els diferents nivells: no ha de semblar que en comptes de nivells distints, estem a webs distintes! Ens hem de plantejar si optam per un estil gràfic basat en fotografies, imatges realistes, imatges simples en color o blanc i negre, imatges estil còmic o caricatura, icones senzilles (signes, símbols o senyals), o una combinació acceptable de més d'una d'aquestes opcions. I anar amb compte amb mescles indigestes. Per exemple, a una web molt sòbria, van bé imatges icòniques simples, però hi desentonaran imatges caricaturesques.

La pàgina de portada.
La pàgina de portada és un element clau de la web. Donat que és el punt d'entrada natural a les nostres pàgines, la imatge que projecta ha de ser la desitjada: el visitant ha d'endevinar què s'ofereix -o al menys sentir curiositat per saber-ho i navegar més endins per veure-ho per si mateix. Per tant, convé dedicar molt més esforç, proporcionalment, a aquesta pàgina, per fer-la atractiva, funcional i única.

Des de la pàgina índex hem de proporcionar accés a les pàgines de les seccions principals de la nostra web. Però no és molt bona idea omplir l'espai amb descripcions detallades d'aquestes; potser convé més afegir un enllaç a una pàgina diferent amb un mapa de la web (sitemap). L'estil saturat d'informació dels portals d'accés a Internet no és recomanable per projectes diferents d'aquests. L'excés d'opcions pot resultar desconcertant per molts visitants. Moltes webs que uns temps enrera tenien aquest aspecte han optat per redissenyar la portada i fer-la més simple. Vegeu com portals de més recent creació, com ara inicia (http://www.inicia.es) han reduït la càrrega informativa a la portada.

És convenient indicar d'alguna manera les novetats que hi ha a la web, bé amb un petit missatge, bé amb un enllaç a una pàgina on s'expliqui amb més detall.
És més fàcil recurrir al llenguatge visual que a l'escrit, a la pàgina inicial. Els escrits han de ser concisos i clars, indicant què hi ha a la web d'una forma interessant.
Probablement, és a la pàgina de portada on podem fer més ús de la nostra imaginació. No cal que tengui una estructura previsible: podem sorprendre i entretenir. És un bon lloc per utilitzar quelcom espectacular, com ara una pel.lícula de flash o efectes de canvi d'imatges en moure-hi el ratolí (efectes de rollover.)

Encara que, repetim, és on podem dissenyar amb major llibertat, vegem algunes idees per a l'estructuració de la pàgina d'inici (al costat d'aquestes línies.)Per decidir el vostre propi esquema, us anirà bé una volta per la web a veure com s'ho fa altra gent, i també mirar algun llibre de disseny amb molts exemples, com ara un receptari de disseny gràfic com el de L. Koren i R. Wippo Meckler (ed. G. Gili.)

Les pàgines de seccions i subseccions.
La web ha d'estar constituïda per seccions lògiques i ben estructurades. Una pàgina de secció donarà accés als articles relacionats; en afegir nous articles bastarà modificar la pàgina de secció afegint-hi un enllaç.

Per identificar les seccions -i distingir unes de les altres- es pot utilitzar un color distintiu per a cada una, combinat amb alguna icona o imatge exclussiva. A moltes webs fan servir una barra de navegació a la que s'indica en quina secció ens trobam amb un color diferent per a la secció, o amb modificacions semblants: per exemple, enfosquint o difuminant la resta de la barra de navegació.

Per decidir el disseny de les pàgines de secció, no hem de perdre de vista la facilitat amb què poguem actualitzar-la, afegint-hi accessos a les noves pàgines d'articles que facem.

Finalment, a la majoria de casos cal evitar els frames. Aquest sistema de navegació no ofereix cap avantatge significatiu respecte d'unes barres de navegació dins de la mateixa pàgina, i presenta una llarga llista d'inconvenients (per començar, resulta molt més difícil preparar-ho tot.) Tret d'exemples molt concrets, per exemple un catàleg de productes, no és una opció aconsellable per al disseny de pàgines de secció.

Vegeu, al costat, algunes idees per al disseny de les pàgines de secció.

Les pàgines de contingut o articles.
Realment, aquestes són les pàgines de la web. La resta no és més que un afegit per arribar-hi de la forma més fàcil... però són peces clau, donada la forma en què es navega. Per a un llibre, la portada no té tanta importància, ni l'índex tampoc!

La claredat expositiva ha de ser el principal criteri de les pàgines de contingut. El text ha de ser fàcilment legible, amb correcta distribució i amplària de les línies, i tamany de les lletres, i les il.lustracions han de ser funcionals. L'ús del color ha de ser, en correspondència, més sobri que a la portada.

La distribució del text en columnes, tan comuna al paper, presenta un problema en els documents que s'han de llegir online. Ja que la unitat que es mostra no és un full, sinó una pantalla de tamany variable, el text en dues columnes o tres, a les pàgines web no es distribueix de la forma habitual, de dalt a baix i d'esquerra a dreta. Les columnes són independents entre sí; no hi ha manera de fer-hi un text continu i que sigui realment funcional per llegir-lo en pantalla. Per això una solució molt utilitzada és optar per columnes assimètriques (com a aquestes pàgines). La columna petita conté enllaços, informació addicional, petites il.lustracions, i la columna més ampla té el gruix del text i les imatges majors.

Per moure's entre articles no ha de ser necessari tornar a les pàgines dels nivells superiors; convé afegir una (o unes) barres de navegació que portin a les principals seccions.

Per aprendre més...
Donau un cop d'ull als enllaços recomanats a la darrera secció, i en especial qualsevol d'aquests:
  La Guia d'estil per a la Web de Sun, un conjut de pàgines on es detallen tota mena d'idees per fer webs més ben estructurades i funcionals.

  La Guia d'estil per a la Web de la Universitat de Yale, és la versió online d'un exitós llibre de text. Imprescindible.

  The Zen of Web Sites, una altra web amb consells molt interessants.

  La Guia d'estil de la Llibreria del Congrés dels Estats Units.