Diseño asimétrico: crear composiciones bellas y equilibradas

¿Qué le parece el diseño asimétrico? Esa simple pregunta puede suscitar a veces mucho debate entre los diseñadores. El diseño asimétrico puede ser una de las técnicas más complicadas de llevar a cabo, pero cuando se hace bien da lugar a diseños bellos y llamativos.

Aunque la definición de asimetría es la falta de simetría o igualdad entre dos mitades, no se trata de una falta de equilibrio, como algunos suponen erróneamente. Los diseñadores pueden utilizar la asimetría para crear equilibrio y armonía aunque dos lados del diseño no sean reflejo el uno del otro. He aquí cómo empezar.

Recursos de diseño

¿Por qué la asimetría?

La asimetría puede ser uno de los conceptos más impactantes de su kit de herramientas de diseño. Es una técnica que llama la atención, es interesante y hace reflexionar.

Puede ser difícil de utilizar, por eso algunos diseñadores evitan los proyectos completamente asimétricos. Pero no tiene por qué ser así: todos los diseñadores pueden utilizar la asimetría, sólo hay que planificarla.

El mejor modo de empezar es mezclando y combinando conceptos simétricos y asimétricos dentro de un proyecto de diseño. Si divides el diseño en secciones más pequeñas, habrá partes que contengan distintos tipos de equilibrio. (Piensa en los paneles de los sitios con desplazamiento de paralaje o en el diseño de una imagen dentro del lienzo).

Piensa también por qué utilizas la asimetría. Saber qué quieres conseguir con los elementos visuales te ayudará a determinar cómo utilizar mejor las técnicas para lograrlo. La asimetría es activa y atrae la atención; puede ser pesada pero natural. Y una vez que tengas algo sobre el lienzo, confía en tu instinto. ¿Se ve bien o se siente "fuera de lugar"?

Lograr el equilibrio es ese mágico punto intermedio. Un buen diseño asimétrico incluye equilibrio para que ninguna parte del proyecto sea demasiado pesada para el resto. Puedes crear equilibrio compensando elementos con espacio, creando énfasis con movimiento, entendiendo el peso, añadiendo enfoque con color y utilizando una cuadrícula para alinear y organizar.

Utilizar el espacio

Uno de los lugares en los que la asimetría está empezando a florecer es en la tendencia del diseño minimalista. Con los diseñadores utilizando tanto espacio, es fácil equilibrar un objeto o una imagen simple contra un fondo blanco u oscuro más grande.

El equilibrio entre el blanco, o espacio negativo, y los elementos del diseño debe crear contraste, lo que dirigirá el movimiento del ojo a través del diseño.

Ejemplo: Ike Kligerman Barkley utiliza un equilibrio de gran dramatismo para atraer a los usuarios. El tirón direccional de la imagen en la esquina inferior de la pantalla frente al nombre y la navegación en la esquina opuesta atraen la mirada entre los elementos, casi retándote a no mirar. La imagen te da una idea de por qué has encontrado el sitio web y el marco mínimo te anima a hacer clic en los enlaces.

Hacer hincapié en el movimiento

Piense en un neumático rodando colina abajo. Inmediatamente percibirá el movimiento. Lo mismo ocurre cuando se diseña este movimiento de forma asimétrica.

• El ojo se desplazará naturalmente de la parte más grande y pesada de la pantalla a la más clara.
• El ojo sigue señales direccionales, como una flecha o una forma que parece apuntar en una dirección determinada.
• El ojo seguirá la trayectoria de los ojos en la imagen de la pantalla, de modo que el usuario mire en la misma dirección que la persona del diseño.
• El flujo direccional se inclinará de izquierda a derecha, a menos que haya una fuerte atracción hacia otra dirección.

Ejemplo: Leen Heyne Fine Jewelry utiliza el movimiento para atraer la mirada hacia el producto destacado. Las formas geométricas dirigen literalmente la mirada en la dirección correcta, al tiempo que crean la sensación de que la pulsera (o el anillo) podría rodar de forma natural por el lienzo. Esta influencia direccional también hace algo más: dirige el uso hacia las flechas de navegación para pasar a la página siguiente.

Enfoque con color

Los patrones de color asimétricos suelen tener un alto contraste y combinaciones de color. Piense en tonos brillantes contra negro o una fotografía tonificada que tiene tipografía blanca audaz en la parte superior. El alto contraste de color será el enfoque y el peso visual a partes específicas del diseño.

Las combinaciones de colores asimétricas se pueden crear utilizando la rueda de colores. Opte por emparejamientos y combinaciones de colores que se salgan de las reglas de color tradicionales para dar una sensación de asimetría. Considere colores que se utilizan poco para causar impacto. Utilice el color para resaltar y enfatizar otros elementos del contorno asimétrico. El color funciona muy bien con elementos como las formas geométricas, la tipografía o incluso en lafondo para que sirva de punto focal secundario para lograr el equilibrio.

Ejemplo: La Agencia HLK utiliza el color para tomar un diseño que es casi simétrico y hacer que te lo pienses de nuevo. El subrayado azul y el botón crean un enfoque simple con asimetría que se equilibra con el sutil menú de hamburguesa y los iconos de marca en las esquinas superiores.

No se olvide de la red

Aunque no utilices una cuadrícula para crear imágenes especulares, sigue siendo una parte vital del proceso de diseño. Utilizar una cuadrícula para crear asimetría te ayudará a conseguir equilibrio y organización.

Considera cada elemento de la cuadrícula como lo harías con cualquier otro proyecto. ¿Se apoyan las cosas de una determinada manera horizontal y verticalmente? ¿Existe un peso compensado a ambos lados del lienzo: de izquierda a derecha y de arriba abajo?

Piensa en la cuadrícula como una balanza: por cada elemento que añadas a un lado, algo en el otro lado tiene que compensarlo. Para crear una asimetría inmediata, considera una cuadrícula de columnas con un número impar de columnas; en un lado de la cuadrícula crea elementos que tengan el mismo ancho que una columna, en el otro el doble.

Ejemplo: BrightByte Studio utiliza una rejilla de columnas que mantiene los elementos alineados y organizados en una mezcla de elementos simétricos y asimétricos (pero el primero que se ve es probablemente el texto alineado a la izquierda en el centro de la pantalla). Este uso de una rejilla crea un equilibrio innato entre los elementos. Observe cómo la navegación de la página inferior y los enlaces de la parte superior de la página están alineados, así como el espacio ocupado por la página principal.texto y los elementos de navegación.

Crear peso

La asimetría se basa en la idea de que algo es tan "pesado" que te atraerá primero. Determina qué parte de tu imagen llevará ese peso visual. Puede ser una imagen o tipografía o incluso un espacio en blanco.

Equilibre el elemento pesado con un contraste: un elemento más ligero, algo que capte la atención del usuario de forma diferente. El peso funciona mejor cuando se combina con las otras técnicas anteriores, de modo que el elemento pesado no domine el diseño y le lleve a través de él.

Ejemplo: Cranes of Cambridge utiliza una foto atractiva como el "peso" del diseño. Está equilibrada por dos elementos - uno que puede que ni siquiera se note al principio. El texto y el logotipo son significativamente más "ligeros" que las personas de la imagen, lo que hace que se mire desde las personas al texto (siguiendo también el movimiento implícito de sus ojos). También está compensado por una navegación en columnas que ayuda a tirar dea través de la pantalla.

Conclusión

La asimetría puede ser una técnica de diseño bella y armoniosa. Aunque últimamente las tendencias de diseño se han centrado mucho en la simetría, es probable que se produzca un cambio hacia este diseño equilibrado "desequilibrado". Es visualmente intrigante y ayuda a dirigir a los usuarios a través de un diseño con sutileza.

La asimetría también tiene impacto y funciona especialmente bien como concepto que se utiliza con la simetría en el ámbito de un proyecto completo. Experimente con la asimetría y enamórese de esta dinámica técnica de diseño.