Una cuadrícula es la base de casi cualquier diseño de sitio web. Estas líneas invisibles ayudan a crear un espacio rítmico y un flujo visual, por lo que cada proyecto tiene un sentido de organización y armonía.
Pero no tienes que apegarte a la cuadrícula el 100 por ciento del tiempo. Incluso puedes romper la cuadrícula de vez en cuando sin hacer un desastre total. ¡Así es como lo hace, mientras mantiene un sitio web que es un placer utilizar!
Entendiendo los sistemas de rejilla
Antes de que puedas romper la cuadrícula, debes entender por qué existe. Independientemente del tipo de sistema que utilice, la cuadrícula es una parte fundamental del proceso de diseño. Las cuadrículas lo ayudan a determinar dónde colocar los elementos, cómo los elementos pueden romperse o apilarse en diferentes tamaños de pantalla y generalmente ayudan a mantener las cosas organizadas.
La cuadrícula es una base invisible que le ayuda a diseñar algo que se sienta organizado, limpio y que los usuarios puedan seguir fácilmente.
Los diseñadores han estado utilizando grids para siempre. Regrese y mire los periódicos y libros antiguos: el texto está alineado en columnas. Incluso los escritos antiguos en tabletas incluyen esta estructura armoniosa.
Las grillas pueden hacer lo siguiente:
- Mantener el contenido organizado y fluido. Los usuarios están acostumbrados a los elementos que se alinean horizontal y verticalmente y siguen ese enfoque de lectura de izquierda a derecha (y atrás), de arriba a abajo.
- Haga que el diseño sea más eficiente porque simplemente verá dónde colocar los elementos y el espacio entre ellos.
- Ayude a que un sitio web se vea consistente de una página a otra.
- Cree el espacio justo entre los elementos para que el diseño permanezca despejado.
- El equilibrio es menos desafiante. Siga la cuadrícula y los elementos casi caerán en su lugar a medida que escala los elementos dentro de los parámetros establecidos.
Entonces, ¿por qué pensarías en romper la red?
Romper la cuadrícula puede agregar énfasis adicional a un elemento específico. Es una de esas reglas de diseño que cuando se rompe con moderación puede mejorar el significado de un proyecto. Al romper la cuadrícula, es importante seguir muchas de las otras reglas? de diseño. (Use solo este truco para sacarle el mayor provecho).
Crear capas
Los elementos de capas le permiten moverse fuera de la cuadrícula mientras mantiene la unidad en el diseño. Debido a que los elementos tocan y se cruzan los planos, se sienten como parte de la misma unidad.
Esta técnica se ha vuelto bastante popular recientemente, gracias a las influencias de Material Design y a más diseñadores que se arriesgan con elementos en la pantalla. Aunque puede ser complicado; Los elementos que se superponen de alguna manera deben permanecer distinguibles para funcionar de manera efectiva.
Cmmnty hace esto con una línea y texto anchos, creando una especie de balance de compensación utilizando tipografía y espacios en blanco. Casi puede ver varias cuadrículas pequeñas en el diseño, como la navegación y la alineación de los elementos de texto de la izquierda, pero no un patrón consistente. Esta ruptura de la cuadrícula es perfectamente equilibrada y fácil de entender para el usuario.
Diseño de espacio en blanco con propósito
Una razón para alejarse del camino de una cuadrícula es crear más espacio en blanco con más énfasis en los lugares correctos. Esto puede ser para resaltar elementos de texto o marca o una imagen estelar.
Una cosa que a menudo se confunde con moverse fuera de la cuadrícula son las alineaciones impares. Si bien la alineación perfecta puede ser una parte integral del uso de un sistema de cuadrícula, horizontal o vertical, los elementos pueden alinearse mientras se aleja de la cuadrícula.
Cuando rompa la cuadrícula para agregar espacios en blanco, considere mantener todo lo demás alineado. Ayudará a crear un grupo de elementos que atraiga la atención, como el texto y el llamado a la acción de Surfers Against Sewage, con espacio suficiente para que el elemento se sienta más importante que otros. El ejemplo anterior funciona maravillosamente porque el espacio ayuda a atraer a los usuarios a la llamada a la acción.
Poner elementos dentro de un contenedor
Cuando los elementos están contenidos de alguna manera, se sienten juntos incluso cuando la rejilla está rota. Esto puede incluir el uso de un fondo de color, poner elementos en cuadros o capas de texto en una foto o video, como el ejemplo anterior.
Lo bueno de cualquier elemento contenedor es que proporciona un indicio a los usuarios de que todo lo relacionado está relacionado de alguna manera. El enlace de los elementos.
Salir de la cuadrícula en un patrón de estilo contenedor es una forma visualmente interesante de romper lo que a menudo termina pareciéndose a una carta de juego. Muchos diseños estilo contenedor terminan con un diseño perfectamente simétrico; Salir de la red es una forma segura de agregar chispa al diseño y romper la monotonía.
Jugar con elementos específicos
La mejor manera de salir de la red es con un detalle simple. Si todo el diseño carece de un sistema de cuadrícula, es probable que termines con un desastre. (Y eso es precisamente lo que estamos tratando de evitar.)
Comience con un elemento de fondo o acento para llamar la atención. Los toques fríos o las formas interesantes son un buen lugar para comenzar. Considere agregar un color en negrita también para resaltar el elemento.
The Land of Nod hace esto de manera efectiva con líneas gruesas y angulosas para mostrar a los usuarios dónde están las grandes ventas en todo el sitio web. Estas líneas a veces están contenidas dentro de las imágenes y otras veces cruzan espacios en blanco en imágenes. La varianza es visualmente interesante y asegura que la ruptura ocasional de la rejilla sea lo suficientemente inusual para llamar la atención, pero coincide con el resto del diseño lo suficiente como para sentir que pertenece.
Moverlo alrededor
Use el movimiento y el movimiento para quitar elementos de la cuadrícula, o tal vez simplemente cambiarlo un poco. Las animaciones simples o los elementos que funcionan en concierto con el video pueden hacer que una cuadrícula aparezca menos como una cuadrícula.
Este concepto funciona realmente bien con diseños que se centran en un solo elemento.
El énfasis de Trippeo, arriba, es el gráfico de gastos de viaje. No cambia la ubicación en todo el diseño del sitio. Pero todo lo demás a su alrededor se mueve, desde el video en la pantalla de inicio hasta la información sobre la aplicación que se enfoca en el uso del desplazamiento de paralaje.Este elemento mantiene unido el resto de un diseño de estilo fuera de balance, fuera de la red con un toque moderno y elegante.
Crea una ilusión de romper la rejilla
Puedes romper la rejilla sin romperla en absoluto.
Use una cuadrícula vertical pequeña para crear combinaciones interesantes de formas y alineaciones mientras permanece en la cuadrícula (incluso si no lo parece).
Lo bueno de no romper la cuadrícula para crear este tipo de diseño es que conserva todos los beneficios de un diseño basado en cuadrícula mientras hace algo que es un poco diferente. Las mejores opciones a menudo incluyen diseños que funcionan en múltiplos de la cuadrícula (tres, cinco, siete, etc.) para que las formas nunca se alineen exactamente, pero siempre se sientan similares.
Marche Notre Dame, arriba, usa este concepto para mostrar imágenes desde su ubicación. El patrón de cuadrícula fuera de la cuadrícula se usa vertical y horizontalmente para crear un collage con el espacio en blanco correcto. Esta es una buena manera de romper con los patrones de mampostería de viejas fotografías que parecen estar prácticamente en todas partes.
Conclusión
Romper la grilla no siempre es fácil de hacer. Muchas veces puede acabar convirtiéndose en todo un lío.
Los mejores usos se aplican a una página o conjunto de elementos para evitar que el diseño se salga de control. Esto también es útil cuando se piensa en la capacidad de respuesta y cómo lidiar con elementos que pueden no encajar bien en pantallas más pequeñas porque no tendrá tantas rarezas con las cuales lidiar.
Romper la cuadrícula, cuando se hace bien, puede ser una forma divertida y atractiva de probar algo diferente.