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.[1]
Disseny web aplicat modifica
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.[2]
- utilitzant llenguatges de programació del costat servidor per generar la pàgina web.
Etapes modifica
Pel disseny de pàgines web hem de tenir en compte tres etapes:
- 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.[3]
- 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.[4]
- 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 modifica
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.[5] 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 modifica
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 modifica
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.[6]
Usablilitat modifica
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[7] on exposa els 10 principis que han de regir la usabilitat de qualsevol disseny web.[8] Aquests són:
- 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.
- 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.
- 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.
- Consistència i estàndards. Els usuaris no haurien d'haver de preguntar-se si diferents paraules, situacions o accions signifiquen el mateix.
- Prevenció d'errors. Fins i tot millor que els bons missatges d'error és un disseny acurat que evita que ens equivoquem.
- 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.
- 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.
- 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.
- 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ó.
- Ajut i documentació. Tot i que és millor si el sistema es pot utilitzar sense documentació, pot ser necessari proporcionar ajut i documentació.
Referències modifica
| A Wikimedia Commons hi ha contingut multimèdia relatiu a: Disseny web |
- ↑ Lester, Georgina. «Different jobs and responsibilities of various people involved in creating a website». Arts Wales UK. Arxivat de l'original el 2013-05-31. [Consulta: 17 març 2012].
- ↑ «W3C Markup Validation Service».
- ↑ Chapman, Cameron [30 octubre 2013]. The Evolution of Web Design. Six Revisions.
- ↑ Stone, John. «20 Do’s and Don'ts of Effective Web Typography», 16-11-2009. [Consulta: 19 març 2012].
- ↑ Building Internet Firewalls. United States: O’Reily & Associates, 2000, p. 804. ISBN 1-56592-871-7.
- ↑ «El disseny web enfocat a mobile first», 17-01-2022. [Consulta: 26 febrer 2022].
- ↑ Experience, World Leaders in Research-Based User. «Designing Web Usability: a Book by Jakob Nielsen» (en anglès). [Consulta: 26 febrer 2022].
- ↑ Sánchez Loro, Francesc. «Diferències entre disseny web i disseny gràfic», 26-02-2022. [Consulta: 26 febrer 2022].