Title: Disseny visual
Course: CFGM. Sistemes microinformàtics - Curs 2019/20 > Section: 2. DISSENY D'INTERFÍCIES

Enllaços d'interès:

- http://www.appdesignbook.com/es/contenidos/diseno-visual/

Introducció: conceptes bàsics

La finalitat d'aquestes guies és establir a tots els dissenyadors una sèrie de regles comuns en funció del sistema operatiu final de la nostra app que garanteixin uns mínims de qualitat, llegibilitat i usabilitat.

En la creació d'interfícies d'usuari hi ha aspectes que cal tenir en compte, des de la mida mínima dels botons, de la tipografía i de les icones a si els diferents components han d'aparèixer a l'esquerra o a la dreta, per exemple.

Teniu una guia completa de disseny d'apps per a dispositius mòbils al següent enllaç.

Per crear un bon lloc web o una bona aplicació és imprescindible saber comunicar les idees de manera clara i nítida. No s’han d’incloure blocs d'informació massius sinó optar per incloure imatges amb textos breus. La raó d’això és perquè el públic en general no és processador de dades sinó consumidors visuals.

Podríem tenir els millors elements gràfics, haver escollit els colors i les tipografies més adequades però si la composició global no és bona no servirà de res.

Per tant és important dir que saber estructurar la composició global és el primer que ens ha de preocupar quan creem una aplicació o una pàgina web.

Però, què entenem exactament per composició?

En termes molt senzills és on tots els elements que integraran la nostra creació s’uneixen per formar un tot. És quan les topografies, les imatges, els gràfics vectorials i els colors , s’uneixen per formar un disseny cohesionat.

Una composició correcte voldrà dir que hem organitzat, distribuït i compilat el disseny global de manera que no només es vegi bé sinó també, de forma que sigui funcional i que sàpiga transmetre allò que volem.

En els següents enllaços trobareu les guies de disseny corresponents als tres sistemes operatius actuals.

Enllaços d'interès:

- Android
- IOS
- Windows Phone

A continuació trobareu els quinze aspectes principals que us ajudaran a aconseguir obtenir una bona composició visual.

Trobar el centre d’interès

Un element clau per a qualsevol composició és que tingui un punt focal fort, ja que ajuda a conduir als usuaris cap a les zones importants.

Quan triem el centre d’interès és bàsic tenir present que l'objectiu principal sempre és la comunicació. Tant si volem comunicar una idea, una informació o simplement un sentiment o una emoció cal assegurar-se de triar el centre d’interès de la millor forma.

Enllaços d'interès:

- Retícules i icones de llançament

Conduir la mirada a llocs concrets

Igual que assenyalem alguna cosa quan voleu que la gent la vegi, posicionant certes línies i formes de manera determinada, podrem controlar el punt de vista principal del disseny.

Aquestes línies i formes principals ajuden i complementen el centre d’interès cap a punts d'informació secundaris. Posicionant i ajustant aquestes línies i formes no només podrem dirigir els ulls cap al punt focal del nostre disseny sinó també cap a la resta.

Escala i jerarquia

L’escala i la jerarquia visual de tots els elements són els fonaments creatius que realment poden ajudar a realçar o per contra destrossar el disseny.

La jerarquia per la seva banda fa referència a la disposició i el disseny dels elements per tal de ressaltar visualment la importància. Per tant sempre que un element sigui més important serà també més gran que un altre element menys important el qual serà més petit.

La jerarquia és especialment important quan es tracta posar blocs de text. Si volem tenir un text ben estructurat és important comprovar que la jerarquia tipogràfica que farem servir sigui coherent amb els nivells d’importància que volem atorgar a cada text.

Pel que fa a l’escala és important mantenir una bona estructura que estigui en consonància a la importància dels diferents elements.

L’escala s’utilitza com a eina de jerarquia visual extraordinària per guiar un espectador per veure una part concreta. Com que la mida és una de les preocupacions més importants d’un dissenyador és imprescindible correlacionar la mida amb el seu significat específic dins el disseny corresponent atraient l’atenció cap a alguns elements segons el grau d’importància dins la composició. És també una bona eina per establir les proporcions dels diferents elements que composen el disseny.

Equilibri dels elements

L'equilibri és important en molts aspectes de la vida i el disseny no és cap excepció.

Quan parlem d’equilibri hem de diferenciar-ne dos tipus: l’equilibri produït per la disposició simètrica dels elements i l’equilibri produït per la compensació dels pesos visuals

L’equilibri simètric equilibra el disseny amb simetria. En reflectir certs elements de disseny d’esquerra a dreta o de dalt a baix crearem forts equilibris al temps però que també farem que els nostres dissenys siguin tremendament estàtics.

L’altre tipus d’equilibri ,es completament asimètric el qual compensa el desequilibri inicial amb l’ús de colors, mesures, canvis d’escala,... per aconseguir compensar els elements visualment. Amb aquest equilibri s’aconsegueixen composicions molt dinàmiques i amb molt interès visual.

Una bona tècnica per ajustar força l’equilibri asimètric és pensar que cada element té un pes. Els objectes més petits pesarien menys que els objectes més grans de la mateixa forma que els elements de colors saturats pesarien més que elements de color suaus.

Elements complementaris

Igual que passa amb els colors complementaris passa amb elements d’un disseny, cal que es complementin.  Un element bàsic per obtenir una bona composició és seleccionar acuradament cada element de manera que cadascun d’ells complementi el conjunt i no sigui protagonista per sí mateix.

Un error habitual és emprar imatges que no es complementen. Per ajudar a evitar això acostuma a anar bé emprar imatges fetes pel mateix autor. Aquesta és una manera senzilla d’assegurar que tant les imatges com els gràfics vectorials siguin força coherents ja que probablement tindran el mateix estil gràfic.

Les imatges

Les imatges i els gràfics són el reclam principal. Els usuaris acostumen a quedar atrets per les imatges i pels gràfics especialment la primera vegada que visiten una web o bé obren una aplicació. Tot i que la ubicació de les imatges depèn bàsicament del disseny de tota la pàgina acostuma a ser positiu col·locar una imatge de mida adequada a la zona superior de la jerarquia visual.

Tipografia

Una de les millors tècniques per obtenir un disseny atractiu és establir la jerarquia visual a través de la tipografia. Cal organitzar la jerarquia visual considerant elements com la mida, l'estil, el color i el pes de les tipografies.

Quan utilitzem la tipografia a la pantalla hem de tenir en compte algunes coses si volem obtenir resultats que proporcionis un accés clar als continguts al temps que mostrin una interfície clara i llegible.

Llegibilitat

La llegibilitat consisteix a organitzar les paraules i els grups de paraules de manera que els usuaris puguin accedir fàcilment al contingut i sense que aquest perdi el seu sentit.

És important saber què fa que una tipografia sigui més llegible que una altra. En triar una determinada tipografia cal fer-nos algunes preguntes bàsiques: a quina mida s’utilitzarà el text?, apareixerà com a cos serà un títol?, es combinarà amb alguna altra tipografia?,  el seu aspecte servirà per complementar el tema?

Algunes fonts són bastant flexibles, inclouen diversos pesos i es poden utilitzar de diverses maneres. Altres estan més restringits, dissenyats per ser utilitzats molt específicament. Per exemple la Garamond és una font que va ser dissenyada per ser altament llegible en impressions de textos de mida gran. L’Arial va ser creada com a substitut de l’Helvètica en PCs perquè es pogués mostrar i imprimir correctament sense haver de comprar la llicència de Helvètica. Hi ha també tipografies creades preferentment per usos de pantalla, com ara la Verdana o la  Azura que és una font dissenyada específicament per a la lectura de text en pantalla.

Tracking i Kerning

El tracking o es espaiat entre lletre és l’augment o la disminució constant de la distància entre les formes de cadascuna de les lletres d’una paraula o d’un bloc de text. Aquest espaiat no s’ha de confondre amb el kerning, que es refereix a ajustar la distància entre dues lletres consecutives les quals per alguna raó no es visualitzen correctament.

L’espai entre lletres o tracking es pot utilitzar per ajustar la densitat d’un bloc de text o d’un títol o subtítol individual. És evident que modificar l’espai entre lletres afecta la llegibilitat del text. Una variació massa elevada o deixar massa poc espai entre lletres i la llegibilitat del text quedarà minvada. No obstant això, hi ha moments en què calen espais entre lletres.

També, depenent de la tipografia emprada, serà necessari augmentar o disminuir lleugerament el Kerning entre algunes lletres consecutives d’una paraula.

Colors i contrastos

El color és una eina que es pot utilitzar per captar l'atenció dels usuaris. Amb l’ús de colors contrastats podrem afegir fàcilment un toc emocional. És interessant observar que el color pot afectar fàcilment a tot, des de la marca comercial al simbolisme específic.

Podem optar per l'ús de colors per ajudar a classificar informacions diverses dins de la jerarquia visual. En aquest sentit el contrast ens serà una eina útil tant per ressaltar com per rebaixar la importància d’alguns elements. En augmentar el contrast o utilitzar colors saturats farem que un element destaqui i cridi l'atenció. De la mateixa manera, baixant el contrast, farem que un element passi molt més desapercebut.

Una bona tècnica per combinar colors de forma correcta és recórrer a la teoria del color. Aquesta teoria ens permet conèixer les diferents esquemes de color, apuntant a l'atractiu estètic i la comunicació eficaç d'un missatge tant a nivell visual com psicològic.

La teoria del color moderna propugnada per Harald Küppers es basa en l’ordre geomètric de la roda de colors d'Isaac Newton la qual mostra dues mescles de color (aditiva i sustractiva) i tres categories de colors: els colors primaris, els secundaris que són els geomètricament oposats als primaris i els intermedis o terciaris creats per la barreja de primaris i colors secundaris.

Tots aquests colors es poden combinar per formar un dels quatre principals esquemes de color que ens permeten aconseguir dissenys harmònics. Aquests esquemes són:

Combinació anàloga: basat en tres colors situats consecutivament l'un al costat de l'altre en la roda de colors.

Combinació complementària: un o més parells de colors que quan es combinen es compensen entre si pel fet de produir un alt contrast entre ells

Combinació triàdica: fa servir tres colors situats a la mateixa distància entre ells dins la roda

Combinació tetràdica: fa servir quatre colors els quals formen dos conjunts d’un parell de colors cadascun de colors complementaris

Temperatura de color

La temperatura de color és una altra consideració fonamental en el disseny. Distingint entre colors càlids, freds i neutres tindrem el poder de potenciar respostes emocionals als usuaris.

Els colors càlids són aquells amb tons grocs i vermells. Els colors freds tenen tons blaus, verds o porpres. Els colors neutres inclouen els terres, els grisos, el blanc i el negre.

Si bé aquestes agrupacions de colors són vàlides en sentit general, les respostes emocionals als diferents colors es poden veure afectades pel gènere, l’edat i els orígens socials i culturals , és per això que la identificació del públic objectiu és vital per poder ajustar l'impacte positiu de l'ús del color en un disseny, sinó també per prevenir-ne el fracàs pel fet de fer ús de colors amb significats diferents en cultures diferents.

Repetició d'elements

La repetició és un factor important quan es tracta d’aplicacions de diverses pàgines. Si necessitem assignar un significat unitari a diversos elements la repetició ens ajudarà a crear un conjunt de pàgines cohesionades.

Repetir elements específics d’una secció i aplicar-lo a altres seccions ajuda a crear unitat. Una tipografia es pot aplicar a més d’una pàgina o un motiu gràfic es pot utilitzar més d'una vegada.

Deixar aire

Els espais buits o espais en blanc s’utilitzen estratègicament per ajudar a augmentar la claredat visual i comunicativa, equilibrant les parts més complicades i ocupades de la composició amb espais que deixen respirar al disseny.

És necessari compensar els elements i els espais blancs de forma que els usuaris reconeguin els diferents conjunts d’elements i puguin comprendre la forma en què es troben organitzats entenent els que estan i els que no estan relacionats entre ells.

Alinear i ordenar els elements

Alinear els elements de manera lògica ajudarà a crear ordre a l’aplicació. L'alineació és molt important quan es tracta de blocs de text. Hi ha moltes maneres d’alineació però una bona regla general per a les peces més llargues és mantenir l’alineació a l’esquerra, el que es coneix com alineació en bandera ja, per a la nostra cultura, que és l’alineació més fàcil de llegir.

Aplicar la regla dels terços

La regla de terços és una tècnica senzilla on és divideix l’espai de visualització en tres files i tres columnes. En els punts d’encreuament de les línies verticals i horitzontals seran els punt on col·locar els centres d’interès.

L’ús de la regla de terços és una bona forma de plantejar la composició del disseny ja que ofereix una guia ràpida per situar, ni que sigui de forma provisional, els elements principals.

Així doncs iniciar el disseny fent una graella de tres per tres pot ajudar-nos a ordenar i disposar els elements de manera lògica així com a tenir una idea molt més definida d'on hi haurà els punts focals del disseny.