COMPOSICIÓN

A L F O N S O L L E R E N A P O LO
a l l e re n a @ p o l i g ra n . e d u . c o
¿ Qué es una Composición?
Composición

La composición se define como una distribución o disposición de todos los elementos que dentro
de un diseño o composición, de una forma equilibrada.
Composición
• Al componer lo primero que se debe elegir son todos los elementos que aparecerán en él
diseño.
• Luego debemos distribuirlos para colocarlos con el espacio disponible.
Los elementos pueden ser tanto imágenes, como espacios en blanco, etc.
• Es muy importante tener en cuenta la forma en que se sitúan los elementos en la
composición, para que tengan un equilibrio formal y un peso adecuado.
Diagramar - Maquetar
Diagramar es distribuir, organizar los elementos del mensaje (texto e imagen) en el espacio
bidimensional (el papel - Pantalla) mediante criterios de jerarquización (importancia)
buscando funcionalidad del mensaje (fácil lectura) bajo una apariencia estética agradable
(aplicación adecuada de tipografías y colores)
Diagramar - Maquetar
Diagramar - Jerarquizar
Este criterio es fundamental para la organización de los elementos visuales. Se trata de asignar
valores a cada uno de ellos y hacer que en varios niveles se vayan organizando de acuerdo con la
necesidad de enfatizar jerárquicamente los distintos elementos que componen el mensaje.

Siempre habrá un elemento líder al que hay que destacar en sus diferentes atributos: tamaño,
color, posición, orientación, opacidad, y detrás de él en un orden jerárquico los demás.
Diagramar - Jerarquizar
Diagramar - Jerarquizar
Diagramar - Jerarquizar
Diagramar - Jerarquizar
Diagramar - Jerarquizar
La destreza compositiva se basa en el dominio del criterio de jerarquización, todos los
elementos que conforman el producto, como consecuencia, el todo tendrá también su propia
jerarquía.

Es decir, expresar en diversos grados de importancia los elementos y principalmente aquel que
interesa destacar y se convierte en el eje de la composición..
Diagramar – Tipos de Contenido

VARIABLES

TEXTO + IMAGEN + GRAFICOS + COLOR +

TIPOGRAFIA

DECISIONES EN DISEÑO
Piezas – Artefactos - Productos

IMPRESOS: Revistas, periódicos, catálogos, volantes, invitaciones etc

DIGITALES: Páginas, apps, programas, interfaces, etc

Piezas – Artefactos - Productos
Piezas – Artefactos - Productos
Piezas – Artefactos - Productos
Productos
¿PARA QUE SIRVE ?

Difusión de productos, ideas, servicios,

brindar información útil para la sociedad.
(usuario)
Definiciones
Retícula

Divisiones internas de la pagina o pantalla.

Coherencia y consistencia visual, número de columnas,
espacios entre ellas, zona de impresión.
Definiciones
Formato

Proporciones de la pagina o pantalla.

Tamaños de papel, tamaño de la pantalla,
área de trabajo.
Definiciones

Diagramación o Maquetación

Distribución proporcional y
jerárquica de los elementos.
Definiciones
Tipos de retícula:

Una Columna: Ensayos, informes, libros.

Dos Columnas: Para textos extenso, puede tener el mismo ancho o distinto.
Múltiples Columnas: Mayor flexibilidad, pueden ser de diversas anchuras, páginas web o
periódicos.
Tipos de retícula
Definiciones
Tipos de retícula:

Modulares: Para organizar información compleja, calendarios, tablas de datos, etc.

Jerárquica: Descomponer la pagina en zonas.
Tipos de retícula
Márgenes
• Espacio entre la retícula y el formato.
• Contribuyen a hacer más concreto el diseño.
• Espacio en blanco vital para que el diseño respire.
• También llamada zona de amortiguación entre formato y contenido.
• Encierran el contenido.
Márgenes - Tipos
Interior
Exterior
Superior
Inferior
Espacio en Blanco

Espacio que se encuentra alrededor

o entre todos los elementos del diseño.
(textos, imágenes, entre columnas, márgenes etc.)
Espacio en Blanco

Es el pulmón de una composición,

no se incluye por motivos estéticos si no físicos
Dereck Birdsall
Espacio en Blanco
Espacio en Blanco PASIVO - ACTIVO
Espacio en Blanco RECESIVO- DOMINANTE
Estado de Equilibrio

Simetría: Diseño vertical y equilibrado, muy formal por su contexto y uso.

Asimetría: Menos rígido contenido más variado.
Estática o Ruido: Deliberadamente caótico
Estado de Equilibrio
Estado de Equilibrio
Estado de Equilibrio
Ejercicio
En un documento digital escribir la siguiente información pensando en el desarrollo de una
pagina web o una aplicación móvil que se pueda utilizar como ejercicio final para el módulo:

Nombre.
Objetivos del producto.
Usuario(s) al que va dirigido.
Requerimientos técnicos.
Boceto de interfaz inicial (boceto)