Este documento presenta los principios básicos de la composición gráfica, como el equilibrio, ritmo, contraste, unidad, jerarquía y variedad. Explica conceptos como la disposición de elementos visuales en una página para comunicar un mensaje de manera efectiva. Además, profundiza en cada principio a través de ejemplos ilustrativos.

1. Principios de Composición.
Fundamentos de composición.
Ana Maria Arrieta León
Magister en Diseño y Creación Interactiva

2. Este documento se presenta como recurso para todos aquellos
interesados en comunicar información, ideas,
pensamientos y conocimientos a través de la expresión gráfica.
Para su diseño se ha analizado la aplicación de
los principios de la composición en diferentes piezas
gráficas.
2

3. Desde siempre
el hombre
ha usado el lenguaje visual,
recordemos
el arte rupestre en
las cuevas de Lascaux.
INTRODUCCIÓN
3

4. El arte rupestre expresa los modos de vida
de las primeras comunidades humanas.
Puede consultarse en
http://es.wikipedia.org/wiki/Pintura_rupestre
INTRODUCCIÓN
4

5. Times Square
En la sociedad
contemporánea los
procesos de comunicación son masivos
Y se sutentan en la imagen.
INTRODUCCIÓN
5

6. INTRODUCCIÓN
La publicidad, la industria del entretenimiento,
el desarrollo de la tecnología (hardware y
software) y la consolidación de internet han
encontrado en la imagen la forma de
entablar relaciones con consumidores y
usuarios.
6

7. Las nuevas generaciones
crecen siendo impactadas
por grandes cantidades
de información audiovisual,
las relaciones están
mediadas por aparatos
electrónicos que
transmiten esta información de
manera eficiente.
7

9. ¿Qué es la composición?

10. Componer se refiere a la
disposición de elementos
sobre un plano.
Estos elementos son de
naturaleza diversa:
formas, textos,
imágenes, texturas,
colores.
A través de la composición
se relacionan dichos elementos
con el objeto de construir y
comunicar un mensaje.
10

11. Disponible en
http://yocompongo.blogspot.com/
11

12. Principios de la Composición
Componer no es otra cosa que aplicar principios, leyes o reglas a elementos dispuestos sobre un plano.
Equilibrio
Ritmo
Contraste
Unidad
Jerarquía
Variedad

13. Variedad
Jerarquía
Principios Unidad
de la
composición Contraste
Ritmo
Equilibrio
Composición
13

14. Se refiere a todos los elementos disponibles
para la construcción de la composición.
Formas * colores *
texturas * ilustraciones *
fotografías * contornos *
Variedad
efectos * fondos *
tipografías *
El objetivo de la variedad es
despertar el interés.
14

15. Composición creada
Con variedad de elementos:
Colores, textos, formas.
Disponible en
http://esturionbeluga.blogspot.com/2010/08/composicion-grafica.html
Variedad
15

16. Variedad Orden de lectura
Tamaño
Jerarquía Color
Disposición
Ubicación
Principios
Unidad Disposición de elementos
de la Contraste
composición
Ritmo
Equilibrio
Variedad
16

17. La unidad de una
composición requiere que
la tensión entre fuerzas
Jerarquía
y los estímulos causados
sean integrados por un
elemento dominante.
El elemento dominante se encuentra
apoyado y complementado por otros elementos
en condición de subordinación.
17

18. El orden de lectura está dado por la manera en
que culturalmente nos enfrentamos al texto.
La lectura se hace de manera lineal.
Elemento principal
Elementos secundarios:
de apoyo
Jerarquía decorativos
x orden informativos
de lectura
18

19. Jerarquía En el caso de este comic la jerarquía permite
x orden la lectura lineal que construye el sentido de la narración.
Disponible en: http://www.truchafrita.net/comics.html
de lectura
19

20. Jerarquía
x orden
de lectura Infografía: Que hace la gente en internet, disponible en:
http://elantroposofista.blogspot.com/2011/04/que-hacen-los-gringos-en-internet-en.html#axzz1bMS5VeIr
20

21. La infografía Que hace la gente en internet, ofrece la siguiente
Información:
1. Describe (con texto) las tipologías de los usuarios.
2. Identifica (con íconos y colores) las diferentes tipologías de
usuarios.
3. Presenta estadísticas (esquema con los mismos colores
asignados a los íconos) con respecto a los grupos de edad más
comunes para cada tipología.
La jerarquización permite que los elementos de la infografía se
conecten y estructuren un todo informacional que posibilita al
Lector hacerse una idea de los tipos de usuarios de internet.
Jerarquía
x orden
de lectura
21

22. El tamaño de un elemento propicia enfocar la atención.
En este caso la atención es enfocada por un elemento de tamaño pequeño.
Jerarquía
x
tamaño 22

23. El tamaño de un elemento propicia enfocar la atención.
En este caso la atención es enfocada en un elemento de tamaño grande.
Jerarquía
x
tamaño 23

24. Jerarquía
Disponible en:
x http://static.blogo.it/cinemaniablog/posters-de-cine-06/cinemaniablog_postersMarzo2010_01.jpg
tamaño 24

25. La composición del poster promocional de la película
TOY STORY 3, aplica la jerarquía por tamaño,
se observa el número 3 en tamaño mayor que las
figuras del fondo, el elemento que apoya y resalta el 3
de entre los demás elementos es el color amarillo, para
acentuar más la jerarquía se utiliza un contorno azul
que en contraste con el amarillo permite la clara
diferenciación del fondo.
En esta composición se construye un Ritmo (ver la sección dedicada a ritmo)
inspirado en el desorden del cajón de juguetes de cualquier niño o niña. El
fondo se forma a partir de un montón de juguetes que recuerdan la manera
como se encuentran dispuestos en el cajón que los guarda.
Jerarquía
x
color 25

26. La diferencia de color de un elemento
con respecto a los demás de la composición
Jerarquía es una forma de dar importancia y atrater la atención.
x
color 26

27. En esta composición, el elemento que atrae la atención
es la flor amarrilla que se destaca entre los grises.
Jerarquía
Disponible en
x http://es.123rf.com/photo_3472304_flores-en-blanco-y-negro-y-color.html
color 27

28. La jerarquía de color también se aplica entre elementos de variado color, el elemento que busca atraer
la atención debe presentarse con un color que contraríe la gama de la composición.
Jerarquía
x
color 28

29. En este poster se aplica la jerarquía
de color al incorporar el azul a una
gama de cafés,
a pesar que son de la
misma especie, el azul se hace
intenso en medio del beige y sobre el
fondo café.
Jerarquía
x Disponible en
http://abduzeedo.com/30-amazing-retro-posters-and-flyers
color 29

30. Fig 1 Fig 2
En la jerarquía por ubicación un objeto se torna atractor de atención al alterar
su disposición en el plano. Ejemplo un giro (fig 1) o un desplazamiento (fig 2).
Jerarquía
x
ubicación 30

31. En el diseño de esta
caratula de revista se
aplica la jerarquía
por ubicación
ejemplificada en la
figura 1
Disponible en
http://grainedit.com/2008/05/12/53-years-of-latvian-magazine-jauna-gaita/
Jerarquía
x
ubicación 31

32. También se da jerarquía a un elemento dándole una posición privilegiada dentro de la
composición, esto permite su diferenciación rápida visualización.
Jerarquía
x
ubicación 32

33. En este ejemplo se observa que elementos de naturaleza diferente (la vegetación y las personas)
forman un grupo dentro de la composición. El texto LOST atrae la atención porque se fuera de este
grupo, en este caso la jerarquía por ubicación se apoya además en el color contrastante con el
Jerarquía fondo y en el tamaño del texto el cual es superior si se compara con lo elementos individuales.
x Disponible en: http://www.perdidos6temporada.com/posters-lost-perdidos.php
ubicación 33

34. Jerarquía Todos los elementos de la composición refuerzan el elemento
x principal y lo complementan en la transmisión del mensaje.
disposición de
elementos 34

35. En este caso la palabra
atmosphere es definida a partir de
las imágenes que recrean cada uno
de los componentes del concepto.
Jerarquía Disponible en
http://weblog.evasee.com/tag/posters/
x
disposición de
elementos 35

36. En afiche se usa una imagen
con estilo precolombino
para enfocar la atención
y dar inicio a la lectura
de la composición
que se complementa
con el texto ubicado
al lado derecho superior.
Jerarquía
x
disposición de
elementos http://aldia.utem.cl/profesores-de-diseno-presentaron-sus-investigaciones-en-las-jornadas-latinoamericanas-de-posgrado/ 36

37. Variedad
Jerarquía Continuidad
Repetición
Principios
Unidad Continuación
Proximidad
de la Contraste continuación
composición
Ritmo
Equilibrio
Variedad
37

38. Cada elemento sobre el
plano ejerce fuerzas y
tensiones, el conjunto de
estos elementos y sus Unidad
fuerzas –relacionados- se
constituye en unidad.
El valor de la unidad es superior
a la simple suma de elementos.
38

39. La unidad por continuidad sucede cuando los elementos de la composición
se articulan en torno a la construcción del mensaje, si bien los círculos varían
en el tono del color esto no afecta la construcción mental del triangulo
Unidad que se forma en la alineación de dichos elementos. Significando así, que la unidad
x se construye sin importar la naturaleza de los elementos de la composición.
continuidad 39

40. En esta imagen se utiliza
una continuidad de puntos
que varían de tamaño
para generar la forma de la
manzana, se utilizan
además cuadrados para
representar el tallo.
Disponible en
http://grafikdrops.wordpress.com/2011/03/08/03%C2%B0-elementos-basicos-del-lenguaje-visual/
Unidad
x
continuidad 40

41. Uso del mismo elemento, característica o lógica de disposición
Unidad para construir la composición composición.
x
repetición 41

42. Unidad
En este caso se repiten color y forma, apoyados en el desplazamiento
x progresivo dado por la ubicación de cada silla en un punto diferente.
repetición 42

43. La continuación se da por la conexión que expresan los elementos sobre el plano.
En este caso la diferencia de tamaños da una sensación de profundidad
que transmite movimiento pero también la relación entre ellos.
Unidad
x
continuación 43

44. En este Degas «lección de danza» la continuación está dada
por la barra roja que conecta a las bailarinas
Unidad
x
continuación 44

45. La cercanía de los elementos hace que los captemos como una unidad.
Unidad
x
proximidad 45

46. La proximidad unifica los elementos de la composición.
Unidad
x
proximidad 46

47. Variedad
Jerarquía
Principios
Unidad Color
de la Contraste Forma
Tamaño
composición Tipografía
Ritmo
Equilibrio
Contraste
47

48. El contraste se crea
cuando dos elementos son
completamente diferentes
Genera un impacto visual Contraste
completamente atractivo a los ojos.
Apoya la organización de la información.
El texto sobre el fondo blanco
es el contraste más común y
usado por todos.
48

49. Se da cuando se contraponen colores de valor diferente.
Contraste
de color 49

50. El mensaje de esta composición se estructura a partir de contraste generado por por los colores
verde (fondo), negro (silueta), blanco (producto y textos).
Contraste Disponible en http://www.apple.com/es/ipod/
de color 50

51. Este contraste se logra comparando dos o mas figuras con formas diferentes.
.
Contraste
de forma 51

52. La composición en construcción que se muestra en la fotografía se propone a partir de la
yuxtaposición de formas y colores logrando un contraste llamativo.
.
Contraste http://www.grupocolorsantiago.cl/seminario/
de forma 52

53. Contraste generado en la diferencia del tamaño de la forma, el cual rompe el
Contraste ritmo y enfoca la atención.
de
tamaño 53

54. En este poster el contraste
se genera en la diferencia
de los tamaños de las
fuentes. (también se
genera en el juego de
colores, pero para este
caso nos concentramos en
Contraste el tamaño)
de Disponible en
http://www.behance.net/gallery/Fantail-poster/650538
tamaño 54

55. Contraste de tipografía
Este contraste se genera al comparar tipografías de familias diferentes.
Contraste
de
tipografía 55

56. La marca del canal mtv
se construyó a partir del
contraste tipográfico,
en este caso.
Contraste La M es un «tipo duro y moderno»
sobre la que se ubica la sigla TV
de Escrita en un tipo suave que evoca
un brochazo de pintura.
tipografía Disponible en http://rubenslp.com.br/9997/128309/gallery/mtv-coca-cola
56

57. En este caso la frase está escrita en una sola familia tipográfica
Se genera contraste al presentar la palabra life en mayúsculas
y en negrita.
Contraste
de
tipografía
57
x tamaño

58. Variedad
Jerarquía
Principios
Unidad
de la Contraste
composición
Ritmo Regular
Libre
Equilibrio
Variedad
58

59. Es la repetición de
un elementos Ritmo
de la composición.
Ritmo regular Ritmo progresivo
Se obtiene de la repetición Representa un
de un patrón. movimiento orgánico o
natural que se usa para
crear movimiento visual.
59

60. Un ritmo regular se da por la repetición uniforme del patrón
Ritmo
regular 60

61. Las manos enlazadas en la parte
Inferior de este poster,
se han dispuesto de acuerdo al
principio de ritmo regular.
Ritmo Disponible en
regular http://wearebrainstorm.com/portfolio.html
61

62. En este cartel Nazi, que se utilizó para promover
los hogares para la formación de juventudes.
En esta composición, se usa el principio de ritmo
regular al que se le aplica una progresión
disminuyendo el tamaño de las imágenes de los
jóvenes, que entran a la casa.
Disponible en
http://www.lasegundaguerra.com/viewtopic.php?f=41&t=8967
Ritmo
regular 62

63. El diseño de esta carátula presenta ruptura del ritmo regular, lo que se logra con la
Alteración de la posición de las formas y con la escritura de tipos sobre estas.
Ritmo Disponible en http://www.unostiposduros.com/?p=1273
regular 63

64. Se construye a partir de elementos repetidos, se obtiene alterando cualquiera de las características
(color, posición, tamaño) de los elementos, generando una jerarquía visual que determina
el «crechendo visual». En este caso se ha modificado el tamaño y la posición de la forma.
Ritmo
progresivo 64

65. Para lograr la sensación de
movimiento de las formas
en esta pieza se ha aplicado el
principio de ritmo progresivo.
Disponible en
http://www.behance.net/gallery/Adobe-CS4-Shortcut-to-Brilliant/193935
Ritmo
progresivo 65

66. Variedad
Jerarquía
Principios
Unidad
de la Contraste
composición
Ritmo
Horizontal
Equilibrio Radial
Por proximidad
Equilibrio
66

67. Es la característica que da balance a
la composición.
Equilibrio
Los elementos deben relacionarse
entre sí y ubicarse en el plano de
acuerdo a los pesos que representan.
67

68. Los elementos se ubican con
respecto a un eje vertical.
Recuérdese que lo que se
busca es lograr el equilibrio
entre formas, textos,
imágenes, colores. El truco
está en la disposición de los
elementos sobre el plano.
Equilibrio
horizontal 68

69. Los elementos se ubican con
respecto a un eje concéntrico.
El eje puede ser imaginario,
también puede ser y
materializarse en una forma,
un texto, un color, alrededor
del cual se ubican los demás
elementos de la composición.
Equilibrio
radial 69

70. Si bien la proximidad se refiere
a la distancia (fig 1), también se
refiere a la manera en que se
disponen los elementos en el
plano, sin importar si son de
diferente naturaleza (fig 2).
(fig 1)
Una composición es simétrica
cuando los elementos establecen
relaciones entre sí.
Equilibrio
por (fig 2)
proximidad 70

71. Ejemplo de proximidad, no apelando al concepto de distancia,
si no a la disposición de los elementos. La imagen se
ve equilibrada a pesar de la diferencia de los elementos,
el equilibrio se logra no por semejanza, ni por distancia si no por ubicación.
Equilibrio
por
proximidad 71

72. Bibliografía
Pujagut, Jaume y colaboradores. Desarrollo de un proyecto gráfico. 2010. Editorial Index Book. Barcelona, España.
Samara, Timothy. Design Elements: A graphic style manual: Undesrtanding the rules and broken them.
2007. Editorial Rockport. New York, U.S.A.
Scott, Robert G. Fundamentos del diseño. 1984. Editorial Victor Leru S. Buenos Aires, Argentina.
Williams, Robin. The non-designers design book: Design and typographic principles for the visual novice. 2004. Peachpit press.
California, U.S.A.
72

73. webgrafía
Poster Lost http://www.perdidos6temporada.com/posters-lost-perdidos.php
Elementos básicos del lenguaje visual http://grafikdrops.wordpress.com/2011/03/08/03%C2%B0-elementos-basicos-del-lenguaje-visual/
Sitio web Apple http://www.apple.com/es/ipod/
Blog: Grupo color Santiago http://www.grupocolorsantiago.cl/seminario/
Carly Hitchcock´s Portfolio http://www.behance.net/gallery/Fantail-poster/650538
Mtv y Coca Cola: Let´s celebrate: http://rubenslp.com.br/9997/128309/gallery/mtv-coca-cola
BrainStorm: Print + Design http://wearebrainstorm.com/portfolio.html
La Segunda Guerra http://www.lasegundaguerra.com/viewtopic.php?f=41&t=8967
73

74. webgrafía
Pintura Rupestre http://es.wikipedia.org/wiki/Pintura_rupestre
Composición gráfica http://esturionbeluga.blogspot.com/2010/08/composicion-grafica.html
Blog: Yo compongo http://yocompongo.blogspot.com/
Truchafrita comics http://www.truchafrita.net/comics.html
Infografía: Qué hacen los gringos en internet? http://elantroposofista.blogspot.com/2011/04/que-hacen-los-gringos-en-internet-en.html#axzz1bMS5VeIr
Posters de cine http://static.blogo.it/cinemaniablog/posters-de-cine-06/cinemaniablog_postersMarzo2010_01.jpg
Fotografías de flores http://es.123rf.com/photo_3472304_flores-en-blanco-y-negro-y-color.html
Abdezudo: Posters y flyers http://abduzeedo.com/30-amazing-retro-posters-and-flyers
Grain edit http://grainedit.com/2008/05/12/53-years-of-latvian-magazine-jauna-gaita/
evasèe graphic activists http://weblog.evasee.com/tag/posters/
Jornadas latinoamericanas de diseño http://aldia.utem.cl/profesores-de-diseno-presentaron-sus-investigaciones-en-las-jornadas-latinoamericanas-de-posgrado/
Adobe CS4 gallery http://www.behance.net/gallery/Adobe-CS4-Shortcut-to-Brilliant/193935
74