Principios del Diseño Gráfico aplicados al Diseño Web

Con la revolución industrial llegó la necesidad de la publicidad, y con ella el diseño gráfico. El objetivo del diseño gráfico era, y sigue siendo, la comunicación. En el caso de la revolución industrial se creó con fines comerciales y el mensaje debía ser convencer al público de las ventajas de un producto.

El aumento de marcas y productos hizo que el diseño gráfico fuera teniendo en cuenta ciertos principios psicológicos con el fin de conseguir mensajes más efectivos. Con el paso del tiempo se han establecido unos principios que al aplicarlos hacen que un diseño sea considerado como funcional.

A medida que han pasado los años el número de soportes en los que aplicar diseño gráfico ha ido creciendo hasta llegar al diseño web.

WordPress nos ofrece un enorme catálogo de temas para instalar y que nuestra web tenga un aspecto asombroso. Pero tanto si eres una agencia, como si eres un diseñador freelance, sabes que hay ciertos proyectos en los que no puedes hacer uso de plantillas predefinidas y tendrás que hacer uso de tus habilidades como diseñador. Un buen diseñador no se define por su mayor o menor habilidad en el manejo de programas informáticos, más importante que eso es el conocimiento y la aplicación correcta de los principios del diseño gráfico.

¿Cuáles son los principios del diseño gráfico y cómo aplicarlos al diseño web?

No debemos perder de vista la finalidad del diseño, la comunicación. Para lograr una transmisión correcta del mensaje debemos aplicar ciertas reglas que hacen que el conjunto de elementos de nuestro diseño web funcionen como un todo de la mejor manera posible.

1. Balance

El balance hace referencia al equilibrio o la compensación entre los elementos. Dentro del tipo de composición podemos distinguir entre dos:

Composición Simétrica
Los elementos se disponen de manera simétrica respecto a un eje imaginario. Este tipo de composición se emplea en diseños más conservadores.

Un claro ejemplo de composición simétrica

Composición Asimétrica
Los elementos mantienen un equilibrio visual, permitiendo a través de contrastes y diferentes tamaños de elementos transmitir la información, a pesar de que no se disponen simétricamente respecto a ningún eje. Este tipo de composición se utiliza en diseños más transgresores.

Ejemplo de composición asimétrica

2. Punto de Enfoque

El punto de enfoque es el área que contiene la información mas relevante y por lo tanto debe de ser capaz de captar nuestra atención a primera vista.
Para crear un punto de enfoque debemos de crear contraste entre los diferentes elementos de nuestra composición. El contraste no se refiere únicamente al color, también al uso de proporciones y espacios entre los elementos.

En este ejemplo el punto de enfoque se consigue creando un contraste de color y de tamaño en el bloque de texto. Además de utilizar recursos como subrayados o el desenfoque en la imagen de fondo.

3. Semejanza y Repetición

Nuestro cerebro tiene la tendencia natural a realizar agrupaciones de los objetos que comparten características como la forma o el color. La repetición de elementos con una o unas mismas características dan homogeneidad a nuestro diseño y hacen que sea consistente. Por lo tanto este principio es muy útil para vincular elementos como títulos o cuadros de texto.

El uso de la misma tipografía en los títulos, el mismo tamaño y el recurso de un pequeño subrayado verde nos ayuda a hacer agrupaciones y entender que estos elementos son titulares y marcan el principio de secciones.

4. Proximidad

Cuando disponemos varios elementos tendemos a agrupar los que se encuentran más próximos unos de otros. Este principio es muy útil cuando queremos jerarquizar la información y distinguir unas zonas de otras con el fin marcar un orden en la estructura de nuestro diseño. Es común que este principio vaya ligado al de Semejanza y Repetición para definir aún más las diferentes zonas y agrupaciones en nuestro diseño.

Un ejemplo de como vamos a agrupar en tres columnas los diferentes iconos y a su vez lo agruparemos con los elementos mas cercanos dando forma a un bloque.

Conclusión
Como habrás visto, un diseñador gráfico ademas de manejar programas como Illustrator o Photoshop debe saber manejar varios conceptos para poder llevar a cabo un diseño funcional.
Si quieres saber más acerca del diseño gráfico y otros principios y conceptos te recomiendo que te pases por estos enlaces:
La teoría Gestalt aplicada al mundo del diseño
La Proporción Áurea en el diseño de logotipos
Masterclass Sección áurea y regla de los tercios