Cómo usar el equilibrio en el diseño web
Lograr un equilibrio en el diseño web requiere algo de reflexión, esfuerzo y habilidad, pero vale la pena. Lo bueno del equilibrio, que se puede aplicar a la categoría más amplia del diseño como un todo, es que mantiene lo que usted crea de ser un desastre excesivo y sobrecargado que no sirve a la experiencia del usuario. En otras palabras, el equilibrio en el diseño web asegura que usted, como diseñador, acaba de alcanzar ese punto dulce de moderación. No demasiado, pero no muy poco. No demasiado ruidoso, pero no demasiado sutil. Mantiene todo su diseño en armonía al mismo tiempo que alcanza todos los objetivos de usabilidad de sus clientes. ¡Ahora es una habilidad para poner definitivamente en la caja de herramientas de su 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 que se encuentra al explorar sitios web es la simetría, aunque es posible que no se dé cuenta, ya que se presenta de manera uniforme. 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 los elementos por igual a cada lado 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 superado la prueba del tiempo y sigue siendo una de las mejores maneras de mostrar el equilibrio en el diseño web.
Sitio de Cisco ha optado por este enfoque del diseño probado y probado. Tenga en cuenta que el sitio está perfectamente equilibrado en su eje vertical. Si tomó una línea imaginaria y la dividió en el centro de la página de inicio de Cisco, notará lo siguiente:
- La misma cantidad de elementos en la barra de navegación (incluido el ícono de búsqueda) en ambos lados
- El título y la línea de encabezado son igualmente largos en ambos lados
- El botón de llamar 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 terriblemente emocionante de la historia, no tiene que ser así, ya que la empresa vende equipos de red. Además, el sitio es útil y funcional, ambos atributos que sus clientes pueden apreciar. Veamos otros dos ejemplos de simetría:
IWC Schaffhausen , el relojero suizo, tiene un sitio que presenta un equilibrio simétrico horizontal. 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 se encuentra en el centro de la página de inicio, que deja las dos mitades de la página con un equilibrio horizontal y simétrico.
Balance asimétrico
El polo opuesto de la simetría, el equilibrio asimétrico también es posible. ¡No te dejes engañar por el hecho de que la asimetría significa una falta de equivalencia entre las partes! Como pronto verá, el equilibrio asimétrico también logra un sistema de contrapesos en el diseño ... simplemente no de la manera que podría esperar. La asimetría se puede representar de varias maneras en una página web. Por ejemplo, una 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 por la yuxtaposición de los elementos contradictorios. De esta manera, la asimetría puede ser realmente hermosa, tal vez más que la simetría directa, ya que juega con el concepto de desemejanza para crear equilibrio. Esa es una paradoja del diseño, pero que funciona tan bien en cualquier sitio. El equilibrio asimétrico es por lo tanto más interesante y estimulante que la simetría predecible. Evoca temas de modernismo, energía y maravilla. Los diseñadores deben tener en cuenta, sin embargo, que crear asimetría en una página requiere más trabajo que la simetría regular. Después de todo, tienes que representar relaciones entre elementos de diseño que son más complicados.
Honda nos brinda un claro ejemplo de asimetría en el diseño web. Debajo del pliegue, en su página de inicio, la empresa usa un diseño basado en tarjetas, pero esto produce un aspecto un tanto desorganizado que, aunque visualmente atractivo y colorido, crea una falta de igualdad en ambos lados de un eje central vertical u horizontal. Por un lado, las cartas en sí mismas siempre tienen longitudes diferentes, en sentido horizontal, 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:
Typographisme es un caso perfecto de asimetría en el diseño web. Su sitio presenta dos elementos desequilibrados. Tanto el logotipo TG como el sello verde en la esquina superior derecha crean asimetría.
Duplos 'la asimetría es más clara. Su sitio cuenta con un diseño de elementos flotantes que no se alineará de manera consistente con la otra mitad, ya sea que el eje central sea vertical u horizontal. En general, produce una apariencia atractiva que es interesante de asimilar.
Equilibrio radial
El equilibrio radial es bastante sencillo. Como su nombre lo indica, el equilibrio radial ocurre cuando todos los elementos de diseño en una página emanan en puntos equidistantes de 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 del 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 se da en ambos sentidos: del mismo modo que la atención se aleja del punto central, también lo lleva 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 principales, es Vlog . Es el epítome del equilibrio radial, ya que todo se irradia hacia afuera desde el punto central del tipo blanco de "Vlog.it".
Todo tipo de equilibrio
Por ahora, debería ser bastante obvio que todos los tipos de equilibrio tienen algunos enlaces 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 haya olvidado apreciarlo en todos los diferentes sitios que haya navegado a lo largo de su vida; pero eso es solo porque el equilibrio no es lo primero que piensas cuando navegas por un sitio. No obstante, el equilibrio es importante para el diseño del sitio. No solo proporciona toques estéticos que son interesantes desde un punto de vista visual. También puede ayudar a la experiencia del usuario haciendo que la información visual en un sitio sea más fácil de absorber, lo que no significa que también mejore la navegación del sitio. 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.