Disseny web

El disseny web és una activitat que consisteix en la planificació, disseny i implementació de llocs web i pàgines web. No és simplement una aplicació del disseny convencional, ja que requereix tenir en compte qüestions tals com navegabilitat, interactivitat, usabilitat, arquitectura de la informació i la interacció de mitjans com l'àudio, text, imatge, enllaços i vídeo.

La unió d'un bon disseny amb una jerarquia ben elaborada de continguts augmenta l'eficiència del web com a canal de comunicació i intercanvi de dades, que dona possibilitats amb el contacte directe entre el productor i el consumidor de continguts, característica destacable del mitjà. El disseny web ha vist àmplia aplicació en els sectors comercials d'Internet especialment a la World Wide Web. Així mateix, sovint el web s'utilitza com a mitjà d'expressió plàstica en si. Artistes i creadors fan de les pàgines d'Internet un mitjà més per oferir produccions i utilitzar-les com un canal més de difusió de la seva obra.

Llibres de disseny web en una llibreria

Història

Tot i que el disseny web té una història força recent, es pot relacionar amb altres àmbits com el disseny gràfic, l'experiència d'usuari i l'art multimèdia, però és més precís considerar-lo des d'un punt de vista tecnològic. S'ha convertit en una part significativa de la vida quotidiana de les persones. És difícil imaginar Internet sense gràfics animats, diversos estils de tipografia, fons, vídeos i música. El web es va anunciar el 6 d'agost de 1991; al novembre de 1992, el CERN es va convertir en el primer lloc web que va començar a funcionar a la World Wide Web.

El 1989, treballant al CERN, Tim Berners-Lee va proposar crear un projecte global d'hipertext, que més tard va ser conegut com la World Wide Web. Entre 1991 i 1993 va néixer la World Wide Web. Les pàgines HTML de text es podien visualitzar amb un simple navegador de línia. El 1993, Marc Andreessen i Eric Bina van crear el navegador Mosaic. En aquell moment hi havia diversos navegadors, però la majoria d'ells estaven basats en Unix i, naturalment, estaven saturats de text. No hi havia un enfocament integral d'elements de disseny gràfic com ara imatges o sons. El navegador Mosaic va trencar aquest model. El W3C va ser creat a l'octubre de 1994 per "desencadenar tot el potencial de la World Wide Web mitjançant el desenvolupament de protocols comuns que en fomentin el desenvolupament i n'assegurin la interoperabilitat". Això va dissuadir qualsevol empresa de monopolitzar un navegador propietari i un llenguatge de programació, cosa que hauria pogut canviar la influència de la World Wide Web en conjunt. El W3C continua establint estàndards que avui es poden veure a JavaScript i altres llenguatges.

Des de principis del segle XXI, la xarxa s'ha integrat cada cop més a la vida de les persones. A mesura que això passava, les tecnologies web també van evolucionar. També hi va haver canvis significatius en la manera com les persones utilitzen Internet i hi accedeixen, i això ha canviat el disseny dels llocs web.

Disseny web aplicat

El disseny de pàgines web tracta bàsicament de realitzar un document amb informació hiperenllaçat amb altres documents i assignar-li una presentació per diferents dispositius de sortida (una pantalla d'ordinador, en paper, en un telèfon mòbil, etc.). Aquests documents o pàgines web poden ser creades:

• creant arxius de text en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.
• utilitzant un programa WYSIWYG o WYSIWYM de creació de pàgines.
• utilitzant llenguatges de programació del costat servidor per generar la pàgina web.

Etapes

Pel disseny de pàgines web hem de tenir en compte tres etapes:

1. La primera, és el disseny visual de la informació que es desitja editar. En aquesta etapa es treballa distribuint el text, els gràfics, els vincles a altres documents i altres objectes multimèdia que es considerin pertinents. És important que abans de treballar sobre l'ordinador es realitzi un pre-disseny sobre el paper mitjançant l'ús de wireframes. Això facilitarà tenir un ordre clar sobre el disseny.
2. La segona, és l'estructura i relació jeràrquica de les pàgines del lloc web, una vegada que es té aquest esbós es passa a 'escriure' la pàgina web. Per això, i fonamentalment per manipular els vincles entre documents, es va crear el llenguatge de marcació d'hipertext o HTML. Els enllaços que apareixen subratllats en aquests document i altres de Wikipedia són exemples d'hipertext.
3. La tercera, etapa consisteix en el posicionament en cercadors o SEO. Aquesta consisteix a optimitzar l'estructura del contingut per millorar la posició en que apareix la pàgina en els resultats d'una determinada cerca.

Fonaments

Un disseny web correcte implica conèixer com s'han d'utilitzar cadascun dels elements permesos en l'HTML, és a dir, s'ha de fer un ús correcte d'aquest llenguatge dins dels estàndards establerts per la W3C i en el que fa referència al web semàntic. Degut a la permissibilitat d'alguns navegadors web com Internet Explorer, aquesta premissa original s'ha perdut.

El web semàntic, per altra part, promou un ús lògic dels elements segons el significat pel que van ser creades. Per exemple s'utilitzarà l'element "P" per marcar paràgrafs, i "TABLE" per tabular dades. Això ha suposat una autèntica revolució en el disseny web perquè aposta per separar totalment el contingut del document de la visualització. D'aquesta manera s'utilitza el document HTML únicament para contenir, organitzar i estructurar la informació i les fulles d'estil CSS per indicar com es mostrarà aquesta informació en els diferents mitjans. Per lògica, aquesta metodologia beneficia molt l'accessibilitat del document. També existeixen pàgines dinàmiques, les quals permeten interacció entre el web i el visitant, proporcionant-li eines tals com cercadors, xat, sistemes d'enquestes, etc. i disposen d'un Panell de Control d'administració de continguts.

Accessibilitat

El disseny web ha de seguir uns requeriments mínims d'accessibilitat web que fagi que els seus llocs web o aplicacions puguin ser visitats pel major nombre de persones. Per aconseguir aquests objectius d'accessibilitat s'han desenvolupat pautes com les del W3C: Pautes d'accessibilitat al contingut Web 1.0 WCAG.

Disseny web responsive

El disseny web adaptatiu -Responsive Web Design- neix amb l'ús intensiu de tablets i mòbils com Iphone, Ipads o dispositius Android amb l'objectiu que el lloc web es mostri d'una forma o altra adaptant-se a la resolució de la pantalla. El seu ús no abasta únicament dispositius mòbils sinó que s'amplia a ordinadors de sobretaula que disposen de grans resolucions de pantalla.

Usablilitat

La usabilitat web (UX o user experience, en anglès) és el grau de facilitat d'ús que té una pàgina web per als usuaris que accedeixen i interactuen amb ella. Una de les missions principals del dissenyador web és fer que una pàgina web tingui un disseny web usable. Jakob Nielsen és considerat el pare de la usabilitat i, el 1999 va llançar al mercat el llibre Designing Web Usability: The Practice of Simplicity on exposa els 10 principis que han de regir la usabilitat de qualsevol disseny web. Aquests són:

1. Visibilitat de l'estat del sistema. El sistema, és a dir la web o aplicació, sempre ha de mantenir en tot moment els usuaris informats sobre el que està succeint, a través de missatges en temps i forma.
2. Coincidència entre el sistema i el món real El sistema ha de parlar l'idioma dels usuaris, amb paraules, frases i conceptes familiars per a l'usuari i no amb termes tècnics.
3. Control i llibertat de l'usuari. Donar la possibilitat als usuaris a corregir els seus errors en la navegació per la pàgina web. El botó de tornar enrere seria un bon exemple.
4. Consistència i estàndards. Els usuaris no haurien d'haver de preguntar-se si diferents paraules, situacions o accions signifiquen el mateix.
5. Prevenció d'errors. Fins i tot millor que els bons missatges d'error és un disseny acurat que evita que ens equivoquem.
6. Reconeixement en lloc de record. Hem de minimitzar en la mesura del possible que l'usuari hagi de recordar que ha fet prèviament fent visibles els objectes, les accions i les opcions.
7. Flexibilitat i eficiència d'ús. Els acceleradors, que no són vistos per l'usuari novaiorquès, sovint poden accelerar la interacció per a l'usuari expert, de manera que el sistema pot atendre tant usuaris inexperts com experimentats.
8. Disseny estètic i minimalista. En disseny web menys és més. Hem de mostrar la informació estrictament necessària perquè l'usuari no es perdi o marxi. Hem de conduir-lo per on ens interessa.
9. Ajudar els usuaris a reconèixer, diagnosticar i recuperar-se d'errors. Els missatges d'error s'han d'expressar en un llenguatge senzill (sense codis), indicar amb precisió el problema i suggerir constructivament una solució.
10. Ajut i documentació. Tot i que és millor si el sistema es pot utilitzar sense documentació, pot ser necessari proporcionar ajut i documentació.

Bibliografia complementària

• Diman, Paz. Design Sur Internet (en anglès). BooQs, 2009. ISBN 978-94-6065-004-8. 
• Ford, Rob; Wiedemann, Julius. Le livre des études de cas Internet (en francès). Taschen, 2010. ISBN 978-3-8365-1999-1. 
• Mayhew, Deborah J. The usability engineering lifecycle : a practitioner's handbook for user interface design. San Francisco, Calif. : Morgan Kaufmann Publishers, 1999. ISBN 978-1-55860-561-9. 
• Nielsen, Jakob. Usability Engineering (en anglès). Morgan Kaufmann, 1994-09-23. ISBN 978-0-12-518406-9. 
• Nogier, Jean-François. Ergonomie du logiciel et design Web: le manuel des interfaces utilisateur (en francès). Dunod, 2008. ISBN 978-2-10-051572-1. 
• Robbins, Jennifer Niederst. Introduction au Design Web: guide d'introduction à (X)HTML, CSS et les images pour le Web (en francès). O'Reilly, 2007. ISBN 978-2-84177-438-8. 
• Wiedemann, Julius. Web Design: Best Studios (en anglès). Taschen, 2005. ISBN 978-3-8228-4041-2. 
• Wiedemann, Julius. E-commerce (en francès). Taschen, 2006. ISBN 978-3-8228-4055-9.