Unidad 1

Introducción al Diseño Gráfico

Temario
• Qué es el diseño grá co: Una breve historia de como llegamos hasta aquí.

• Fundamentos del Diseño:

• Composición Cómo organizar los elementos de un diseño para crear una

apariencia equilibrada y coherente.

• Tipografía Cómo seleccionar y utilizar las fuentes tipográ cas según su forma,
para transmitir o reforzar un mensaje claro y conciso.

• Color Psicología del color y cómo utilizarlo para crear un impacto visual y
emocional.

• Espacio Cómo usar el espacio para crear diferentes impresiones como

profundidad o movimiento.

1
fi
fi
 Objetivos
En esta unidad aprenderemos cómo
aplicar técnicas y conceptos de diseño
grá co, que serán útiles en la creación
de páginas web y sitios responsivos.
Exploraremos la disposición de
tipografías, la utilización del color, y
elementos visuales para crear páginas
web atractivas y funcionales.
Aprenderemos a utilizar diferentes
herramientas de diseño para optimizar
tus proyectos para diferentes
navegadores y dispositivos.

2
fi
 Introducción
El diseño grá co es un campo de estudio
fundamental para la creación de páginas
web intuitivas y e caces.

A través de la combinación de los

elementos de diseño, se busca transmitir
mensajes claros y efectivos a los usuarios.
En esta sección, exploraremos los
conceptos básicos del diseño grá co y su
aplicación en el ámbito de las páginas web.

3
fi
fi
fi
¿Qué es el diseño gráfico?
Spoiler Alert ! No es mi sobrino que hace dibujitos en la compu.
El diseño gráfico es una asignatura cuyo objetivo es el de comunicar ideas y/o
mensajes a través de elementos visuales como signos, símbolos, imágenes, textos y
color. Según el American Institute of Graphic Arts “El diseño gráfico consiste en
planificar y proyectar ideas y experiencias con contenido visual y textual”.

El objetivo del diseño gráfico es crear una

comunicación visual efectiva y perdurable que
transmita el mensaje deseado de una manera
clara e inconfundible. Para ello, los
diseñadores deben tener una comprensión de
los principios del diseño, el espacio, la
psicología del color y la tipografía, como así
también de las últimas tendencias y
tecnologías.

“El diseño de comunicación visual se ocupa

de la construcción de mensajes visuales con
el propósito de afectar el conocimiento, las actitudes y el comportamiento de la
gente. Una comunicación llega a existir porque alguien quiere transformar una
realidad existente en una realidad deseada.

El diseñador es responsable por el desarrollo de una estrategia comunicacional, por

la creación de los elementos visuales para implementarla y por contribuir a la
identificación y a la creación de otras acciones de apoyo destinadas a alcanzar los
objetivos propuestos, es decir, la creación de esa realidad deseada.

Es indispensable un estudio cuidadoso del público, en particular cuando se intenta

generar cambios en sus actitudes y comportamientos”.

4
El diseñador debe trabajar en estrecha colaboración con sus clientes para
comprender sus necesidades y objetivos, y para desarrollar soluciones que sean
beneficiosas y relevantes. Por otra, debe ser capaz de actuar en equipos
interdisciplinarios, tales como ingenieros industriales, expertos en marketing y
desarrolladores de software, etc., para producir diseños que sean a la vez atractivos
y eficaces, y así poder ofrecer resultados creativos e innovadores.

5
Breve historia del diseño gráfico
La historia del diseño gráfico es tan antigua como la humanidad misma. Desde las
pinturas rupestres prehistóricas, que transmitían información y narraban historias,
hasta los jeroglíficos egipcios y los códices mayas, la comunicación visual ha sido
una herramienta fundamental para el desarrollo de las sociedades.

Prehistoria: Los primeros trazos

de comunicación visual

Las pinturas rupestres, con sus

escenas de caza y rituales, son
considerados los primeros ejemplos
de comunicación visual intencional.
Aunque no se puede establecer
como diseño gráfico en su sentido
moderno, estas imágenes ya
demostraban la capacidad humana
de usar la expresión visual para
transmitir ideas.

Antigüedad: Primeras formas de escritura, jeroglíficos e imprenta

La escritura, como herramienta fundamental para la comunicación y el registro de la

información, tiene sus inicios en los primeros registros pictográficos hasta los
complejos sistemas alfabéticos que utilizamos hoy en día.

Pictogramas: Los primeros sistemas de escritura conocidos, como los encontrados

en Mesopotamia y Egipto, utilizaban pictogramas, dibujos que representaban objetos
o ideas.

6
Ideogramas: Estos símbolos evolucionaron hacia ideogramas, que representaban
conceptos más abstractos. Un ejemplo notable son los jeroglíficos egipcios, que
podían combinar ideogramas y pictogramas para crear palabras y oraciones.

Escrituras cuneiformes: Desarrollada en Mesopotamia, la escritura cuneiforme se

caracterizaba por su forma triangular, producto de la herramienta utilizada para
grabarla en tablas de arcilla.

Escritura hieroglífica: Los antiguos egipcios usaron la escritura jeroglífica

esculpiéndola en piedra, pintándola en papiro y tallándola en monumentos.

Otros sistemas de escritura: No todas las culturas del mundo desarrollaron

alfabetos. Algunos sistemas de escritura antiguos, como la escritura china, siguen
siendo logográficos, utilizando símbolos para representar palabras o conceptos.

Escritura china: Desarrollada

alrededor del 1200 a.C., la escritura
china es uno de los sistemas de
escritura más antiguos y complejos
del mundo, con miles de caracteres
que representan diferentes palabras
e ideas.

El alfabeto: El punto de inflexión

llegó con el desarrollo del alfabeto, donde cada símbolo representaba un sonido
individual. Los primeros alfabetos conocidos se originaron en el Cercano Oriente,
como el alfabeto fenicio, que luego fue adaptado por los griegos y romanos.

Evolución del alfabeto latino: El alfabeto latino, base de la mayoría de los

sistemas de escritura occidentales, se expandió por Europa y el mundo a través del
Imperio Romano. A lo largo de los siglos, el alfabeto latino ha experimentado
cambios y adaptaciones para reflejar las particularidades de diferentes idiomas.

7
Impacto de la escritura: La escritura ha tenido un impacto profundo en la sociedad,
permitiendo la transmisión de conocimiento, la codificación de leyes, el desarrollo de
la literatura y la preservación de la historia.

La imprenta de Gutenberg: En el siglo XV, Gutenberg revolucionó la comunicación

con la invención de los tipos móviles y así permitir la producción masiva de libros.
Anteriormente, estos se se realizaban sobre tablas de madera esculpidas a mano,
por lo que la tablilla se utilizaba una vez y solo podía reutilizarse para un número
limitado de copias de un mismo libro. Con la invención de Gutenberg, se creó la
necesidad de diseños legibles y a la vez atractivos.

Siglo XIX: Nace el diseño gráfico como profesión

A finales del siglo XIX, con la Revolución Industrial ya en marcha, el diseño gráfico
comenzó a definirse como una profesión. La producción masiva y en serie de
diferentes bienes y servicios, produjo un auge en la difusión y el diseño desempeñó
un papel importante en la comercialización de lo que producían las fábricas. Artistas

8
como William Morris y Aubrey Beardsley exploraron la estética y la función del
diseño, sentando las bases para movimientos futuros.

En la década de 1890, artistas como Chéret o Toulouse-Lautrec comenzaron a usar

su arte no solo para retratar escenas de la vida diaria, sino para crear los primeros
carteles que se vieron en el mundo, publicitando las obras de teatro del Moulin
Rouge.

Siglo XX: Vanguardias y experimentación

El siglo XX fue un período de gran efervescencia creativa en el diseño gráfico.

Poco a poco, el diseño fue avanzando y llegando también a distintas áreas. En 1910,
el diseñador inglés Talwin Morris comenzó a diseñar portadas de libros para Penguin
Books, algo que hasta ese momento nunca se había visto. Sus ilustraciones
abstractas retrataban el tema que se trataría en el libro.

A inicios de los años 20, el diseñador holandés Theo van Doesburg creó la primera
papelería para una empresa llamada NB. Así, vemos cómo el diseño gráfico fue
evolucionando poco a poco hasta alcanzar un
terreno propio.

Se crearon los primeros logotipos y en Alemania

apareció la Bauhaus, la Escuela de Arte y
Diseño que sentó las bases de la modernidad.
Artistas, arquitectos, fotógrafos y diseñadores
como Walter Gropius, Paul Klee, Vasily
Kandinsky, Marianne Brand, El Lisitski o Jan
Tschichold empezaron a experimentar y las
piezas cambiaron radicalmente, pasando de
composiciones muy ilustradas a una
combinación de formas, colores y tipografías
que expresaban mucho más con menos
elementos.

9
A mediados del siglo XX apareció la fotografía a color y los avances más grandes en
diseño gráfico se dieron en las publicaciones, sobre todo en las revistas (como
Vogue o Harper’s Bazaar) donde las portadas
competían por llamar la atención.

En los 60, el diseño gráfico llegó a los carteles

de cine de la mano del diseñador Saul Bass. Ya
no era necesario que apareciese una fotografía
del actor o actriz, sino que podían utilizarse otros
recursos para transmitir el mensaje, como
sucedía con el famoso cartel de la película
Vértigo.

Milton Glaser obsequió al mundo el patrón oro

del diseño de la comunicación: sencillo,
llamativo, con sentimiento y, por lo tanto,
universal.

«Hay tres respuestas a una pieza de diseño: sí, no y ¡wow! Wow es

el que hay que apuntar»

Milton Glaser

10
Hacia los 70, los avances más importantes en diseño gráfico se dieron en la
industria corporativa. Se comenzaron a crear lo que, más tarde, se conocería como
sistemas de identidad corporativa, y los logotipos
se convirtieron en un elemento imprescindible para
cualquier marca.

“Good design is good business”

Thomas J. Watson Jr. CEO, IBM

Siglo XXI: La era digital

La llegada de las computadoras y el internet transformaron radicalmente el diseño

gráfico. Nuevos softwares y herramientas digitales permitieron una mayor libertad
creativa y una producción más eficiente.

Ahora, un pequeño espacio concentra todo lo que los diseñadores antes debían
realizar en grandes talleres y estudios, y les permite realizar más trabajos en menos
tiempo.

Entonces, se comenzó a experimentar cada

vez más con tipografías y formas, buscando
diseños llamativos y provocadores. Durante
los 80 surgieron también las primeras piezas
de diseño con una alta carga social. La
diseñadora Barbara Kruger resaltó en este
ámbito, con carteles que destacaron por sus
mensajes reivindicativos.

11
El futuro del diseño gráfico: En constante evolución

El diseño gráfico continúa evolucionando a un ritmo acelerado. La inteligencia

artificial, la realidad aumentada, la realidad virtual, y la impresión 3D abren nuevas
posibilidades creativas. Si sabemos, que el diseño seguirá jugando un papel
fundamental en la forma en que comunicamos, interactuamos y comprendemos el
mundo que nos rodea.

12
Algunos hitos importantes en la historia del diseño gráfico:

20.000 a.C.: Pinturas rupestres en Lascaux, Francia.

3.000 a.C.: Escritura cuneiforme en Mesopotamia.

3.200 a.C.: Jeroglíficos egipcios.

1455: Invención de la imprenta por Johannes Gutenberg.

1890: William Morris funda Kelmscott Press, movimiento Arts

& Crafts.

1900: Art Nouveau en Europa.

1919: Fundación de la Bauhaus en Alemania.

1920: Art Déco en Estados Unidos y Europa.

1950: Saul Bass diseña el logotipo de Pepsi-Cola.

1960: Paul Rand diseña el logotipo de IBM.

1964: Milton Glaser crea el cartel de Bob Dylan.

1975: Milton Glaser crea el

reconocido I LOVE NEW YORK

1984: Apple Macintosh introduce la interfaz gráfica de usuario.

1993: Creación del World Wide Web.

2000: Nacimiento del diseño web como disciplina.

2010: Auge de las redes sociales y el diseño móvil.

2020: Inteligencia artificial y realidad virtual transforman el

diseño gráfico.

13
 Fundamentos del diseño
¡No dejés todo tirado, cuántas veces te pedí que ordenes tu cuarto!

Escuchado en casi todas las casas del universo.

En el diseño grá co, la

composición es la organización y
disposición de los elementos
visuales en un espacio
determinado, como una página, un
cartel o una pantalla. Es la base
fundamental del diseño y juega un
papel crucial en la creación de
piezas que sean estéticamente
agradables, funcionales y
transmitan un mensaje claro al
público objetivo.

A diferencia de la pintura o la escultura, que son la realización de las visiones

personales y los sueños de un artista, el diseño cubre exigencias prácticas
justi cadas por unos objetivos especí cos de comunicación. Una pieza de diseño
debe ser situada frente a los ojos del público y transmitir un mensaje preciso y
distintivo, y debe cubrir las necesidades explícitas de un consumidor.

Para una comunicación visual efectiva, los diseñadores emplean diferentes métodos
basados en el lenguaje visual. A partir de su comprensión aumentará en el diseñador
su capacidad para la organización, la cual le permitirá encontrar las soluciones
apropiadas para el cumplimiento de los objetivos proyectados.

14
fi
fi
fi
Se puede trabajar de manera intuitiva, pero explorando e investigando todas las
situaciones visuales posibles se llegará a una solución profesional.

Es importante resaltar que el diseñador en sus diferentes disciplinas, es la persona

responsable de la solución de problemas y debe encontrar las soluciones exactas
que den respuesta positiva al problema de comunicación, básicamente, el diseño es
el puente que une al producto/servicio con el futuro consumidor.

Los fundamentos del diseño son la base de cualquier medio visual, desde las bellas
artes hasta el diseño web moderno. Están presentes incluso en detalles
aparentemente sin importancia, como los tipos de letra que integran la mayoría de
las composiciones. Algunos elementos muy básicos, como la línea, la forma, la
textura y el equilibrio, pueden que por sí solos no parezcan gran cosa, pero juntos
forman parte de casi todo lo que vemos y creamos.

Cada principio de diseño funciona en relación con otros principios de diseño. Nunca
existen aislados. De hecho, cada principio se apoya en los demás, creando una
relación simbiótica. En otras palabras, los principios de diseño son directrices
probadas elaboradas con el n de comprender cómo representar el mundo.

15
fi
Composición
En muchos sentidos, la maquetación y la composición son los pilares del diseño. Le
dan estructura a tu trabajo, ordenan la información y facilitan la navegación, desde
los márgenes laterales hasta el contenido intermedio.

Hay cinco principios básicos que de nen la composición y dan forma a los
proyectos, estos son:

• UNIDAD

• ESPACIO BLANCO

• ALINEACIÓN

• GESTALT

• JERARQUÍA

16
fi
Unidad
El principio de unidad tiene que ver con la relación entre los elementos de una
composición. A través de las relaciones, podemos comunicar estatus, estado de
ánimo, estructura, parentesco, jerarquía, etc.

La unidad de un diseño establece el propósito de sus componentes y la cohesión

de la composición.

La unidad se mani esta en términos de proximidad, similitud y repetición.

Proximidad
La proximidad consiste en utilizar el espacio visual para mostrar relaciones en el
contenido. En la práctica, simplemente basta con agrupar los elementos
relacionados (por ejemplo, bloques de texto o elementos de un grá co).

17
fi
fi
 Los grupos que no están relacionados entre sí, estos deben separarse para resaltar
visualmente su falta de relación. La proximidad como manifestación de la unidad se
re ere a la distancia entre los elementos de una composición.

Cuanto más cerca estén los elementos de una composición, más fuerte será la
relación entre ellos.

En el siguiente grá co, cada elemento tiene la misma cantidad de puntos.

Sin embargo, las variaciones de proximidad en cada uno crean relaciones diferentes
no sólo entre sus respectivos elementos, sino entre cada conjunto.

Este es un ejemplo del principio de proximidad en el diseño.

La proximidad o cercanía en el primer conjunto comunica una relación o parentesco

más fuerte entre sus círculos, mientras que la distancia entre círculos en el último
conjunto comunica una relación más débil.

18
fi
fi
En el último conjunto, la proximidad entre los puntos de la izquierda y de la derecha
comunica que cada subconjunto pertenece a un "bando" diferente.

Similitud
La similitud establece una relación entre elementos de la misma apariencia. Cuantos
más elementos se parezcan, más fuerte será la relación entre ellos.

La semejanza puede establecerse mediante:

• Tamaño

• Color

• Forma

• Posición

• Textura

La forma, el tamaño y el color

establecen relaciones de
parentesco entre determinados
elementos.

La similitud trabaja junto con la

proximidad. A esto nos
referimos cuando decimos que
cada principio de diseño
funciona en relación con otros
principios. Nunca existen
aislados.

19
Repetición y ritmo
La repetición puede funcionar de la misma manera que la similitud, pero puede ser
más dramática. Cuantos más elementos se repiten, más fuerte los asociamos a una
idea o efecto determinados.

Además, cuanto más repetimos un elemento, más ritmo tiene una composición.

El principio de repetición crea ritmo en el diseño.

Observa cómo la repetición de elementos y formas en

cada ejemplo crea un efecto de ritmo que da como
resultado una unidad visual.

También se puede apreciar cómo la variación en la

repetición (tamaño de los elementos y posición) en el
ejemplo de la derecha da como resultado una
composición más vistosa y menos aburrida.

Esto se llama variación.

20
 Unidad en el diseño grá co: Ejemplos reales

La obra de Piet Mondrian ejempli ca el

uso de la unidad en el diseño. En la
pintura de Mondrian, observa cómo las
formas, el color y el tamaño, y su
repetición, crean una composición
uni cada que es rítmica e interesante.

En los mosaicos del artista Chuck Close,

vemos una aplicación más compleja de la
unidad como principio de diseño. Este retrato
ejempli ca el uso del principio de diseño
grá co de la repetición.

Cada azulejo es un elemento repetido que

está estratégicamente colocado, haciendo
uso del color y el tamaño para formar el
rostro reconocible.

La unidad estratégica de los elementos crea

un retrato de forma rítmica y compleja.

21
fi
fi
fi
fi
fi
Espacio en Blanco
El espacio es uno de los elementos más poderosos del diseño.

Al igual que el cero no es nada, el espacio es el tejido que lo abarca todo y que se
puede manipular para crear una sensación de limpieza, claridad, concentración y
atención en una composición.

El espacio es una "presencia" en el diseño, nunca está "ausente".

Podemos utilizar el espacio para mejorar la calidad, la nitidez y la atención de los

elementos de una composición. El uso estratégico del espacio implica la utilización
del espacio "blanco" como fuerza y presencia en una composición.

Ahora bien, esto no signi ca literalmente espacio en blanco, sino el espacio de

trabajo, como los espacios entre el contenido. Es el área alrededor, dentro o entre
los elementos de un diseño, también conocido como relleno, margen o interlineado.

En un logotipo, por ejemplo, el espacio en

blanco alrededor se evalúa cuidadosamente
para garantizar que la integridad del diseño no
se vea comprometido al compartir espacio
con otros elementos.

No hay una única forma de utilizar

correctamente el espacio en blanco, pero es
bueno entender su propósito. El espacio en
blanco te ayuda a de nir y separar las
distintas secciones y permite que el contenido
respire.

22
fi
fi
Las principales razones por las que es necesario el uso de espacio en blanco en el
diseño son:

1. Mejora el enfoque

Una buena distribución y los elementos necesarios establecidos en una jerarquía,

será más fácil para el usuario entender lo que pretendes comunicar.

2. Mejora la comprensión

Según un estudio del Human Factors International, el uso de espacios en blanco

entre párrafos y en los márgenes izquierdo y derecho aumenta la comprensión
lectora en casi un 20%.

23
 3. Ayuda a crear equilibrio

Los elementos de diferente peso visual se pueden equilibrar asimétricamente

controlando la cantidad de espacio en blanco alrededor de cada elemento, tal como
revisamos en el artículo sobre equilibrio.

4. Ayuda a establecer la jerarquía visual

Se puede utilizar una combinación de diferentes espacios en blanco para ayudar a

establecer la jerarquía visual en tu diseño.

5. Promueve el ritmo en tu diseño

Así como las notas y el silencio trabajan en conjunto para crear ritmo en la música,
los elementos y el espacio en blanco trabajan para crear ritmo en tus diseños. Una
estrategia de espaciado consistente ayuda a los usuarios a entender y anticipar el
ujo.

24
fl
Los espacios en blanco son clave en el diseño. Es un elemento fundamental para
mejorar el enfoque, comprensión y ayudar a crear equilibrio y jerarquía, para así
promover el ritmo en tu diseño.

Si un proyecto comienza a parecer desordenado o

incómodo, un poco de espacio en blanco puede ser justo
lo que necesitas.

25
 Alineación
La alineación está presente en todo, aunque no te des cuenta. Cada vez que
escribís un correo electrónico o creas un documento, el texto se alinea
automáticamente.

La alineación en el diseño es un tema que tiene mucha importancia. Aplicar

correctamente los principios de la alineación en el diseño grá co puede fortalecer el
propio trabajo, ya que resulta más claro y fácil de entender. Por otro lado, el uso
incorrecto de la alineación hace que un diseño parezca desordenado e inacabado y
puede ser muy difícil de entender.

En términos literales, alineación signi ca la disposición de varios elementos en

relación con los distintos bordes o límites del área permitida. La alineación en la
de nición de diseño grá co, literalmente signi ca el alineamiento de grá cos y texto
en relación con los distintos márgenes del espacio de diseño.

La alineación suele pasarse por alto cuando su aplicación se basa en la sutileza y se

utiliza correctamente, pero su importancia no pasa desapercibida cuando se aplica
incorrectamente.

El uso de la alineación depende principalmente del trabajo y del mensaje

subyacente del diseño. En función del tipo de alineación utilizado, con ere carácter
a una obra. El uso de distintos tipos de alineación puede mejorar enormemente el
aspecto de un diseño dependiendo de lo adecuada que sea su colocación.

26
fi
fi
fi
fi
fi
fi
fi
La grilla o retícula es un recurso que se usa en diseño para la organización visual y
alineación de los elementos que componen una pieza grá ca o digital. En el caso
del diseño web, a la hora de de nir una grilla debemos tener en claro qué tipo y
cantidad de contenidos vamos a ofrecer y para qué pantalla preparamos esos
contenidos.

27
fi
fi
Tipos de alineación

Alineación izquierda

En la alineación izquierda, los elementos se alinean a la

izquierda del espacio. Es la más apropiada cuando se da
una descripción de un producto, como cuando se dan
puntos sobre él.

En caso de duda, distribuir la alineación al lado

izquierdo. ¿Por qué? En la cultura occidental, la gente lee
de izquierda a derecha y de arriba a abajo.

Al justificar el texto hacia la izquierda, el ojo puede encontrar

el borde y leer el texto mucho más fácilmente. Por este motivo, eviten “sangrar” la
primera línea de un párrafo. (En tipografía, sangría es la introducción de varios
caracteres en blanco al comenzar un párrafo).

Dado que la mayoría de las personas ya está familiarizada con este tipo de
alineación, suele tener efectos mínimos en el aspecto de los elementos del diseño.
Su simpleza causa una obstrucción mínima o nula en el mensaje que se comunica,
por lo que es una elección perfecta cuando se dan descripciones, se esbozan puntos
o se quieren destacar elementos visuales.

28
Alineación centrada

La alineación centrada es una forma eficaz de resaltar un cuerpo.

Da a los elementos alineados una sensación de dominio sobre el resto, haciéndolos

destacar efectivamente sin el uso de colores estridentes u otras técnicas para hacer
que los objetos destaquen.

La alineación central es una gran opción para ser utilizada con títulos, así como
gráficos que tienen importancia en una pieza única, pero desaconsejada para
escritos largos o elementos de gran peso visual.

Alineación a la derecha

Los elementos alineados a la derecha tienen la apariencia

de ser apéndices del resto de los elementos de la página.

Suelen ofrecer información complementaria sobre el resto

del diseño. Además, dan a un diseño la apariencia de uir
de derecha a izquierda (RTL), lo que podría ser un factor
de sugerencia cuando así se pretende. La alineación
derecha debe utilizarse cuando se dan metadatos a los
elementos reales del diseño.

29
fl
Alineación justificada

Cuando los elementos están justi cados, están

igualmente espaciados para tratar de ocupar todo el
espacio de borde a borde. La alineación justi cada no se
utiliza habitualmente, ya que puede causar una
apariencia inesperada del diseño dado el tamaño del
lienzo y cómo podría cambiar en diversas condiciones. El
texto se alinea y compensa tanto a la izquierda como a la
derecha, a menudo dando una apariencia de bloque. Se
debe usar con precaución, ya que puede causar problemas de legibilidad con
espacios irregulares entre palabras. Suele utilizarse con pasajes descriptivos, pero
es muy común en los libros de textos.

Utilizar el tipo correcto de alineación es un factor importante para el éxito del trabajo
de diseño, y los diseñadores deben tomar las medidas adecuadas para determinar
la alineación correcta que se utilizará con los distintos elementos del espacio.

Orientación
La orientación del texto en diseño grá co puede jugar un papel destacado en la
comunicación y la experiencia del usuario. Pero esto, debe hacerse con cuidado,
teniendo en cuenta las posibilidades y limitaciones del medio donde se integrará el
diseño. Elegir la dirección correcta del texto puede afectar la legibilidad, la estética y
la comprensión del mensaje a transmitir.

30
fi
fi
fi
 Tipos de orientación:

Horizontal: La forma más común, en textos es ideal para párrafos extensos y

lectura uida.

Vertical: Se lee de arriba hacia abajo o viceversa. Puede ser llamativa y destacar en
el diseño, pero puede traer problemas de lectura en textos largos, o en dispositivos
que no se pueda rotar como en el caso de los monitores desktop o las PC All InOne.

Diagonal: Aporta dinamismo y movimiento al diseño, pero puede ser difícil de leer.
Con determinados elementos visuales puede generar confusión respecto a la
dirección apuntada.

Curva: Ofrece un toque elegante y decorativo, pero al igual que la diagonal, puede
ser menos legible, y dar un aspecto caótico.

En el caso de textos, hay ciertos factores a considerar al elegir:

Legibilidad: Asegurarse que el texto sea fácil de leer y comprender es fundamental.

Público objetivo: La orientación del texto se debe adaptar a las características y

preferencias del usuario.

Mensaje a transmitir: La orientación del texto puede reforzar el signi cado del
mensaje y transmitir diferentes emociones.

Estilo del diseño: La orientación del texto debe armonizar y ser coherente con la
estética general del diseño.

Formato del medio: Considerar las limitaciones y posibilidades del medio donde se
presentará el diseño.

31
fl
fi
 Gestalt
Las leyes de la Gestalt o leyes de la percepción, son un conjunto de principios
según los cuales el cerebro humano siempre tenderá a transformar u organizar los
elementos que percibe en un todo coherente, dándole forma y sentido.

Dado que la percepción es subjetiva, pues las imágenes se analizan en base a las
vivencias, la cultura y la experiencia personal, las leyes de la Gestalt se basan en la
premisa de que “el todo es superior a la suma de sus partes”.

Sgúen etsduios raleziaods por la Uivenrsdiad ignlsea de Cmdibrage, no

ipmotra el odren en el que las ltears etsén ersciats, la úicna csoa ipormtnate es
que la pmrirea y la útlima ltera esétn ecsritas en la psiócion cocrreta. El retso
peuden etsar ttaolmntee doaerdsendo y aún pordás lerelo sin pobrleams,
pquore no lemeos cada ltera en sí msima snio cdaa paalbra etenra.

La cuestión es que al leer un texto, no lees palabra por palabra o letra a letra. Sino
que lees en conjunto, cuando reconoces una palabra avanzas a la siguiente.

Hay que resaltar que esta a rmación no es común para todas las lenguas.

Las lenguas semíticas como el hebreo o el árabe, tienden a no tener escritas todas
las vocales en el texto. Lenguas como el nés o el turco donde las palabras son más
largas que el inglés o el español. Lenguas como el Tailandés donde no ponen
espacios entre las palabras. Lenguas orientales como el chino o el japonés donde
utilizan complejos símbolos que representan palabras en conceptos.

Estas leyes no solo se estudian en el campo de la psicología. En los campos del

diseño grá co, el diseño web y la UX/UI, la publicidad, la animación 3D y juegos

32
fi
fi
fi
 Interactivos, el estudio de las leyes de la Gestalt, la percepción visual, forma e
imagen de los elementos es de vital importancia para modelar y crear personajes e
historias.

En el diseño la psicología tiene un papel determinante. ¿Por qué? Porque se busca

impactar, comunicar un mensaje, pero también se quiere garantizar que todo ello
sea correctamente percibido por el receptor.

De ahí que el diseño no solo tenga que ver con las emociones, sino también con la
percepción. Conocer la Teoría de la Gestalt y sus principios fundamentales, es
esencial para ayudarnos a llamar la atención de los usuarios. Lo que se busca es
in uir e impactar visualmente, y para ello debemos comprender cómo la audiencia
responde a los estímulos visuales.

Las leyes de la percepción más importantes son:

Proximidad

Los elementos que están a una distancia cercana suelen ser percibidos como un
grupo o como un mismo objeto. Esta ley describe cómo el ojo humano percibe las
conexiones entre los elementos visuales. La ley de proximidad nos permite usar
espacios en blanco, por ejemplo, para relacionar diferentes elementos.

Esta ley también podemos observarla en material escrito, el

espaciado entre bloques de texto nos dice qué tan probable
es que estén relacionados entre sí.

Es muy útil para permitir que el auditorio agrupe ideas,

conceptos, etc. Es ideal para que podamos reconocer
diferentes grupos de elementos de un vistazo. Sin embargo,
debemos tener cuidado al emplear la ley en el diseño. ¿Por
qué? Si agrupamos demasiados elementos demasiado

33
fl
cerca, terminaremos con un diseño ruidoso y abarrotado. La proximidad de cada
elemento se volverá tan indistinta que el diseño puede perder signi cado.

Continuidad

La mente tiende a seguir un patrón, aunque este haya desaparecido. La ley de

continuidad a rma que el ojo humano sigue líneas, curvas o una secuencia de
formas para determinar una relación entre los elementos del diseño.

La continuidad puede percibirse tanto en

espacios positivos como negativos en los
diseños. El espacio positivo es el espacio en
un diseño que se compone del sujeto: la
imagen que insertamos. El espacio negativo
es el resto del espacio alrededor y entre los
bordes de ese objeto. Cuando vemos un
diseño, nuestros ojos tienden a dibujar una
línea que conecta diferentes elementos.

Al ojo humano le gusta marcar caminos y seguirlos. Lo que nos ayuda a la hora de
guiar esa mirada hacia lo que nos gustaría que vieran en nuestros diseños y de esta
manera centrar ahí la atención.

Figura y fondo

Nuestro cerebro tiende a separar el fondo de los

demás elementos importantes, pero se basa en la
premisa que no existe gura sin un fondo que la
sustente. El ojo humano tiene la tendencia a ver un
objeto separado de lo que le rodea sin ser capaz de
interpretar un mismo elemento como gura o como
fondo al mismo tiempo.

34
fi
fi
fi
fi
 Hay dos factores principales que afectan la forma en que percibimos la gura y el
fondo en cualquier diseño: El tamaño de la gura en comparación con el fondo y el
contraste entre ambos. Esta es la razón por la que la mayoría de las páginas
impresas utilizan tinta negra sobre un fondo blanco. La gura (el texto) contrasta al
máximo con el fondo (la página).

Semejanza o igualdad

Las guras parecidas (ya sea por su tamaño, forma o color) se suelen agrupar y
percibir como una unidad.

El ojo humano tiende a percibir elementos

similares en un diseño como una imagen,
forma o grupo completo, incluso si esos
elementos están separados. El cerebro
parece crear un vínculo entre elementos de
naturaleza similar. Luego, los percibimos en
una relación entre sí, separándolos de otros
elementos en un diseño.

La similitud está in uenciada por la forma, el

tamaño, la textura y el color de los

35
fi
fl
fi
fi
fi
 elementos. Cuando mezclas objetos con un alto grado de similitud entre sí con un
grupo de objetos diferentes, el cerebro dedica tiempo y energía a crear un vínculo
entre ellos para poder tratar de comprender la relación entre ellos.

Y como no, las reglas se hacen para romperlas. Si queremos generar énfasis sobre
un elemento de diseño, podemos hacerlo saltándonos ese patrón de similitud que
se ha generado dentro del grupo. Estos casos donde un objeto destaca del resto y
no concuerda con la similitud, se les denomina anomalía.

Dirección común

El cerebro identi ca como un grupo

aquellos elementos que dan la
impresión de moverse o con uir hacia
un mismo punto. La ley del Dirección
Común dice que tendemos a agrupar
las formas que se pueden unir por
una línea (imaginaria) formando un
camino uido, esto nos da la
sensación de que se mueven en una
misma dirección (las guras
comparten un destino común)

Los elementos no tienen que estar en

movimiento (aunque pueden estarlo),
pero deben sugerir movimiento para
que esta ley funcione.

36
fl
fi
fi
fl
Tendencia al cierre

El cerebro tiende a completar imaginariamente las líneas faltantes o interrumpidas

del contorno de las guras.

La ley de Cierre explica cómo percibimos formas incompletas. Cuando falta

información en una imagen, el ojo ignora la información faltante y llena los espacios
con líneas, colores o patrones para completar la imagen.

Podemos usar la Ley de Cierre para lograr efectos visuales como en el logo de la
WWF. El panda está incompleto (no hay líneas alrededor de las áreas blancas), pero
nuestros ojos perciben un panda completo a pesar de esto.

37
fi
Contraste

El cerebro atribuye cualidades a los

diferentes elementos por contraste:
grande-pequeño, claro-oscuro,
borroso-nítido. La percepción de un
elemento resulta in uida por la relación
que éste guarda con los demás
elementos de la composición.

Puede darse tanto por color, como por

tamaño, disociación, etc.

Simetría

La simetría nos da una sensación de solidez y orden. Es nuestra naturaleza imponer

orden en el caos. Este principio nos lleva a querer el equilibrio en la composición,
aunque nuestras composiciones no
necesitan ser perfectamente simétricas
para estar en equilibrio.

Dado que nuestros ojos encontrarán

rápidamente la simetría y el orden, estos
principios se pueden usar para comunicar
información de manera efectiva y rápida.

38
fl
 Pregnancia (Prägnanz)

Prägnanz es una palabra alemana que signi ca “buena gura” o “concisión”

(de nida literalmente como “breve, contundente y signi cativa en la expresión”). Al
ojo humano le gusta encontrar la simplicidad
y el orden en formas complejas: para evitar
una sobrecarga de información.

Cuando vemos formas intrincadas en un diseño, el ojo las simpli ca

transformándolas en una sola forma uni cada (eliminando detalles super uos de
estas formas), ya que nos gusta dar sentido rápidamente a las cosas que, de otro
modo, estarían perturbadoramente desordenadas.

Por ello podemos decir que los elementos que cuentan con simetría y orden, son
también percibidos como parte del mismo grupo. Esta herramienta se utiliza mucho
en publicidad y marketing, sobre todo a la hora de diseñar logotipos que atraigan la
atención de los clientes.

39
fi
fi
fi
fi
fi
fi
fl
40
Jerarquía
Algunas reglas que te ayudarán a diseñar mejor

En diseño grá co, la jerarquía visual se re ere a la presentación de elementos

dentro de una composición de una manera que prioriza su importancia. Organizar
los componentes según su trascendencia, guía al espectador a través del diseño y
garantiza que el mensaje sea claro y conciso. Puedes hacer que una parte del
diseño parezca más importante ajustando su tamaño, peso, espaciado, posición,
color o estilo de fuente.

El propósito de la jerarquía es transmitir información con éxito en un corto período

de tiempo. Sin él, cualquier composición puede resultar difícil de leer y comprender,
lo que provoca una pérdida de interés. Las marcas y las empresas suelen con ar en
este principio de diseño para comercializar un producto o servicio e instar al
consumidor a actuar.

Ya sea que estés diseñando una tarjeta de presentación, la portada de una revista, o
una página web, la jerarquía puede mejorar tu composición.

[Link] un punto focal con color

La elección del color pueden tener un impacto sorprendente en cómo se traduce el

diseño general. Al utilizar el color intencionadamente, puedes crear un punto focal
para dirigir al espectador hacia un punto determinado.

Los titulares, tratamientos de títulos, nombres y otros detalles importantes se

resaltan cuando el color se aplica estratégicamente. Estos son detalles a los que
deseas que los espectadores naveguen primero; Los detalles más minuciosos,
como la ubicación del evento o la información de contacto, normalmente se leerán
después del título.

41
fi
fi
fi
 Pero, ¿por qué utilizar colores intensos
en una determinada composición?. Por
ejemplo, se sabe que el rojo llama la
atención, de ahí que se utilice para
señales de alto, carteles de ofertas y
noti caciones telefónicas.

Cuando se contrastan con un fondo

más oscuro, el rojo y otros tonos
cálidos se destacan instantáneamente,
mientras que los tonos más fríos
tienden a retroceder en el espacio. (Ver
más adelante en psicología del color)

La clave es el contraste. ¿El tono se

mezcla con el fondo o llama la
atención? Piensa estratégicamente en
los colores utilizados en tu composición
para evitar confundir al espectador. Elegir el mejor tono para tu diseño signi ca
evaluar la psicología del color elegido, junto con su desempeño dentro del contexto
del diseño. Experimenta con diferentes paletas de colores para ver cómo afectan el
estado de ánimo, el tono y la legibilidad dentro de la composición.

2. Denota importancia con el tamaño y la escala

¿El tamaño realmente importa?. En diseño grá co, si. Los componentes que
ocupan un área grande en una composición se notan primero. Este principio explica
por qué los títulos y otros detalles importantes suelen ser más grandes que el
cuerpo del texto en cualquier medio impreso o digital. Pero no es sólo la tipografía
la que responde al tamaño y la escala; imágenes, ilustraciones, símbolos y formas
también pueden bene ciarse de esta técnica.

42
fi
fi
fi
fi
 Observe lo primero que se destaca al mirar
el póster. Las palabras ART GEIST se
destacan sobre el resto, gritan. El tamaño
del título es bastante grande por sí solo,
pero en comparación con el texto diminuto
que se encuentra cerca (conocido como
escala), hay una razón por la cual la palabra
tiene un impacto tan grande. Esta técnica
funciona dentro de la composición porque
existe un nivel claro y distinto de jerarquía
tipográ ca. Al con ar en el tamaño y la
escala para transmitir jerarquía, es mejor
hacer una distinción clara entre el punto
focal y todos los demás aspectos del
diseño.

El dicho “hazlo a lo grande o vete a casa” se

aplica bien aquí. Si mantiene el título o la
imagen solo un poquito más grande que los componentes restantes, el espectador
puede experimentar confusión al mirar el diseño.

3. Crea una jerarquía con la elección del tipo de letra

Otro aspecto importante de una composición exitosa, es el uso de pares y estilos

tipográ cos efectivos para crear orden.

En cualquier composición, independientemente de cuánta tipografía se utilice, elegir

la fuente adecuada es crucial para informar al espectador. Ya sea que incorpores
Serif, Sans-serifs, cursivas, etc. o incluso guiones, cada estilo debe encajar en el
diseño.

43
fi
fi
fi
Por ejemplo, el uso de una fuente script en un banner de nanzas profesionales
muestra que existe una desconexión entre la tipografía y el mensaje dentro del
contexto de la composición. Para evitar esa desconexión, analicemos el estilo de
cada tipografía utilizada y su personalidad. ¿Se combinan bien? ¿Son los estilos
demasiado similares entre sí? ¿O juegan entre sí y se contrastan entre sí? La clave
aquí es trabajar con fuentes que pertenezcan al diseño. (Ver más adelante en
tipografía).

En los casos en los que la tipografía ocupa una gran parte de tu composición (por
ejemplo, en una revista o una invitación), la jerarquía tipográ ca es clave para
garantizar que la información sea legible y clara. El lector debe poder encontrar los
detalles fácilmente sin tener que leer el documento completo varias veces.

Ya sea que estés trabajando con tres estilos tipográ cos o con uno, es necesario
que haya una indicación clara de qué palabras se leen primero (texto de nivel uno),
segundo (texto de nivel dos) o tercero (texto de nivel tres). La información
importante, como títulos, encabezados o nombres, normalmente se lee primero y
luego siguen los detalles adicionales.

Si usas el mismo tipo de letra y estilo

en toda la composición, los pesos de
fuente y los diferentes tamaños se
convierten en tus mejores amigos.
Muchas familias de fuentes vienen con
tres o más variaciones de peso (Thin,
Light, Regular, Médium, Bold,
ExtraBold, Black y sus variantes
regulares e itálicas), lo que le brinda la
posibilidad de mantener un diseño
coherente y al mismo tiempo mantener
la jerarquía. (Ver más adelante en
tipografía).

44
fi
fi
fi
 4. Adopta el espacio negativo

Como hemos visto anteriormente, el espacio negativo, o espacio en blanco, se

re ere al espacio alrededor de un tema especí co, ya sea un título, una imagen o
una ilustración. Este espacio abierto es tan importante para una composición como
para el tema; le da a la composición amplitud para respirar y guía al espectador a lo
largo del diseño. El espacio negativo no sólo ayuda a separar entidades variables,
sino que también ayuda a establecer jerarquía y organización.

Para enfatizar ciertos aspectos de tu diseño, aumenta el espacio negativo alrededor

del sujeto. Esto aísla los elementos clave y permite al espectador navegar
directamente al punto focal.

45
fi
fi
5. Alineación, alineación, alineación.

Dr. Sheldon Cooper, BS, MS, MA, PhD, ScD y OMG

Cuando se cuenta con excesiva información para colocar en una sola página, la
composición puede verse abrumada fácilmente con texto. Una excelente manera de
organizar una composición es utilizar la alineación del texto y el espacio negativo. Al
categorizar el texto en diferentes niveles (encabezado, subtítulo y cuerpo) y alinearlo
según sea necesario, el lector puede acceder a la información de la página mucho
más fácilmente.

El texto de nivel uno, como los títulos, suele ser de gran tamaño dentro de una
composición. Una opción es alinear el encabezado con el centro de la página (como
se ve en el ejemplo), para a rmar la importancia.

46
fi
Los subtítulos, o texto de nivel dos, tienden a ser más extensos, pero aún así se
pueden bene ciar de una alineación central. Por último, pero no menos importante,
es mejor reservar el texto del cuerpo (texto de nivel tres) para una alineación a la
izquierda. Alinear grandes fragmentos de texto a la izquierda hace que al
espectador le resulte más fácil echar un vistazo a la composición y retener
información.

Aunque la alineación suele referirse a la tipografía, también puedes incorporar este

principio a patrones, líneas u otras ilustraciones. Utilizar un enfoque de diseño
basado en cuadrículas ayuda a mantener un sentido de organización en todo
momento.

6. Domina el arte del contraste

Un diseño exitoso se basa en el contraste para generar interés visual. El contraste

puede adoptar muchas formas: mediante la elección del color, el estilo tipográ co,
el patrón, la temperatura, la saturación y el valor. También evita que el diseño
parezca monótono y plano.

47
fi
fi
Para crear una jerarquía visual con contraste, deje que los puntos focales se
destaquen al contrastar su apariencia con las otras partes del diseño. Si está
utilizando una fuente serif en toda una composición, experimente con una sans serif
en negrita para acaparar la atención. En lugar de mantener una imagen en un tono
frío, apuesta por tonos cálidos aquí y allá. Si el diseño parece estar absorbido por
imágenes de fondo, compénselo con bloques sólidos de color. Si dominas el arte
del contraste, podrás realzar cualquier diseño.

BONUS TRACK: Regla de los 3 tercios en diseño

La regla de los tercios es bastante estándar para muchos diseñadores grá cos.

Simplemente, la regla de los tercios divide un espacio en nueve partes iguales. Las
líneas y las intersecciones crean una cuadrícula matemática a partir de la cual usted
puede diseñar diseños visualmente interesantes.

Su efecto es tan simple que lo damos por sentado. Pero si nos jamos en muchas
portadas de libros, thumbnails de Net ix o grandes carteles publicitarios, se utiliza

48
fl
fi
fi
de forma constante. La cuadrícula de la regla de los tercios se basa en nuestro
campo de visión, y la regla es una guía para colocar elementos clave en los caminos
habituales por donde se desplazan nuestros ojos. Usando esto a nuestro favor,
podemos crear un punto focal principal en el que nuestros ojos están entrenados de
forma innata para enfocarse.

Las dos cosas que hay que recordar son los cuatro puntos óptimos (o cuatro
intersecciones) y las cuatro líneas divisorias que forman la cuadrícula. Te quedan
nueve cuadrantes que dividen tu espacio, proporcionándote una estructura sencilla
con la que trabajar.

El objetivo de una composición terminada es lograr el equilibrio. El equilibrio en el

diseño es un estado en el que todos los elementos visuales están dispuestos en
completa armonía, cada uno de los cuales cumple su propósito preciso en la
composición.

49
Ahora bien, el equilibrio no signi ca necesariamente que todos los elementos estén
perfectamente centralizados y organizados. Signi ca que la relación entre todos los
elementos visuales ha sido cuidadosamente plani cada y funciona.

El equilibrio puede ser simétrico o asimétrico, algunos ejemplos.

Con equilibrio simétrico, todos los elementos de la composición se ubican por igual
en la página. Están dispuestos dentro de una cuadrícula imaginaria ( las y
columnas) que los distribuye equitativamente entre sí.

El equilibrio simétrico es el más fácil de reconocer.

50
fi
fi
fi
fi
Con un equilibrio asimétrico, los elementos visuales no se distribuyen por igual.

Sin embargo, están distribuidos de tal manera que su asimetría crea lo que dio en
llamarse “tensión igualada”.

51
Elementos conceptuales
Punto focal
Es el elemento principal que atrae la atención del espectador. Puede ser un punto,
una línea, una imagen, un texto o cualquier otro elemento que destaque del resto.

Los puntos, las líneas y las formas, pueden ayudarnos a expresar signi cados y
crear composiciones. Tanto las formas geométricas (cuadrados, triángulos,
polígonos, círculos, etc.) como las orgánicas o libres (que pueden representar
cualquier objeto) generan una relación entre ellas cuando aparecen en un diseño.
De esta manera, pueden transmitir emociones, movimiento, dinamismo o enfatizar
algún elemento de la pieza, entre otras posibilidades.

Las formas son de gran importancia a la hora de comunicar conceptos visualmente,

ya que cada una evoca signi cados concretos. Por ejemplo, la forma geométrica del
cuadrado transmite orden, seriedad, control y estabilidad, mientras que el círculo
comunica plenitud, armonía y movimiento.

52
fi
fi
Punto.
Un punto indica posición. No tiene largo ni ancho. No ocupa una zona determinada
del espacio. Es el principio y el n de una línea en los contornos de un objeto.

Kandinsky considera el punto como principio de toda obra artística, la parte más
mínima. Es origen, y por sí mismo su ciente para construir un diseño en el espacio
blanco, siendo la forma más simple el punto en la parte central del plano básico.

Línea.
Una línea es una forma que une dos o más puntos. Puede ser gruesa, na,
ondulada, dentada... y así sucesivamente. Cada posibilidad da a la línea una
sensación ligeramente diferente. Cuando un punto se mueve, su recorrido se
proyecta en una línea. La línea tiene largo, pero no ancho.

53
fi
fi
fi
 Tiene posición y dirección. Está
limitada por puntos y forma los
bordes de un plano. Es el producto
de un punto, su rastro al desplazarse.
Cuando una fuerza externa mueve el
punto hacia cualquier dirección, se
produce la línea, cuya extensión se
mani esta in nita.

La forma más sencilla es la

horizontal. Para el hombre equivale al
plano sobre el que se erige o
desplaza. Las líneas aparecen con
frecuencia en el diseño; por ejemplo,
en dibujos e ilustraciones. También
son comunes en elementos grá cos,
como texturas, patrones y fondos.

Las líneas también pueden utilizarse en composiciones más elementales, para

organizar, enfatizar o simplemente decorar. Cuando se trabaja con líneas, se debe
prestar atención a aspectos como el peso, el color, la textura y el estilo. Estas sutiles
cualidades pueden tener un gran impacto en la forma en que se percibe su diseño.

Busca lugares donde las líneas se escondan a plena vista; por ejemplo, en el texto.
Incluso en este caso, experimentar con distintas calidades de línea puede dar
resultados muy diferentes.

54
fi
fi
fi
Plano y volumen

El recorrido de una línea en

movímiento se convierte en un
plano. Un plano tiene largo y ancho,
pero no grosor. Tiene posición y
dirección. Está limitado por líneas.

El recorrido de un plano en
movimiento se convierte en un
volumen. Tiene una posición en el
espacio y está limitado por planos.

Elementos Visuales

Son la parte más destacada del diseño. Todo lo que pueda ser visto posee una
forma que aporta la identi cación principal en nuestra percepción.

Forma
La forma tiene lugar cuando una línea se une con otra cerrando un plano. El área
encerrada destaca con respecto al espacio que le rodea.

55
fi
 Medida
Todos los elementos tienen un tamaño que se puede establecer por comparación
con el resto de elementos presentes. Por tanto, se puede decir si un elemento es
más grande o más pequeño que otro. Además, los elementos son físicamente
medibles.

Color
Una forma se distingue de sus cercanías por medio del color, (blancos, negro, grises
intermedios) variaciones cromáticas y tonales. En este sentido, es posible utilizar
cualquier color, en cualquier variación tonal y cromática.

Textura
Se re ere a las características en la super cie de un elemento, que puede ser plana,
con relieve, suave, áspera, homogénea, rugosa, etc.

56
fi
fi
 Relación Entre Elementos.

Estos elementos nos determinan la ubicación y la interrelación en un diseño. Unos

son percibidos como la dirección y la posición y otros pueden ser sentidos como la
gravedad y el espacio, aquí vemos algunos ejemplos de estos conceptos básicos.

Dirección
Indica la dirección de un elemento con respecto al resto de elementos presentes en
el sistema. Se puede utilizar para crear un ujo visual que guíe al usuario a través
de la página. Por ejemplo, una dirección diagonal puede crear una sensación de
movimiento, mientras que una dirección vertical puede dar una sensación de
estabilidad y solidez.

Posición

De ne la posición exacta de un elemento respecto a la estructura en el que se

encuentra ubicado. Los elementos pueden estar posicionados de manera simétrica o
asimétrica. Una disposición simétrica es más formal y puede ser útil para transmitir
una sensación de orden. En cambio, una disposición asimétrica puede ser más
dinámica y emocionante.

57
fi
fl
Espacio
Todos los elementos presentes en un sistema ocupan un espacio. Sin embargo, este
espacio puede ofrecer diferentes sensaciones en cuanto a su profundidad. El
espacio negativo, también conocido como espacio en blanco, puede ser utilizado
para dar un respiro al ojo del usuario y permitirle centrarse en los elementos
importantes de la página. También puede utilizarse para separar los elementos y
crear una jerarquía visual..

Gravedad
La gravedad es la fuerza que ejerce sobre los objetos en una página. Gracias a la
sensación de gravedad podemos dar diferentes sensaciones a los elementos:
pesadez, estabilidad, inestabilidad, etc. Los objetos pueden parecer más pesados o
más ligeros dependiendo de cómo se coloquen. Por ejemplo, si un objeto se coloca
en la parte superior de una página, puede parecer más ligero que si se coloca en la
parte inferior.

58
 Tipografía
Si te duele la cabeza, es porque estás usando un tipo de letra
espantoso.

Se puede a rmar que el alfabeto es un sistema de signos visuales que nos permite
representar el lenguaje hablado. El que utilizamos nosotros se denomina alfabeto
latino y comenzó a de nirse a partir de una variante del alfabeto griego.

Si bien los fenicios dieron el gran salto al pasar de la escritura silábica y logográ ca
a la escritura alfabética, muchos siglos después, los etruscos durante el siglo VII a.
C., fueron quienes tomaron los signos que utilizaban los griegos, agregando algunas
letras y desestimando otras para poder representar su habla.

Durante el imperio romano la lengua o cial era el latín, que evolucionó dando origen
a las denominadas lenguas romances, como el español, el francés, el italiano, el
portugués, el catalán.

En la edad media, la cristianización impuso el

alfabeto latino en el norte de Europa. Los
griegos, los rusos, los hindúes, los países
árabes o los chinos, utilizan otros tipos de
alfabetos, algunos de ellos devienen de
escrituras diferentes a la nuestra, que varían
en la conformación de las palabras y en la
orientación de la escritura.

La tipografía es la huella que deja el método de impresión de tipos móviles que

desarrolló Gutenberg a comienzos del renacimiento y que constituyó un nuevo
proceso de producción editorial. A partir de ese momento surge el trabajo de

59
fi
fi
fi
fi
impresor y posteriormente el de creador de tipografías, cuya tarea consistía en el
dibujo de los signos para la representación de la lengua.

Hoy en día, ya no hay que recurrir a la precisión de los antiguos artesanos que
esculpían en madera las diminutas formas, ni tampoco tener que fundir los tipos en
plomo para que puedan utilizarse.

La era digital provee de herramientas a la

industria y a los diseñadores para producir
tipografías que hoy abundan en cantidades
interminables, o para tenerlas a un click de
distancia y poder hacer uso de ellas.

Fuente tipográfica

Se le llama fuente tipográ ca a un grupo completo de signos alfabéticos y no

alfabéticos regidos por características comunes, y en algunos casos, capaz de
escribir en varios idiomas. Los signos alfabéticos son las letras mayúsculas, las
mayúsculas tildadas, las letras minúsculas, minúsculas tildadas, ligaduras (æ)
mayúsculas y minúsculas y signos alternativos. Los signos no alfabéticos son los
números, o cifras (mayúsculos o minúsculos, tabulares o de ancho variable), los
signos de puntuación y los signos comerciales. Hay familias tipográ cas que
incluyen un tercer grupo de signos que son las versalitas, que son mayúsculas del
tamaño de la altura de «x» de las minúsculas y versalitas tildadas. También algunas
fuentes tipográ cas pueden incluir signos para la escritura de otras lenguas, signos
alternativos, pictogramas, y distintos recursos para usos especí cos.

60
fi
fi
fi
fi
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnop
qrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧ
ЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщ
ъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξορστυ
φχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫὰάὲέὴήὶίὸόὺύὼώΏआईऊऋॠऌॡऐऔऎअ

◌ं अँकखगघङचछजझञटठडढणतथदधनपफबभयरवळशषसहĂÂÊÔƠƯăâêôơư12

34567890०१२३४५६७८९’?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*₹

Fuente Open Sans diseñada para Google por Steven R. Matteson (Chicago) en el 2011, posee más
de 800 caracteres.

Una familia tipográ ca es un programa capaz de contener las variables tipográ cas
necesarias para la realización de un proyecto de diseño. Es un conjunto de tipos
basados en una misma variable principal con algunas variaciones, pero manteniendo
características comunes.

Los miembros que integran una familia se parecen entre sí desde un punto de vista
estructural, pero pueden variar de estilo y de peso, manteniendo rasgos comunes de
la familia. El objetivo de una familia tipográ ca es proveer a la comunicación visual
de variables para optimizar la efectividad del mensaje.

Ejemplo de Open Sans:

Open Sans Light - Open Sans Light Itálica

Open Sans Regular - Open Sans Regular Itálica
Open Sans SemiBold - Open Sans SemiBold Itálica
Open Sans Bold o Negrita - Open Sans Bold Itálica
Open Sans Extrabold - Open Sans Extrabold Itálica

61
fi
fi
fi
Variables tipográficas

Las familias tipográ cas están compuestas por variables, que manteniendo la misma
estructura constructiva, presentan variantes de peso (color tipográ co), de eje de
construcción (inclinación), de ancho (condensación o expansión), y en algunas
familias existe la variable de estilo (palo seco, romana, slab).

Las variables son importantes porque permiten al diseñador establecer jerarquías en

la página, variar el color y el ritmo en la composición, optimizando el mensaje de la
comunicación visual.

Peso

Condensación y Expansión

62
fi
fi
 Tipos

Las dos clasi caciones de tipos principales son serif y sans serif. Otras incluyen
modern, slab serif, blackletter, script y decorative.

Cuando hablamos de tipos o tipologías de letras, nos referimos a un conjunto de

caracteres que comparten un diseño similar. Las letras mayúsculas y minúsculas, los
números, los símbolos y los signos de puntuación son algunos de estos caracteres.

Los tipos de letra Arial, Helvetica y Times New Roman son tres de los tipos de letra
más conocidos en todo el mundo.

Para referirse a los tipos de letra, se suelen usar indistintamente términos como
tipos, fuentes o incluso el término tipografía, aunque, en realidad, existen algunas
diferencias entre ellos.

Arial es un tipo de letra (o una tipo).

Arial 75 Bold se re ere a la fuente. La fuente señala las especi cidades del cuerpo,
el estilo y el grosor (en este caso 75 Bold) dentro de un mismo tipo de letra (Arial).

Script es parte de una familia tipográ ca. Se trata de un conjunto de diferentes tipos
de letras que presentan características similares. De ahí que haya un “parentesco”
entre ellas. En el ejemplo de Serif, las fuentes que comienzan con esta
nomenclatura se caracterizan por tener estilo de letras que simulan ser una caligrafía
escrita.

Los distintos tipos de letra se usan para dar estilo o aportar matices a un
documento impreso, una página o contenidos web.

63
fi
fi
fi
fi
 A la hora de elegir el tipo de letra, habrá que tener en cuenta el texto, el efecto
estilístico deseado, el objetivo y el soporte de la comunicación. De hecho, el tipo de
letra puede afectar a la legibilidad en función del soporte seleccionado.

Las marcas y las empresas normalmente, emplean dos o tres tipos de letra distintos
en sus comunicaciones. Esto se establece con anterioridad en el manual de
identidad grá ca, lo que ayuda a garantizar la coherencia visual en todos los
soportes y consolidar la imagen de marca.

¿Cuáles son los diferentes tipos de letras?

Existen distintas familias o, más bien, grandes grupos de tipos de letra. Y cuando te
dispones a diseñar un proyecto, habría que saber cómo distinguirlas. A continuación,
te traigo un listado con los principales grupos de tipos de letra y sus características.

64
fi
Serif (o tipos de letra con remates)

Los tipos de letra serif son aquellos que presentan remates. Se trata de trazos
adicionales que aparecen en los extremos de las líneas que conforman las letras.

Es importante saber que este tipo de letra incluye numerosas series tipográ cas
como, por ejemplo, las Didonas y las Garaldas.

Didonas

Aparecieron a mediados del siglo xviii, creadas por Didot y perfeccionadas por Bodoni.

Fueron utilizadas por el Primer Imperio Francés al mando de Napoleón Bonaparte

como rasgo identitario y diferenciador del antiguo régimen.

También se utilizaron para la confección de los documentos de la Declaración

de la Independencia Argentina y varios impresos de la época.

Poseen alto contraste entre sus trazos, modulación vertical y remates horizontales.

Otros ejemplos Century, Falstaff, Caledonia, Madison, Tienman, Walbaum.

Catedral
Bodoni

65
fi
Estos tipos de letra se identifican con la tradición, la elegancia, la confianza, la
sofisticación, la autenticidad, la historia y la integridad.

Una de las características más particulares de los tipos de letras Serif es el facilitar
la lectura. Gracias a ello se reduce el estrés en la vista y hace que el usuario pueda
leer un texto largo con mayor facilidad. Por ese motivo suelen ser las tipologías de
letras elegidas para bloques de texto o contenidos de larga extensión que requieren
un tamaño menor de 12. De los tipos de letra más conocidos de estilo serif se
destacan Georgia, Minion o Caslon.

Garaldas

Fueron de uso corriente en europa desde finales del siglo xv hasta la segunda mitad del siglo XVII.

Este grupo recibe su nombre en homenaje a Glaude Garamond y Aldus Manutius y fueron
la herramienta que apoyó la la fijación oficial de la gramática y la ortografía.

Aumenta un poco el contraste de los trazos, se afinan los remates y el eje

de modulación es variado en las letras. Los trazos ascendentes de las minúsculas
son apenas más altos que las mayúsculas.

Otros ejemplos Bembo, Times New Roman, Perpetua, Garamond, Goudy Old Style.

Catedral
Adobe Garamond

66
Sans serif

También denominados tipos de letra lineales, o de palo seco, los tipos de letra sans
serif son aquellos que no están adornados con remates. Como ocurre con los tipos
de letra serif, los sans serif agrupan otras series tipográ cas.

Los sans serif están asociados al minimalismo, la claridad, la modernidad y la

vanguardia. Por lo general, se utilizan sans serif en publicaciones de blogs y
documentos en la web porque reflejan modernidad y se ven muy bien, incluso
con resoluciones de pantalla bajas..

En un mismo documento, es posible, y hasta recomendable, combinar un tipo de

letra con remates -serif- (por ejemplo, en los títulos) con un tipo de letra sin remates
-sans serif- (para el cuerpo del texto).
Existen diversas modalidades o subcategorías de letras tipos sans serif como lo son
las grotescas, humanísticas, neogóticas y geométricas. De los tipos de letras más
conocidos se destacan Arial, Helvetica Neue, Frutiger o Gill Sans.

67
fi
Sans Serif Lineales

Las lineales agrupan todos las tipografías sans serif y se organizan en cuatro subgrupos:
grotescas, neo grotescas, geométricas y humanistas.

Lineales Grotescas
Fueron las primeras sans serif, se originaron en el siglo xix para la rotulación y publicidad, luego
las de caja baja se adecuaron para texto continuo. Poseen ligero contraste en el grosor de los trazos y
una leve cuadratura en las curvas.

Algunas poseen la «g» con ojal y sus contraformas son cerradas y proporciones regulares.

Otros ejemplos Akzidenz Grotesk, Bureau Grotesque, Grotesque, New Gothic, Vectora

Vegetales
ITC Franklin Gothic

Sans Serif Lineales

Lineales Neo Grotescas

Derivan de las grotescas con contrastes menos marcados, contraformas más abiertas y proporciones
clásicas. Muchas neo grotescas tienen un alto grado de sutileza y variación de anchuras y pesos para
adaptarse a diferentes medios de producción, como la fotocomposición.

Otros ejemplos Arial, Helvetica, Neuezeit S, Folio, Bell Gothic.

Vegetales
Graphik

68
Sans Serif Lineales

Lineales Geométricas
Surgen como consecuencia de las propuestas estéticasde las vanguardias artísticas en Europa en la década
del veinte. Son monolineales que se construyen a partir de las formas geométricas básicas.

Otros ejemplos Erbar, Eurostyle, Kabel, Metro.

Vegetales
Futura

Sans Serif Lineales

Lineales Humanistas
Este tipo de palo seco es el que diseñó el calígrafo Edward Johnston para el Metro de Londres en
1916, y significó un paso adelante en lo referente a las características habituales de los tipos basados
en las letras romanas.

Sus trazos presentaban un ligero contraste y se visualiza la presencia caligráfica. En este tipo se basó
Eric Gill para crear su tipo Gill Sans.

Otros ejemplos Antique Olive, Optima.

Vegetales
Gill Sans

69
Los tipos de letra slab serif (o tipos de letra egipcia)

Los tipos de letra slab serif son muy parecidos a los serif. También presentan
remates, aunque mucho más gruesos, formando una especie de bloque en los
extremos de los caracteres.

Este tipo de letra transmite conceptos como la estabilidad, la confianza, la

fuerza y la seguridad.

Uno de los estilos de letras más

conocidos de esta categoría es el
estilo western, relacionado por
supuesto con la tipografía que se
utiliza en las clásicas películas
del oeste de Estados Unidos.
Algunas fuentes destacadas de
slab serif son City, Memphis o
Rockwell.

Los tipos de letra script (o tipos de letra cursiva)

Estamos ante un estilo de tipo de letra mucho más natural, que se asemeja a la
escritura a mano. Sus letras parecen estar conectadas entre sí. Se volvió muy
popular en el siglo XX, más precisamente, en la década de los años 50 con el boom
de la fotografía en Estados Unidos y posteriormente en la década de los años 70 en
Europa. xAunque sea bastante popular en determinados sectores, habría que tener
cierto cuidado a la hora de utilizar este tipo de letra, ya que podría di cultar la lectura
del texto según el tamaño y el soporte elegidos.

70
fi
No se recomienda el uso en el cuerpo del texto. Estos tipos de letra son muy
habituales, por ejemplo, en el diseño de carteles, logos o incluso en portadas
de libros.

Existen otros grupos como los Caligrá cos, que se agrupan en:

Glíficos o Insisos
Son los tipos de letra que evocan el grabado o cincelado de caracteres en piedra o
metal, en lugar de la escritura caligrá ca. Por lo tanto, tienen pequeñas remesas
triangulares o trazos descendentes. Un ejemplo es la Trajan Pro.

Trajan Pro

71
fi
fi
Escriptas
Se inspiran en la escritura manual y corriente, su aspecto depende de la herramienta
con la que han sido trazadas. Un ejemplo es la Zapfino.

Gráficos

Se basan en originales dibujados a mano que se escriben lentamente con un pincel,

bolígrafo, lápiz u otro instrumento de escritura. Estos tipos de letra generalmente no
representan ningún tipo de escritura.

Góticas o Blackletters

La letra gótica fue la que dominó el tipo de escritura latina que se utilizó en Europa
entre los siglos XII y XV, y la primera en convertirse en tipografía de la mano de
Gutenberg. De formas pesadas y condensadas, con una fuerte modulación vertical.

72
Gaélicos

Son tipografías inspiradas en letras insulares empleadas en la escritura del irlandés

y usadas entre los siglos XVI y XVIII en Escocia, y hasta el siglo XX en Irlanda,
actualmente se las utilizan con poca frecuencia. También se les llama celtas o
unciales.

Set de caracteres

Todas las tipografías están

compuestas por signos
alfabéticos y no alfabéticos que
conforman un grupo de grafías
que se reúnen para su utilización
y que se denomina set de
caracteres o mapa de caracteres,
vendría a ser como el equivalente
digital de la caja tipográ ca de los
tiempos de la imprenta de tipos
móviles.

Dependiendo del trabajo a

realizar, es importante al
momento de seleccionar una
familia tipográ ca conocer el
conjunto de caracteres que la
conforman, porque de ello
dependerá la composición.

73
fi
fi
 Los programas de edición de diseño grá co cuentan con una ventana (glyphs) que
nos permite visualizar el set de caracteres completo, el cual se activa mediante las
funciones OpenType. Un set caracteres de buena calidad no debería ser inferior a
256 signos por cada variable.

Tipometría

La tipometría es el sistema de mediciones que se utiliza para toda composición

tipográ ca. Existen dos sistemas difundidos en la actualidad, el europeo (el punto
Didot), que se utiliza en algunos países de Europa, y el angloamericano (el punto
Pica), que se utiliza en casi todo el mundo, incluido Argentina.

En los dos casos la unidad de medida es el punto y se abrevia pt, doce puntos Didot
equivale a un Cícero, y doce puntos Angloamericanos equivalen a una Pica. La
deferencia en milímetros entre uno y otro es mínima, pero es importante elegir un
sistema de medidas y hacer con él, todo el trabajo.

Por otra parte, los monitores de computadoras utilizan como unidad de medida el
píxel PX, de nido como la menor unidad de información visual que se puede
presentar en pantalla, a partir de la cual se construye las imágenes.

El tamaño de un píxel no es absoluto, ya que depende de la resolución usada, a

modo de ejemplo un pixel a resolución 800x600 es mayor que uno a resolución
1024x768.

En trabajos digitales se utilizan otros dos sistemas: Adobe Postscript, cuya unidad es
el punto de pulgada (unos 0,352 mm). Una pulgada tiene 72 puntos (2,54
centímetros).

Existen muchas propuestas por lograr uni car las medidas tipográ cas a escala
mundial, entre las que destacan las basadas en el sistema métrico decimal, como la
propuesta por la ISO (International Organization for Standarization), pero hasta la
fecha sin los resultados esperados.

74
fi
fi
fi
fi
fi
 Por otra parte, el propio avance de los medios digitales está estableciendo por si
solo una estandarización basada en el sistema Postcript de Adobe, altamente
difundido y aceptado en la actualidad, así como la utilización de los píxeles como
unidad de medida, no sólo en el diseño grá co digital y el diseño web, sino también
en sistemas fotográ cos digitales y en televisiones de alta gama.

Cuerpo tipográfico

Cuando hablamos de cuerpo tipográ co, nos

Cuerpo referimos al tamaño de la letra, pero muchas
veces hemos visto que dos tipografías que
tienen el mismos cuerpo tipográ co, en
Tipo móvil apariencia una se ve mayor que la otra. Esto
sucede porque en realidad el cuerpo
tipográ co tiene que ver con el sistema de
impresión con tipos móviles, y se re ere a la
medida vertical de la cara frontal del tipo
móvil y no al tamaño de la letra.

75
fi
fi
fi
fi
fi
fi
Tanto las mayúsculas, las minúsculas, como los signos de puntuación, las cifras, y
demás componentes de la familia poseen un mismo valor de cuerpo. Por eso es que
si comparamos distintas tipografías de un mismo valor de cuerpo, pueden verse de
distinto tamaño, precisamente porque la medida del cuerpo no cambia, cambia el
diseño de la letra.

Interlínea o interlineado

La interlínea es el espacio que hay entre la línea base de una línea de texto hasta la
línea base de la siguiente línea de texto.

Existen tres tipos de interlineado; el sólido, es cuando el valor de cuerpo tipográ co

coincide con el valor de la interlínea; el abierto, es cuando el valor de la interlínea es
mayor al del cuerpo tipográ co; y el negativo, es cuando el valor de la interlínea es
menor al valor del cuerpo tipográ co.

La interlínea negativa era imposible de lograr en el sistema de impresión de tipos

móviles.

Muestra interlineado Muestra interlineado en

14pt/14, aquí comienzan a
en 14pt/22, muestra agruparse las líneas.
ideal para subtítulos
Muestra interlineado en
o encabezados que 14pt/10, donde comienza
el interlineado negativo.
requieren algún
destaque. Muestra interlineado en
14pt/8, interlineado
negativo.

76
fi
fi
fi
Anatomía de las letras

77
Color
Dadme un color donde apoyarme y conmoveré al mundo.

La utilización del color en el área del diseño es el sistema más valioso para transmitir
sensaciones y emociones. Con buen conocimiento de su naturaleza y efectos, será
posible expresar alegría, tristeza, esperanza, frialdad, coraje, optimismo, todo lo
luminoso o sombrío, lo tranquilo o lo exaltado, etc.

El color afecta la percepción y el comportamiento humano. Es una rama de la

psicología conductual y se utiliza en una variedad de campos, incluido el marketing,
el diseño y el arte.

El uso del color para in uir en las emociones y el comportamiento se ha utilizado

durante siglos. Por ejemplo, en el antiguo Egipto, el color azul se asociaba con la
realeza y la religión, mientras que el color rojo se asociaba con la ira y el peligro.

En la actualidad, la psicología del color se utiliza en una variedad de campos,

incluido el marketing y el diseño. Los especialistas en marketing utilizan el color para

78
fl
 crear packaging y anuncios que atraigan la atención de los consumidores. Los
diseñadores utilizan el color para crear espacios que sean agradables y
estimulantes.

El color, como cualquier otra técnica, está sometido a ciertas leyes, que
conociéndolas será posible dominar el arte de la armonización, conocer los medios
útiles que sirven para evitar la monotonía en una combinación cromática, estimular
la facultad del gusto selectivo y a rmar la sensibilidad.

El diseño de nuestros días no solo requiere color para ser funcional. La elección del
color esta basada en factores estéticos y también en los psíquicos, culturales,
sociales y económicos.

El nivel intelectual, el gusto de la comunidad, la localización y el clima también

in uyen en la elección del esquema y asimismo la nalidad o propósito de cada
pieza. Pero entre todos estos factores del color, quizás sea el más importante es el
psicológico, ¿por qué nos alegra, inquieta, tranquiliza o deprime un determinado
conjunto o combinación cromática?

El color in uye sobre el espíritu y el cuerpo, sobre el carácter y el ánimo e incluso

sobre los actos de nuestra vida; el cambio de un esquema de color afecta
simultáneamente a nuestro temperamento y en consecuencia a nuestro
comportamiento.

El color es luz, belleza y armonía, pero es sobre todo, equilibrio psíquico,

confort y educación.

No solo la apariencia de un color depende de su contexto en el espacio y en el

tiempo, también es necesario saber a que tinte preciso se hace referencia, a que
valor de claridad, y a que grado de saturación. A todos nos apasiona el color y cada
uno tiene sus propias ideas, gustos o desagrados sobre este o aquel color; pero en

79
fl
fl
fi
fi
general, todos percibimos una reacción física ante la sensación que produce un
color, como la de frío en una habitación pintada de azul o la de calor en otra pintada
de rojo.

Los colores también se pueden utilizar para crear una sensación de espacio o para
hacer que un objeto parezca más grande o más pequeño. Por ejemplo, los colores
claros pueden hacer que un salón parezca más grande, mientras que los colores
oscuros pueden hacer que parezca más pequeño.

La psicología de los colores están basadas ciertas relaciones de estos con formas
geométricas y símbolos, y también la representación Heráldica. Los colores cálidos
se consideran como estimulantes, alegres y hasta excitantes y los fríos como
tranquilos, sedantes y en algunos casos deprimentes.

Una experiencia personal: Muchos años atrás me encontraba diseñando

una campaña para una marca de moda con presencia en más de 20
localidades del interior del país. Diseñé una invitación para un evento de
lanzamiento en base al color negro y la misma se entregó en un sobre
color negro. ¡En muchos lugares la invitación cayó muy mal! Mientras
que en Buenos Aires el negro es visto como lujo, sofisticación y elegancia,
en algunas provincias, el negro es sinónimo de luto.

El amarillo es el color que se relaciona con el sol y signi ca luz radiante, alegría
estimulo. El rojo esta relacionado con el fuego y sugiere calor y excitación. El azul,
color del cielo y el agua es serenidad, in nito y frialdad. El naranja, mezcla de
amarillo y rojo, tiene las cualidades de estos, aunque en menor grado. El verde,
color de los prados húmedos, es fresco, tranquilo y reconfortante. El violeta es
madurez, y en un matiz claro expresa delicadeza.

80
fi
fi
En estos seis colores básicos se comprenden toda la enorme variedad de matices
que pueden ser obtenidos por las mezclas entre ellos y también por la de cada uno
con blanco y negro. Cada una de estas variaciones participa del carácter los colores
de que proceden, aunque con predominio de aquel que intervenga en mayor
proporción. El blanco es pureza y candor; el negro, tristeza y duelo; el gris,
resignación; el pardo; madurez; el oro, riqueza y opulencia; y la plata, nobleza y
distinción.

El Color

Se dice que Napoleón Bonaparte durante sus batallas siempre usaba

una camisa de color rojo. Para él era muy importante porque, si
resultaba herido, con la camisa roja no se vería su sangre y sus
soldados no la notarían, no se preocuparían y no dejarían de luchar.

Los colores se distinguen entre sí por su longitud de onda. Y dependiendo de su

pureza, puede hablarse de colores primarios, colores secundarios y colores
terciarios. Todos, no obstante, presentan las siguientes tres propiedades:

Matiz. También llamado “croma”, alude al color en sí mismo, lo que nos permite
distinguir un color de otro diferente. Depende de las longitudes de onda del color
para ubicarlo dentro del círculo cromático. Esto es lo que aproxima dos colores
próximos en sus longitudes de onda, pudiendo convertir uno en el otro.

Brillo. También llamado “valor”, se re ere a la cantidad de luz presente en el color,

en una escala que va desde el negro (sin luz) hasta el blanco (demasiada luz). Un
color más brillante presentará una mayor cantidad de blanco que uno opaco, más
cercano al negro.

81
fi
 Saturación. Básicamente se re ere a la pureza del color, o sea, la concentración de
gris presente en un color en un momento determinado. Mientras más gris posea,
menos puro será y menor será su saturación, viéndose como si estuviera sucio,
opaco.

Colores Primarios

Los colores primarios son aquellos colores que no pueden ser obtenidos mediante la
mezcla de otros tonos o colores, sino que son “puros”, contenidos en la luz blanca y
dentro del espectro visible para el ojo humano. Comúnmente se consideran colores
primarios rojo, verde y azul. En otras palabras, los colores primarios se llaman así
porque son los colores básicos que no pueden ser generados con la combinación de
otros colores.

Sin embargo, los colores primarios no son una propiedad de la luz, ni están de nidos
dentro de ella. En realidad, la radiación electromagnética que llamamos “luz” se
compone de un rango continuo de longitudes de onda, en el que bien puede existir
un número incontable de colores, pero de los cuales el ojo humano, debido de su
con guración biológica, puede captar únicamente algunos.

En nuestros ojos existen receptores oculares

(conos L, M y S), y son responsables de la
percepción de los colores, a partir de los cuales se
compone el resto, gracias a un sistema aditivo de
color. Así, con la tríada rojo-verde-azul (llamada
RGB por sus siglas en inglés), pueden obtenerse:

•Cyan: sumando verde + azul.

•Magenta: sumando rojo + azul.

•Amarillo: sumando rojo + verde.

•Blanco: sumando rojo + verde + azul.

82
fi
fi
fi
 A dicho procedimiento de mezcla de colores para obtener otros nuevos, se lo conoce
como síntesis y puede darse de tres modos diferentes:

Síntesis aditiva. Los colores se superponen, sumando luz, y generando así tonos
cada vez más claros. Tiene lugar en monitores de computador, pantallas de TV o
proyectores de cine. Sus colores primarios son rojo, verde y azul. Este nombre se
debe a que cada mezcla de colores aporta luz, o sea, a medida que se mezclan
colores primarios se avanza hacia el blanco (todos los colores a la vez).

Síntesis sustractiva. Los colores se superponen, restando luz, y generando así

tonos cada vez más oscuros. Tiene lugar en impresiones y fotografías. Dicho de otro
modo, al mezclar colores se pierde luz, se avanza hacia el negro.

Los colores primarios de acuerdo a esta síntesis

especí ca son el cyan, el magenta y el amarillo,
de modo que se le conoce como CMYK por sus
siglas en inglés (Cyan, Magenta, Yellow &
Black). Así, sumando colores primarios puede
obtenerse por sustracción:

•Rojo: sumando magenta y amarillo.

•Azul: sumando cyan y magenta.

•Verde: sumando cyan y amarillo.

•Negro: sumando cyan, amarillo y magenta.

Síntesis tradicional. Es la empleada por la pintura y las artes tradicionales, y

aunque es también de tipo sustractiva, se la considera empírica, pues proviene de la
experiencia histórica con la pintura y la mezcla de los óleos. Sus colores primarios
son amarillo, azul y rojo.

83
fi
Colores secundarios

Los colores secundarios son aquellos obtenidos mediante la síntesis o combinación

de los colores primarios, es decir, mediante su mezcla. Esto dependerá del tipo de
síntesis que tenga lugar, por lo que los colores secundarios pueden variar. Por
ejemplo, si mezclas el rojo y el azul, obtendrás el color magenta. Existen varias
combinaciones o modelos a saber:

El modelo tradicional (RYB).

El modelo más tradicional y antiguo es el RYB (rojo, amarillo y azul), y al mezclar

dos de estos colores se obtienen los siguientes:

• Naranja: Se obtiene al mezclar el rojo y el amarillo.

• Verde: Se obtiene al mezclar el amarillo y el azul.

• Morado: Se obtiene al mezclar el azul y el rojo.

84
El modelo RGB.

El modelo RGB consiste en la mezcla del rojo, el verde y el azul, y el uso de estos
colores se basa en la síntesis aditiva que consiste en utilizar la luz como
componente para obtener el color. Debido a esto, el modelo RGB es el que se usa
para reproducir imágenes en la televisión y los móviles.

Los artistas y diseñadores en el ámbito digital también suelen usar el modelo RGB
en sus creaciones, ya que la luz de la pantalla del ordenador o portátil les permite
crear cualquier color que deseen con las diferentes combinaciones del modelo RGB.

85
Los colores que obtendrás al combinarlos son los siguientes:

• Magenta: Se obtiene al mezclar el rojo y el azul.

• Cyan: Se obtiene al mezclar el verde y el azul.

• Amarillo: Se obtiene al mezclar el rojo y el verde.

El modelo CMY o CMYK

El modelo CMY se basa en los colores cyan, magenta y amarillo, mientras que, si le
añades la K al nal, también incluye el color negro. Estos colores se basan en la
síntesis sustractiva del color, es decir, se crean al aplicar pigmentos que absorben
las longitudes de ondas y refractan otras. Este es el modelo que se usa para la
impresión a color (cuatricromía), ya que los colores se vuelven más oscuros al
añadir más tinta o al mezclarlos.

Cuando mezclas dos de los colores primarios del modelo CMY (cyan, magenta y
amarillo), obtendrás los siguientes colores secundarios:

• Azul: Se obtiene al mezclar el cian y el magenta.

• Rojo: Se obtiene al mezclar el magenta y el amarillo.

• Verde. Se obtiene al mezclar el amarillo y el cian.

86
fi
La paleta de colores

La selección de colores para un proyecto constituye una paleta. La mejor forma de

asegurar la consistencia entre los colores de diferentes imágenes o documentos es
utilizar colores de una paleta compartida. Esto es fácil, porque muchos programas
permiten usar unas mismas paletas. Las de los sistemas de color Pantone o
Trumatch incluyen centenares de colores diferentes, y trabajando en modalidad de
color de 24 bits siempre es posible de nir nuevos colores, de entre más de 16
millones de posibilidades.

87
fi
 En los programas de diseño para la web, tanto grá cos como de html, suele
utilizarse una paleta formada por 216 colores llamada web safe colors. Estos colores
se muestran por igual en cualquier plataforma, sea Mac, sea PC, incluso con tarjetas
grá cas de baja resolución (color de 8 bits.) ya que este conjunto de colores son
comunes a la paleta mínima de colores que muestran ambos tipos de sistema Si
bien este número de colores es minúsculo en comparación con los colores de otras
paletas, es más que su ciente para muchos proyectos de diseño.

El círculo de colores primarios y secundarios y sus combinaciones.

¿Querés usar colores que se complementen? Elige los que se encuentran justo al
lado de otros en el círculo de colores. Estos se llaman colores análogos. Para que la
combinación de colores quede bien, necesitarás conseguir el contraste adecuado.
La mayoría de los ilustradores eligen un color dominante, un color secundario y un
tercer color para resaltar.

88
fi
fi
fi
Es un método simple para desarrollar un sistema de colores pero, como todas las
técnicas, también tiene sus desventajas. Algunos expertos piensan que es fácil
conseguir una paleta de colores relajantes (como los llamados pasteles), pero al
tener muy bajo contraste y los colores tienden a mezclarse (similar valor de gris).

Por ejemplo, la combinación de colores como el amarillo y el verde, o el amarillo y el

rojo, que son colores muy vívidos, pero al usarla en un cuadro, el amarillo resulta ser
el color primario.

Las ilustraciones digitales tienen unas propiedades muy distintas a las de la pintura
tradicional, ya que proporcionan más exibilidad a la hora de usar la paleta de
colores que quieras. Además, te permiten conseguir mezclas de colores que son
extremadamente difíciles de obtener con la pintura tradicional.

Esto es lo que se llama un esquema de colores complementarios. Si eliges un tono

al otro lado del círculo, le da a tu color un contraste más substancial a la vez que
agrada la vista. Por eso, ten a mano el círculo cromático para elegir los que
quedarán mejor en tus próximos proyectos.

89
fl
90
Sistemas de definición del color

Existen otros sistemas comerciales de de nición de colores, como el sistema

Pantone. En el sistema Pantone existe una serie de colores que se obtienen
mediante mezclas predeterminadas de unas tintas proporcionadas por el fabricante.
Para conseguir los resultados esperados es imprescindible disponer de un libro o
catálogo de muestras de esos colores sobre papel satinado y papel no satinado. Los
colores pantone se simulan en pantalla y tienen una equivalencia en CMYK
solamente en parte.

Muchos programas de diseño incorporan utilidades completas de gestión del color,

para asegurar una correcta visualización en pantalla, y una correspondencia entre
los colores del monitor y los que se imprimen, puesto que hay mucha diferencia
entre los colores que aparecen de forma aditiva (por luz emitida, como en el monitor)
o de forma sustractiva (a partir de luz re ejada, en materiales impresos o cualquier
objeto). Para ello es necesaria una correcta calibración de color.

En el sistema RGB, el color se de ne en términos de luz cromática: es decir, una

mezcla de luz roja, verde y azul que, en combinación, da todos los colores-luz como
los de la pantalla o los focos de un escenario. Combinando los tres valores
obtenemos todos los colores posibles. Un valor de (0,0,0) supone negro, el máximo
valor (255, 255, 255) en cada uno da luz blanca.

Otro sistema con tres parámetros para de nir el color es el modelo de color HSB
(Hue, Saturation, Brightness – Tonalidad, Saturación, Brillo) o HSV (Hue, Saturation,
Value). El modelo HSB (o HSV, como se pre era) deriva del espacio RGB y
representa los colores combinando tres valores: el tono en sí (H), la saturación o
cantidad de color (S) y el brillo del mismo (B). Estos valores suelen representarse en
un diagrama circular (principal uso de este modelo).

91
fi
fl
fi
fi
fi
Estas tres magnitudes pueden tener los siguientes valores:

H (color en concreto). Valores de 0-360º. La gama cromática se representa en una

rueda circular y este valor expresa su posición.

S (Saturación). Valores de 0-100%. De menos a más cantidad de color.

B (Brillo). Valores de 0-100%. De totalmente oscuro a la máxima luminosidad.

El sistema CMYK, de Cyan, Magenta, Yellow, BlacK, de ne los colores de forma

aditiva, tal como funciona una impresora de inyección de tinta o una imprenta
comercial de cuatricromía. El color resulta de la superposición o de colocar juntas
gotas de tinta semitransparente, de los colores cyan (un azul), magenta (un color
rosa intenso), amarillo y negro. El sistema es aditivo, a diferencia de los anteriores, y
aquí (0,0,0,0) es blanco puro (el blanco del papel).

El color en pantalla e impreso es muy diferente, y la gama de colores que se puede

representar, es muy distinto. Los sistemas de gestión de color en pantalla permiten
que al menos los colores simulados en pantalla se parezcan lo máximo a los que se
obtendrán a la hora de imprimir.

Código Hexadecimal de un color.

Otra forma de expresar un color en particular, o más propiamente de identi carlo por
un nombre único para él, es el código hexadecimal. De esta forma, además de usar
los valores RGB, CMYK, HSB o LAB, también puede usarse su nombre hexadecimal
para el mismo n. El código hexadecimal se expresa por una serie alfanumérica
(compuesta por números y letras) de 6 caracteres precedidos por el signo “#”.

Este ejemplo está representado por el color R0 G88 B116 y

tiene el código hexadecimal #005874.
Estos 6 caracteres son en realidad 3 grupos de 2 (3 parejas). Cada pareja
corresponde a un color básico RGB (rojo, verde y azul, respectivamente):

#RRGGBB (= #RRVVAA)

92
fi
fi
fi
 Un código hexadecimal puede tener números del 0-9 y letras de A-F. El negro sería
#000000 y el blanco #FFFFFF.

Código hexadecimal
Se usa sobre todo (aunque no únicamente) en las páginas web. Debido a ello
muchas veces se le conoce directamente por código HTML del color.

Nuestro navegadores (Safari, Firefox, Chrome, etc…) lee estos códigos presentes
en las páginas de internet y representa los colores en pantalla. Tanto el citado
lenguaje HTML como los estilos CSS y el lenguaje de programación JavaScript
pueden usar códigos hexadecimales para indicar colores al navegador.

Clasificación de los colores

Los colores, como ya sabemos, están clasi cados en grupos cálidos (amarillos y
rojos) y fríos (verdes y azules). El fundamento de esta división radica simplemente
en la sensación y experiencia humana más que en una razón de tipo cientí ca.A
estos clasi caciones se las determinó como “Temperatura de color”

Colores cálidos
Los colores cálidos en matices claros: Cremas y rosas, sugieren delicadeza,
feminidad, amabilidad, hospitalidad y regocijo. Los matices oscuros con predominio
de rojo, vitalidad, poder, riqueza y estabilidad. La distinción entre colores cálidos y
colores fríos es bastante corriente.

Los colores cálidos se asocian con el fuego y el sol, y generalmente evocan

sensaciones de calidez, energía y excitación. Los colores cálidos incluyen tonos
como rojo, naranja y amarillo. Estos colores suelen considerarse estimulantes y
pueden transmitir emociones intensas como pasión, alegría y calor.

93
fi
fi
fi
También tienden a avanzar visualmente, lo que signi ca que parecen acercarse al
observador y pueden crear una sensación de cercanía o intimidad.

Colores Cálidos Básicos

• Rojo: Es un color muy intenso y excitante.

• Naranja: Este color también un color asociado con la vitalidad.

• Amarillo: Un color evoca fuerza y voluntad.

• Borgoña: Este color nos recuerda la calidez del vino.

Como su nombre lo indica, tienden a hacerte pensar en cosas cálidas, como la luz
solar y el calor. Visualmente, los colores cálidos parecen acercarse o avanzar (al
igual que los colores oscuros ), por lo que a menudo se usan para hacer que las
habitaciones grandes parezcan más pequeñas o acogedoras.

94
fi
Colores Fríos
Los colores fríos se asocian con el agua, el hielo y la naturaleza en tonos más fríos.
Estos colores evocan una sensación de tranquilidad, calma y frescura. Los colores
fríos incluyen tonos como azul, verde y violeta. Se considera que transmiten
emociones más relajadas y serenas, como la paz, la serenidad y la tristeza
(¿Recuerdan a BLUE, el personaje Tristeza de la película de animación
Intesamente?). Además, tienden a retroceder visualmente, lo que signi ca que
parecen alejarse del observador, creando una sensación de distancia o amplitud.

Colores fríos Básicos

• Azul: Nos recuerda al agua y al cielo despejado.

• Turquesa: Un color con re ejos de azul.

• Cyan: Uno de los azulados más fríos.

• Índigo: Un tono más morado pero también frío.

• Violeta: El color de la imaginación y la espiritualidad.

95
fl
fi
 Psicología del color

Parece haber general acuerdo sobre el hecho de que cada uno de los colores posee
una expresión especí ca. Como hemos visto, el amarillo es el color que se relaciona
con el sol y signi ca luz radiante, alegría y estímulo. El rojo esta relacionado con el
fuego y sugiere calor y excitación. El azul, color del cielo y el agua es serenidad,
in nito y frialdad. El naranja, mezcla de amarillo y rojo, tiene las cualidades de estos,
aunque en menor grado. El verde, color de los prados húmedos, es fresco, tranquilo
y reconfortante, además de ser el color predominante en los temas de ecología,
preservación y sustentabilidad. El violeta es madurez, y en un matiz claro expresa
delicadeza. En estos seis colores básicos se comprenden toda la enorme variedad
de matices que pueden ser obtenidos por las mezclas entre ellos y también por la de
cada uno con blanco y negro; cada una de estas variaciones participa del carácter
los colores de que proceden, aunque con predominio de aquel que intervenga en
mayor proporción. El blanco es pureza y candor; el negro, tristeza y duelo; el gris,
resignación; el pardo; madurez; el oro, riqueza y opulencia; y la plata, nobleza y
distinción.

Como ya dijimos, los colores que tienen una mayor potencia de excitación, son rojo,
rojo - naranja y naranja, los más tranquilos, los azules y azules verdes o violáceos.

Un azul turquesa es algo más inquieto que un azul ultramar, por la intervención en el
primero del amarillo y en el segundo del azul, que lo hace derivar al violeta. Los
colores mas sedantes y confortables en decoración son los verdes, azules claros y
violetas claros, los matices crema, mar l, beige, gamuza, y otros de cualidad cálida,
son alegres, y tienen cierta acción estimulante, pero tanto unos como otros, deben
ser usados en áreas amplias y adecuadamente.

Los colores a plena saturación son usados muy pocas veces en super cies de gran
tamaño; los rojos, naranjas, amarillos, azules y otros colores vivos en toda su pureza
no lo presenta nunca la naturaleza en amplias extensiones, sino como acentos o
pequeñas áreas de animación.

96
fi
fi
fi
fi
fi
 Los colores expresan estados anímicos y emociones de muy concreta signi cación
psíquica, también ejercen acción siológica. Podremos informarnos más acerca de
estas propiedades mas adelante, cuando tratemos como tema la cromoterapia.

El rojo signi ca sangre, fuego, pasión, violencia, actividad, impulso y acción y es el

color del movimiento y la vitalidad; aumenta la tensión muscular, activa la
respiración, estimula la presión arterial y es el mas adecuado para personas
retraídas, de vida interior, y con re ejos lentos.

El naranja es entusiasmo, ardor, incandescencia, euforia y actúa para facilitar la

digestión; mezclado con blanco constituye una rosa carne que tiene una calidad muy
sensual. El amarillo es sol, poder, arrogancia, alegría, buen humor y voluntad; se le
considera como estimulante de los centros nerviosos.

El verde es reposo, esperanza, primavera, juventud y por ser el color de la

naturaleza sugiere aire libre y frescor; este color libera al espíritu y equilibra las
sensaciones.

El azul es inteligencia, verdad, sabiduría, recogimiento, espacio, inmortalidad, cielo y

agua y también signi ca paz y quietud; actúa como calmante y en reducción de la
presión sanguínea, y al ser mezclado con blanco forma un matiz celeste que
expresa pureza y fe.

El violeta es profundidad, misticismo, misterio, melancolía y en su tonalidad púrpura,

realeza, suntuosidad y dignidad; es un color delicado, fresco y de acción algo
sedante.

Los colores cálidos en matices claros: cremas, rosas, etc, sugieren delicadeza,
feminidad, amabilidad, hospitalidad y regocijo, y en los matices oscuros con
predominio de rojo, vitalidad, poder, riqueza y estabilidad.

Los colores fríos en matices claros expresan delicadeza, frescura, expansión,

descanso, soledad, esperanza y paz, y en los matices oscuros con predominio de
azul, melancolía, reserva, misterio, depresión y pesadez.

97
fi
fi
fi
fl
fi
 Cada color
Amarillo

Es el color mas intelectual y puede ser asociado con una gran inteligencia o con una
gran de ciencia mental; Van Gogh tenia por el una especial predilección,
particularmente en los últimos años de su crisis.

Este primario signi ca envidia, ira, cobardía, y los bajos impulsos, y con el rojo y el
naranja constituye los colores de la emoción. También evoca satanismo (es el color
del azufre) y traición. Es el color de la luz, el sol, la acción, el poder y simboliza
arrogancia, oro, fuerza, voluntad y estimulo. Mezclado con negro constituye un matiz
verdoso muy poco grato y que sugiere enemistad, disimulo, crimen, brutalidad,
recelo y bajas pasiones. Mezclado con blanco puede expresar cobardía, debilidad o
miedo y también riqueza, cuando tiene una leve tendencia verdosa.

Naranja

Es algo mas cálido que el amarillo y actúa como estimulante de los tímidos, tristes o
linfáticos. Simboliza entusiasmo y exaltación y cuando es muy encendido o rojizo,
ardor y pasión. Utilizado en pequeñas extensiones o con acento, es un color
utilísimo, pero en grandes áreas es demasiado atrevido y puede crear una impresión
impulsiva que puede ser agresiva. Mezclado con el negro sugiere engaño,
conspiración e intolerancia y cuando es muy oscuro, opresión.

Rojo

Se lo considera con una personalidad extrovertida, que vive hacia afuera, tiene un
temperamento vital, ambicioso y material, y se deja llevar por el impulso, más que
por la re exión.

Simboliza sangre, fuego, calor, revolución, alegría, acción, pasión, fuerza, disputa,
descon anza, destrucción e impulso, así mismo, crueldad y rabia. Es el color de los
maniáticos y de marte, y también el de los generales y los emperadores romanos y
evoca la guerra, el diablo y el mal.

98
fi
fi
fl
fi
 Como es el color que requiere la atención en mayor grado y el más saliente, habrá
que controlar su extensión e intensidad por su potencia de excitación en las grandes
áreas cansa rápidamente. Mezclado con blanco es frivolidad, inocencia, y alegría
juvenil, y en su mezcla con el negro estimula la imaginación y sugiere dolor, dominio
y tiranía.

Violeta

Signi ca martirio, misticismo, tristeza, a icción, profundidad y también experiencia.

En su variación al púrpura, es realeza, dignidad, suntuosidad. Mezclado con negro
es deslealtad, desesperación y miseria. Mezclado con blanco: muerte, rigidez y
dolor.

Azul

Se lo asocia con los introvertidos o personalidades reconcentradas o de vida interior

y esta vinculado con la circunspección, la inteligencia y las emociones profundas. Es
el color del in nito, de los sueños y de lo maravilloso, y simboliza la sabiduría,
delidad, verdad eterna e inmortalidad. También signi ca descanso, lasitud.

Mezclado con blanco es pureza, fe, y cielo, y mezclado con negro, desesperación,
fanatismo e intolerancia. No fatiga los ojos en grandes extensiones.

Verde

Es un color de gran equilibrio, porque esta compuesto por colores de la emoción

(amarillo = cálido) y del juicio (azul = frío) y por su situación transicional en el
espectro. Se lo asocia con las personas super cialmente inteligentes y sociales que
gustan de la vanidad de la oratoria y simboliza la primavera y la caridad.

Incita al desequilibrio y es el favorito de los psiconeuroticos porque produce reposo

en el ansia y calma, también porque sugiere amor y paz y por ser al mismo tiempo el
color de los celos, de la degradación moral y de la locura. Signi ca realidad,
esperanza, razón, lógica y juventud. Aquellos que pre eren este color detestan la
soledad y buscan la compañía. Mezclado con blanco expresa

99
fi
fi
fi
fl
fi
fi
fi
fi
debilidad o pobreza. Sugiere humedad, frescura y vegetación, simboliza la
naturaleza y el crecimiento.

Blanco

Es el que mayor sensibilidad posee frente a la luz. Es la suma o síntesis de todos los
colores, y el símbolo de lo absoluto, de la unidad y de la inocencia, signi ca paz o
rendición.

Mezclado con cualquier color reduce su croma y cambia sus potencias psíquicas, la
del blanco es siempre positiva y a rmativa. Los cuerpos blancos nos dan la idea de
pureza y modestia.

Gris

No es un color, sino la transición entre el blanco y el negro, y el producto de la

mezcla de ambos. Simboliza neutralidad, sugiere tristeza y es una fusión de alegrías
y penas , del bien y del mal.

Negro

Símbolo del error y del mal. Es la muerte, es la ausencia del color.

Escala de grises

La escala de grises son una serie de tonos que varían desde el negro absoluto
(100% K ó 0,0,0) hasta el blanco absoluto (0% K ó 255,255,255), sin colores. Esta
escala se utiliza en la fotografía, televisión, diseño grá co, y otros campos para
representar imágenes sin color, solo con diferentes tonos de gris.

En una imagen en escala de grises, el valor de cada píxel indica la luminosidad de

ese punto especí co, y usualmente se representa como un número entre 0 (negro) y
255 (blanco) en una imagen digital de 8 bits. Sin embargo, este rango puede variar
dependiendo de la profundidad de bits de la imagen.

100
fi
fi
fi
fi
La escala de grises tiene varias aplicaciones las cuales vamos a describir a
continuación brevemente:

Reducción de tamaño del archivo: Las imágenes en escala de grises a menudo

requieren menos datos para su almacenamiento que las imágenes a color.

Procesamiento de imágenes: Algunos algoritmos y técnicas de procesamiento de

imágenes funcionan mejor o más rápidamente en imágenes en escala de grises que
en imágenes a color.

Realce de detalles: En algunas circunstancias, al eliminar el color de una imagen,

ciertos detalles pueden volverse más evidentes.

101
Estética y estilo: La fotografía en blanco y negro (esencialmente en escala de
grises) ha sido valorada por su capacidad para evocar un cierto ambiente o
sentimiento que no se puede lograr con las imágenes a color.

Análisis de texturas: La escala de grises es fundamental para el análisis de

texturas en ciertas investigaciones y aplicaciones técnicas.

Conversión para personas con discapacidad visual: En algunos casos, convertir

una imagen a escala de grises puede ayudar a aquellas personas con ciertas formas
de discapacidad visual a discernir detalles en una imagen.

Aplicaciones médicas y cientí cas: La escala de grises es clave en muchas

aplicaciones médicas, como la tomografía computarizada y la resonancia magnética,
donde los diferentes tonos de gris representan diferentes densidades o propiedades
de los tejidos. En ciencias, muchas veces se usa para representar datos en mapas
de calor o imágenes satelitales.

El color en las marcas

Cada color tiene una frecuencia y longitud de onda diferente. Y la ciencia ya ha

demostrado que los colores pueden in uir en nuestro estados de ánimo para realizar
una determinada acción.

Elegir el color adecuado para una marca o página web puede diferenciar a tu sitio de
la competencia y crear una identi cación con el público. Los estudios han revelado
que el cerebro pre ere marcas reconocibles, lo que hace que el color sea
fundamental a la hora de crear una identidad para tu empresa.

Además de diferenciar tu marca, usar los colores adecuados en una página web o
Landing Page puede marcar la diferencia entre que el usuario te dé el contacto por
correo electrónico o cierre la ventana en unos segundos.

102
fi
fi
fi
fl
Muchos emprendedores consideran al color como un detalle. Pero recuerden que
muchas veces, no son los grandes planes los que funcionan, sino los pequeños
detalles.

103
El Espacio

That’s one small step

for a man, one giant
leap for a web designer

Como hemos visto anteriormente, el espacio en blanco o negativo es el espacio

vacío alrededor de los elementos visuales. Utilizar el espacio en blanco de manera
efectiva ayuda a resaltar los elementos principales y a mejorar la comprensión de la
información.

La grilla o retícula (para los que no están familiarizados, imaginen una planilla de
Excel) es un recurso utilizado en diseño para la organización visual de los elementos
que componen una pieza grá ca. Los títulos, subtítulos, bajadas, textos, epígrafes,

104
fi
 fotos, grá cos, botones e infografías que forman una página, tienen que estar

contenidos dentro de una estructura a la que llamaremos caja.

Sin embargo, hay algunas excepciones en las que se decide ubicar algún elemento
por fuera de esa caja, como por ejemplo una imagen que va al borde, o un título no
alineado a la grilla de texto. En ese caso, decimos que esa imagen va “al corte” o al
100% de la caja o todo el aspecto de la caja.

105
fi
 Si a una página la dividimos con líneas verticales, obtendremos columnas. Entre dos
columnas se genera un espacio que se llama “calle” o “gutter”. Estos espacios varían
dependiendo del ancho de la página y de la cantidad de columnas en las que esa
página haya sido dividida. En el diseño web, se utiliza el sistema de 12 columnas, se
trata más de una convención que de un estándar, por lo que puede haber sistemas
que funcionen con otro número de columnas porque para ellos resulte más e ciente
o porque se ajusta más a sus peculiaridades.

Bootstrap inicialmente funcionaba con un sistema de 16 columnas, pero vieron que

tenía ciertas limitaciones que un sistema de 12 no tiene. ¿Y cuales son estas
limitaciones? Una menor exibilidad, mayormente.

Division de 16 columnas: 1, 2, 4, 8, 16

División de 12 columnas: 1, 2, 3, 4, 6, 12

Como se puede ver, un sistema de 12 columnas nos permite un mayor número de

divisores, por lo que podremos conseguir una mayor combinación de posibilidades,
que al n y al cabo es lo que se busca.

106
fi
fl
fi
Otro aspecto a tener en cuenta es la longitud de las líneas (llámese de texto o
forma), uno de los factores fundamentales que hacen a la legibilidad. Por ejemplo,
un texto debe leerse con facilidad y agrado. Responde al movimiento ocular y la
cantidad de caracteres que pueden leerse por cada movimiento. El ancho de
columna adecuado crea las condiciones para un ritmo regular y agradable, que
posibilita una lectura distendida y pendiente del contenido. Se determina de esta
manera el ritmo de lectura. Una columna demasiada ancha se convierte en un
enorme gris y no incita a la lectura. Las distintas marginaciones de texto y el
interlineado son un factor importante a la hora de diseñar. Su correcta elección y
utilización nos brindará claridad y facilidad a la hora de leer un texto.

107
 A su vez, si a esa página la “partimos" con líneas horizontales, obtendremos
módulos. Los módulos son de importancia a la hora de diseñar ya que, entre otras
cosas, nos permitirán calcular de forma anticipada la cantidad de caracteres que
necesitamos escribir para llenar una página. Los módulos también nos darán la
información del tamaño que deberán tener las imágenes y, si tenemos publicidad
(banners), podremos calcular el espacio que deben ocupar.

A los elementos que componen una página lo llamaremos gris y a los espacios que
quedan entre ellos los llamaremos blancos. Estos últimos son importantes porque
nos brindarán un descanso visual, buen recorrido de lectura y legibilidad. Podemos
encontrar in nitos ejemplos de diseños con más o menos blancos tipográ cos

108
fi
fi
Cuando diseñamos una página web, también debemos plantear una grilla adecuada
ya que nos ayudará a plani car mejor la ubicación de los distintos elementos y crear
armonía entre ellos. Además con el correcto uso de la retícula y el ordenamiento
visual de los elementos, cumpliremos con los requisitos de usabilidad y accesibilidad
que deben estar contemplados a la hora de diseñar un sitio web.

109
fi
La cantidad de divisiones en columnas y módulos de una pagina web podrá ser
mayor o menor, dependiendo de la cantidad y el tipo de elementos que compondrán
la misma.

Habitualmente, el número de columnas suele ser de 12. Esto es debido a que otorga
una gran versatilidad compositiva al archivo. Con doce columnas, podemos dividir la
información en un bloque de doce, en dos bloques iguales de seis columnas, en tres
de cuatro columnas, en cuatro bloques de tres columnas o seis de dos columnas.
Esto nos da pie a generar diferentes estructuras modulares a partir de una misma
retícula. Por supuesto, podemos diseñar retículas especí cas para cada web con el
número de columnas que deseemos.

Al pensar el diseño una página web será imprescindible examinar y “testear” su

visualización en las diferentes pantallas con las que solemos navegar (al menos tres:
computadora de escritorio, tablet y móviles) para que nuestro sitio se adapte de
forma automática a cada una de ellas (diseño responsivo). Es decir, necesitamos
que nuestra web sea “responsive”, para que el usuario pueda visualizar el contenido
en forma cómoda y legible independientemente del dispositivo que utilice. Por eso,
tenemos que tener en cuenta la grilla para cada pantalla.

Como vimos antes, para pantallas más anchas (monitores) es posible hacer una
subdivisión del área de trabajo en mayor cantidad de columnas, mientras que para
pantallas más angostas (celulares) debemos trabajar con menos cantidad de
columnas.

110
fi
 Algunas conclusiones
Diseño gráfico frente a diseño web: todo lo que siempre quisiste
saber, pero no te atrevías a preguntar.

Diseño web y diseño gráfico son diferentes pero trabajan juntos y comparten
muchas similitudes.

Cuando se trata de diseño grá co frente al diseño web, es importante conocer las
diferencias. Ambos trabajan juntos, pero también están solos. Aunque la mayoría de
las personas piensan que son lo mismo, hay conjuntos de habilidades especí cos
para cada uno que es importante comprender. Si persigues una trayectoria
profesional especí ca, o si eres el propietario de una empresa que quiere
modernizar su sitio web, conocer las diferencias entre diseño grá co y diseño web
puede ayudarte a encontrar la carrera o el diseñador adecuado.

En este cierre, analizaremos las diferencias entre el diseño grá co frente al diseño y
desarrollo web, sus similitudes y cómo pueden trabajar juntos.

Diseño gráfico frente a diseño web

Las habilidades técnicas necesarias para cada profesión di eren lo su ciente como
para requerir conocimientos y formación adicionales. Los diseñadores web deben
tener ciertos conocimientos programación, mientras que los diseñadores grá cos
deben tener un sólido conocimiento de cómo aplicar la creatividad y el diseño para
crear conceptos. Los diseñadores grá cos son a los que se debe consultar para
anuncios grá cos, materiales de marketing, un logotipo, imágenes de redes sociales
y boletines. Sin embargo, muchas de estas técnicas y conceptos básicos, se aplican
al diseño web.

111
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
 Algunas definiciones

¿Qué es el diseño gráfico?

Se re ere al diseño como la práctica de producir contenido visual para transmitir un

mensaje especí co. El diseño grá co se puede utilizar como forma de expresión
artística, o de ideas y pensamientos, o se puede utilizar de una forma más comercial
para comunicar visualmente mensajes e ideas utilizando elementos grá cos y
textuales. El diseño grá co ayuda a comunicarse con el público, transmitiendo el
signi cado y el mensaje de un producto, una campaña, un proyecto o un evento.

¿Qué es el diseño web?

El diseño web es el arte de plani car, conceptualizar y organizar contenido y

elementos para acceder y compartir en línea. Esto aborda la funcionalidad general
de cómo funciona el sitio web e incluye el diseño de la interfaz de usuario en
aplicaciones web y móviles.

El diseño web se encarga del aspecto de un sitio web, contando una historia para
mejorar la experiencia del usuario. También se centra en la funcionalidad de un sitio
web al asumir tareas como probar sitios web, optimizar los sitios web y garantizar
que los sitios web se ejecuten sin problemas y con e ciencia.

Diseño web frente a diseño gráfico: Ocho diferencias clave

Una de las principales diferencias entre el diseño web y el diseño grá co es el medio
en el que se utilizan. El diseño web crea un diseño para uso web y en línea, mientras
que el diseño grá co está diseñado principalmente para la impresión. El diseño
grá co no tiene por qué saber de programación, velocidad y otras cuestiones
técnicas relacionadas con el diseño web. Si bien los diseños grá cos pueden

112
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
 utilizarse en un sitio web y los principios de legibilidad, espacio en blanco, psicología
del color y conocimientos tipográ co son aplicables, la funcionalidad general y la
colocación de dichos diseños grá cos dependen del diseñador web.

Diferencias

• Diferentes técnicas: Los diseñadores web deben estar familiarizados con la

programación y el uso de varios programas para el desarrollo web. El diseño
grá co no requiere ese tipo de conocimiento. Los diseños se pueden personalizar
sin tener que pasar por muchas limitaciones, como el diseño web.

• El diseño web es dinámico, el grá co es permanente: El diseño web tiene sus

propias uctuaciones, con la exibilidad para adaptarse y cambiar según los
cambios tecnológicos. En su mayor parte, el diseño grá co crea imágenes
permanentes que normalmente permanecen sin cambios una vez impresas o
producidas.

• El diseño grá co es estático y el diseño web es interactivo: Aunque puedes

verlo y tocarlo, el diseño grá co no cambia a menos que esté animado. El diseño
web requiere que el usuario interactúe completamente con el diseño pulsando
botones y otros elementos de navegación para aumentar su funcionalidad.

• Requisitos de tamaño de archivo: Si alguien está diseñando un grá co para la

web, los píxeles y “ppp” pueden convertirse en un factor. Las imágenes para la
web tienen normas especí cas de tamaño y píxeles, pero fuera de la web, la
imagen requiere más píxeles para mostrarse correctamente. El diseño web debe
centrarse en estas restricciones técnicas, como el tiempo de carga y el tamaño del
archivo, para mantener el funcionamiento correcto del sitio web.

• Limitaciones de tipografía: Aunque hay numerosos avances en el diseño web,

sigue habiendo limitaciones en la tipografía. Si el navegador de un usuario no
reconoce el tipo de letra en su CSS (cascading style sheets), la tipografía será

113
fi
fl
fi
fi
fi
fl
fi
fi
fi
fi
fi
 diferente del diseño inicial. Si bien existen estándares y tipografías web como
Google Fonts, el diseñador web podría tener problemas al requerir de una
tipografía fuera del estándar. En el diseño grá co, si tienes la tipografía en tu
ordenador al utilizar el tipo de letra para imprimir el diseño, todo sale igual.

• Se requiere una relación continua con el diseño web: Cuando un sitio web está
terminado, no es el nal. Se necesitan actualizaciones y mantenimiento constantes
para la conservación. El diseño web requiere una intervención continua. El diseño
grá co no es tan exigente. Una vez completado el diseño, está terminado a menos
que haya cambios necesarios en el diseño original. Es fácil realizar un cambio
rápido en un sitio web, pero realizar cambios en un diseño grá co una vez impreso
puede ser costoso, resultando en un proceso completamente nuevo.

• Utilizan un software diferente: Los diseñadores web utilizan herramientas de

creación web (Web ow, Pinegrow, Elementor, WebBakery, etc.), mientras que los
diseñadores grá cos utilizan softwares como Adobe Illustrator, Photoshop o
InDesign para elaborar sus creaciones. Sin embargo, hoy día estos programas
proporcionan excelentes herramientas para el maquetado de un sitio web.

• Los diseñadores trabajan con desarrolladores web: Los diseñadores web

trabajan con desarrolladores y programadores para dar vida a sus ideas en forma
de código. Los desarrolladores colaboran con los diseñadores para comprender las
limitaciones que pueden estar presentes en función del diseño que intentan crear.
Los diseñadores web trabajan junto con otros para averiguar las metas y los
objetivos del sitio web, entregando sus prototipos y wireframes a un desarrollador
web.

114
fi
fi
fl
fi
fi
fi
Formación y experiencia

Los diseñadores web suelen necesitar habilidades en lo siguiente:

• Diseño visual: Necesitas algún fondo de diseño para implementar correctamente

el aspecto de un sitio web. Esto incluye la comprensión de los sistemas de
cuadrícula, la teoría del color, las proporciones y la tipografía.

• Experiencia del usuario (UX): Esto es fundamental, ya que aborda cómo se

sentirán las personas al interactuar con el sitio web. Se deben aplicar las
habilidades para una mentalidad que priorice al usuario. Esto ayuda a crear
wireframes y diseñar prototipos y plantillas en el diseño de cada página web.

• Conocimiento del software: Debes utilizar las herramientas correctas para tener
éxito como diseñador web. Los diseñadores del sector utilizan Adobe Illustrator,
Photoshop y Sketch para diseño grá co y web que requiere esquemas, activos de
diseño y modi cación de fotos.

• CSS: El conocimiento de hojas de estilo en cascada (CSS, por sus siglas en

inglés) es imprescindible, ya que funciona directamente con el código HTML. Este
es un lenguaje de codi cación utilizado para hablar con los navegadores sobre
cómo formatear y dar estilo al código HTML en una página web. El CSS te permite
cambiar las tipografías, los colores y el fondo. Es el único elemento de diseño real
para un sitio web.

• Código HTML: Hay muchos creadores de sitios web en el mercado que facilitan la
creación de sitios web, pero el estándar del sector es tener conocimiento de código
HTML. El código HTML también se conoce como lenguaje de marcado de
hipertexto. Se utiliza para proporcionar estructura al contenido de la página web.
Un diseñador web también debe tener algún conocimiento de JavaScript, que es
también un software de todo el sector.

• Principios de diseño: Conocimiento práctico de cómo utilizar el espacio en

blanco, el color, la jerarquía y otros principios.

115
fi
fi
fi
 • Tipografías: El aspecto del diseño se ve afectado por la elección de la tipografía,
el tamaño y el peso. Crear un aspecto atractivo con las tipografías correctas ayuda
a atraer a los públicos.

• RGB, HSB, LAB, Hexa y CMYK: Usar el conjunto de colores correcto es esencial.
Por lo general, se utiliza RGB/HSB/LAB/Hexa para diseños digitales, mientras que
CMYK se utiliza para proyectos de impresión.

• Uso de las directrices de la marca: Poder seguir las directrices de la marca,

especi cadas en los manuales de identidad, es imprescindible. Son estándares
para una organización y la presentación de la marca.

• Edición de fotos: Es importante poder editar fotos de archivo o hacer fotos para
editarlas, ya que muchos proyectos requieren el uso de la fotografía. Saber acerca
de estándares de compresiones y tipos de archivos es fundamental.

Ambas profesiones necesitan capacidades interpersonales que se coincidan, como

habilidades de colaboración, habilidades de comunicación, gestión del tiempo,
creatividad, resolución de problemas, conocimiento de las tendencias de diseño,
redes sociales y gestión de clientes.

La función general de un diseñador web es diseñar la disposición y la estética de los

sitios web. Esto incluye el diseño, la creación de la interfaz y la navegación. Los
diseñadores web crean el esquema de color del sitio web para que se mezcle con la
identidad de la marca, diseñan los botones y otros controles, crean esquemas para
los desarrolladores, solucionan cualquier problema con la funcionalidad y actualizan
y mantienen el sitio.

La función general de un diseñador grá co es hacer que la empresa u organización

sea destacada y reconocible para el público. Utilizan imágenes, texto, medios y otro
contenido para comunicar mensajes e ideas a través del uso de elementos creativos.
De nen los requisitos de diseño, visualizan y crean grá cos que incluyen
disposiciones, ilustraciones y logotipos con nes de marketing y publicidad y los
aspectos visuales de los sitios web, exposiciones, stands, libros y más.

116
fi
fi
fi
fi
fi
 Cómo trabajan juntos el diseño gráfico y el diseño web

El diseño grá co tiene una función importante en el diseño y el desarrollo web

porque comunica visualmente las ideas o historias de la marca en el sitio web de
una empresa. Su aporte ayuda a impulsar el conocimiento de la marca para elevar y
mejorar la experiencia del usuario. Por ejemplo, al considerar el diseño del blog,
estas dos funciones trabajan juntas para asegurarse de que la experiencia del
usuario sea correcta, a la vez que se utiliza la creatividad y la imaginación de un
diseñador grá co para unir todos los elementos. Uno no es tan e caz si no están
trabajando juntos.

El objetivo general con ambas funciones es tener en cuenta al público a medida que
los diseños y grá cos se unen. Averiguar lo que quieren y necesitan y, a
continuación, traducirlo en imágenes atractivas y un sitio web altamente funcional.
Las funciones y el enfoque de los dos son diferentes, pero trabajan juntos para crear
sinergia y equilibrio. Esto garantiza que se cubran los aspectos visuales y
funcionales, brindando un sitio web de alta calidad que cumpla o supere las
expectativas.

Muchas gracias!

117
fi
fi
fi
fi
RECURSOS
Frutiger, Adrian. (1981) Signos, Símbolos, Marcas y Señales.
González Pastor (2001) El Diseño Grá co.
Meggs, Philip B. (2016). Historia del diseño grá co.
Forty, Adrian (2002). Objetos de deseo: Diseño y cultura.
Lupton, Ellen (2004). Diseño grá co: La nueva historia.
Magdalena Droste, Bauhaus. Edición actualizada
Jorge Frascara, Diseño grá co para la gente
Information Graphics (2002), TASCHEN
Cátedra Rollié Taller de Diseño. UNLP.
Tecnología en Comunicación Visual 1 - Facultad de Artes, UNLP.
Atypi. 2010, 20 de diciembre. "Lanzamiento de la clasi cación de tipos". Fernandez,
Natalia. 2012, 10 de septiembre. "Anatomía tipográ ca". oert.
Kinross, Robin. 2008. "Tipografía moderna". Valencia. Campgrà c.
Romero, Marcela. 2012, 10 de septiembre. "Familia tipográ ca". oert.
Unos Tipos Duros. 2005, 12 de enero. "Anatomía de las letras”.
[Link]
Arnheim, Rudolf, - Art and Visual Perception.
Haylen, Peter, - Color en la industria- (1968)
Suaw, Allan. El color en el diseño gra co, G. G.
Suaw, Allen. Diseño para la autoedición, G. G.
Las columnas de texto y el gris tipográ co - Facultad de Bellas Artes - UNLP.
Retícula Modular - Facultad de Bellas Artes - UNLP.
Apunte de Catedra. Construcción de Retícula Modular - Tecnología en Comunicación Visual
Facultad de Bellas Artes - UNLP.
Manual de Diseño Editorial. Principio de formación. De Buen, Jorge. Santillana.
[Link]/
[Link]/
[Link]/history/logo
[Link]
[Link]/
[Link]/
[Link]
[Link]
[Link]/
[Link]/es/products/type/[Link]
[Link]/
[Link]/
[Link]
[Link]
[Link] [Link]/

118
fl
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi