Disseny Gràfic en el món digital

Introducció

L’aparició de la WWW ha suposat un nou camp per a explotar el disseny gràfic. La seva arquitectura i la inclusió d’imatges, vídeos, gràfics, elements interactius, etc. exigeixen un estudi del disseny gràfic més profund.

No obstant això, avui en dia, encara no s’han definit patrons estables per a la interfície digital, a diferència del grafisme imprès. Així doncs, aquest article pretén convertir-se en un petit manual gràfic que faciliti la construcció d’espais publicitaris digitals on el disseny gràfic i la tipografia siguin els seus protagonistes

Elements essencials de la interfície digital

Tot dissenyador que treballi en un suport digital ha de tenir en compte les diferents opcions de moviment i interacció de cada element que dissenya: Ha de tenir present com els usuaris interactuen i com flueix la informació en el dispositiu en què es consulta.

A més, hi ha altres factors tècnics a tenir en compte com les diferents resolucions de la pantalles, les possibilitats i limitacions dels navegadors i la visualització dels continguts segons els dispositius. Tot plegat afectarà tant en les tipografies escollides, els colors  corporatius i la distribució dels elements visuals.

A. Tipografies

En el disseny digital no totes les tipografies són vàlides: No tots els navegadors les renderitzen correctament; ja que moltes d’elles no han estat dissenyades per a la seva aplicació en format web.

Per altra banda, no tots els dispositius utilitzen el mateix tipus de Web Font.

Per exemple, les fonts TTF funcionen en la majoria dels navegadors, excepte Internet Explorer i IPhone. En canvi, les fonts EOT només funcionen amb Internet Explorer i els formats SVG només són vàlides per IPhone i Ipad. Per sort,  existeix el format WOFF, un format estàndard apte per a tot tipus de WebFont.

Malgrat tot, hi ha plataformes que faciliten l’accés a WebFonts. Això s’aconsegueix a través d’un CDN –content delivery network– o xarxes de lliure contingut per a que navegadors se les puguin descarregar a temps real i poder-les associar als fitxers web. Algunes plataformes lliures són Google Web Fonts, FontSquirrel o Open Font Library. [1]

Un cop entès aquest concepte, és important saber que qualsevol tipografia comunica per si sola certs significats mentals. Per aquest motiu, és bo combinar dos tipus de lletres diferents – una destinada per títols i l’altra per text- per tal d’aconseguir un estil únic en l’espai virtual.

Algunes de les tipografies més adequades per web, distribuïdes segons les seves categories són:

Serif

La tipografia serifa  té petites pinzellades que s’estenen des dels extrems de les lletres. No són gaire recomanables per a textos extensos, ja que recorden a articles científics. Tot i això, una correcta utilització dóna a la web i als espais publicitaris un estil clàssic i tradicional. Així doncs, s’aplica en títols, enllaços externs o paràgrafs curts.

Algunes de les tipologies més utilitzades són: Vollkorn, Merriweather, EB Garamond, Lustria i Libre Baskerville.

Sans serif

Les tipografies sense serifa es caracteritzen pel tall sec i net dels extrems de les lletres. La majoria de les pàgines utilitzen aquesta tipologia en el cos de text ja que gaudeixen d’una bona llegibilitat en pantalla i donen una sensació de modernitat. A més, són versàtils sense resultar avorrides.

Algunes d’elles són: Open Sans, Roboto, Lato, PT Sans, Ubuntu i Arimo.

 

Slab Serif

Es caracteritzen per la poca diferència entre les línies gruixudes i fines. Els acabaments solen ser tan gruixuts com les pròpies línies verticals i no solen tenir suport. Els tipus de lletra slab tenen aparença forta i rectangular. En ocasions els caràcters són d’amplària fixa, és a dir que tots ocupen el mateix espai  horitzontalment. Són unes tipografies molt recomanables per ser atractives, tenir força, precisió i conservar el toc clàssic d’una serifa tradicional. En combinació amb una de les anteriors sense serifa donen un resultat molt convincent. Així doncs són molt útils per títols, i enllaços de navegació, tot i que cada cop més s’utilitzen en el cos textual.

Algunes de les més sol·licitades són: Bitter, Arvo, Josefin Slab, Rokkitt, Stint Ultra Expanded i Roboto Slab.

Manuscrites

És una tipologia de tipografies que cal utilitzar-la correctament: Poden resultar perfectes per a títols o frases curtes, però no són prou llegibles per en el cos del text. Essencialment transmeten personalitat com: diversió, elegància, modernitat, antiguitat, etc.

Algunes de les tipos manuscrites  més utilitzades són: Sacramento, Pacifico, Grand Hotel, Damion, Yellowtail i Satisfy.

Decoratives

Les tipografies decoratives solen ser amenes i ajuden a animar l’espai web; dotant-lo de més caràcter. Tot i això cal utilitzar-les amb cura; sobretot en webs i espais publicitaris professionals. Algunes de les més freqüentment fetes servir són: Amatic SC, Courgette, Lobster, Rye, Montserrat, Capriola i  Cutive [2]

 

Després d’aquesta petita explicació de cadascuna de les famílies tipogràfiques, i tal i com diu Urbanfonts:

La millor tipografia pel món digital és aquella que capta l’atenció dels internautes, no pel seu estil, sinó pel seu missatge.

B. Colors

L’àmbit interactiu treballa amb colors RGB -vermell, verd i blau- ja que són els que es projecten en les pantalles dels dispositius digitals.

A part, la psicologia del color pot ajudar a potenciar una marca; incrementant el nombre de vendes i guiar les visites a espais concrets de la web. Per aquest motiu, és important saber quin és el significat que hi ha al darrere de cada color i quines són les millors ocasions per fer-los servir.

3. Disposició dels elements 

La disposició dels elements i apartats en una pantalla determinarà la percepció de l’usuari, la lògica de la cerca d’informació, els camins que utilitzarà per moure’s i allò que llegirà-visualitzarà. Per això és important que en els dissenys interactius es tinguin en compte alguns principis de disseny gràfic:

• L’equilibri en l’expressió visual és la distribució de les parts d’un objecte per les quals s’arriba al repòs. El treball d’equilibri en el disseny visual es realitza seguint dos sistemes, la simetria i l’asimetria, i es pot observar de forma evident en la disposició de continguts, objectes i elements en la pantalla al llarg de tota una web.

• La composició està lligada a les qualitats dels objectes, la textura i la mida en relació al fons. L’aplicació d’aquest concepte en les pantalles web està directament relacionada amb la distribució dels elements i el com es juga amb el fons per tal de transmetre una sensació d’equilibri en la pantalla. Els principals elements poden ser textos, imatges, audiovisuals, etc. Tots ells s’han de disposar en pantalla d’una manera estructurada, rígida, coherent i atenent als criteris simètrics de pes dels objectes i enquadrament en al interfícies gràfica.

El treball en concordança d’aquests dos principis ajudarà a aconseguir la màxima eficàcia comunicativa en l’espai virtual.

Finalment, la simplicitat a nivell visual ens ajudarà a aconseguir la bellesa i el correcte accés a la informació. [4]

Aquí disposeu d’un petit tutorial en què s’ofereixen 9 recursos molt útils per a la construcció gràfica d’una pàgina web.

Conclusions

És evident que les tecnologies de la informació i la comunicació evolucionen de manera sistemàtica, i la seva importància es fa també patent dins l’entorn al disseny.

Actualment, les webs són l’aparador visible de tota informació digital, motiu pel qual s’ha d’integrar tècniques de comunicació visual i de disseny cognitiu i gràfic per tal de captar l’atenció dels usuaris.

A més, el disseny juga un paper fonamental en el procés d’innovació, en els beneficis econòmics i en la competitivitat de les empreses. Per aquest motiu, és important aconseguir solucions eficaces i de qualitat per complementar i rendibilitzar les accions de comunicació corporatives i promocionals en l’àmbit digital.

Aquí disposeu d’una presentació prezi que resumeix tot l’anteriorment explicat.

Bibliografia

[1] NUWA: Agència digital. “Impressió i interactivitat dos mons antagònics?” [en línia]. A: Vols estar al dia de les nostres aventures?. Reus: NUWA: Agència digital, 5 novembre 2015.< https://www.nuwa.cat/ca/post/impressio-i-interactivitat-dos-mons-antagonics> (Data de consulta: 8/04/2016)

[2] IRIBARREN, Lucía. “Elige la tipografía para tu web” [en línia]. A: JIMBO blog. 12 decembre 2014. <http://es.jimdo.com/2014/12/12/elige-la-tipograf%C3%ADa-adecuada-para-transmitir-el-mensaje-correcto-en-tu-p%C3%A1gina-web/> (Data de Consulta: 8/04/2014)

[3] BOWMAN, Dawn. “Psicología del color en el diseño web” [en línia]. A: JIMBO blog. 10 febrer 2015. <http://es.jimdo.com/2015/02/10/psicolog%C3%ADa-del-color-en-el-dise%C3%B1o-web-parte-1/> (Data de Consulta: 9/04/2014)

[4] GRANÉ i Oró, Maria; BARTOLOMÉ Pina, Antonio R. El disseny d’entorns web d’ús educatiu. De les propostes expertes a les percepcions del professorat. Universitat de Barcelona. Barcelona: Departament de Didàctica de l’Educació Visual i Plàstica, 2009. [versió pdf] (Data de consulta: 9/04/2016)

HEALY, Nick. “Fonts and How They Represent Your Brand.” [En línia]. A: MASCOLA GROUP. Insights blog. New Haven, CT, USA: Mascola Group, 21 octubre 2015. <http://mascola.com/insights/fonts-and-how-they-represent-your-brand/> (Data de consulta: 10/04/2016)

FORSSMAN, Friedrich / WILLBERG, Hans Peter. Primeros auxilios en tipografía. Consejos para diseñar con tipos de letra. Barcelona: Gustavo Gili.