Disseny del prototip de pàgina

A la pràctica anterior vau iniciar l'esbós de l'estructura general del lloc web. Es va parlar de la importància del fet de realitzar un diagrama o un disseny previ del projecte per evitar modificacions o revisions posteriors un cop el projecte està enllestit. Modificar o revisar un projecte fet, en producció, és més costós en termes de temps i dedicació que no pas en el moment previ al desenvolupament. És més fàcil esborrar els esquemes, guions, dibuixos fets a llapis que no pas modificar el codi i disseny definitiu del lloc web.

D'aquesta manera, el disseny visual de les pàgines del lloc web també ha de passar per aquest procés d'esborrany. Aquest procés és conegut com Wireframing, és a dir, aquella activitat orientada a la creació àgil de prototips dels dissenys de cadascuna de les pàgines web d'un projecte. Aquests prototips presenten la particularitat que focalitzen l'atenció en els aspectes visuals generals (composició i disposició dels diferents elements principals a l'espai web,…) que no pas en els particulars.

Els prototips acostumen a ser en una gamma reduïda de grisos. Això us estalviarà distraccions a l'hora de triar, per exemple, els colors més adients per la pàgina web. Abans de seleccionar la paleta cromàtica, la tipografia i altres recursos visuals, és preferible determinar les mides de la pàgina web, les divisions interiors de les pàgines, les mides de cada divisió, el contingut general de cada divisió, quins elements -els més importants- i on apareixeran. En definitiva, posar ordre a les diferents idees visuals i, sobretot, ajudar-vos a plasmar allò que voleu comunicar.

Quins elements han d'aparèixer al prototip?

Si bé cada pàgina té un objectiu particular i, per tant, uns elements propis (per exemple, el formulari de contacte només apareixerà a la pàgina de contacte), és cert que el conjunt de les pàgines del lloc web comparteixen uns elements generals. Fem una llista d'aquests elements:

  • Títol de la pàgina
  • Logotip del projecte
  • Navegació principal i secundària
  • Aspectes legals d'autoria
  • Blocs informatius

Aquests elements responen al que s'anomenen *patrons* de la web. Si heu navegat per diferents llocs web, segur que heu detectat que la majoria dels llocs web els tenen en comú. Per exemple, en el cas dels blocs, podeu diferenciar els següents patrons:

  • Capçalera: correspon a una primera divisió, horitzontal, de la pàgina i acostuma a presentar en primer lloc el títol de la web i el logo. Sovint conté el menú de navegació principal.
  • Àrea principal: l'àrea principal normalment està dividida en dues parts ben diferenciades. La primera columna sovint s'utilitza com a barra lateral o navegació secundària. La segona columna, d'una mida més gran que la primera, correspon a l'espai d'exposició dels continguts que, en el cas d'un bloc, correspondria a la seqüenciació dels articles.
  • Peu de pàgina: conté la informació de drets d'autoria i informació sobre el lloc web.

Aquestes patrons o similituds en els dissenys web es repeteixen normalment degut a que així, els internautes poden extreure clarament els continguts principals de la web: se'ls facilita la identificació de les diferents regions de la pàgina i, d'aquesta manera, aconsegueixen trobar allò que busquen de forma ràpida i àgil, sense haver de voltar molt. Es usuaris habituals i els no tant avesats a la navegació pels blocs i webs mai esperaran que un menú de navegació principal aparegui al peu de pàgina i, d'altra banda, tampoc comprendrien que la informació sobre els drets d'autor s'ubiquessin a la capçalera.

Eines per a la creació de prototips

En general, és més que suficient un treball fet a llapis i paper, però alguns dissenyadors s'estimen més treballar amb eines que els facilitin aquest tasca pel caràcter del projecte (per exemple, un desenvolupament on participin més d'un dissenyador o dissenyadora). Aquí teniu duess eines, les dues totalment funcionals en línia.

JumpChat

URL: http://www.jumpchart.com

jumpchart.jpg

Jumpchart és un servei molt complert i professional de creació de prototips de disseny web. A diferència de la resta de serveis, així com la pràctica del dibuix amb llapis i paper, Jumpchart us permet un creació acurada de la representació del prototip, fet que us ajudarà a veure amb més claredat el resultat final. En aquest sentit, Jumpchart funciona com un gestor de continguts (CMS): podeu crear pàgines, enllaçar-les entre elles per verificar-ne la navegació entre elles, omplir els elements de la pàgina de contingut (text i imatges), agrupar els elements, etc., i tot això sense restar usabilitat en la manipulació de l'aplicació.

screenshot02.jpg

Balsamic Mockups

URL: http://www.balsamiq.com/

balsamiq_logo1.jpg

Balsamiq Mockups és una eina que juga a simular digitalment l'activitat del llapis i paper i, per tant, vol aprofitar els avantatges que l'eina en línia aporta: permet duplicar els elements de la pàgina sense haver de dibuixar-los un altre vegada, facilita el treball col·laboratiu sense que tingui cap importància la situació geogràfica o distància entre els participants, també permet capturar l'estat de la feina… La interfície d'utilització és senzilla, no cal cap aprenentatge previ, ja que és molt intuïtiva i usable.

Cada element disponible de l'aplicació es pot redimensionar, moure lliurement per l'àrea de treball, agrupar amb altres elements, duplicar… Cada element té unes característiques -mínimes- que poden ser editades, com ara el contingut textual d'alguns elements o el color de fons.

Si bé és una eina d'escriptori, també disposeu d'una versió en línia que us permet desar la captura del prototip a una imatge en format png.