Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 1

Llenguatge visual
i sintaxi de la imatge
1. Elements i principis del llenguatge visual

1.1. Elements del llenguatge visual

1.1.1. El Punt

1.1.2. La Línia

1.1.3. El Pla o Contorn

1.2. Principis de sintaxi de la imatge

1.2.1. La Direcció

1.2.2. El Color

1.2.3. La Textura

1.2.4. L’escala

1.2.5. La Dimensió

1.2.6. El Moviment

2. Tipografia: anatomia, classificació, i composició

2.1. Anatomia tipogràfica

2.2. Classificació de famílies tipogràfiques

2.3. Composició tipogràfica: disposició dels elements en la pàgina

2.3.1. La mida

2.3.2. Kerning i traking

2.3.3. Interlineat

2.3.4. Alineació

2.3.5. Elecció de tipografies

2.3.6. Combinacions tipogràfiques

2.3.7. Directoris tipogràfics

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 2

1. Elements i principis
del llenguatge visual
1 2

1.1. Elements del llenguatge visual

Els elements bàsics del llenguatge visual són: el punt, la línia i el pla
o contorn. 3 4

1.1.1. El Punt
El punt és la unitat més simple i mínima de la comunicació visual.
A partir del punt es poden crear tota una varietat d’efectes visuals, 5 6
essencialment segons la seva distribució en un pla de representació:

• Situat al centre, serà sinònim de calma (fig. 1)

• Desplaçat dins el pla de representació, generarà tensió (fig. 2)

7 8
• Alternat al llarg del pla, permet crear estructures de repetició
que suggereixen noves formes (fig. 3)

• Mentre que, distribuït aleatòriament, pot produir sensació de

fluïdesa o tenir un caràcter orgànic (fig. 4)
9 10

1.1.2. La Línia
És la disposició consecutiva d’una sèrie de punts a una distància
constant. La seva expressió més senzilla és la línia recta. La lína, ge-
nera també tot un seguit d’efectes visuals discursius, a partir de la
seva disposició en el pla de representació:

• Una línia vertical dóna sensació de lleugeresa i altitud (fig. 5)

• En horitzontal, transmet passivitat i pesadesa (fig. 6)

• En diagonal, aporta dinamisme. Segons la seva direccionalitat i

depenent del context cultural en què sigui interpretada es con-
sidera ascendent (fig. 7) o descendent (derivant en connotacions
positives i negatives respectivament).

• Una línia corbada sempre serà molt més dinàmica que una sim-
ple diagonal (fig. 8)

• Mentre que una línia en forma espiral expressa indubtablement

un moviment energètic (fig. 9)

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 3

1.1.3. El Pla o Contorn

En parlar d’aquest tercer element bàsic, cal diferenciar dues accep-
cions:
10 11

• El pla entès com a espai de representació on es desenvolupa el

grafisme i es delimita l’espai de creació

• El contorn entès com la forma bàsica que emmarca d’altres ele-

ments visuals
12 13

Per tant, un pla pot contenir diversos contorns però no a la inversa.

Un pla o contorn pot presentar-se en una gran varietat de formats i

disposicions, essent les més representatives les següents: 14 15

• El cercle, com que no té principi ni fi, simbolitza infinitud i con-

centra la nostra atenció cap al seu centre. És harmoniós perquè,
a diferència del quadrat o el triangle, no ‘empeny’ cap a cap di-
recció (fig. 10)
16 17

• L’el·lipse, que és més dinàmica que un cercle perquè tendeix

a una direcció. Col·locada verticalment sembla esforçar-se per
anar cap dalt i, en aquest sentit, suggereix inestabilitat (fig. 11). En
canvi, col·locada horitzontalment evoca repòs (fig. 12).

• El quadrat, en reposar sobre un dels seus costats i ser aquests tots

iguals, aporta sensació d’estabilitat, funcionalitat i tranquil·litat
(fig. 13). Amb tot, si el col·loquem recolzat sobre un dels seus vèr-
texs, l’efecte és de major tensió, doncs la seva estructura se sosté
en un únic punt d’equilibri (fig. 14).

• El rectangle és el format més comú en tant que la majoria de

formats de paper són rectangulars (el cas més evident és el del
sistema DIN). Si es disposa horitzontalment, sembla estable i se-
gur, tot i que també pesat i ample (fig. 15). En canvi, si es disposa
verticalment, es fa perceptivament més actiu, lleuger i estret (fig.
16).

• El triangle manifesta un fort caràcter direccional, ja que - per la

seva construcció - sempre ‘assenyala’ (fig. 17).

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 4

1.2. Principis de sintaxi de la imatge

1.2.1. La Direcció
Tots els contorns bàsics expressen tres direccions visuals bàsiques i
significatives:
18
• el contorn quadrangular, expressa la direcció horitzontal i la
vertical: aquestes dues direccions constitueixen una referència
primària basada en l’estabilitat.

• el contorn triangular, expressa la direcció diagonal: associada a la

inestabilitat, el dinamisme i la força visual

• i el contorn circular, expressa la direcció corba: que té una signi-

ficació vinculada a la repetició o la concentració

1.2.2. El Color 19

Característiques en relació a la llum

En relació a la forma en què els percebem i el seu suport, podem
establir una primera classificació dels colors en:

• Colors additius: són aquells que es creen a l’afegir llum (fig. 18).

Tots els colors visibles es poden formar a partir dels tres colors
additius primaris - que es corresponen als pics de sensibilitat
dels sensors de color de la vista humana - : el vermell, el verd i
el blau (RGB en les seves sigles angleses). Sumats en la mateixa
proporció, donen com a resultat el blanc. En cas que faltin els
tres, es produeix el negre.

La mescla de dos d’aquests colors en igual proporció produeix

els colors secundaris - cian, magenta i groc - que, al seu torn,
constitueixen el sistema de colors subtractius.

El sistema RGB és el propi dels monitors a color.

• Colors subtractius: són aquells basats en l’absorció de l’espectre

de la llum visible de la llum blanca (fig. 19).

Als colors secundaris se li afegeix el negre per conformar el sis-

tema CMYK, que és el que s’utilitza en impressió.

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 5

Característiques en relació a la temperatura

Una segona classificació possible del color, la podem generar a partir
de la sensació tèrmica subjectiva que se’ls atribueix. D’aquesta mane-
ra podem parlar de: 20

• Colors càlids: van del vermell al groc passant per taronges, ma-
rrons i daurats.

• Colors freds: van del blau al verd passant pels violetes.

21

Propietats del color

Els colors, segons la seva composició, presenten diferents propietats:

• Matís: És l’estat pur del color, sense negre ni blanc afegits. El ma-
tís és el que ens permet diferenciar entre colors com el verd i el 22

blau fent referència a una posició concreta dins el cercle cromà-

tic (fig. 20).

• Saturació: Indica la puresa o intensitat d’un color en relació a

l’ample de banda de la llum que estem percebent. Els colors més
purs de l’espectre cromàtic són els més saturats (fig. 21). 23

• Valor: La quantitat de blanc o negre que conté la mescla d’un

color defineix el seu valor (fig. 22).

Esquemes de color
24

Prenent com a base el cercle cromàtic, es poden definir una sèrie

d’esquemes de color:

• Esquema monocromàtic: Format per la variació de la saturació

d’un mateix color o matís. És útil per composicions harmonioses
o aportar subtileses (fig. 23). 25

• Esquema complementari: Basant en colors oposats del cercle

cromàtic. Útil per gran aconseguir un gran contrast, comporta el
perill de caure en composicions estridents si no domina un dels
colors (fig. 24).
26

• Esquema anàleg: Definit per l’ús de tres colors que es troben l’un
al costat de l’altre al cercle cromàtic. Hi ha certa harmonia dins
la diferència (fig. 25).

• Tríades: Resulta de situar un triangle en una posició determina-

da dins el centre cromàtic. És una combinació que pot semblar
dispersa si no hi ha un color dominant (fig. 26).

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 6

Efectes del color

El color i el seu significat, o les sensacions que produeix, no depenen
només de l’experiència individual sinó també d’impressions consen-
suades socialment. La psicologia del color s’ha encarregat de recollir
algunes de les interpretacions del color en una classificació que es
pot considerar de consens:

• Blanc: És perfecció, simbolitza la llum, la fe, l’ideal, el bé, el prin-

cipi, la cosa nova, allò net, la puresa, la veritat, la innocència, la
neutralitat, la intel·ligència, la ciència i la precisió, però també el
buit i allò que es desconeix

• Groc: Representa el sol, la llum, la maduresa, la calidesa, la cla-

redat, la planificació, la llei, l’optimisme, la sensibilitat, el luxe,
l’alegria de viure, la frescor, l’amabilitat, el canvi i l’extraversió,
però també atreviment, arrogància, enveja, mentida i amargor

• Taronja: Simbolitza l’alegria, l’eficàcia, la vivacitat, la diversió,

l’extraversió, l’excitació, l’exuberància, l’energia i l’activitat, però
també dóna idea de fanatisme i simbolitza aspror i prepotència

• Magenta: Representa l’idealisme, la gratitud, el compromís, l’or-

dre i la simpatia, però també l’esnobisme, l’arrogància i el do-
mini

• Vermell: És la vitalitat, l’alegria, l’activitat, l’energia, el dina-

misme, el temperament, la impulsivitat, la calidesa, la passió, la
temptació, l’excitació sexual, la voluntat de conquesta, l’entusias-
me per l’acció, l’excentricitat i el vigor, però també la tensió, el
perill, la violència, el caos, l’ira i l’odi.

• Violeta: Significa misteri, màgia, vanitat i extravagància, però

també prepotència i conflicte.

• Blau: Simbolitza la relaxació, la simpatia, la confiança, l’amistat,

la fiabilitat, el fet comunicatiu, l’harmonia, la satisfacció, la cal-
ma, el silenci, la passivitat, allò infinit, la netedat, l’esperança, la
ciència i el valor, però també transmet idees de fredor, malen-
conia o obstinació

• Verd: Simbolitza el vigor, la frescor, la tenacitat, el relaxament,

la natura, la naturalitat, la calma, la generositat, la salut i la con-
fiança, però també indecisió, mandra i impersonalitat

• Negre: És la resistència, la impenetrabilitat, la funcionalitat, su-

ggereix dramatisme i misteri, però també simbolitza la negació,
l’aïllament, la desesperança

• Gris: Indica neutralitat, reflexió, serietat, objectivitat, funciona-

litat i senzillesa, però també negativitat, incertesa, i desgràcia.

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 7

1.2.3. La textura
La repetició o multiplicació d’un mateix element en una superfície
és el que crea una textura. Una textura no ha de tenir necessària-
ment cap qualitat tàctil (encara que, a voltes, s’utilitzi per reemplaçar
el sentit del tacte a través de la vista), pot ser només òptica. En una
composició visual, la textura sol ser utilitzada com a estímul de l’ex-
periència sensitiva i enriquidora.

1.2.4. L’escala
Tots els elements visuals tenen capacitat per modificar i definir-se els
uns als altres, a aquest procés n’hi diem escala. En un principi l’escala
s’estableix mitjançant la mida relativa dels elements, però també po-
dem establir-la en funció del camp visual o l’entorn.
El factor més decisiu en l’establiment de l’escala ha estat sempre la
mesura de l’ésser humà, en aquest sentit, el disseny l’ha tingut sem-
pre en compte.

1.2.5. La Dimensió
Al món real, percebem la dimensió gràcies a la nostra visió estereos-
còpica biocular. En canvi, en un format bidimensional només som
capaços de fer-ho gràcies a la il·lusió reforçada a través d’efectes com
el clarobscur o la perspectiva.
La dimensió, com a principi visual, contribueix a la sensació de rea-
litat, ja que el món real, és dimensional.

1.2.6. El Moviment
El moviment forma part ineludible de la vida humana, represen-
tar-lo només és possible a escala fàctica en mitjans audiovisuals, però
també hi ha tècniques que permeten simular-lo en un pla estàtic. Es
pot comptar amb elements plàstics com la textura o la línia encara
que la nostra experiència sobre el moviment ens fa apreciar sempre
el caràcter direccional dels elements d’una composició encara que
sigui a nivell inconscient. El moviment, a banda de reforçar la pro-
pietat realista d’una composició, aporta narrativitat i dinamisme.

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 8

2. Tipografia: anatomia,
classificació, i composició

Tenint en compte que la finalitat del disseny gràfic és la transmissió

efectiva d’un missatge, la tipografia - com a materialització visual del
llenguatge verbal - té un paper fonamental en tant que vehicula no
només un significat lingüístic sinó també emocions, ja que, la seva
naturalesa formal, influeix de forma determinant en la comunicació.

En el disseny, la tipografia exerceix un doble paper: és text i és imat-

ge. La seva presència gràfica entra en relació amb la resta d’elements
visuals presents una composició afavorint la sintonia entre forma i
contingut.

Les possibilitats expressives de la tipografia permeten que fins i tot

es converteixi en única protagonista d’una composició. La capacitat
comunicativa d’una tipografia augmenta si, a més, assumeix nous va-
lors com ara el color, la mesura, la situació al pla, la combinació amb
altres fonts o pesos de la mateixa família.

2.1. Anatomia tipogràfica

Un caracter és una lletra, signes o blancs tipogràfic dissenyat en una
mida i estil concrets. Una font o tipografia és un conjunt de caracters
agrupats i amb característiques comunes. Una familia és un conjunt
de caracters que tenen unes característiques comunes però dife-
reiexen, per exemple, en amplada o gruix.

Parlem de caixa alta o caixa baixa per a referir-nos a les majúscules

(derivades de les capitals romanes) i les minúscules (originàries de
la cal·ligrafia medieval) respectivament. Aquesta denominació prové
del sistema d’impressió per tipus mòbils.

2.2. Classificació de les

famílies tipogràfiques
Existeixen diferents sistemes de classificació de les famílies tipogrà-
fiques que difereixen en prioritzar criteris de forma, historicitat o
elements clau. Aquests esforços per ordenar les fonts per categories
tenen per finalitat entendre-les millor i poder-les combinar exitosa-
ment. Una distinció molt clara i comprensible és la que s’estableix en
aquests quatre grups:

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 9

1) Amb remat o serifes

Són aquelles que presenten petits traços en les seves astes verticals o
horitzontals (fig. 27). Aquesta característica formal en facilita la lectu-
ra ja que ens ajuden a reconèixer els caràcters (sobretot en materials
27
impresos).

Segons la forma del remat, aquestes famílies poden dividir-se en:

• Romanes antigues (amb remats triangulars - fig. 31)
• Romanes modernes (amb remats filiformes - fig. 32)
• Egípcies (amb remats quadrangulars - fig. 33) 28

2) Sense remat, sans-serif o de pal sec

Es caracteritzen perquè no tenen remats en els seus traços finals (fig.
28). Solen tenir menys variacions que les serifes.

3) D’escriptura 29
Són tipografies amb remats creatius o lliures, són una translació
de l’escriptura manual (fig. 29). Hi ha una gran diversitat formal en
aquest grup (des de les més clàssiques fins a les més informals)

4) Decoratives
És un grup molt genèric en el que encabir-hi totes aquelles tipo-
30
grafies que per les seves atribucions formals molt connotades s’es-
capen de la categorització anterior (fig. 30). El seu disseny sol tenir
un caràcter històric, cultural o de fantasia. El seu ús implica un gran
sentit figuratiu i es fa difícilment compatible amb elements que no
hi tinguin una relació directa.

31

2.3. Composició tipogràfica: disposició

dels elements en la pàgina.

32

2.3.1. La mida
La mida d’una font tipogràfica no depèn ni de l’alçada de la caixa
alta ni de la dels seus ascendents. Depèn de l’alçada del seu cos. El
cos és un requadre d’igual mesura per a totes les lletres (que en la
33
composició per tipus mòbils es corresponia a la mida de la peça que
s’utilitzava).

En suports impresos, la mida del cos es mesura en punts - cada punt

equival a 0,03759 cm -, mentre que en pantalla - al no disposar d’una
referència física - la unitat per mesurar el cos és el píxel.

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 10

Si utilitzem dues famílies tipogràfiques, ens podem trobar amb què

la mateixa mida de cos pot no ser equivalent a una mida aparent-
ment igual per a les dues. Aquesta situació suposa que una tipografia
sembla que sigui més gran que l’altre malgrat estar a la mateixa mida,
serà llavors quan ens haurem de guiar per la nostra impressió visual
a l’hora de fer la compensació que ens interessi.

2.3.2. Kerning i Tracking

Quan un tipògraf dissenya una font, ho fa tenint en compte l’espai
específic que hi ha d’haver entre alguns caràcters consecutius per a
que, en una composició, la lectura sigui harmoniosa i estètica. Aques-
ta operació, denominada kerning, es fa en consideració als volums
dels blancs interns i els espais que es deriven de les característiques
formals del disseny de cada caracter.

Així mateix, un dissenyador que faci ús d’una tipografia, pot alterar

aquest espaiat natural. És el que coneixem com a tracking.

2.3.3. Interlineat
L’interlineat és l’espai entre una línia de text i la següent. Amb l’inter-
lineat cal evitar que els ascendents i els descendents arribin a tocar-se
creant un text d’aparença compacta i de difícil lectura.

L’interlineat mínim habitual - encara que això dependrà molt de la

família utilitzada - sol partir d’un punt major que el cos de la font i
un màxim de tres punts. També cal evitar un interlineat massa gran,
ja que dificultaria la lectura de la mateixa manera que ho faria una
composició compacta.

2.3.4. Alineació
En tota composició tipogràfica es forma una retícula base imaginària
on s’asseuen els caràcters. D’acord amb ella, podem alinear les línies.
Pot ser:
• A l’esquerra: té l’avantatge que ens permet eliminar la partició
de paraules i no provoca variacions sobre el tracking. És bastant
habitual, també s’anomena “en bandera a la dreta”.
• A la dreta: s’utilitza menys, perquè és més difícil trobar-hi el
començament de la línia següent. Queda relegada a titulars o
peus de foto.
• Centrada: tot i que presenta gran dificultat en la lectura con-
tínua, per la seva simetria s’utilitza en composicions que ho
demanin.

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 11

• Justificada: gràcies a l’alteració de l’espai entre paraules, s’acon-

segueix que la composició ocupi tota la longitud de línia. S’uti-
litza en textos de “text continuo” a causa del seu aspecte rítmic i
regular. El resultat d’un text justificat pot ser contraproduent si
la columna on es posa en pràctica és estreta i provoca espaiats
que fragmenten en excés el text.
• Asimètrica: una alineació asimètrica pot tenir un efecte visual
interessant tot i l’evident dificultat de lectura que planteja.

2.3.5. Elecció de tipografies

Abans d’escollir una tipografia per una composició, cal plantejar-se:

Quin tipus de text és? L’aplicació que se li ha de donar a la tipografia

pot no ser la mateixa en el cas d’un logotip, d’un titular o d’un text
continuo. Les atribucions de la font condicionaran la seva elecció, en
tant que es pot estar buscant un acabat amb molta personalitat o bé
prioritzar la llegibilitat segons la intencionalitat del seu ús.

A qui s’adreça? Cal tenir sempre present el target, la tipografia ha de

ser un vehicle per a connectar-hi. El públic objectiu d’aquesta tipo-
grafia s’hi ha de sentir identificat, però també ha de ser capaç d’en-
tendre-la.

Què ha de transmetre? Les característiques formals de la tipografies

duen implícita una significació que cal posar en relació amb el mis-
satge que es vol transmetre. Els traç, el pes, el color o la textura d’una
font condicionen la percepció.

De quins elements s’envolta la tipografia? Si no actúa en exclusiva

en una composició visual, cal tenir en compte la resta d’elements
plàstics que envolten la tipografia. Cal ser coherent amb el missatge
i la composició.

2.3.6. Combinacions tipogràfiques

1) Per contrast amb tipografies similars
En utilitzar tipografies similars, es pot crear contrast aplicant dife-
rents pesos (negreta), estils (cursiva), color o caixes (majúscules, mi-
núscules). Aquestes diferències faciliten la lectura per exemple, de
noms compostos.

2) Utilitzant fonts de la mateixa categoria tipogràfica

Adscriure’s a l’ús de tipografies que pertanyen a un mateix grup pot
donar resultats harmoniosos obtenint també contrast i diferenciació

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida
Disseny gràfic i creació multimèdia: Llenguatge visual i sintaxi de la imatge 12

jeràrquica en un text. En el cas de les tipografies d’escriptura o les de-

coratives, aquesta opció difícilment funciona, és millor mantenir-se
en el grup de les serifes o el de les de pal sec.

3) No excedir-se en l’ús de diferents fonts

És recomanable no utilitzar més de dues tipografies (com a màxim 3)
per evitar que la forma acabi dominant el missatge. Cal entendre que
la lectura necessita d’harmonia.

2.3.7. Directoris tipogràfics

Hi ha tres opcions bàsiques a l’hora d’obtenir tipografies:

1) Tipografies de sistema
Són aquelles que la majoria de sistemes operatius duen incorpora-
des. La gran varietat existent ens permet fer bones composicions, en
aquest sentit, cal conèixer-les bé abans de buscar-ne de noves. El seu
avantatge és que, generalment, ens permeten la creació compartida
o la publicació web sense necessitat d’incrustar o adjuntar l’arxiu de
la font.

2) Tipografies gratuïtes
Malgrat que totes les tipografies tenen autor, hi ha empreses que
n’ofereixen gratuïtament per descarregar. En són exemples:
Google Fonts ( https://www.google.com/fonts )
Font Squirrel ( https://www.fontsquirrel.com/ )
Omnibus Type ( http://omnibus-type.com/ )

3) Foneries tipogràfiques
Són empreses que comercialitzen tipografies pròpies o de dissenya-
dors externs. Els preus són molt variables. Disposar de fonts de qua-
litat (amb una família extensa i uns acabats excel·lents) és una molt
bona opció en el cas de les identitats corporatives o per a fer-ne ús
en aplicacions de disseny editorial. Algunes d’aquestes empreses són:
MyFonts (https://www.myfonts.com/)
Hoefler & Co. ( https://www.typography.com/ )
Frere Jones ( http://frerejones.com/ )

Disseny gràfic i creació multimèdia | Grau Comunicació i Periodisme Audiovisuals Universitat de Lleida