Área: Tecnología

Introducción al diseño

M2 Principios del diseño

 Módulo: 2
Curso: Introducción al diseño

Mapa de Contenido

Modelos de
reconocimiento

Percepción

Principios de la Gestalt

Componentes de color en
relación al diseño

Color

Rueda de color

Espacio en blanco

Principios del diseño Alineación

Composición Contraste

Jerarquía

Consecuencia

Fuentes

Tipografía

Tipos de fuentes
 Módulo: 2
Curso: Introducción al diseño

Índice

Introducción ............................................................................................................................................................................................................ 4
1. Percepción .......................................................................................................................................................................................................... 5
1.1. Modelos de reconocimiento ............................................................................................................................................ 6
1.2. Principios de la Gestalt ..................................................................................................................................................... 9
2. Color .................................................................................................................................................................................................................... 16
2.1. Componentes del color en relación con el diseño ......................................................................................................... 18
2.2. Rueda de color................................................................................................................................................................ 19
3. Composición .................................................................................................................................................................................................... 23
3.1. Espacio en blanco ........................................................................................................................................................... 23
3.2. Alineación ....................................................................................................................................................................... 23
3.3. Contraste ........................................................................................................................................................................ 24
3.4. Jerarquía ......................................................................................................................................................................... 25
3.5. Consecuencia .................................................................................................................................................................. 25
4. Tipografía .......................................................................................................................................................................................................... 26
4.1. Tipografía y fuente ......................................................................................................................................................... 27
4.2. Fuente............................................................................................................................................................................. 28
4.3. Modos de uso ................................................................................................................................................................. 30
Cierre ....................................................................................................................................................................................................................... 31
 Módulo: 2
Curso: Introducción al diseño

Resultado de aprendizaje

Demuestra los principios fundamentales del diseño aplicados en distintas piezas de comunicación
visual, según el contexto o la industria.

Introducción
Como seres vivos, hemos desarrollado formas de poder comprender nuestro entorno usando distintas
evoluciones adaptativas que se presentan en nuestros cuerpos. En el caso del ser humano, una de sus
principales adaptaciones es la visión, que utiliza una serie de órganos como el ojo y el cerebro, entre
otros, para interpretar rayos luminosos y convertirlos en colores. En general, se asocia que el ojo es el
elemento receptor, mientras que el cerebro procesa esta información, transformándola en una
percepción de la realidad exterior.

En ese contexto, el cerebro suele funcionar en base a criterios

establecidos tanto de forma física como con las necesidades del
entorno para seleccionar y filtrar la información recibida, con
el fin de hacerla coherente. Si el cerebro no fuera capaz de
seleccionar, simplificar y organizar la información del medio, en
cada contacto con el exterior quedaríamos abrumados y
desorientados por la gran cantidad de estímulos existentes,
tales como colores, formas, texturas, sonidos y movimientos
La percepción es subjetiva, lo que la persona
diferentes, a los que constantemente estamos expuestos. percibe depende de su contexto y punto de vista.

Es por ello que es fundamental estudiar el proceso de la percepción visual, ya que es una herramienta
que permite encontrar un orden, además de generarlo. Este aspecto es fundamental en el proceso de
comunicación visual, ya que podemos generar mensajes que sean comprensibles y efectivos, usando
una serie de recursos de apoyo que permiten generar efectos, los que pueden ser usados dependiendo
de lo que sea requerido en el proceso de diseño.

En este módulo nos internaremos en los principios que sostienen este proceso, relacionados con la
percepción, el color, la composición y la tipografía. Para la primera, comprenderás métodos de
reconocimiento, además de los principios de la Gestalt, elementos básicos para la composición. A
continuación, analizarás las formas en las que el color es utilizado en el diseño y comprenderás la rueda
de color y las combinaciones más utilizadas para lograr composiciones armónicas. Posteriormente,
comprenderás la composición, que es la forma de usar el lienzo a la hora de crear una pieza gráfica.
Finalmente, la tipografía es fundamental para entregar un mensaje de forma escrita, ya que, además de
representar el texto, también permite expresar características a partir de su diseño.

Pág. 4
 Módulo: 2
Curso: Introducción al diseño

1. Percepción
La percepción es un proceso en el que el cerebro descompone y recombina de forma activa la
información que recibe. Para ello, “fusiona lo que vemos con lo que sabemos para construir una
comprensión coherente del mundo. Usando los depósitos de la memoria y la experiencia, rellena los huecos
y filtra los datos procedentes del exterior” (Lupton y Cole, 20161).

En este proceso, el cerebro trabaja realizando una combinación entre la experiencia ya vivida con
la información obtenida con los sentidos, para así poder relacionarse con el entorno. Aun cuando no
podemos ver una parte de un objeto que ya conocemos, nuestro cerebro automáticamente la completa,
por ejemplo, a pesar de que no veamos la cuarta pata de una silla, sabemos que está ahí (Figura 1).

En la disciplina del diseño, constantemente se encontrarán con las labores de cortar, reencuadrar,
superponer y fragmentar imágenes de objetos para crear nuevas composiciones, por lo que es necesario
explotar la capacidad del cerebro para interpretar la información ausente (Figura 2).

Figura 1: Ejemplo de la percepción: A pesar de que no Figura 2: Aun cuando la información de los cuerpos es
vemos la cuarta pata de la silla, sabemos que está ahí parcelada y abstracta, el cerebro interpreta la imagen como
porque ya preconcebimos la idea de una silla. dos amantes besándose.

1
Lupton, E. y Cole, J. (2016). Diseño gráfico: nuevos fundamentos. Barcelona: Gustavo Gili.

Pág. 5
 Módulo: 2
Curso: Introducción al diseño

Saber más

El psicólogo ruso Alfred Yarbus demostró, en las décadas de 1950 y

1960, que frente a un rostro, la mirada se concentra
automáticamente en los rasgos con más potencial de
identificación y distinción de emociones, que corresponden a los
ojos y boca. Si ocultamos estos rasgos de manera total o parcial,
podemos producir una gran tensión emocional.

La fotografía corresponde al poster de la película Intruders.

1.1. Modelos de reconocimiento

Seguro que en el último eslabón de abstracción de la Figura 3 siguieron viendo un rostro humano. ¿Pero
cómo es posible que podamos identificar un rostro en un par de figuras geométricas? El siguiente
apartado intenta contestar la pregunta.

Figura 3: Ejemplos de abstracción de un rostro humano, desde una imagen fotográfica a un simple trazo.

Smith y Kosslyn (20081) explican que existen por lo menos tres grupos de modelos que explican como el
cerebro reconoce objetos. Estos modelos no son excluyentes, sino que funcionan de manera
complementaria; a veces nos basamos más en uno o en otro tipo de modelo, dependiendo de la
circunstancia.

1
Smith, E. y Kosslyn, S. (2008). Procesos cognitivos: modelos y bases neurales. Madrid: Pearson Educación.

Pág. 6
 Módulo: 2
Curso: Introducción al diseño

a. Reconocimiento por características

En este tipo de reconocimiento se explica la razón de porque uno ve un rostro en el dibujo más abstracto.
En algunas ocasiones, no es necesario que cada pequeño detalle de un objeto sea visible, sino que basta
con que algunas características no accidentales estén presentes. Lo no accidental se refiere a las
características esenciales de un objeto, que en el ejemplo del rostro, basta que los círculos simulen dos
ojos, una raya una boca y un trazo la nariz.

Dehaene (20091) sugiere que para que se reconozcan las características esenciales de los objetos, es
necesario visibilizar los puntos de unión definitorias de sus formas. Por ejemplo, en la Figura 4
podemos ver tres casos de un mismo objeto: en el primero el objeto es casi irreconocible; pero en la
segunda ya comienza a parecer un banquito, a pesar de que en ambos casos se ha eliminado la misma
cantidad de información. Esto, porque las líneas rectas y curvas pueden pertenecer a cualquier objeto, sin
embargo, la forma en que varias líneas se unen en ángulos específicos suele ser propia de un determinado
objeto.

Figura 4: Ejemplo de reconocimiento de características de un objeto. Mientras que en la imagen 1 borra todos los elementos de
unión de las distintas formas que componen la banca, en la segunda son borrados los elementos de segmentos. En la tercera
imagen apreciamos la banca completa.

b. Reconocimiento por componentes

Se basa en que el cerebro identifica los objetos separándolos
en unidades geométricas tridimensionales no accidentales
(conocidas como geones). Los geones son formas
tridimensionales como cilindros, conos, cubos, entre otros. Por
ejemplo, si mirados un balde este se compone de un cilindro y
un mango (Figura 5).

Los geones percibidos se comparan con los objetos en nuestra Figura 5: El uso de geones para la construcción de
memoria almacenada para identificar qué estamos viendo. En formas conocidas. En este caso, un balde se
compone de un cilindro y un mango.
este aspecto, la relación espacial existente entre los distintos
geones usados pueden dar forma al objeto que estamos

1
Dehaene, S. (2009). Reading in the Brain: The New Science of How We Read. Nueva York, US: Penguin.

Pág. 7
 Módulo: 2
Curso: Introducción al diseño

pensando o a otro que no corresponde (Figura 6), por lo que es

fundamental describir sus componentes y relaciones
espaciales (Figura 7).

En este tipo de reconocimiento, se perciben fundamentalmente Figura 6: La utilidad de los objetos depende de la
dos componentes del objeto: correcta disposición de sus partes.

Bordes Coyunturas

Nos permite mantener la misma percepción del Es la zona donde se encuentran dos bordes. Esto
objeto, independientemente de la orientación permite identificar la separación entre dos o
del objeto. más geones.

Figura 7: Cinco de los 24 geones y objetos que muestran los geones que los componen.

c. Reconocimiento complementario
Se basa en que el cerebro reconoce a un objeto por la diferencia
que tiene con otros, identificándolo por las características
que lo alejan del resto. Por ejemplo, para identificar personas
conocidas, el cerebro parece centrarse en aquellos rasgos que
más lo alejan de un rostro medio. Esto explica por qué somos
tan rápidos en identificar al personaje de una caricatura, ya que
el artista exagera los rasgos que más caracterizan al individuo Figura 8: Podemos identificar de forma más
(Figura 8). rápida el rostro de un famoso en una caricatura.

Pág. 8
 Módulo: 2
Curso: Introducción al diseño

Los modelos de reconocimiento funcionando al mismo tiempo resuelven un enigma planteado por Ryan
y Schwartz (19561). Estos psicólogos mostraron a varios sujetos una serie de imágenes basadas en la
misma escena: una fotografía, un dibujo con sombras y otro basado solo en líneas (Figura 9). Cuando
midieron la velocidad en que los participantes del estudio reconocían los componentes de la escena,
comprobaron que el dibujo simplificado era el que garantizaba una identificación más rápida: al
eliminar información innecesaria, redundante y características que no son únicas de los objetos de la
escena, y acentuar solo aquellas que sí lo son (líneas bien contrastadas sobre el fondo que simulan uñas
y arrugas de la mano), el cerebro demora menos tiempo y es más eficiente a la hora de interpretar la
información.

Figura 9: Ejemplo de las pruebas realizadas en el estudio de Ryan y Schwartz (1956). Las tres imágenes corresponden al momento
en que una manzana es arrancada del árbol por una persona. En la primera podemos observar una fotografía; en la segunda,
otra fotografía con alto contraste; y en la tercera, un dibujo.

1.2. Principios de la Gestalt

La Gestalt es una corriente de la psicología moderna que nació en Alemania en torno a 1920, la que
propuso una serie de principios sobre la percepción visual.

Estos consisten en el estudio sobre cómo el cerebro, con el objetivo de acelerar el procesamiento,
agrupa los objetos similares (los rectángulos de tamaño y colores regulares) y los separa de los
diferentes, haciendo que éstos se destaquen. Estos principios, son necesarios para la disciplina del diseño,
para lograr crear piezas visuales organizadas y coherentes, que atraigan la atención del espectador.

Ejemplo

¿Qué ves en esta figura?

Seguro que un cuadrado azul sobre un cuadrado celeste y un

cuadrado tapando cuatro círculos azules. Es lo que el cerebro
está obligado a ver, aunque sepa que esas figuras no existen
en esta realidad. El cerebro interpreta esos espacios vacíos
como ocupados por objetos que no están ahí.

1
Ryan, T. y Schwartz, C. (1956). Speed of Perception as a Function of Mode of Representation. The American Journal
of Psychology, 69(1), 60-69. doi:10.2307/1418115

Pág. 9
 Módulo: 2
Curso: Introducción al diseño

a. Contraste
Con el objetivo de definir los límites de los objetos que vemos,
el cerebro debe distinguir entre figura y fondo. La detección
fondo y primer plano se basa generalmente en variaciones de
intensidad de luz y color entre las diferentes regiones del
campo visual.

Un diseñador debe considerar que cuanto mayor es el

contraste, más rápida es la distinción; cuanto menor es el
contraste, más será el esfuerzo que tiene que hacer nuestro
cerebro para distinguir los objetos (Figura 10). Figura 10: En las imágenes, dependiendo de figura
y fondo, veremos al héroe o al villano.

Ejemplo

En el siguiente ejercicio se mostrará una aplicación del contraste en relación con el diseño. Para ello,
busca cuántos números 6 hay en la secuencia de números en la imagen de la derecha y de la
izquierda. ¿En cuál de los dos casos es más fácil de leer?

Es mucho más fácil en el caso de la derecha, donde se aplica el principio de contraste. Ya entiendes
cuál es la importancia de este principio.

La habilidad para crear y evaluar una tensión eficaz entre figura y fondo es esencial
en todo diseñador gráfico. Entrena tu ojo para esculpir un espacio blanco a medida
que compones formas. Aprende a manipular las áreas positivas y negativas mientras
ajustas la escala de las imágenes y la tipografía. Observa la forma que describe cada
elemento y si sus bordes configuran un vacío igualmente sugerente. (Lupton y Cole,
20161).

1
Lupton, E. y Cole, J. (2016). Diseño gráfico: nuevos fundamentos. Barcelona: Gustavo Gili.

Pág. 10
 Módulo: 2
Curso: Introducción al diseño

b. Proximidad
La cercanía facilita la percepción de grupos de elementos. Observa que automáticamente la mente
agrupa las barras o números en la Figura 11. Es casi imposible pensar que la disposición de los elementos
es aleatoria.

Figura 11: Ejemplo del principio de proximidad en tres casos: El primero, en las series de un gráfico de barras; el segundo, en una
serie de números orientados de forma horizontal; y el tercero, en una serie de números orientados de forma vertical.

Las aplicaciones de esta regla son obvias: en una pieza gráfica que contenga distintas secciones, es
recomendable que los elementos que pertenezcan a una sección estén cercanos a los demás
elementos de su misma sección y distanciados de las otras (Figura 12).

Figura 12: A pesar de que los objetos estén separados entre sí, se percibe el total de las partes como una sonrisa, en el caso de la
izquierda, y como una cartera, a la derecha.

c. Similitud
Los objetos iguales serán percibidos como pertenecientes a un mismo grupo. La similitud podrá ser
por el uso del color (Figura 13) o la forma (Figura 14).

Figura 13: Ejemplo de similitud con el color, en la que es posible apreciar Figura 14: Ejemplo de similitud con la forma,
un patrón debido al color negro, contrastante del blanco. en la que se aprecia un patrón.

Pág. 11
 Módulo: 2
Curso: Introducción al diseño

d. Conexión
Los objetos que estén conectados por medio de algún elemento gráfico serán percibidos como
parte de un mismo grupo. En el ejemplo de la Figura 15 podemos apreciar estas características con una
serie de elementos dispersos en la sección izquierda, mientras que una serie de ellos conectados hacen
que puedan ser percibidos como un elemento en conexión.

Figura 15: Ejemplo de conexión de elementos. En la imagen podemos ver el contraste elementos dispersos y
conectados, presentándose en estos últimos un efecto de agrupación.

En otro ejemplo (Figura 16), podemos ver un afiche en el que las partes de las letras están unidas por una
sutil línea gris. Ese simple conector hace que las partes se entiendan como una misma letra.

Figura 16: Ejemplo de conexión de elementos. En la imagen podemos ver la unión de los elementos al usar un
elemento sutil, con respecto del fondo.

Pág. 12
 Módulo: 2
Curso: Introducción al diseño

e. Curvas
Es más sencillo percibir la silueta de un objeto como algo unitario cuando sus formas son suaves y
redondeadas que cuando son rectas y angulosas.

En la Figura 17 podemos visualizar las relaciones de trabajo entre una serie de ejecutivos de una empresa.
En el esquema de arriba se hace uso de líneas rectas para generar la interrelación, la que se percibe
desordenada. Por otra parte, las conexiones realizadas con líneas curvas, como en el caso del esquema
de abajo, presentan y permiten percibir mejor la continuidad.

Figura 17: Comparativa entre líneas rectas y curvas para interrelacionar elementos En la de arriba se presentan líneas rectas,
mientras que en la segunda se presentan líneas curvas.

f. Continuidad
El cerebro percibe un elemento continuo aunque sus partes estén interrumpidas, ya que la mente
agrupa como un mismo modelo las figuras independientes que mantienen un patrón o dirección en
común. Un ejemplo de ello es el elemento ondulado de la Figura 18, en la que varias figuras semicirculares
generan continuidad, a pesar de que se cortan en el punto medio.

Figura 18: Una continuidad establecida a través de figuras semicirculares. A pesar de que no son continuas, presentan una
continuidad visual

Pág. 13
 Módulo: 2
Curso: Introducción al diseño

En otro ejemplo, que podemos ver en la Figura 19, en el que a

pesar de que las letras del logotipo Space estén cortadas por “la
estela de la estrella”, se sigue percibiendo cada letra como una
unidad.

Figura 19: Un ejemplo de continuidad

en un logotipo.
g. Cerco
Los objetos situados dentro de los límites de un área de bordes nítidos serán percibidos como parte de
un grupo. En la imagen, a pesar de que la distancia entre las barras no cambia (el principio de proximidad
no se aplica) y de que todas están coloreadas con el mismo tono gris (el principio de semejanza no ayuda
a distinguir unas barras de otras), el cerebro percibe varios grupos (Figura 20).

Figura 20: Tres casos de un gráfico de barras. El de la izquierda presenta todas las cifras de forma directa, mientras que los dos
siguientes engloban información en cercos, que permiten diferenciar información y ayudar a la comprensión de la información.

Ejemplo

El principio de cerco es útil a la hora de organizar secciones de una pieza de diseño, pero solo si se
combina con otros, como el de la proximidad. Tanto en la imagen de la revista, como en el texto de
estudio que lees, se organizan las distintas secciones separándolas por color y distancia.

Pág. 14
 Módulo: 2
Curso: Introducción al diseño

h. Cierre
El cerebro tiende a agrupar figuras independientes, para formar un solo objeto. Para esto, la mente puede
añadir elementos faltantes para rellenar el espacio vacío. Por ejemplo, en la Figura 21 podemos ver tres
casos de figuras que, a pesar de que faltan elementos que permitan cerrar la figura, hacen que sean
comprensible para la persona que ve la imagen.

Figura 21: Tres ejemplos de cierre: En el primero podemos observar un cubo, en el segundo un triángulo y en el último, un balón
de fútbol considerando sólo sus cascos de color .

Ejemplo

Muchos logotipos de marcas mundialmente conocidas suelen hacer uso de este principio, debido a
la sencillez de sus características y que pueden ser impresos incluso en un solo color. Ejemplos de
lo anterior son los logotipos de World Wildlife Fund (Fondo Mundial para la Naturaleza), Johnnie
Walker y Unilever, que juegan con este principio para demostrar un oso panda en el primer caso, un
caballero escocés en el segundo y una U en el tercero.

Pág. 15
 Módulo: 2
Curso: Introducción al diseño

2. Color
Ya está estudiado que el color es capaz de transmitir un estado de ánimo o transmitir información.
Automáticamente relacionamos el rojo con alerta o el verde con ecología. Los diseñadores utilizan el
color para resaltar ciertos elementos y para hacer que otros pasen a segundo plano. Tal como afirma
Lupton y Cole (20161).

El color sirve para diferenciar y para establecer conexiones, para subrayar y también
para ocultar.

El color no es un fenómeno objetivo, ya que sólo existe en la

percepción del observador, lo que ya fue presentado
parcialmente en el apartado anterior. Es decir, sólo se puede
percibir una vez que las ondas del espectro luminoso son reflejadas
por un objeto o son emitidas por una fuente, las que penetran en
el ojo. Es por ello que el color no depende sólo de la pigmentación
de los objetos, sino que también de la intensidad y tipo de luz
ambiente, así como de la percepción humana respecto de un color.

Además, el color se percibe en relación con su contexto. Por

ejemplo, en la Figura 21, a pesar de que el color de fondo de un Figura 21: Esquema de colores que permite
lado es el mismo que el de la línea que atraviesa al otro lado, se probar las diferencias en la percepción de un
perciben como si fueran distintos. mismo tono en dos contextos.

También podemos señalar que cada color tiene un significado cultural, por lo que cambia según la
interpretación de cada sociedad. En occidente podemos apreciar que el color blanco indica pureza y
virginidad, mientras que en las culturas orientales es considerado el color de la muerte. Por otra parte, el
rojo, el color más usado en los vestidos de novias en Japón, es considerado como provocador y erótico
en occidente. Los colores se ponen de moda y pasan de ella y ha surgido toda una industria que trata de
guiar y predecir su curso (81).

La influencia del color es fundamental en disciplinas contemporáneas como la psicología, la óptica, el

marketing, así como también en las vinculadas a la imagen y el diseño. Al respecto, te presentaremos de
manera general algunas de las percepciones asociadas al color y su vínculo con el marketing (Figura 22).

Finalmente, considerando que el color es un es un fenómeno que varía desde los aspectos físicos como
culturales, ha sido un importante objeto de estudio en que se han podido obtener conclusiones de
utilidad para la comprensión de los principios fundamentales del color, siendo capaces de construir
relaciones significativas entre ellos.

1
Lupton, E. y Cole, J. (2016). Diseño gráfico: nuevos fundamentos. Barcelona: Gustavo Gili.

Pág. 16
 Módulo: 2
Curso: Introducción al diseño

Azul Rojo
Es un color que suele usarse para Es un color que suele usarse para
demostrar seguridad, calma, demostrar energía, amor,
fuerza, cuidado o confianza. excitación, pasión y audacia.

Es común que sea usado en marcas Es común que sea usado en marcas
con valores tradicionales, como la de ligas deportivas o ligados a
banca, automóviles, salud o acciones extremas, como en el caso
tecnología. de las bebidas energéticas Red Bull.

Naranja Amarillo
Es un color que suele usarse para Es un color que suele usarse para
demostrar felicidad, sociabilidad, demostrar lógica, optimismo,
amistad o accesibilidad. visión de futuro o confidencia.

Es común que sea usado en marcas Es común que sea usado en marcas
vinculadas a productos que que presentan fuertes dosis de
generen estas sensaciones, como creatividad y tecnología, también
en cadenas de comida rápida, en representación de
salud, y energía. conocimiento.

Verde Violeta
Es un color que suele usarse para Es un color que suele usarse para
demostrar organicidad, cuidado, demostrar lujo, imaginación,
naturalidad, crecimiento o superioridad, creatividad o
frescura. nostalgia.

Es común que sea usado en marcas Es común que sea usado en marcas
vinculadas a productos y servicios vinculadas a marcas glamorosas,
éticos, naturales, hacia la relajación prestigiosas, creativas o que
o asociado al dinero. poseen una cierta espiritualidad.

Negro Multicolor
Es un color que suele usarse para Es un color que suele usarse para
demostrar lujo, sofisticación, demostrar aspectos como la
formalidad, autoridad o estatus. multicanalidad, optimismo,
audacia o demostrar que una
Es común que sea usado en marcas marca no tiene límites.
vinculadas a productos que
generen estas sensaciones, como Es común que sea usado en marcas
productos de lujo, o también suele vinculadas a marcas con estos
asociarse a elementos funerarios. intereses, como el caso de Google
o Ebay.
Figura 22: percepciones de colores analizados desde la psicología de color.

Pág. 17
 Módulo: 2
Curso: Introducción al diseño

2.1. Componentes del color en relación con el diseño

Para comprender la teoría del color, hay que comenzar por definir algunos de sus elementos básicos en
relación con el léxico propio de la disciplina del diseño:

Matiz

Es el concepto más fácil, ya que básicamente es otra palabra para referirse al color. También es
denominado como croma o tono.

Saturación

La saturación se refiere a la intensidad, es decir, si el color aparece más suave o vibrante. Los colores
saturados son más brillantes o fuertes.

Luminosidad
También conocido como brillo. Es la cantidad de luz emitida o reflejada por un objeto, definida como
el grado de claridad u obscuridad de un color.

Cuando un color se mezcla con blanco da como resultado ese mismo color, pero más claro. Al contrario,
si se añade negro, se obtiene el mismo color más oscuro.

Además cada color tiene una luminosidad propia, por ejemplo el azul es menos luminoso que el
amarillo o el rojo es más luminoso que el violeta, entre otros.

Pág. 18
 Módulo: 2
Curso: Introducción al diseño

2.2. Rueda de color

Un elemento para estudiar a los colores y sus combinaciones es la rueda de color. El círculo cromático,
o rueda de colores, es una representación ordenada y circular de los colores de acuerdo con su matiz
o tono, en donde se representa a los colores primarios, secundarios y terciarios (Figura 23).

Figura 23: Una rueda de color en la que se desglosan los colores primarios, secundarios y terciarios.

Los colores primarios son los que no se pueden formar de otras combinaciones de colores (rojo, azul y
amarillo). Los secundarios son los que se obtienen a través de la combinación de los colores primarios
(verde, naranjo y morado). Y los terciarios son la mezcla de los colores primarios y secundarios (azul-
verde, rojo-morado y amarillo-verde).

Saber más

La rueda de color fue inventada por Sir Isaac Newton en 1665, luego de descubrir que, al atravesar
un prisma, la luz se descompone en el espectro de colores: rojo, naranja, amarillo, verde, azul, índigo
y violeta. Newton los organizó en torno a una rueda, muy parecida a la que utilizan hoy día los
artistas para describir las relaciones entre colores.

La importancia de la rueda de color para los diseñadores es que muestra las combinaciones de colores
que generan armonía, es decir, que logran generar una sensación agradable y tranquila al usuario. Por

Pág. 19
 Módulo: 2
Curso: Introducción al diseño

ejemplo, los colores próximos en la rueda de color son análogos, al usarlos juntos se obtiene con
contraste mínimo que brinda una sensación agradable a la imagen. A continuación se explorarán algunas
de las combinaciones o esquemas de color más importantes, comprobadas en el tiempo.

a. Monocromo
La fórmula más fácil para crear una combinación armónica es usar este
modelo, ya que sólo utiliza un color o matiz. Para crear un esquema
de color monocromo, se selecciona un punto en la rueda de color, y
luego se varía la saturación y luminosidad de un mismo color.

Al ser de una misma familia, los colores monocromáticos se adaptan de

una manera perfecta, como en el ejemplo de la Figura 24. Figura 24: Un afiche diseñado desde
una perspectiva monocromática.

b. Análogo
Un esquema de color análogo utiliza colores que están al lado del
otro en la rueda, como rojos y naranjas o azules y verdes. En este
esquema los colores se complementan para generar una composición
armónica a la vista de una persona (Figura 25).

Figura 25: Un afiche diseñado desde

una perspectiva análoga de color.

Pág. 20
 Módulo: 2
Curso: Introducción al diseño

c. Complementario
Los colores complementarios están opuestos entre sí en la rueda; por
ejemplo, azul y naranja o el clásico rojo y verde.

Para evitar esquemas de color complementarios demasiado simplistas,

Figura 26: Un afiche diseñado con
se pueden agregar cierta variedad, introduciendo tonos más claros, colores complementarios.
oscuros o desaturados. Un ejemplo de ello son los colores típicos de
navidad, que corresponden a tonos complementarios (Figura 26).

d. Split-Complementario
Usa cualquier color del círculo cromático, combinados con dos que
son análogos de su complementario. Por ejemplo, en la Figura 27
podemos apreciar el dibujo de una cebra y su fondo usando una paleta
basada en esta combinación de colores, en la que predomina un fondo
naranja, mientras que la figura de la cebra está realizada en tonos
celestes y violetas.

Figura 26: Un afiche diseñado con

colores de una paleta
Split-complementario.

Pág. 21
 Módulo: 2
Curso: Introducción al diseño

e. Triádico
Combina tres colores que están uniformemente separados en el
círculo (o variación de estos). Por ejemplo, los tres primarios, rojo, azul
y amarillo son frecuentemente usados en un esquema triádico.

Se recomienda usar un color del esquema como dominante y los otros

dos como secundarios (Figura 27).

Figura 27: La estética de The Joker, el

eterno villano de Batman, usa un
esquema triádico de colores. El violeta
de su traje combina con su pelo verde
y los detalles naranjas.

f. Tetrádico
Los esquemas de color tetrádico forman un rectángulo en la rueda,
usando dos pares de colores complementarios. Esta fórmula
funciona si existe un color dominante, mientras que los demás sirven
como apoyo a la propuesta gráfica (Figura 28).

Figura 28: Ejemplo de un esquema

tetrádico, aplicado en el diseño
gráfico de una aplicación para
teléfonos móviles.

Pág. 22
 Módulo: 2
Curso: Introducción al diseño

3. Composición
Junto al color, una de las partes más decisivas al momento de crear una pieza gráfica es la
composición, también entendida como la disposición de los elementos sobre un plano. Un diseño eficaz
en cuanto a la composición es capaz de transmitir un mensaje de manera directa y clara.

El primer paso para crear una composición eficaz es tener clara la información y elementos que se
pondrán en la pieza visual. Luego, hay que aplicar los siguientes conceptos sobre la composición.

3.1. Espacio en blanco

Este principio tiene relación con el espacio en negativo, es decir las áreas entre el contenido, líneas, e
incluso con los márgenes externos (Figura 29). No necesariamente es literalmente espacio en blanco
(Figura 30).

No hay reglas para usar el espacio en blanco correctamente, pero es bueno entender su propósito. Ayuda
a definir y separar diferentes secciones; y también le otorga al contenido espacio para respirar.

Figura 29: Ejemplo de espacios en negativo. En este caso, estos Figura 30: Los espacios negativos no suelen ser
espacios ayudan a enmarcar lo relevante de la imagen: el logotipo, blancos. En este caso, el espacio en negativo es
frase y dirección de la marca. negro, que permite resaltar el texto de la base.

3.2. Alineación
Se refiere a que nada debe ser ubicado de manera arbitraria en una composición, sino que cada
elemento debe tener una conexión visual con algo más de la página. Cuando una composición está
alineada, automáticamente nuestro cerebro percata cohesión y orden.

Pág. 23
 Módulo: 2
Curso: Introducción al diseño

Figura 31: Una diagramación alineada genera orden. En este ejemplo podemos apreciar el balance de la
composición a través de su alineamiento.

3.3. Contraste
Este fundamento tiene por objetivo resaltar elementos o zonas en una composición, mediante la
oposición o diferencia entre estos. Es decir, en un diseño gráfico se genera contraste cuando hay una
diferencia notable entre dos o más elementos.

Figura 31: Una diagramación con contraste permite dar a entender un mensaje con claridad. En este caso, se ejemplifica usando
tres rectángulos en la composición: el primero y más notorio (arriba izquierda) es el que señala la advertencia de precaución,
contrastando con los demás. Por otra parte, el segundo refuerza la señalización con un elemento gráfico, como lo es el ícono de
radiación. Finalmente, el tercer rectángulo añade el texto que potencia ambos mensajes.

Pág. 24
 Módulo: 2
Curso: Introducción al diseño

3.4. Jerarquía
El contraste también está estrechamente vinculado a la jerarquía. Este
aspecto tiene por objetivo guiar el orden de lectura de la pieza visual
a los usuarios. Es decir, les muestra por dónde comenzar e ir a
continuación, usando diferentes niveles de énfasis.

Establecer la jerarquía es simple: simplemente hay que decidir qué

elementos son los que el lector debe ver primero y luego destacarlo.
Las partes más importantes suelen ser más grandes y atractivas de
alguna manera.

Un ejemplo claro de lo expuesto son los carteles de festivales musicales

(Figura 32). En primer lugar siempre se destaca el nombre del evento,
para posteriormente presentar en bloque de texto los artistas
confirmados y finalmente la información adicional. Figura 32: Ejemplo de una apropiada
jerarquía en el diseño. Los carteles de
festivales musicales ejemplifican como
el diseño ayuda a potenciar lo que se
desea comunicar, de forma ordenada.
3.5. Consecuencia
Este principio es un recordatorio de que cada pieza de un proyecto debe tener una apariencia
consecuente con la idea general. Esto implica encontrar maneras de reforzar el diseño, repitiendo o
siguiendo la línea gráfica de ciertos elementos.

La consecuencia no es sólo por razones estéticas; ser coherente también sirve para que la pieza de diseño
sea más fácil de leer en su conjunto (Figura 33). Cuando el usuario sabe qué esperar, puede relajarse y
centrarse en el contenido o en otros factores más importantes en el momento de su uso.

Por ejemplo, si para diseñar una revista, se ha seleccionado una tipografía, esta se debería usar en todas
sus páginas. Al igual que el estilo de encabezado y paleta cromática.

Figura 33: La información visual en una autopista debe ser coherente, para que pueda ser entendida de forma fácil y rápida. Las
altas velocidades de circulación obligan a que la persona comprenda la información en el menor tiempo posible, porque de lo
contrario puede generar accidentes fatales. Otro símbolo que posea una forma, tamaño o color distinto, puede ser inentendible.

Pág. 25
 Módulo: 2
Curso: Introducción al diseño

4. Tipografía
Según Stanley Morison (19361), la tipografía es “el arte de disponer correctamente el material de imprimir,
de acuerdo con un propósito específico: el de colocar las letras, repartir el espacio y organizar los tipos
con vistas a prestar al lector la máxima ayuda para la comprensión del texto escrito verbalmente”.

A casi un siglo de su definición, el único cambio prudente para que sea contemporánea es agregar lo
digital junto al material impreso. Lo anterior, porque el proceso de diseño y fabricación de tipografías,
sumado a la diagramación de textos, han evolucionado al mundo digital. Los tipógrafos son parte del
pasado, pues ya no se colocan las letras de manera manual. Actualmente, desde la diagramación de
textos impresos hasta la creación de sitios web están fundamentadas en software digital.

Es fundamental para un diseñador tener un conocimiento profundo sobre tipografías, principalmente por
dos razones. En primer lugar, las tipografías transmiten sensaciones e ideas (Figura 34). Por ejemplo,
hay tipografías que reflejan valores, como el prestigio, y otras que asociamos con los productos caros. A
continuación, leerás algunas acotaciones sobre la influencia de la tipografía en la percepción (BBC News
Mundo, 20182):

 El cerebro confunde el proceso de lectura con respecto a lo que estás leyendo, por lo que si un tipo
de letra es fácil de leer, parecerá que realizar una instrucción es más simple.
 Estilos como el Didot, con contraste y líneas finas se asocia con la calidad, lo caro y la elegancia.
Eso explica que sea la elegida para cabeceras de revistas como Vogue
 Los estilos en negrita y redondeados con poco contraste generan la idea de barato.

En segundo lugar encontramos la legibilidad, que refiere a la facilidad para distinguir una letra de
otra desde las características físicas de una tipografía específica. Una composición tipográfica con
buena legibilidad permite ser leída con fluidez y naturalidad (Figura 35), más allá que pueda ser
comprendido.

Figura 34: Estilos como el Didot son los elegidos por las Figura 35: Dos tipografías con distinta legibilidad. La de la
revistas de moda, debido a su carácter elegante derecha se hace difícil para la lectura profunda, mientras que
la segunda es mucho más fácil de leer.

1
Morison, S. (1936). First Principles of Typography [Principios fundamentales de la tipografía]. Londres: Macmillan.
2
BBC News Mundo. (2018). La psicología de los tipos de letra: cómo la tipografía influye en lo que consumimos.
BBC News Mundo. Recuperado el 15 de marzo de 2019 de [Link]

Pág. 26
 Módulo: 2
Curso: Introducción al diseño

4.1. Tipografía y fuente

Atención

No te confundas: tipografía y fuente no son lo mismo.

Dentro del mundo del diseño existe una serie de confusiones entre los términos tipografía, fuente y tipos.
No sería extraño escuchar la siguiente conversación:

- ¿Tienes la fuente Helvética - Te paso al tiro la tipografía. - Ok, entonces estoy a la

para usarla en el afiche? Te la mando por mail. espera de la letra.

Y es que pocos tienen clara la diferencia entre tipografía y fuente. Es por ello que es importante que
las conozcas:

Como ya se mencionó, se refiere al arte y técnica de organizar tipos para que el

Tipografía lenguaje escrito sea efectivo. Esta gestión implica seleccionar una fuente, organizar
los caracteres y repartir el espacio.

O fuente tipográfica, se define como el estilo o apariencia de un grupo completo

Fuente
de caracteres, números y signos, regidos por unas características comunes.

Tipo Hace referencia a una letra en específico.

Figura 36: Comparación gráfica de tipo, fuente tipográfica y familia tipográfica (o tipografía).

Pág. 27
 Módulo: 2
Curso: Introducción al diseño

4.2. Tipos de fuentes

Como se señaló anteriormente, nos referimos a la apariencia de un grupo de caracteres, números y
símbolos, regidos por un estilo unificado. Esto quiere decir que el tipógrafo o diseñador ha concebido
estos elementos para ser usados conjuntamente, atendiendo a unas pautas de armonía entre sus rasgos
que aseguren su estética y legibilidad. En la actualidad, las fuentes son archivos con información
vectorizada que contienen tamaño, forma, interletraje y otros aspectos de cada tipo de letra.

Las fuentes se dividen principalmente en cuatro grandes ramas:

a. Fuentes Serif
Las fuentes Serif tienen pequeños trazos llamados serifas unidos a la parte principal de la letra (Figura
37). Debido a su aspecto clásico, son una buena opción para los proyectos más tradicionales. También
son comunes en la impresión de publicaciones, como revistas y periódicos. A consecuencia de que
comúnmente se cree que son más cómodas de leer que las tipografías sin remate o paloseco (Sans Serif)
se utilizan generalmente para textos largos.

El origen de las serifas viene de la época en que la gente necesitaba esculpir las letras en bloques de
piedra. Resultaba difícil asegurar que los bordes de las letras fueran rectos, por lo que el tallador
desarrolló una técnica que consistía en destacar las líneas finales para el acabado de casi todas las letras,
por lo que las letras presentaban en sus extremos unos remates muy característicos, siendo el origen de
estas.

Figura 37: Características de una fuente serif. Se destacan las

serifas con color rojo en el ejemplo.

b. Fuentes Sans Serif o Paloseco

No tienen ese trazo extra, por eso el nombre “Sans” que en francés quiere decir “sin” (Figura 38). Este
estilo se considera más limpio y moderno que las fuentes Serif. Además, tiende a usarse más para
diseños digitales, usados en teléfonos inteligentes, computadores o tabletas, pensando en una mejor
legibilidad en estas pantallas, ya sean por factores de baja resolución, como en pantallas de generaciones
anteriores; o menor tamaño, en el caso de los teléfonos inteligentes.

Figura 37: Características de una fuente sans serif. Se destacan, en

comparación a las anteriores, por la inexistencia de serifas.

Pág. 28
 Módulo: 2
Curso: Introducción al diseño

Por lo general, las fuentes Serif y Sans Serif vienen en una familia tipográfica. Es decir, un conjunto de
tipos basados en la misma fuente, pero con algunas variaciones, tales como el grosor y la anchura, pero
manteniendo características comunes. Las más comunes son las siguientes:

Normal o regular
No tiene alteración.
Normal Normal Normal

Itálica o cursiva
Con una ligera inclinación hacia el lado derecho.
Italic Italic Italic

Negrita o bold
Con el trazo más grueso.
Bold Bold Bold

Negrita y cursiva (o bold italic)

ombina las dos anteriores en una fuente.
Bold Italic Bold Italic Bold Italic

c. Fuentes de fantasía
En inglés la traducción es Display Font, y se refieren a
las fuentes que tienen como propósito llamar la
atención en detrimento de la legibilidad. Tienen un
gran carácter expresivo, y se usan para textos cortos
como encabezados o logos.

d. Fuentes manuscritas
Las fuentes manuscritas o script parecen hechas
con caligrafía. Estas fuentes se reservan para acentuar
el título principal o la firma del autor, ya que al estar
basada en un trazo más fluido y orgánico, su
legibilidad es más baja que otro estilo de fuentes.

Pág. 29
 Módulo: 2
Curso: Introducción al diseño

4.3. Modos de uso

Para mantener una legibilidad adecuada, es necesario tener en cuenta las siguientes recomendaciones;

 Una tipografía regular o de tono medio es más legible que una de trazo fino (light o blanca) o
de trazo grueso (bold o negrita). Los trazos finos o gruesos reducen la legibilidad y generan
cansancio en el lector.
El cadáver de Wamba, rey
El cadáver de Wamba, rey godo godo de España, fue
El cadáver de Wamba, rey godo de
de España, fue exhumado y
España, fue exhumado y trasladado en exhumado y trasladado
trasladado en una caja de zinc
una caja de zinc que pesó un kilo. en una caja de zinc que
que pesó un kilo.
pesó un kilo.
Arial Narrow Arial Arial Black

 En un bloque de texto, las letras minúsculas son más legibles que las mayúsculas.

EL CADÁVER DE WAMBA, REY GODO

El cadáver de Wamba, rey godo de
DE ESPAÑA, FUE EXHUMADO Y
España, fue exhumado y trasladado en
TRASLADADO EN UNA CAJA DE ZINC
una caja de zinc que pesó un kilo.
QUE PESÓ UN KILO.
Minúsculas Mayúsculas

 En un bloque de texto, el espaciado demasiado amplio o demasiado reducido entre las letras y
entre las palabras dificulta la legibilidad.

El cadáver de Wamba, rey

El cadáver de Wamba, rey godo
godo de España, fue El cadáver de Wamba, rey godo de
de España, fue exhumado y
exhumado y trasladado en España, fue exhumado y trasladado en
trasladado en una caja de zinc
una caja de zinc que pesó una caja de zinc que pesó un kilo.
que pesó un kilo.
un kilo.
Expandido Normal Comprimido

 En un bloque de texto, cuando el interlineado (distancia entre líneas) es demasiado estrecho o

es demasiado amplio se reduce la legibilidad.

El cadáver de Wamba, rey godo

El cadáver de Wamba, rey godo
El cadáver de Wamba, rey godo
de España, fue exhumado y de España, fue exhumado y de España, fue exhumado y
trasladado en una caja de zinc trasladado en una caja de zinc
que pesó un kilo. trasladado en una caja de zinc
que pesó un kilo.
que pesó un kilo.
Espaciado estrecho Espaciado normal Espaciado amplio

Pág. 30
 Módulo: 2
Curso: Introducción al diseño

 Cuando el ancho de una columna de texto es muy pequeño resulta cansador para el lector el
tener que cambiar de línea con demasiada frecuencia. Si por el contrario la columna de texto es
demasiado ancha, resulta complicado encontrar el comienzo de la siguiente línea.

El cadáver
de Wamba,
rey godo de El cadáver de Wamba,
España, fue rey godo de España, fue
El cadáver de Wamba, rey godo de España, fue exhumado y
exhumado y exhumado y trasladado
trasladado en una caja de zinc que pesó un kilo.
trasladado en una caja de zinc que
en una caja pesó un kilo.
de zinc que
pesó un kilo.
Ancho de
columna Ancho de columna normal Ancho de columna amplio
estrecho

 La tipografía negra sobre soporte blanco es más legible que cualquier otra combinación de
colores.

El cadáver de Wamba, rey godo El cadáver de Wamba, rey godo El cadáver de Wamba, rey godo
de España, fue exhumado y de España, fue exhumado y de España, fue exhumado y
trasladado en una caja de zinc trasladado en una caja de zinc trasladado en una caja de zinc
que pesó un kilo. que pesó un kilo. que pesó un kilo.

Blanco sobre rojo Negro sobre blanco Blanco sobre negro

Cierre
Lo expuesto en este módulo son las bases técnicas para resolver un encargo del área del diseño gráfico.
Conocer los fundamentos sobre la percepción visual te ayudarán a comunicar un mensaje de manera
clara y directa, atrayendo la atención del potencial usuario.

Luego de tener claros y presentes estos principios puedes dar rienda suelta a la creatividad,
experimentando con tipografías, colores y composiciones, que te permitirán llegar a resultados que no
sacrifiquen la legibilidad o comprensión del mensaje.

Ya tenemos los conocimientos visuales para resolver un encargo, que podrás practicar en la evaluación
del módulo. Sin embargo, nos falta explorar sobre el proceso para contextualizar el encargo. Es por ello
que en el próximo módulo profundizarás en la metodología de diseño.

Pág. 31