Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Una introducción a la Composición

by
Length:ShortLanguages:
This post is part of a series called Design School for Developers.
Using Alignment to Improve Your Designs
Adding Space to Your Designs

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

La composición es acerca de colocar todas tus ideas y todos tus elementos de diseño juntos por completo, componiendo tu diseño. Vamos a combinar todas las lecciones anteriores que hemos tratado y debido a que la composición hace uno de esos aspectos muy dificiles para diseñar cualquier cosa.

Crear una buena composición aumentará las experiencia de los usuarios cuando naveguen por todo tu sitio y ayudará a moldear un mejor diseño por completo. Estamos intentando poner en practica la alineación, la consistencia y la fuerza de la unidad. La composición, también ayuda a incorporar un interés visual a nuestro diseño, por lo tanto, podemos ayudar a nuestros usuarios a entender más acerca de su viaje en un sitio web, que es donde debería dirigirse.

La composición es probablemente la parte más importante de su proceso de diseño - punto final.

Como aprendimos al principio de estas series, diseñar es “decidir sobre el aspecto y la función (un edificio, un diario u otro objeto), típicamente haciendo un esquema detallado de él” - y composición significa “escribir o crear”. Por lo tanto, cuando juntamos estas dos cosas, en nuestra fase de composición estamos componiendo (creando) la apariencia y la función de nuestro diseño - esencialmente, estamos juntando todos las cosas.


Composiciones y Formatos Comunes

En el tradicional diseño de impresión, hay muchas composiciones de impresión y formatos que han demostrado que funcionan bien a lo largo del tiempo. Muchos de estos, ahora, están encontrando su forma dentro de la web - y con buena razón. Aunque puede resultar difícil traducir estos formatos en términos absolutos para el diseño en la web, al menos puede darnos una pequeña idea y enfoque de los formatos que podríamos querer probar por nuestra cuenta en la creación.

Hay muchos tipos de composiciones o formatos muy populares por ahí, pero voy a hablarte acerca de algunos aquí. Hay tantos recursos en línea para buscar en estos formatos, y mientras estos formatos tradicionales son importantes también quiero ir a otros aspectos más detallados de la composición.

Visual Único

En primer lugar esta el formato visual único.

A great example of the Single Visual layout, as seen on the Creative People website.
Un magnífico ejemplo del formato Visual Único, como verá en el sitio web de Creative People.

Esto es bastante sencillo en realidad, es donde hay un mayor aspecto de un diseño que actúa como un único enfoque visual. Por ejemplo, podría crear un diseño con una fotografía grande en un fondo, con mucho espacio en blanco y cubierto de tipografía.

Diseño Z

El diseño-Z es bastante evidente y relaciona mucho a la composición que usted elige para sus elementos de diseño.

The Z-Layout as seen in action on BBC News.
El diseño-Z como verá en acción en BBC News.

Sencillo pero, el diseño-Z sigue el patrón de lectura natural que nuestros ojos podrían, normalmente, tomar cuando estamos escaneamos en un sitio web. Si todavía no puede imaginarlo, esto es algo que ha quedado demostrado de que existe el patrón de la letra “Z”, que va desde la parte superior izquierda hasta llegar al extremo derecho, luego baja diagonalmente hacia la izquierda y luego cruza nuevamente hacia la derecha.

Esto puede ser bastante útil cuando estás pensando en donde colocar tus elementos para que sean importantes para tus usuarios. Sin embargo, no puede ayudarte a darle importancia a los elementos.

Regla de Tres

Un principio de diseño utilizado en la fotografía y en filmaciones (y mucho más, por supuesto), la regla de tres es un buen formato de composición de diseño para la web.

The rule of thirds, seen in action on the Shopify website.
La regla de tres, se ve en acción en el sitio web Shopify.

La regla de tres es una línea guía que plantea que una imagen debería dividirse en nueve partes iguales (tres transversalmente y tres abajo) con los elementos de la imagen, o de diseño, alineados a los bordes de cada una de estas partes. Es particularmente útil en el diseño web, así como puede ayudarnos a crear mejores proporciones y composiciones en nuestros diseños.

La regla de tres es una magnífica herramienta de composición y diseño. Aunque no es algo que siempre debería seguirse estrictamente, puede ser de gran ayuda en diseñar con más equilibrio. Puede ser usada junto a otros recursos visuales o formatos de composición tal como solo visual, o incluso, cuando esta creando sus sistema de guías.

Radio Dorado (Sección

Incluye muchas matemáticas, el Radio Dorado (o Sección Dorada, si prefieres llamarlo de esa manera) es uno de los más reconocible (en nombre, al menos) formatos de composición o herramienta en cualquier forma de diseño.

The golden ratio, seen in action on Twitter. Screenshot taken by Ryan Schroeder.
El radio de oro, se ve en acción en Twitter. Captura de pantalla tomada por Ryan Schroeder

Creo que fue creado por los Antiguos Griegos (fueron inteligentes) el Radio Dorado describe la relación entre dos proporciones. El Golden Radio es 1.618(033398875…) y parece ser que muchos elementos en la naturaleza a menudo corresponden a ese radio. Es, por lo tanto, siempre algo que es más reconfortante y placentero para nuestros ojos humanos.

Debido a que resulta en un patrón tan familiar para nosotros, tiene sentido que lo probemos y usemos en nuestros diseños, para crear un equilibrio armonioso que haga sentir bien y tenga sentido.

Una forma fácil de cómo podemos implementar esto en nuestros diseños es tomando el numero del radio de oro (1.618) y usa un poquito de matemática. En nuestro diseño podríamos tener un área donde nosotros, por ejemplo, quisieramos poner algo de contenido y una pequeña barra lateral. Solo divida estos elementos en nuestros diseños sin pensar acerca de que tan fácil pueda ser - particularmente, si usted tiene un simple sistema de guías colocado, sin embargo, cuando pensemos acerca de estos términos de radio dorado, podríamos conseguir una mejor apariencia al final.

Así que, tenemos esta área que queremos dividir en dos, usando nuestro número de radio dorado. Para hacer eso, mida el ancho del área disponible (probemos con 950px por el bien del artículo) y dividalo por 1.618

Si el ancho de nuestra área disponible es 950px, esto significa que nuestro calculo (para nuestro contenido principal) debería ser: 950 / 1.618 = 587.144622991 (el cual podemos redondear a 587px).

Después, simplemente restamos aquel de la medida de ancho que teniamos disponible para conseguir nuestro segundo ancho, es decir, que para la barra lateral tenemos: 950 - 587 = 363px.

Como nuestro contenido principal es más relevante y queremos que sea el centro en esta parte del diseño, entonces podemos usar la parte más grande de las dos figuras para el ancho del contenido. Luego, podemos usar la figura más pequeña para nuestra barra lateral. Y ahí lo tenemos, ¡nuestro perfecto diseño de radio dorado listo!

Nota: Calcular esta relación es parte de crear una escala modular para su diseño.


Espacio

La composición, también es acerca del espacio. Esto no significa que tienes que dejar enormes áreas vacías en tus diseños, sino que es acerca de ser más inteligente cuando usamos el espacio que tienes disponibles para diseñar. Aprovechar el espacio en blanco es acerca de proveer un enfoque para nuestro contenido, cuando dejas áreas sin ocupar.

Dicho eso, use el margen interior y el espacio en blanco para tu beneficio, nadie encontrará que un sitio alborotado y lleno de elementos sea fácil de navegar, y que tiene un poco de jerarquía y en donde los elementos están reducidos y no tienen espacio para respirar. En vez de eso, introduzca espacio en lugares que usted puede permitirlo para una mejor experiencia para sus diseñadores.

Próximo…

Hemos presentado los conceptos de composición, en la siguiente sección examinaremos más acerca del espacio en nuestros diseños. ¡Nos vemos ahí!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.