Cómo utilizar el equilibrio en el diseño web
Lograr el equilibrio en el diseño web requiere un poco de pensamiento, esfuerzo y habilidad, pero vale la pena. Lo mejor del equilibrio, que se puede aplicar a la categoría más amplia del diseño en su conjunto, es que evita que lo que crea sea un desorden excesivo y sobrecargado que no sirva a la experiencia del usuario. En otras palabras, el equilibrio en el diseño web asegura que usted, como diseñador, alcance ese punto óptimo de moderación. No mucho, pero no muy poco. No demasiado ruidoso, pero no demasiado sutil. Mantiene todo su diseño en armonía sin dejar de alcanzar todos los objetivos de usabilidad de sus clientes. ¡Esa es una habilidad que definitivamente debes poner en la caja de herramientas de tu diseñador! En este artículo, veremos cómo puede incorporar un buen equilibrio en los sitios web de sus clientes.
Equilibrio simétrico
Uno de los ejemplos más comunes de equilibrio con el que te encuentras al navegar por sitios web es la simetría, aunque es posible que no te des cuenta, porque se presenta de manera fluida. La simetría es innatamente agradable a la vista y crea un diseño estéticamente bien organizado y armonioso. El equilibrio simétrico se define colocando elementos por igual a ambos lados de un eje central horizontal o vertical. En otras palabras, ambos lados de una línea de buceo imaginaria en el medio de la página son esencialmente imágenes especulares entre sí. Si bien algunos críticos pueden descartar este tipo de equilibrio como aburrido o predecible, no obstante, ha resistido la prueba del tiempo y sigue siendo una de las mejores formas de mostrar el equilibrio en el diseño web.
El sitio de Cisco ha optado por este enfoque de diseño probado, comprobado y verdadero. Observe cómo el sitio está perfectamente equilibrado en su eje vertical. Si toma una línea imaginaria y la divide por la mitad de la página de inicio de Cisco, notará lo siguiente:
- El mismo número de elementos en la barra de navegación (incluido el icono de búsqueda) en ambos lados
- El título y el subtítulo son igualmente largos en ambos lados
- El botón de llamada a la acción está perfectamente centrado
- El mismo número de elementos en el encabezado «Tareas rápidas» en ambos lados
Si bien el sitio puede no ser el más emocionante de todos los tiempos, no tiene por qué serlo, ya que la empresa vende equipos de redes. Además, el sitio es utilizable y funcional, atributos que sus clientes pueden apreciar. Veamos otros dos ejemplos de simetría:
CBI Schaffhausen, el relojero suizo, tiene un sitio que presenta un equilibrio horizontal y simétrico. Si dividimos la página en un eje central por la mitad, ambos lados tienen simetría.
Lo mismo ocurre con el Sitio web de la aplicación Beanstalk. Con un diseño simple y minimalista, su eje central desciende por la mitad de la página de inicio, lo que deja las dos mitades de la página con un equilibrio horizontal y simétrico.
Equilibrio asimétrico
El polo opuesto de la simetría, el equilibrio asimétrico también es posible. ¡No se deje engañar por el hecho de que la asimetría significa una falta de equivalencia entre las partes! Como verá pronto, el equilibrio asimétrico también logra un sistema de contrapesos en el diseño … pero no en las formas que cabría esperar. La asimetría se puede representar de varias formas en una página web. Por ejemplo, la mitad de la pantalla, vertical u horizontalmente, podría presumir de un elemento más intenso, mientras que la otra mitad podría tener elementos más sutiles. A pesar de esta desigualdad, tanto en fuerza como en número, el equilibrio se crea mediante la yuxtaposición de los elementos contradictorios. De esta manera, la asimetría puede ser verdaderamente hermosa, quizás más que la simple simetría, porque juega con el concepto de disimilitud para crear equilibrio. Esa es una paradoja del diseño, pero que funciona muy bien en cualquier sitio. El equilibrio asimétrico es, por tanto, más interesante y estimulante que la simetría predecible. Evoca temas de modernismo, energía y asombro. Sin embargo, los diseñadores deben tener en cuenta que crear asimetría en una página requiere más trabajo que la simetría normal. Después de todo, tienes que representar relaciones entre elementos de diseño que son más complicadas.
Honda nos da un claro ejemplo de asimetría en el diseño web. Debajo del pliegue, en su página de inicio, la compañía usa un diseño basado en tarjetas, pero esto produce un aspecto algo desorganizado que, aunque visualmente atractivo y colorido, crea una falta de igualdad a ambos lados de un eje central vertical u horizontal. Por un lado, las cartas en sí son siempre de diferentes longitudes, horizontalmente, y no siempre se apilan en ninguna columna o fila uniforme. Esto crea una gran asimetría que es muy interesante de observar. ¡Es casi como un pequeño laberinto en la página de inicio de la compañía de automóviles! También hay otros ejemplos interesantes:
Tipografismo es un caso perfecto de asimetría en el diseño web. Su sitio presenta dos elementos que están desequilibrados. Tanto el logotipo de TG como el sello verde en la esquina superior derecha crean asimetría.
Duplos‘la asimetría es más marcada. Su sitio cuenta con un diseño de elementos flotantes que no se alineará consistentemente con la otra mitad, ya sea que el eje central sea vertical u horizontal. En general, produce una apariencia llamativa que es interesante de asimilar.
Equilibrio radial
El equilibrio radial es bastante sencillo. Como su nombre lo indica, el equilibrio radial se produce cuando todos los elementos de diseño de una página emanan en puntos equidistantes desde un punto central unificador. Entonces, si dividiera la página vertical u horizontalmente a lo largo de un eje central, los elementos de ambos lados estarían igualmente tan lejos o cerca del punto central. Algunos de los ejemplos más básicos de equilibrio radial son cosas como los rayos de sol que provienen de un punto central o un estanque que tiene un montón de ondas en su superficie. Lo que hace que esta forma de equilibrio sea más especial es que el efecto de radiación va en ambos sentidos: así como la atención se aleja del punto central, también conduce de regreso a él debido al centro común. Debido a esto, mantener un punto focal es fácil.
El mejor ejemplo de equilibrio radial, que es bastante raro en los sitios web, especialmente en las páginas de inicio, es Vlog. Es el epítome del equilibrio radial, ya que todo irradia hacia afuera desde el punto central del tipo blanco de “Vlog.it”.
Todo tipo de equilibrio
A estas alturas, debería ser bastante obvio que todos los tipos de equilibrio tienen algunos vínculos comunes. Hay factores uniformes que aparecen constantemente en cualquier diseño que presenta un equilibrio atractivo e interesante. El equilibrio en el diseño web está a tu alrededor. Lo más probable es que hayas olvidado apreciarlo en todos los sitios diferentes que has visitado a lo largo de tu vida; pero eso es solo porque el equilibrio no es realmente lo primero en lo que piensa cuando navega por un sitio. No obstante, el equilibrio es importante para el diseño del sitio. No solo aporta toques estéticos interesantes desde el punto de vista visual. También puede ayudar a la experiencia del usuario al hacer que la información visual en un sitio sea más fácil de absorber, es decir, mejorar la navegación del sitio también. Los diseñadores pueden esforzarse por incluir un mejor equilibrio en su diseño web prestando especial atención a la armonía, los contrapesos y la equidistancia. El resultado final de un buen equilibrio paga dividendos incalculables para sus clientes y la experiencia del usuario.
