Miguel Peribáñez | Diseñador y Consultor UX

Miguel Peribáñez - Diseñador y Consultor UX

¿TIENE EQUILIBRIO VISUAL TU DISEÑO WEB?

El equilibrio es la armonía. Así que, cuando algo se ve bien con un sentido de coherencia y similitud, muy probablemente se observa una composición perfectamente equilibrada. Puede ser un objeto de la naturaleza, una pintura, un edificio, una fotografía o incluso un sitio web.

Si quieres que los elementos de tu página web o la totalidad del sitio web tenga un aspecto pulido e increíblemente elegante, debes hacer un diseño simétrico. Este efecto se consigue fácilmente mediante la colocación de objetos similares a ambos lados del eje central. Esto puede ilustrarse a través de imágenes del mismo tamaño, los párrafos de texto basados rejilla, o una foto con el texto a juego. Aquí hay un par de ejemplos de diseños de sitios web que siguen este formato:

Diseño Web - Balance Visual

Diseño Web - Balance Visual

Puedes encontrar muchos diseños simétricos en la web, y de hecho, la simetría se considera que es el tipo de diseño más agradable a la vista. Por lo tanto, la gente tiende a echar un vistazo más de cerca a este tipo de diseños sin sentirse incómodo. Es una manera típica de pensar por la mayoría de nosotros.

Sin embargo, a veces no es tan sencillo crear un diseño simétrico partiendo de cero. Teniendo en cuenta esto, es bueno para empezar, utilizar una combinación de colores planos y una buena cantidad de espacio en blanco hasta que adquieras más experiencia la creación de este tipo de diseños.

Debido a que este tipo de diseño es más agradable a la vista, se utiliza más comúnmente en los diseños web actualmente. Pero los internautas están saturados de webs limpias perfectamente simétricas que los diseñadores profesionales trabajamos duro para conseguir. Así que, en raras ocasiones, los usuarios de Internet sofisticados anhelan algo diferente a los diseños simétricos, un diseño un poco más difícil para el ojo como lo son los diseños asimétricos.

BALANCE ASIMÉTRICO

La asimetría da un aspecto más informal a cualquier diseño. Es algo un poco más natural para los usuarios, a pesar de que se utiliza comúnmente en el diseño gráfico y web. A menudo, verás páginas web con grandes fotos del fondo que ofrecen un objeto que está fuera del centro del eje de la composición.

Diseño Web - Balance Visual

Otra gran manera de utilizar equilibrio asimétrico en tus diseños es con objetos desproporcionados en la primera vista de la web sin hacer scroll. Pueden ser líneas curvas, grupos de objetos de diferente tamaño, o combinaciones de texto con fotos, como utilizan estas páginas:

Diseño Web - Balance Visual

Diseño Web - Balance Visual

Muchos usuarios encuentran original y llamativo cuando el objeto principal del diseño se desplaza hacia la izquierda o hacia la derecha (o superior o inferior). El equilibrio asimétrico requiere parámetros adicionales como el color y la forma, así que si decides hacer un diseño asimétrico, debes estar preparado para testar antes del lanzamiento para evitar que los visitantes del sitio se sientan confusos.

Los diseños asimétricos, que parecen muy fuera de balance visualmente, sin duda tienen su momento y lugar. Por eso, este estilo debe utilizarse con moderación, sólo en determinadas situaciones en las que te asegurare la atracción del usuario al sitio. Recuerda que un diseño asimétrico es una herramienta extremadamente poderosa que puede ser utilizada como motivación para que los usuarios se queden en la página y exploren tu sitio web.

Independientemente del tipo de aspecto asimétrico que elijas, es importante tener todo el diseño equilibrado.

BALANCE HORIZONTAL

Este tipo de equilibrio es probablemente el más típico de los diseños en páginas web. En la mayoría de culturas leen de izquierda a derecha, y es más natural observar elementos similares o iguales a los lados izquierdo y derecho de las páginas web.

Una estructura de la página horizontalmente equilibrada es muy recomendable para proyectos con un público conservador. Si tu cliente no se centra en la creatividad, entonces tu diseño debe ser simple y sobrio. He aquí un ejemplo de un sitio web con un equilibrio horizontal:

Diseño Web - Balance Visual

BALANCE VERTICAL

El equilibrio vertical se produce cuando los elementos superiores e inferiores del diseño son muy similares. Una imagen pesada puede equilibrarse con espacios en blanco, un menú ligero, o elementos de color de líneas limpias. Esta solución es muy simple y es ideal para proyectos con un slider de imágenes colocado en algún lugar de la cabecera. También funciona bien para diseños basados en tipografía como los ejemplos de abajo:

Diseño Web - Balance Visual

Diseño Web - Balance Visual

ASÍ QUE… ¿CUÁL ES LA CLAVE PARA QUE UN DISEÑO WEB TENGA ÉXITO?

Tener una alta satisfacción del usuario es la clave para el éxito del diseño. Así que en la siguiente sección, vamos a echar un vistazo a algunos elementos de diseño que influyen en la sensación de equilibrio y la satisfacción del usuario en una página web.

COLORES

Ten cuidado al elegir una paleta de colores para tu web. Aplica pocos tonos (2-3 serán suficientes) para mantener el diseño visualmente atractivo. Al mezclar demasiados colores, los usuarios pueden interpretarlo como desordenado y rechazar de forma natural la página.

Echa un vistazo a el diseño de abajo, es obvio que hay muchos más colores de los que debería haber. Los colores son agresivos, y con independencia de la estructura y la disposición, el diseño no se puede salvar.

Diseño Web - Balance Visual

La tendencia del diseño plano comenzó hace aproximadamente un año, y como resultado muchos sitios web se rediseñaron rápidamente. Ahora, hay una sobredosis de páginas web ilegibles, con texto y fondos mezclando elementos planos y con volumen. Los esquemas de color desequilibrados destruyen potencialmente los buenos diseños. Así que, si quieres evitar este error, asegúrate de que los colores que vas a utilizar se complementan entre sí. Hay muchas herramientas de color online que se pueden utilizar de forma gratuita y pueden servirte de mucha ayuda: Paletton, Copaso, Adobe Kuler, ColorCode y CheckMyColors por nombrar unos pocos.

ESPACIO EN BLANCO

El espacio en blanco es un arma muy conveniente y atractiva para romper el espacio en la página y hacer el contenido más atractivo visualmente. Esta tendencia minimalista ha existido muchos años, así que probablemente probablemente se quede unos pocos más.

Al utilizar el espacio en blanco, los diseñadores pueden equilibrar rápidamente secciones de contenido lleno de elementos más ligeros. Permite dar un aspecto más limpio y simple, manteniendo la incorporación de información adicional en forma de texto, gráficos o vídeos.

FOTOS E IMÁGENES

Cuando un sitio web cuenta con demasiadas imágenes, los usuarios se encuentran con un tiempo de carga lento. Cuando los usuarios entran en el sitio con sus dispositivos móviles, el tráfico de entrada y salida son limitados. Se hace difícil cargar enormes fotos y videos y la gente tiende a salir de la web con frustración.

Esto no quiere decir que no se puedan utilizar imágenes gráficas y fotos. Sin embargo, si utilizas una galería de imágenes de rejilla o un slider de fotos con un montón de fotos, asegúrate de optimizar las otras partes de la página web para maximizar su capacidad de funcionamiento y minimizar el tiempo de carga. Esto asegurará que tus imágenes se vean nítidas, claras, y carguen rápidamente.

TAMAÑO DE LOS OBJETOS

El tamaño de los elementos en tu diseño te ayudará a determinar qué tipo de diseño, de forma simétrica o asimétrica equilibrada, funcionará mejor. Igualmente si los objetos grandes o pequeños que se encuentran a primera vista conseguirán el equilibrio visual que buscas. Al mismo tiempo, si eliges bloques de contenido de diferentes tamaños, que crean una especie de desproporción equilibrada todavía pueden ser agradables a la vista.

Diseño Web - Balance Visual

Diseño Web - Balance Visual

UBICACIÓN DE LOS ELEMENTOS

Al crear la maqueta de una página web, todo parece ser simple. Pero cuando el diseño está lleno de colores, imágenes y formas, a lo mejor no es tan fácil de ver. Cada elemento de diseño tiene sus propias propiedades y características que pueden complementar o trabajar en contra de la otra. Para equilibrar el aspecto del sitio, puedes mover los elementos del diseño más cerca o más lejos de la línea central (ya sea real o imaginaria).

Cabe mencionar que al entrar en una página web, tendemos a echar un vistazo más definido al centro de la pantalla lugar de sus laterales y bordes.

Diseño Web - Balance Visual

CONCLUSIÓN

El equilibrio es un principio básico del diseño web que se pierde fácilmente. Mediante la utilización de elementos de diseño web comunes, como la elección de los colores, las formas, el tamaño de los objetos y su correcta colocación, el equilibrio visual se puede lograr más fácilmente.

A pesar de todo, no tengas miedo de hacer algo diferente, ya que el concepto de equilibrio es muy versátil.