Cuando un elemento utiliza un espacio asimétrico, se destaca contra otros elementos circundantes. Aparecerá más vibrante, lo cual es particularmente útil si está diseñando áreas de una página donde un enlace / botón requiere más atención que otros.
Hoy vamos a ver más de cerca la asimetría expresada a través del contraste, el espaciado y el diseño. Estamos pensando en el contraste observable y en cómo el espacio atrae la atención.
La asimetría no siempre se trata de relaciones externas con márgenes, relleno o canaletas.
La asimetría también puede ocuparse de las relaciones internas, como las miniaturas de las imágenes o la alineación del texto. Por ejemplo, una galería de imágenes puede mostrar 5 miniaturas en las que el pulgar del medio es un poco más grande que los demás, y se utiliza principalmente para captar la atención. La asimetría es excelente para llamar la atención sobre un área en particular en la página o un elemento en particular en la página.
Y, como describimos en el libro electrónico gratuito Diseño de interfaz de usuario web para el ojo humano, a veces la asimetría es útil solo por el bien de la asimetría.
Veamos más de cerca la asimetría expresada a través del contraste, el espaciado y el diseño.
Contraste observable
Al eliminar las distracciones, obliga a los usuarios a enfocarse solo en lo que está inmediatamente visible.
A continuación, puede aplicar efectos de diseño a estas áreas, como gradientes de fondo o incluso animaciones jQuery. Estos efectos se pueden usar en uno o dos elementos para que se destaquen de los demás.
Uno de nuestros ejemplos favoritos de este efecto se encuentra en la página de inicio de Sketch by Bohemian Coding. La página de inicio combina colores oscuros y claros para combinar el contraste en un diseño unificado.
En la sección de encabezado, notará que hay dos botones: uno para una prueba gratuita y otro para comprar el software. Ambos botones son de color azul y ocupan la misma cantidad de espacio. Sin embargo, el botón de prueba gratuita utiliza un? Vacío? fondo que se conoce comúnmente como un botón fantasma. En capas sobre el encabezado oscuro, el botón de prueba gratuita parece caer fuera de foco en el fondo.
Debido a que el botón de compra utiliza un fondo azul claro y texto blanco, se destaca fuerte y fuerte contra el fondo oscuro. Al escanear rápidamente sus ojos sobre el encabezado, es bastante obvio que el botón de compra atrae su atención casi de inmediato. Esto se debe a las opciones de color, pero también al espacio en blanco agregado entre los elementos.
El espacio en blanco vertical y horizontal se utiliza para que los botones aparezcan separados del texto del encabezado. Como un botón es más brillante que el otro, naturalmente se destaca porque hay mucho espacio y no hay mucho más en la forma de captar la atención.
Puedes ver un estilo de botón similar en el área del pie de página:
En este caso, los usuarios solo tienen la opción de enviar su correo electrónico o retener la información.
Debido a que Sketch quiere que envíe su correo electrónico lo más rápido posible después de escribirlo, el espaciado es mucho más estrecho entre el campo de entrada y el botón Enviar. Esto sigue la Ley de Fitts, ya que a medida que reduce la distancia (y el tamaño permanece fijo), acelera el tiempo que toma moverse entre los elementos.
Finalmente, observe que el tamaño asimétrico del formulario de entrada comparado con el botón Enviar también atrae la atención hacia esa parte de la página, que es exactamente lo que quiere Sketch.
Use el espacio en blanco a su favor para dibujar ojos errantes en ciertos elementos de la página. Para experimentar y descubrir qué funciona mejor, pruebe diferentes métodos de pruebas A / B para diferentes valores de espaciado.
Aquí hay algunas notas generales que se pueden extraer del sitio web de Sketch:
- El contraste no siempre se refiere al color. También puede referirse a elementos contrastantes de espacio, tamaño y posición en relación con otros elementos en la página.
- El espacio vacío puede ser obvio o discreto según el contexto.
- Los elementos circundantes desempeñan un papel importante en la visibilidad natural de otros elementos.
- La simetría crea memoria y armonía, mientras que la asimetría llama la atención. Equilibrar ambos en consecuencia.
El espacio atrae la atención
Puede encontrar un ejemplo ligeramente diferente en la página de inicio de Procreate, una herramienta de dibujo y pintura digital para iPad. Al hojear la página, notará que todo el diseño está oscuro y presenta elementos de página de gran tamaño.
El diseño demuestra cómo puedes enfocar elementos singulares en una página muy grande. Capturas de pantalla, pinturas demo y características, todas tienen sus propias secciones.
El espacio en blanco separa el texto y el contenido visual. El diseño destaca especialmente por el uso de colores de texto para distinguir entre encabezados (contraste superior) y texto de página general (contraste inferior).
Al dividir una página en secciones, se crea una jerarquía de contenido natural. Al dividir estas secciones con estilos únicos (fondos de pantalla completa, tipografía de gran tamaño, capturas de pantalla de aplicaciones), las divisiones se vuelven aún más evidentes.
Tenga en cuenta que no todos los sitios web pueden beneficiarse de grandes divisiones de contenido, pero esto parece ser una tendencia muy popular entre los diseñadores. Parece fantástico cuando se ejecuta correctamente.
El diseño alternativo
En la superficie, el contenido alternativo puede parecer molesto porque obligas a la mirada del lector a saltar. Pero como el contenido está espaciado tan bien, es mucho más fácil leer un Z-Pattern de lo que pueda imaginar.
El patrón también obliga a los visitantes a mantenerse alerta, ya que el diseño no es información de alimentación de cuchara. Por supuesto, este patrón solo es posible porque el espacio en blanco de buen gusto esculpe el camino para escanear.
Mirando la página de Wunderlist, podemos ver este patrón asimétrico emergiendo en el espacio en blanco. El espaciado asimétrico se ejecuta cuidadosamente para que se vea interesante sin ser exasperante.
Podemos aprender mucho de los patrones de diseño demostrados por el uso de espaciado de Wunderlist:
- La asimetría tiene su propósito al intentar llamar la atención sobre ciertas áreas de la página.
- La asimetría en un patrón repetido se convierte en simetría.
- Los patrones de espacio entre texto o gráficos también aparecerán como un patrón más grande.
- El espacio en blanco debe hacer que la navegación del contenido sea más fácil y más predecible.
Otras lecturas
Puede aprender más técnicas de diseño accionables en el libro electrónico gratuito Tendencias de diseño web 2016. La guía de 185 páginas explica las 10 mejores prácticas con gran detalle. Encontrarás 165 ejemplos analizados de las principales empresas de hoy.