En què es diferencia el disseny web i el disseny gràfic?

Què és el disseny gràfic?

El disseny gràfic consisteix en l'ús de la comunicació visual per transmetre missatges concrets a un col·lectiu concret amb un objectiu determinat. Els dissenyadors gràfics elaboren aquesta comunicació visual mitjançant l'ús i combinació de gràfics, tipografies, il·lustracions i imatges amb l'objectiu de comunicar una idea. Així han de dominar des de la teoria del color, jerarquia visual, composició visual i l' ús de la tipografia.

L'ús de la tecnologia ha suposat un salt qualitatiu en la vida dels dissenyadors gràfics que disposen de potents programes d'edició digital com el pack Adobe que és el més popular amb la seva triada Photoshop, Illustrator i InDesign. La tecnologia ha obert noves opcions al disseny gràfic que evoluciona del paper a altres suports com el digital. I aquí és on apareix el disseny web.

Què és el disseny web?

El disseny web consisteix, com bé indica el seu nom, en el disseny de pàgines web. És important detallar la paraula disseny i no creació. Si en el disseny gràfic apareixen les figures del maquetador i de l' impressor com a figures que acaben convertint el disseny visual creat pel dissenyador en un cartell o un llibre; en el disseny web aquestes figures es converteixen en la del maquetador web o programador web que són imprescindibles per convertir el disseny web en una pàgina web pròpiament. El disseny web s'acaba en la creació visual del que serà la pàgina web, convertir-la en pàgina web correspon als maquetadors i programadors web.

El disseny web té la base en el disseny gràfic i un dissenyador web ha de tenir els mateixos coneixements tècnics i teòrics. Tot i això, hi ha una diferència clau: el suport ja que en aquest cas es treballa directament sobre pantalla. Parece un tema menor, però suposa un impacte immens en la conceptualització i aplicació del disseny, és per això pel que considerem el disseny web com una disciplina en si mateixa.

Per a més informació, consulteu l'article "Què és el disseny web?".

Grans diferències

Habilitats tècniques

Com ja hem dit, els dissenyadors web -com els dissenyadors gràfics, també necessiten dominar els fonaments del disseny. Han de dominar l' ús la tipografia, el color i la jerarquia i ambdós tipus de dissenyadors han d' estar al dia de les noves tendències en el món del disseny.

A nivell tècnic els dissenyadors gràfics i dissenyadors web solen utilitzar els mateixos programes o programari de disseny, però, el dissenyador web ha d'estar familiaritzat amb els llenguatges de programació, concepte de SEO, usabilitat web i arquitectura web. Tot plegat suposa limitacions al disseny web, limitacions o restriccions tècniques que van des del temps de càrrega als requisits necessaris per poder realitzar posteriorment un bon posicionament web.

Paper vs pantalla

Si el disseny gràfic s'explica sobre múltiples suports (paper, metall, etc) el disseny web treballa amb un únic suport: la pantalla. Tanmateix, si bé els suports del dissenyador gràfic són múltiples sempre tenen una superfície delimitada, però en el cas del dissenyador web és el suport únic, però altament variable. Un exemple: quan un dissenyador gràfic dissenya un cartell, sap que les mesures del cartell seran sempre les mateixes i pot treballar "al píxel". Per contra, un dissenyador web no sap mai en quina pantalla se'n va a mostrar el seu disseny web: en una pantalla de mòbil? en una pantalla de tablet?, de pc? i a quina resolució?... és el que s' anomena treballar sobre un suport líquid. L'ús del disseny web responsive o líquid ha facilitat molt la vida als dissenyadors, que poden crear un disseny que s'adapta als web i les pantalles de forma natural.

El disseny web és dinàmic, el disseny gràfic és estàtic

Una de les grans virtuts del disseny web és que es basa en la interacció, interactuem amb botons, usem cercadors, naveguem per diverses pàgines web, arrosseguem elements, despleguem menús, utilitzem gràfics en moviment i vídeos en una mateixa pàgina web. El disseny gràfic és menys interactiu, pots mirar-lo, però no canvia quan interactues amb ell.

Tot això ens dirigeix al concepte d'usabilitat web que ens va a condicionant profundament un disseny web. Hem d'estudiar prèviament l'experiència de l'usuari i com situar els elements gràfics per facilitar una navegació intuïtiva a través del lloc web.

L'ús de la tipografia

Per sort queda lluny l'haver de treballar amb fonts de sistema i avui dia es pot utilitzar gairebé totes les fonts en el disseny web, de fet, hi ha fins i tot llibreries com Google Fonts ideades per al seu ús en web. Dit això, cada navegador renderitza de forma diferent una mateixa font i no podem aconseguir que una font en una mateixa pàgina web es vegi exactament igual en tots els navegadors.

El concepte d'usabilitat o UX

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 està considerat el pare de la usabilitat i, el 2000 va llançar al mercat el llibre Designing Web Usability on exposa els 10 principis que han de regir la usabilitat de qualsevol pàgina web.

Aquests principis 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. Per exemple, quan algú envia un formulari dissenyar una resposta de formulari enviat i així fem saber a l'usuari que la seva acció s'ha executat correctament. Les barres de càrrega o estats en processos de pagament són altres exemples habituals.

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. Hem de dissenyar la informació i mostrar-la de forma lògica, natural i sobretot intuïtiva. L'ús d'un dibuix d'un carret de supermercat com a carret de la compra a les botigues online n'és el millor exemple.

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. Hem d'oferir sempre a l'usuari un disseny web que contempli punts de sortida dels processos que està executant.

4. Consistència i estàndards

Els usuaris no haurien d'haver de preguntar-se si diferents paraules, situacions o accions signifiquen el mateix. Un dels grans reptes com a dissenyadors és saber usar de forma habitual les convencions o recursos habituals de les pàgines web. Per exemple, situar els menús de navegació a la part superior de la pàgina web i, en el cas del mòbil, utilitzar el menú hamburgesa de tres línies. Tothom espera trobar el menú i el carret de la compra a la part superior dreta.

5. Prevenció d'errors

Fins i tot millor que els bons missatges d'error és un disseny acurat que evita que ens equivoquem. Un bon disseny web ha d'eliminar les condicions propenses a errors o comprovar-les i presentar als usuaris una opció de confirmació abans que es comprometin amb l'acció. Un exemple seria l'ús d'autocompletar als cercadors o, en el cas de formularis, verificar que els camps s'omplen correctament.

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. L'usuari no hauria d'haver de recordar informació d'una part de la pàgina web a una altra. Les instruccions d' ús del sistema han de ser visibles o fàcilment recuperables sempre que sigui necessari. L'ús d'autocompletar de formularis n'és un bon exemple.

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. Permeti als usuaris adaptar les accions freqüents. L'ús de cercadors amb opció de recerca avançada és un exemple, a nivell de disseny web hem de considerar posar desplegables de cerca avançada als cercadors.

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. Per exemple això és especialment important en els funnels o embuts de venda a les botigues online. Per això en els carrets de la compra solem evitar punts de fuga. Cada unitat addicional d' informació en una pàgina web competeix amb les unitats d' informació rellevants i disminueix la seva visibilitat relativa.

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ó. Si li donem a un usuari un error de 404 no li dirà gaire, hem de dissenyar un missatge de pàgina no trobada.

10. Ajut i documentació

Tot i que és millor si el sistema es pot utilitzar sense documentació, pot ser necessari proporcionar ajut i documentació. Qualsevol informació d' aquest tipus ha de ser fàcil de trobar, concreta i no extensa. Un exemple és l'ús de tooltips (també anomenat descripció emergent o text alternatiu) en els menús d'una pàgina web, l'ús de seccions de ¿com funciona? o de preguntes freqüents a la pàgina web.

Conclusions

És important destacar que un dissenyador web tingui els coneixements tècnics i la base teòrica d'un dissenyador gràfic com a punt de partida per després aprofundir en les tècniques més pròpies del disseny web. Tanmateix el dissenyador web ha de dominar conceptes com UX o usabilitat web, disseny web responsive o l'ús de la interacció. És doncs sempre recomanable que una pàgina web sigui dissenyada per un dissenyador web que, a banda de comunicació, entengui la varietat de temes tècnics (velocitat de càrrega, arquitectura del web, SEO, usabilitat, etc) que tenen un impacte directe en el correcte disseny de la pàgina web.