Composicion

Principios de la composición y principios de la
imagen.
Una composición visual es la organización de los elementos visuales de una imagen
para crear un diseño visualmente llamativo y potente.
Cuando se está generando un diseño hay algunos conceptos básicos que se deben
considerar como proporciones- relación de aspecto o en inglés aspect ratio, encuadre
(framing), campo de visión (field of view), primer plano (Foreground) y fondo
(background).
Av.Ricardo Lyon 1177, Instituto Tecnológico Crossmedia - Providencia, Santiago, Chile | Teléfonos 204 3190 - 204 2998 | www.academiamac.cl
© 2012 Academia Crossmedia -Training & Consulting™
Proporción (aspect ratio)
Si primero que tendremos que determinar a la hora de comenzar a realizar un boceto son las
dimensiones del área gráfica que se va utilizar.
Igualmente si cuando se va a tomar una fotografía digital se debe tener en cuenta que hay
diferentes aspect ratios.
El aspect ratio o la proporción es el a relación entre el alto y el ancho de un objeto.
Aunque hay muchos tipos de aspect ratios 3:2 y 4:3 son los más comunes. Para las cámaras de
35 mm y la mayorías de las cámaras digitales de un solo lente reflex (SLR) el ratio standar es
3:2.
Proporción
(aspect ratio)
Monitores, televisores y la
mayoría de las cámaras
compactas usan una proporción
de 4:3. El aspect ratio puede
afectar las dimensiones de
impresión de la imagen,
causando el recorte de parte de
la imagen para poder lograr el
tamaño correcto de impresión.
Por ejemplo una proporción de

2:3 se imprime sin problema en
un formato de 4” x6”, porque las
proporciones son compatibles.
Pero si se quiere generar una
impresión de de 8”x10” con una
imagen de 3:2, se tendría que
hacer un recorte de 2”.
Encuadre (Framing)
Encuadrar una imagen guía al espectador al interior de la imágen. Esto se puede lograr al crear
marcos para las fotografías en photoshop o usando elementos visuales de la escena.
Teoría de
cuadrícula
Usar una grilla no solo hace que los
elementos en un diseño estén
organizados y alineados sino
también proporcionados.
Muchos historiadores denominan

a Piet Mondrian como el padre del
diseño por su uso de la cuadrícula.
Sin embargo esta ha influenciado el arte por miles de años.
Perspectiva de Durero
Mosaico árabe
Jeroglíficos egipcios
Proporción Áurea
El concepto de dividir los elementos en de una composición se extiende hasta
Pitágoras.
El observó que un patrón matemático ocurría tan a menudo en la naturaleza que creyó
era inspirado por Dios. Nos referimos a este patrón como la sección de oro o la divina
proporción.
La idea básica es que una línea bisecada usando la divina proporción se logra al dividirla
por 1,62. este numero mágico es realmente 1,6180339…. Un numero irracional que
usualmente es representado por la letra Φ phi
En general los diseños creados a partir
de una composición divida por líneas
que están proporcionadas con el
segmento de oro son consideradas
estéticamente agradables.
Los artistas del renacimiento

empleaban la divina proporción para
dibujos, escultura, arquitectura etc.
Los diseñadores actualmente lo

emplean para crear diseños de
páginas, posters, brochures y todo
tipo de piezas.
Mas que confiar en una noción

artística la divina proporción da guías
lógicas para producir diseños
atrayentes.
La regla de los
tercios
Es una versión simplificada de la
divina proporción.
Una línea bisecada por el

segmento de oro es divida en
dos secciones se son
aproximadamente del doble del
tamaño de la otra.
Dividir entonces la composición

en tercios es una manera fácil
de aplicar la divina proporción
sin calculadora.
La regla de los tercios
Igualmente la regla de los tercios es una de las reglas básicas y clásicas e importantes de la
composición fotográfica.
Esta ley nos dice que el tema principal de una fotografía debe situarse en uno de los cuarto puntos
donde se cortan las líneas resultantes de dividir la fotografía en tres segmentos verticales y tres
segmentos horizontales iguales. Estos puntos es donde se centra la atención de la persona que
observa la fotografía, por eso se denominan puntos fuertes.
La regla de los tercios
Esta regla procede de la pintura renacentista del siglo XVI. Su objetivo era evitar que el centro de
interés estuviera colocado en el centro lo que daría a la imagen un menor dinamismo y equilibrio.
Este principio se basa en el hecho de que la vista humana se centra más a partir de los dos tercios
hacia arriba en el lienzo, en la imagen impresa o en una imagen proyectada sobre una pantalla.
Variedad
Se refiere a todos los
elementos disponibles
para la construcción de
la composición.
• Formas
• colores
• texturas
• ilustraciones
• fotografías
• contornos
• efectos
• fondos
• tipografías
El objetivo de la variedad es Composición creada con

variedad de elementos: Colores,
despertar el interés.
textos, formas.
Balance
Al igual que los objetos físicos tienen un peso, también lo hacen los elementos de
un diseño. Si los elementos sobre los ambos lados de un diseño tienen el mismo
peso, se equilibran entre sí.
Hay tres formas principales de equilibrio visual:

1.simétrica
2.asimétrica
3.radial
Balance simétrico
Equilibrio simétrico, o el
balance formal, se produce
cuando los elementos de
una composición son los
mismos a ambos lados de
una línea de eje.
Balance simétrico
las composiciones con
equilibrio formal o simétrico
reflejarán estabilidad, calma y
estatismo.
No supone una composición

muy audaz auque lo que
asegura es una distribución
armónica de los elementos.
Aunque puede que no sea práctico para todos los diseños, este tipo de simetría llamada
horizontal, se puede aplicar a los diseños, centrando el contenido o el equilibrio que
entre las columnas.
Las otras dos formas de equilibrio simétrico comúnmente
empleadas en el diseño de logotipos y en impresión son:
■ simetría bilateral: existe cuando una composición está

equilibrada en más de un eje.
ejemplo de
simetría
bilateral
ejemplo de
simetría radial
■ simetría radial: se produce cuando los

elementos son igualmente espaciados
alrededor de un punto central.
Balance asimétrico
Equilibrio asimétrico, o el
equilibrio informal, es un poco
más abstracto (y visualmente
más interesante) que un
equilibrio simétrico.
En lugar de imágenes en el
espejo a cada lado del trazado,
el equilibrio asimétrico implica
objetos de diferentes
dimensiones, forma, tono, o la
colocación.
Balance asimétrico
Estos objetos están dispuestos de modo que, a pesar de sus diferencias, igualan el peso
de la página.
A diferencia de un equilibrio
simétrico, el equilibrio
asimétrico es versátil y, como
tal, se utiliza más a menudo
en la Web.
Si se echa un vistazo a la
mayoría de diseños de página
de dos columnas, se dará
cuenta de que la columna
más ancha es a menudo un
color más claro-una táctica
que crea un buen contraste
para el texto y el contenido
principal.
La columna de navegación es
a menudo más oscura, tiene
una especie de frontera, o se
hace para destacar, con el fin
de crear equilibrio en el
diseño.
Unidad
Continuidad, Repetición, Proximidad
La teoría del diseño describe la unidad como la

manera en que los diferentes elementos de una
composición de interactúan uno con el otro.
Un diseño unificado es uno que funcione como

un todo en lugar de ser identificado como
piezas separadas.
Cada elemento sobre el plano ejerce fuerzas y

tensiones, el conjunto de estos elementos y sus
fuerzas –relacionados- se constituye en unidad.
El valor de la unidad es superior a la simple suma

de elementos.
Es importante que la unidad no sólo exista dentro de cada elemento de una página de
una pieza gráfica, sino que toda la pieza gráfica debe trabajar como una unidad.
Podemos usar varios enfoques para lograr la unidad en una pieza gráfica como:
1.La continuidad.
2.La proximidad.
3.La repetición.
Unidad por La
Continuidad
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
triángulo que se forma en la
alineación de dichos elementos.
Significando así, que la unidad se

construye sin importar la
naturaleza de los elementos de la
composición.
Unidad por La
Continuidad
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.
Unidad por La Proximidad
La proximidad es una obvia -pero a
menudo pasada por alto- manera de
hacer que un grupo de objetos se
sienta como una sola unidad.
Colocar objetos juntos dentro de un

diseño crea un punto focal hacia el cual
el ojo gravita.
La cercanía de los elementos hace que los

captemos como una unidad.
Unidad por La Proximidad
La proximidad unifica los elementos de la composición.
Unidad por La Repetición
Una bandada de gansos, un banco de peces, una manada de leones.
Cada vez que trae un conjunto de elementos, como conjunto, forman un grupo.
De la misma manera, la repetición de colores, formas, texturas, u objetos similares,

ayuda a atar el diseño de una pieza gráfica, así como para que se sienta como una
unidad cohesiva.
Armonía
Es el delicado balance entre la

variedad y la unidad.
La armonía en la imagen puede

ser creada usando colores como
los complementarios. O
empleando formas que
funcionan bien juntas como el
símbolo del ying y el yang.
La repetición es a menudo utilizada en los diseños de distintas piezas gráficas para
unificar los elementos que lo componen.
Un ejemplo de este concepto son las listas con viñetas.
La viñeta que precede a cada elemento de la lista es un indicador visual de que los
elementos son partes de un todo.
Patrones repetidos y texturas también pueden ayudar a unificar un diseño.
Jerarquía
La unidad de una composición requiere que la tensión entre fuerzas 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.
El orden de lectura está dado por la manera en que culturalmente nos enfrentamos al
texto.
Elemento principal
Elementos secundarios:
La lectura se hace de manera lineal.
de apoyo
decorativos
informativos
Jerarquía
En el presente ejemplo hay dos tipos de composición una con y otra sin el uso de jerarquía.
La jerarquía visual hace parte importante de la comunicación de un texto pues facilita el

entendimiento del mismo indicando qué es lo mas y lo menos importante
Jerarquía
En el caso de este comic la
jerarquía permite la lectura
lineal que construye el sentido
de la narración.
Jerarquía por Tamaño
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.
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 por Color
La diferencia de color de un elemento
con respecto a los demás de la
composición es una forma de dar
importancia y atraer la atención.
En esta composición, el elemento que

atrae la atención es la flor amarilla que
se destaca entre los grises.
Énfasis
En estrecha relación con la idea de unidad está el concepto de énfasis o la
dominancia.
En lugar de centrarse sobre los diversos elementos de un conjunto, el objetivo del

énfasis es la fabricación de una característica particular para llamar la atención del
espectador.
Una forma de lograr el énfasis está en convertir el elemento deseado en un punto

focal.
Un punto focal es por lo tanto cualquier elemento que llama la atención del
espectador, en lugar de limitarse a ser parte del diseño en su conjunto o de mezclarse
con sus alrededores.
Al igual que con la unidad, hay métodos probados de lograr el énfasis en un punto
focal.
Énfasis por colocación
El centro directo de una composición es el punto en el que los usuarios buscan en primer
lugar.
Cuanto más lejos del centro esté un elemento, menos probable es que se observe por
primera vez.
En la Web, la esquina superior izquierda de la página también tiende a la demanda de

mucha atención por las características del medio. Por este motivo los logos de la mayoría
de los sitios web encuentran en esa ubicación.
1.Recorrido Visual de las Áreas de
Diseño:
Dos puntos determinan el recorrido
visual que hacemos ante una
composición.
1.1.Nuestro sistema de percepción
visual humano
1.2.El factor cultural de nuestro

mundo occidental, es decir de
izquierda a derecha y de arriba hacia
abajo.
1.Recorrido Visual de las Áreas de Diseño
Desde que entramos hasta que abandonamos la página habremos realizado un promedio máximo
de diez fijaciones visuales por hoja, habiéndonos detenido una media de dos veces en cada bloque
de información. Siempre realizamos un recorrido visual en sentido descendente avanzando de
izquierda a derecha.
1.Recorrido Visual de
las Áreas de Diseño
En caso de enfrentarnos a una
información en formato díptico,
pasaremos de la primera página al
interior de nuestra comunicación,
procediendo a abrir la página por
el margen exterior derecho.
En el momento en que
literalmente empezamos a pasar
la página, empieza nuestro
contacto con el contenido gráfico
de la doble página interior.
Diseño
Por esta razón los diseños deben mantener esta

estructura de lectura para alcanzar el éxito en la
comunicación.
En medios impresos se debe colocar la

información más importante en la parte superior
derecha de la pieza y seguir ubicando la
información en forma descendente y en orden
importancia.
La información que queremos que los usuarios

recuerden por sobre todo, debemos ubicarla al
final del diseño, en el margen inferior derecho.
Diseño
Las imágenes deben ser colocadas en el área de

diseño, dirigiendo su atención hacia el centro o
interior de la composición, porque de lo
contrario se está sacando del área de diseño la
atención del usuario.
Por lo tanto, los ejes direccionales de las
imágenes deben ser situados siempre el centro
de la composición, nunca al contrario.
Énfasis por continuación
La idea detrás de la continuidad o el flujo es que cuando nuestros ojos comienzan a moverse en
una dirección, que tienden para continuar por ese camino hasta que una característica más
dominante venga.
Continuidad es uno de los métodos más comunes que los diseñadores utilizan para unificar un
diseño.
Por ejemplo en una página web de forma predeterminada, el borde izquierdo de los títulos,
párrafos y las imágenes crean una línea vertical por el lado izquierdo.
Otra forma sencilla de hacer un uso adicional de este concepto es para alinear los elementos a las
líneas de la cuadrícula del diseño impreso.
Esto crea varias líneas de continuidad para que los ojos de los usuarios las sigan.
Énfasis por Aislamiento
De la misma manera que la proximidad nos ayuda a crear la unidad en un diseño, el
aislamiento promueve el énfasis.
Énfasis por Contraste
El contraste se define como la yuxtaposición de diferentes elementos gráficos, y es el
método más común para crear el énfasis en un diseño puesto que genera un impacto
visual completamente atractivo a los ojos.
El concepto es simple: cuanto mayor es la diferencia entre un elemento gráfico y sus

alrededores, el elemento destaca más.
El contraste puede ser creado utilizando las diferencias de color, tamaño y forma.
Énfasis por Contraste de color
Se da cuando se contraponen colores de valor
diferente.
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).
Énfasis por Contraste de forma
Este contraste se logra comparando dos o mas figuras

con formas diferentes.
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.
Énfasis por Contraste de tamaño
Contraste generado en la diferencia del tamaño de la
forma, el cual rompe el ritmo y enfoca la atención.
En este póster 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 el tamaño)
Énfasis por Contraste de tipografía
Este contraste se genera al comparar tipografías de familias diferentes.
La marca del canal mtv

se construyó a partir del
contraste tipográfico,
en este caso.
La M es un «tipo duro y moderno»

sobre la que se ubica la sigla TV
Escrita en un tipo suave que evoca
un brochazo de pintura.
Énfasis por Contraste
de Proporción
Otra forma interesante de crear
énfasis en una composición es a
través del uso de la proporción.
La proporción es un principio de
diseño que tiene que ver con
diferencias en la escala de los
objetos.
Si colocamos un objeto en un
entorno de menor escala que el
propio objeto, ese objeto aparecerá
más grande que lo hace en la vida
real, y viceversa.
Esta diferencia en la proporción

llama la atención de los
espectadores porque el objeto
parece fuera de lugar.
Énfasis por
Contraste de
Proporción
En este aviso la
proporción del
edificio y el letrero
que tiene encima
hace que ambos
llamen la atención.
Ritmo
Es la repetición de elementos de la composición.
Ritmo regular
Se obtiene de la repetición de un patrón.
Un ritmo regular se da por la repetición uniforme del patrón
Ritmo regular
Las manos enlazadas en la

parte Inferior de este
poster, se han dispuesto de
acuerdo al principio de
ritmo regular.
Ritmo regular
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 progresivo
Representa un movimiento
orgánico o natural que se usa
para crear movimiento visual.
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
Para lograr la sensación de
movimiento de las formas en
esta pieza se ha aplicado el
principio de ritmo progresivo.
ELEMENTOS DE DISEÑO PRINCIPIOS DE DISEÑO
lineas Énfasis simetría constraste
cuando la composición del texto y gráficos está
Similar al énfasis, separa elementos por
el componente básico de la forma hace que un elemento específico se destaque distribuida de manera uniforme alrededor del
comparación o creando diferencias
punto medio
se logra empleando color, tamaño, posición o La simetría puede ser vertical, horizontal o Puede ser logrado por el uso de color, tamaño,
cada linea iene largo, grosor, y dirección
formas radial formas y posición
Las líneas pueden ser curvas, horizontales,
verticales, diagonales, onduladas,
entrecortadas o punteadas
Formas Movimiento Teoría del color Regla de los tercios
La teoría de que los elementos mas
La idea de que los colores pueden afectar los interesantes de una composición como una
una lineas que define o implica un límite Conduce el ojo en determinada dirección
pensamientos y emociones de los humanos pagina web, se encuentran desplazados del
centro
las formas pueden ser geométricas, como un Los colores pueden ser placenteros o hacer a
Logrado por el uso de puntos, flechas o líneas
cuadrado o un circulo alguien sentirse incómodo.
las formas también pueden ser orgánicas

Textura Balance Espacio en blanco Proximidad
Un relleno usado en las formas para implicar La página es dispuesta en un patrón visual Son áreas de las página que no tienen texto o Qué tan cercanos están los textos de los
cómo se puede "sentir" el objeto planeado y coherente. gráficos. gráficos.
La textura puede sentirse por ejemplo dura u Los elementos visuales no están fuera de Incluye márgenes, relleno (padding) y La proximidad indica una conexión como poner
ondeada proporción o pesados en una de las áreas. espaciado de línea. un texto de caption a una imagen.
Unidad Alineación Repetición
El espaciado de texto y gráficos en relación los
Repetir un elemento para crear consistencia
Crea una sensación de integridad unos con los otros o con las márgenes de la
visual.
página.
Puede ser lograda en la misma página en un
sitio web o entre varias páginas en sun sitio a
Lograda empleando el mismo color o Alineaciones comunes: centro, izquierda,
través del uso de encabezados (headings),
diferentes tintas de un mismo color. derecha o justificado.
colores, tipo de fuentes y repitiendo el diseño
básico entre las diferentes páginas.
Fuentes de consulta
-"The Principles of beautifull web design", Jason Beaird,Sitepoint,2010,Canada

-“Digital Design:Foundations of Web Design”, Adobe Systems Incorporated , 2010,
USA
-http://www.slideshare.net/anacida/principios-de-composicin
-http://www.slideshare.net/alexei.hidalgo/principios-del-diseo
-http://www.imageandart.com/tutoriales/teoria/composicion_ubicacion/
index4.htm
-http://www.slideshare.net/amedsito/fundamentos-de-composicion-visual
-http://es.scribd.com/doc/15485427/Conceptos-Basicos-de-Diseno
-http://www.botanical-online.com/reglasclasicasfotografia.htm
-http://www.slideshare.net/Julianalsola/la-composicin-fotogrfica-1645383

Composicion

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Composicion

Cargado por

Copyright:

Formatos disponibles

Principios de la composición y principios de la

El aspect ratio o la proporción es el a relación entre el alto y el ancho de un objeto.

Por ejemplo una proporción de

Muchos historiadores denominan

Los artistas del renacimiento

Los diseñadores actualmente lo

Mas que confiar en una noción

Una línea bisecada por el

Dividir entonces la composición

El objetivo de la variedad es Composición creada con

Hay tres formas principales de equilibrio visual:

No supone una composición

■ simetría bilateral: existe cuando una composición está

■ simetría radial: se produce cuando los

La teoría del diseño describe la unidad como la

Un diseño unificado es uno que funcione como

Cada elemento sobre el plano ejerce fuerzas y

El valor de la unidad es superior a la simple suma

La unidad por continuidad

Significando así, que la unidad se

En esta imagen se utiliza una

Colocar objetos juntos dentro de un

La cercanía de los elementos hace que los

De la misma manera, la repetición de colores, formas, texturas, u objetos similares,

Es el delicado balance entre la

La armonía en la imagen puede

Un ejemplo de este concepto son las listas con viñetas.

Patrones repetidos y texturas también pueden ayudar a unificar un diseño.

La lectura se hace de manera lineal.

La jerarquía visual hace parte importante de la comunicación de un texto pues facilita el

El tamaño de un elemento propicia

En esta composición, el elemento que

En lugar de centrarse sobre los diversos elementos de un conjunto, el objetivo del

Una forma de lograr el énfasis está en convertir el elemento deseado en un punto

En la Web, la esquina superior izquierda de la página también tiende a la demanda de

1.2.El factor cultural de nuestro

Por esta razón los diseños deben mantener esta

En medios impresos se debe colocar la

La información que queremos que los usuarios

Las imágenes deben ser colocadas en el área de

El concepto es simple: cuanto mayor es la diferencia entre un elemento gráfico y sus

Este contraste se logra comparando dos o mas figuras

En este póster el contraste se genera en la

(también se genera en el juego de colores, pero

La marca del canal mtv

La M es un «tipo duro y moderno»

Esta diferencia en la proporción

Las manos enlazadas en la

En este caso se ha modificado el

las formas también pueden ser orgánicas

-"The Principles of beautifull web design", Jason Beaird,Sitepoint,2010,Canada

También podría gustarte