Guía de composición para el diseño web. Parte 1


Para los entendidos en la materia el título de esta entrada puede parecer una locura, pues hasta la fecha no se han establecido normas específicas de composición para el diseño web. No obstante, sí podemos aplicar algunas de las leyes del diseño gráfico, la fotografía e incluso la pintura, pues diseñar para web significa también componer un producto visual.

Por eso te he escrito una serie de artículos que te darán las pautas principales a seguir para diseñar interfaces atractivas siguiendo la teoría que ya existe, pues, a pesar de las peculiaridades del diseño web, en este mundo todo es posible si se le pone un poco de creatividad.

En esta primera entrega, y para que vayas adentrándote en el tema, te traigo algunos de los principales tipos de composición que utiliza el diseño web, o sea, las formas más utilizadas de distribuir los elementos de la página, los cuales deben estar ordenados de modo que expresen la idea o el mensaje que desea proyectar el diseñador para que el producto final sea capaz de establecer una comunicación eficaz con el usuario.

Estas composiciones son: la simétrica, la asimétrica y la que se apoya en líneas. Ahora te las muestro con detenimiento:

Composición simétrica

Como su nombre lo indica, se basa en equilibrar elementos semejantes de modo que cada lado de la página posea el mismo peso visual. Es quizás la más fácil de lograr, pues los seres humanos buscamos la simetría aún sin darnos cuenta. Resulta agradable porque es más sencilla y no nos confunde, por lo cual es muy utilizada en el diseño web minimalista.

Mira como lo ha hecho Poco People, que logró la simetría a partir de una imagen:

pocopeople

Este tipo de composición es sencilla, fuerte y formal, aunque también puede parecer fría o monótona, por lo cual debes seleccionar muy bien los colores, formas, imágenes, tipografías, etc., para que le aporten un poco de energía al diseño y no resulte aburrido a los ojos del usuario.

Composición asimétrica

Es la más utilizada en la actualidad por la fuerza que le aporta al diseño, pues es ágil y dinámica. Sigue un orden más casual y desenfadado, aunque su elaboración es un poco más difícil de lo que parece.

Un error común de los que comienzan y se enfrentan a la composición asimétrica es que tienden a sobrecargar la página con muchos elementos colocados de forma aleatoria, y esto sólo logra aturdir al usuario. Por eso, selecciona muy bien los elementos que deseas incluir en tu diseño y el lugar en el que los colocarás, y antes de comenzar haz un borrador para ver cómo quedan, asegurándote de que has logrado que pueda “leerse” fácilmente, como es el caso de Raconteur:

raconteur

Ten en cuenta también que existen varios tipos de composiciones asimétricas entre las que puedes escoger, y las más utilizadas son las realizadas en forma de Z, S, L y C, pues son las formas que más a gusto recorre nuestra mirada.

Composición con líneas

Las líneas pueden estar presentes de forma explícita en el diseño o existir de manera implícita a partir de las formas, los contornos o los tonos presentes en éste. Constituyen uno de los elementos compositivos más importantes, pues nuestros ojos tienden a seguirlas, y eso puede ser utilizado por el diseñador para dirigir la mirada del usuario al tema o lugar que más le interese, como hizo Kamila Gebalska en su web:

gebalska

Además, las líneas también envían mensajes a nuestro subconsciente, aportándole nuevas sensaciones al usuario. Por ejemplo, las verticales alargan las cosas y dan idea de elegancia y espiritualidad, mientras que las horizontales dan sensación de reposo y estabilidad. Las líneas diagonales inspiran dinamismo, las quebradas aportan energía, y las curvas evocan movimiento, sensualidad y suavidad.

Y algo más…

Sí, una cosa más: si estás comenzando a diseñar y aún tienes dudas sobre cómo organizar tus elementos, también puedes apoyarte en la Regla de los Tercios, una norma clásica de composición que se basa en dividir el espacio en tres bandas iguales, tanto horizontal como verticalmente:

regla-tercios

Las líneas imaginarias que utilizamos para dividir ese espacio determinan la posición principal de los elementos, y en sus cuatro puntos de intersección se sitúan los elementos de mayor interés. Pero no es necesario que los cubras todos si no lo deseas, sólo debes colocar en cualquiera de ellos tu elemento principal, como ha hecho Paula Borowska:

borowska

Conclusiones

El punto clave de una buena composición es que logre expresar con claridad el mensaje que descansa en ella, por lo que el trabajo del diseñador debe estar enfocado a buscar la máxima eficiencia comunicativa de aquello que diseña.

Hoy te he mostrado los principales tipos de composición que se utilizan en el diseño web de estos días, y en la próxima entrada te comentaré sobre las relaciones compositivas y los elementos del diseño que siempre debes tener en cuenta. Hasta entonces, déjame saber si te ha interesado el tema y mantente creativo/a.