La composición de una imagen consiste en la organización de sus elementos en un espacio determinado. La relación entre los elementos y el espacio en que se colocan deberá ser de equilibrio.
Posibilidades de composición:(transmiten diferentes significados)


Tipo de composición:
Sugiere:
Composición horizontal:
predominan las líneas horizontales
equilibrio, calma, quietud...
Composición vertical:
se destacan las líneas verticales
acción, fuerza, tensión...
Composición diagonal:
predominan líneas diagonales
desequilibrio, originalidad...
Composición cíclica:
predominan las líneas curvas
complicación, dinamismo, movimiento...
composfotos


Normalización


A la hora de comenzar una composición, lo primero que debemos saber es el tamaño que va a tener ésta.
Si el soporte final de nuestro grafismo va a ser el papel, podremos diseñar para una gran variedad de tamaños, desde los más pequeños (tarjetas de visita, pequeños folletos) hasta los más grandes (posters, carteles para vayas publicitarias), aunque casi siempre diseñaremos en alguno de los formatos DIN.

Imagen 2.png
Medidas papel formato DIN
modelo tamaño relación
DIN A4 210*297 0.0625 m²(x/y=0.707)
DIN A3 420*297 0.125 m² (x/y=1.4142)
DIN A2 420*594 0.25 m² (x/y=0.707)
DIN A1 840*594 0.5 m² (x/y=1.4142)
DIN A0 840*1188 1.0 m² (x/y=0.707)
proporcion_0.gif
La relación visual entre los distintos formatos DIN es la siguiente:
T04A_02-formato_a0.jpg

Formatos de pantalla

Formato
Resolución
Fps
Distribución
PAL
720x576
25
Europa
NTSC
720x480
30
EEUU
HDTV 720p
1280x720
25
Europa
HDTV 720p
1280x720
30
EEUU
HDTV 1080i
1920x1080
25
Europa
HDTV 1080i
1920x1080
30
EEUU
800px-Common_Video_Resolutions.svg.png

Formatos de pantallas de móviles

resolucionMoviles.png
tamanos-pantalla-moviles.png

Formatos publicitarios en Internet

Categoria
Formato
Medidas
Formatos y Pesos Máximo
Texto
Texto


Gráficos estándar
Banner
486 x 60
GIF, JPEG, HTML, FLASH
12-18 Kb

Megabanner
728 x 90
GIF, JPEG, HTML, FLASH

12-18 Kb

Botón
120 x 60
100 x 100
90 x 90
80 x 80
GIF, JPEG, HTML, FLASH

8-12 Kb

Rascacielos
160 x600
120 x 600
100 x 600
GIF, JPEG, HTML, FLASH

14-18 Kb

Robapáginas
300 x 250
200 x 200
180 x 180
150 x 150
GIF, JPEG, HTML, FLASH

15-18 Kb
Gráficos
especiales
Intersitial
800 x 600
613 x 460
GIF, JPEG, FLASH

20-30 Kb

Desplegable
718 x315
500 x 250
468 x 240
FLASH
100 Kb

Layer
400 x 400
FLASH
30 Kb

Video Banner
440 x 330
300 x 250

tabela-de-tamanhos.gif

Proporciones

Ahora debemos definir qué partes del área de diseño deben estar ocupadas por elementos y qué partes van a quedar vacíos, sin contenido alguno. Si dejamos muchos espacios vacíos la composición puede resultar descordinada, ya que será difícil establecer relaciones globales entre los elementos o entre los grupos de ellos. Pero si el número de componentes es elevado, podemos obtener una obra sobrecargada, difícil de entender, en la que no se distingue con claridad qué es cada cosa y cuál es el mensaje que quiere transmitir.

Empezaremos a situar entonces los elementos en escena, como si fueran actores de nuestra particular obra de teatro, combinándolos de diferentes formas hasta que obtengamos un resultado satisfactorio. En este punto es muy importante tener en cuenta que cada elemento visual tiene una función determinada dentro de la composición.

La información visual que aporta un elemento puede cambiar según lo hagan las propiedades del mismo, como su tamaño, forma o color, pero sobre todo su proporción, el peso visual que tenga en el total de la composición.
Proporción por tamaño
Indudablemente, la forma más directa de marcar proporciones es mediante el tamaño relativo de los elementos. Los elementos más grandes, altos o anchos tienen una carga visual superior a los más pequeños, cortos o finos, creando zonas de atracción más intensas.
Proporción por color
También podemos delimitar proporciones en un grafismo mediante el color, con el que podemos definir distintas áreas tonales útiles para distribuir de forma adecuada toda la información gráfica. En este sentido, los colores puros y saturados tienen un mayor peso visual que los secundarios neutros, y estos mayor que los terciarios poco saturados.
Proporción por agrupaciones
Otra técnica para definir proporciones es el uso de agrupaciones de elementos y la correcta distribución de estas en el escenario, lo que nos va a permitir estructurar de una forma u otra la composición.
Este sistema suele dar buenos resultados, siempre que no abusemos de él creando un excesivo número de bloques significativos, ya que entonces se restarían importancia unos a otros y se perdería la proporcionalidad buscada.
Proporción por regularidad
Las formas regulares tienen menor peso que las irregulares.
Las formas alargadas y angulares alargan el campo de visión, creando zonas dominantes.
Sean cuales sean lo elementos usados en una composición deberemos siempre buscar unas proporciones adecuadas entre ellos, con objeto de que cada uno cumpla su papel comunicativo de forma adecuada.

Escala


Se entiende por escala la relación entre las proporciones de los elementos visuales de una composición.

Todos los elementos tienen la capacidad de modificarse y definirse unos a otros según las relaciones que se definan entre las propiedades análogas de ellos. Por lo tanto, el concepto de escala no se refiere sólo a la relación entre tamaños de dos o más elementos, sino también a la relación entre colores, formas, etc.

Un elemento es grande o pequeño según el tamaño de los elementos que le acompañan en el escenario. El color de una forma es brillante o apagado según el color del fondo sobre el que se encuentra. Es decir, las propiedades de un elemento visual no son absolutas, sino relativas, ya que dependen de las del resto de elementos que le acompañan en la composición.

La proporción relativa entre elementos debe ser equilibrada, lo que implica el uso de una escala correcta en la composición. Las escalas son utilizadas de esta forma en planos y mapas, para conseguir representar los objetos reales lo más correctamente posible, con las proporciones adecuadas entre ellos.
plano_dulplex_148m2_piso1.jpg
En una composición gráfica la escala usada es igualmente importante, tanto para distribuir el espacio de diseño de forma acertada como para dar equilibrio de proporciones a los elementos, usándose a veces diferentes métodos de distribución de eficacia probada, como la sección áurea.

Sección áurea

La sección áurea, inventada por Vitruvio, se utiliza para obtener escenarios de trabajo de proporciones equilibradas, y se basa en contemplar un espacio rectangular dividido en terceras partes, tanto horizontal como verticalmente, consiguiendo con ello seccionar los espacios en partes iguales.
escala_3.gif144675_joconde.gifT04A_01-formato_a0_estructura.jpg

A este sistema de proporciones se le han atribuido cualidades mágicas. Se ha utilizado reiteradamente en las artes y la arquitectura de todos los tiempos, pero aparece también en progresiones naturales como nervaduras de hojas, ramas de árboles, caracoles, etc. El número de oro o áureo es el irracional 1,61803…, cociente de (1 + raíz de 5) / 2.
Su representación gráfica es sencilla: se comienza dibujando un cuadrado (a b c d), que luego se divide en 2 rectángulos iguales (a e f d, e b c f). Se traza la diagonal de uno (e c). Haciendo centro en e, se abate la diagonal hasta cortar la prolongación de a b. Este punto (p) determina el lado largo del rectángulo áureo.
Se puede llegar a esta misma proporción mediante la serie Fibonacci en la que a partir del tercero, cada miembro es la suma de los dos anteriores: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etcétera.
Si se dividen dos miembros consecutivos (mayor/menor) de esta serie, el cociente se aproxima al número de oro:
2 / 1 = 2
3 / 2 = 1,5
5 / 3 = 1,667
13 / 8 = 1,625
21 / 13 = 1,615
34 / 21 = 1,619
55 / 35 = 1,618

NATURE BY NUMBERS from Cristóbal Vila on Vimeo.


La naturaleza de los números

Rectángulo ternario y otros

El ternario es una figura de 2 x 3. Al dividirse transversalmente por la mitad, el ternario genera dos rectángulos de proporción 3:4. Lo mismo sucede cuando se unen 2 rectángulos de proporción 2:3 por el lado largo. Las divisiones consecutivas dan por resultado: 2:3; 3:4; 2:3; 3:4, etc.
.T04A_06-doblediagonal_normalizado.jpg

T04A_05-pagina_armonica.jpg
En el caso del diseño web, el tamaño del área de trabajo es fijo, pero si que deberemos establecer una escala de trabajo adecuada para dimensionar los elementos de nuestra página.

Contraste


El contraste es el efecto que permite resaltar el peso visual de uno o más elementos o zonas de una composición mediante la oposición o diferencia apreciable entre ellas, permitiéndonos atraer la atención de espectador hacia ellos.
El contraste puede conseguirse a través de diferentes oposiciones entre elementos: por tonos, colores, contornos, escala.
Ver contraste de colores

Agrupaciones


El ser humano, tanto pos su carácter racional como por herencia cultural, tiende a organizar los elementos que percibe en torno a conjuntos significativos organizados. Esta inclinación a agrupar elementos relacionados en un factor que influye de forma notoria en la percepción que tenemos de nuestro entorno, de lo que vemos alrededor nuestro.
Las composiciones gráficas no escapan a esta tendencia, por lo que una correcta agrupación de sus elementos les otorga un carácter lógico, racional, que aumenta su valor comunicativo.
La agrupación de nuestros elementos gráficos y textuales puede basarse en diferentes criterios:
Proximidad: Tendemos a agrupar aquellos objetos que están próximos, cercanos entre sí.
Semejanza: Tendemos a agrupar los elementos iguales o parecidos.
Continuidad: Nuestra mente tiende a agrupar aquellos elementos que tienen una continuidad significativa.
Simetría: Tendemos a agrupar los elementos para que aparezcan ordenados formando figuras conocidas.
Ver leyes de la Gestalt

Reticulado


El sistema plano de referencia habitual en los seres humanos es el formado por un eje horizontal y otro vertical, es decir, por dos rectas que se cortan en un ángulo de 90º. En este sistema, el eje horizontal aporta equilibrio y estabilidad, mientras que el vertical facilita la elevación de la vista, marcando prioridades o niveles en la composición.

Puesto que las composiciones gráficas (y dentro de ellas, las páginas web) se representan en soportes planos, es fácil deducir que este sistema de referencia es también el más adecuado para la distribución de sus elementos. Si a esto sumamos el carácter eminentemente rectangular de la mayoría de los soportes, obtenemos por extensión el sistema de organización idóneo para nuestras composiciones: el reticulado.

Un reticulado o rejilla es un sistema de referencia formado por diferentes líneas horizontales y verticales que marcan la ubicación de elementos y zonas en una composición gráfica, líneas que no tienen porqué tener una representación real (no tienen porqué formar parte del grafismo), pero sí mental. Son las guías imaginarias sobre las que vamos a ir colocando los elementos, la espina dorsal de un composición gráfica.
Imagen 6.pngImagen 7.png

Mediante el reticulado, el diseñador va situando con armonía los bloques de contenido que formarán la composición: zonas principales y secundarias, títulos y subtítulos, bloques de texto, fotografías, ilustraciones, gráficos, sistemas de navegación, botones, iconos, etc, dando con ello un estilo propio visualmente lógico a la misma.

Una composición gráfica no es un sistema estándar, único, sino que los mismos elementos se pueden organizar según diferentes esquemas lógicos. Pero siempre deberán estar dispuestos según una retícula que les aporte equilibrio y estabilidad visual. Es tarea del diseñador buscar el conjunto ubicación-reticulado que mejor se adapte a su obra.

La ubicación de elementos en una composición según un reticulado determinado no precisa la introducción de los elementos finales de la misma. Es decir, se puede perfectamente diseñar la organización de un grafismo tan sólo con rectángulos de colores. Más aún, con rectángulos de un solo color. Lo que importa no es el aspecto visual final, sino la organización lógica y regular de los elementos.

En el caso concreto de una página web, el diseñador puede perfectamente distribuir en pantalla una serie de rectángulos que representen las zonas que va a tener la página. Si la distribución sigue un reticulado acorde y las zonas están ubicadas con lógica, la página que resulte de ello tiene un 50% de posibilidades de resultar correcta.
Más allá de las consideraciones estéticas, hay algunas funcionales que no podemos dejar de tener en cuenta al elegir el tamaño de la mancha de texto porque influyen en la lectura.

wim_crouwel_poster.jpg

Esta estructura lógica creada con el reticulado debe mantenerse luego en todas las páginas que forman el sitio web, proporcionando con ello consistencia y homogeneidad al mismo.
Si definimos una separación entre el cabecero de un formulario y el inicio de los elementos del mismo de 15 píxeles, todos los formularios, fichas, textos, etc, que tengan un cabecero, deben mantener el mismo espacio separador. Si definimos unos márgenes vacíos entre la página que diseñamos y los bordes de la ventana del navegador de 30 píxeles, todas las páginas del sitio deben mantener constantes esos márgenes.

Una ventaja adicional de diseñar un reticulado correcto será la comodidad a la hora de maquetar después la página con tablas, ya que estructura natural de éstas es reticular.

Alineaciones


Una vez definido el reticulado que vamos a usar en nuestra composición, deberemos situar en la misma los elementos gráficos y textuales.
En este punto aparece el concepto de alineación, como la colocación de elementos gráficos y textuales según una línea dada, que generalmente será horizontal o vertical. Generalmente habrá varias líneas guías de alineación en una composición.
Alinear los elementos es una operación imprescindible para conseguir una composición ordenada y lógica, pues con ello se crean unidades visuales definidas y relaciones entre elementos.
Imagen 5.png
Si la alineación es importante a la hora de situar elementos gráficos, lo es aún más si se trata de contenidos textuales. Efectivamente, los textos perfectamente alineados son más fáciles de leer, no cansan la vista y producen un efecto de equilibrio que invita a la lectura. Por el contrario, un texto sin alineación resulta confuso, difícil de leer, desmotivando al espectador.

Todo lo hablado se acentúa si el soporte es una página web, ya que la forma del monitor y de la ventana del navegador impulsa el uso de contornos rectangulares, que únicamente se consiguen con alineaciones perfectas.
Además, muchas veces debemos diseñar las páginas con un importante número de elementos, por lo que si la disposición de los mismos no es perfectamente regular resulta muy difícil crear una composición aceptable.
La alineaciones horizontales son imprescindibles para conseguir un diseño en niveles estables, ya que las líneas horizontales aportan equilibrio. Como podemos tener bloques lógicos de diferente altura, estas alineaciones se definirán desde los bordes superiores de los bloques.
En cuanto a las verticales, la alineación más común es la izquierda, ya que es la normal en los libros y demás soportes textuales, estando nuestra vista educada para tratar con ella.
Las alineaciones centradas son poco comunes, salvo en el caso de tablas de datos con columnas que admitan bien este tipo de alineación, sobre todo si todos los valores de la columna tienen el mismo ancho. Si no es así, es preferible optar por la alineación izquierda.

Jerarquía visual


En toda composición gráfica se debe crear una jerarquía visual adecuada, con objeto de que los elementos más importantes de la misma se muestren debidamente acentuados.

Mediante un adecuado diseño se puede establecer un camino visual que conduzca el ojo del espectador y le vaya mostrando la información contenida en la composición de forma organizada, lógica y fiable, que dirija su percepción por la ruta más idónea.

jerarquia_10.gif
La persona que contempla una obra gráfica aprecia en primer lugar un conjunto completo de formas y colores, con los elementos situados en primer plano contrastando con el fondo de la composición. Sólo tras esta primera observación global, y si su curiosidad ha sido despertada, el espectador comenzará a analizar las partes individuales del todo, comenzando por lo elementos gráficos puros, y continuando luego con los elementos textuales, más difíciles de interpretar, ya que hay que leerlos palabra a palabra.

jerarquia_8.gif

En los países occidentales leemos los documentos de izquierda a derecha y desde la parte superior a la inferior, forma de proceder se ha extendido a todas aquellas actividades en las que necesitamos visualizar algo (cuando observamos a una persona, generalmente empezamos por la parte izquierda de su cabeza).

Esto se puede aprovechar para organizar el contenido de una composición lógicamente, situando en ella los elementos más importantes en la zona superior izquierda de la misma, las siguientes en importancia en el lateral izquierdo, las siguientes en el cuerpo central y las menos relevantes en la parte inferior.
dps-6.jpg



Esta forma de proceder es común no sólo en folletos, documentos o carteles publicitarios creados con un diseño clásico, sino también en las páginas web, que siguen esta estructura jerárquica en el 95% de los sitios, que, además, son los que mejor aceptación tienen por el público.

En cuanto a los elementos textuales, a los que también son aplicables los métodos de color y contraste, podemos establecer una jerarquía en ellos mediante los tamaños relativos de los mismos. Los títulos de página, los cabeceros o los titulares de una noticia o apartado pueden ser destacados aumentando su tamaño según su importancia en la composición o página web. Este método es siempre aconsejable, ya que organiza de forma lógica el contenido textual y rompe la monotonía intrínseca de los textos.
usa-today-redesign.jpg


Los tamaños excesivamente grandes en los textos son también un factor a tener en cuenta. Una cabecera de página o de sección deben destacar lo suficiente sobre el resto del contenido textual, pero nunca deben ser desproporcionadas ni atraer en exceso la atención del usuario. En cuanto a la abundancia de ellos, hay que tener siempre en cuenta que un par de cabeceras de mayor tamaño establecen unos niveles de importancia convenientes, pero multitud de textos de gran tamaño añaden confusión a una composición, ya que el usuario pierde las referencias sobre qué es importante en la misma.

En cuanto a las alineaciones a la derecha, son poco frecuentes, ya que crean tensiones visuales en la mayoría de los casos. Se pueden usar en aquellos bloques cuyo contenido deba adaptarse a un reticulado que defina una línea vertical a la derecha del mismo, como ocurre en muchos menús de navegación situados a la izquierda de la página.

Existe otro tipo de alineación para textos, el justificado, en el que todas las líneas de texto tienen el mismo ancho, por lo que quedan alineadas tanto a la derecha como a la izquierda, lo que se consigue aumentando o disminuyendo el espaciado normal de las letras. Este tipo de alineación es muy usado en los libros y periódicos, pero en las páginas web hay que aplicarlo con precaución, destinándolo tan solo a bloques textuales de poco ancho (textos distribuidos en varias columnas, por ejemplo).

Por último, decir que si bien las alineaciones son imprescindibles, pueden originar monotonía visual si se siguen a rajatabla, al producir páginas demasiado cuadriculadas y artificiosas. Por ello, es bueno introducir algunos elementos que, sin romper el reticulado y las alineaciones básicas, introduzcan un poco de variedad visual, de frescura en el diseño. Buscar el equilibrio entre alineaciones y elementos que las rompan es una de las tareas principales del diseñador de páginas web.