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