En los últimos tiempos, los layout basado en cuadrículas han ganado popularidad ya que éste ofrece balance visual y jerarquía, es decir, permite que los elementos que existen en el sitio web puedan leerse en el orden debido; un hecho de suma importancia al momento de diseñar sitios web.
Un sistema de cuadrículas consiste en una serie de líneas verticales y horizontales que se intersectan y sirven para ordenar y estructurar contenido. Este sistema es bastante útil y eficaz, y muchas veces te sacará de un apuro si no sabes cómo organizar y hacer accesible la información de tu sitio web.
Si se realiza de manera adecuada, los sitios web basado en cuadrículas pueden visualizarse bien en diversos dispositivos como móviles y tabletas. Esta variedad se vuelve cada vez más importante ya que, hoy en día, más y más gente accede y navega por internet en otros dispositivos, aparte de los ordenadores. A continuación, discutiremos las ventajas de tener un sitio web basado en cuadrículas y cómo maximizar este formato.
El sistema de cuadrículas en el diseño web
Al parecer, últimamente el número de sitios web que utilizan layout con sistema de cuadrículas ha incrementado considerablemente. Los nuevos frameworks de diseño web también han ayudado a que se acrecente el interés en este sistema de cuadrículas. Sin mencionar que una web bien estructurada eleva la experiencia visual y la interacción de los usuarios. Por otro lado, es relativamente sencillo para los programadores actualizar el layout sin esfuerzo y de manera constante.
Pensar más allá de los cuadros
El diseño web basado en cuadrículas no sólo se trata de alinear elementos de manera mecánica. Tiene que tiene que ver con la proporción: todos los elementos son colocados en el borde de las celdas y alineados de manera vertical y horizontal.
Muchos diseñadores se valen del principio de la proporción áurea al momento de dar pautas para layouts que sean atractivas y únicas. La proporción aúrea surge al dividir en dos un segmento que tenga la siguiente relación:
El número áureo surge de la división en dos de un segmento guardando las siguientes proporciones: La longitud total a+b es al segmento más largo a, como a es al segmento más corto b.
En ambos casos, ese número deberá ser 1, 618. ¿Pero cómo este cálculo matemático nos ayuda en el diseño? Pues se cree que las composiciones divididas de acuerdo a la proporción áurea lucen estéticamente atractivas.
Regla de los tercios
Una versión simplificada de la proporción aúrea sería la regla de los tercios. De acuerdo con esta regla, al dividir la imagen en 9 partes iguales usando dos líneas verticales y dos horizontales, los puntos de interés deberían estar en los vértices de las líneas, ya que la mayoría de personas ve los elementos que están en esas ubicaciones. Además, dicha división hace que la lectura de la página sea fácil.
Framework con sistemas de cuadrículas
No siempre vas a tener que usar los sistemas de cuadrículas en diseño web, sin embargo, es importante entender su complejidad. Hay muchos frameworks de CSS basados en sistemas de cuadrículas y herramientas disponibles que te permiten modificarlos. El 960 Grid System es uno de los más conocidos y funciona en la mayorías de navegadores y dispositivos. El sistema te permite elegir cuadrículas de 12, 16 y 24 columnas.
¿Este sistema de cuadrículas es adecuado para mi proyecto?
El diseño web basado en sistema de cuadrículas logra un balance perfecto entre los distintos elementos de diseño que existen en tu web. Sabemos que la complejidad de algunos sitios web requieren otro tipo de diseño, pero otros precisan un aspecto más uniforme y estructurado. Recuerda que el sistema de cuadrículas sirve para lograr una correcta implementación, pero si funciona o no depende mucho del sitio web que estés diseñando.
Algunas indicaciones finales
Enfócate en el usuario: No dejes que sólo se trate de un tema estético. Recuerda que el sistema de cuadrículas debería enfocarse primordialmente en la funcionalidad.
No fuerces las cosas: Muchas veces, se malinterpreta el verdadero propósito de este sistema y se intenta forzar cada elemento de diseño en la cuadrícula. Recuerda que este tipo de layout sirve de mejorar la experiencia del usuario.
Mantén la simpleza: Crea cuadrículas simples. Recuerda que tus cálculos deben ser sencillos para que puedas explicarlos a otros, ya sea a tu equipo de trabajo o tu cliente.
