Tiempo de lectura aprox: 5 minutos, 29 segundos
Si alguna vez te has preguntado cómo lograr un diseño consistente y equilibrado en tus proyectos, las retículas son la respuesta que estabas buscando. En este artículo, explorare el origen de las retículas y su evolución a lo largo del tiempo. Descubriras por qué utilizarlas es clave para crear diseños visualmente atractivos y funcionales. Además, te guiare paso a paso en cómo implementar las retículas en tus propios proyectos, proporcionándote consejos prácticos y recomendaciones para lograr resultados impresionantes.
Prepárate para descubrir el poder de las retículas y lleva tus diseños al siguiente nivel. ¡Comencemos!
¿Qué es son las retículas?
Las retículas, también conocidas como grids en inglés, son una herramienta fundamental para los diseñadores. Nos permiten estructurar y jerarquizar los contenidos de una página de manera eficiente.
Consiste en una cuadrícula formada por líneas verticales y horizontales que dividen el espacio en módulos. Estos módulos nos ayudan a organizar el contenido, encajándolo y alineándolo de manera precisa.
Las retículas son el esqueleto de cualquier diseño y su uso es esencial para lograr resultados visualmente atractivos y equilibrados.
Origen de las retículas o grids
Las retículas tienen su origen en el siglo XIII, cuando Villard de Honnecourt creó un diagrama con el objetivo de lograr un diseño armonioso. Utilizó la proporción de áurea y trazó diferentes líneas en base al formato de la hoja en la que trabajaba, generando una retícula que permitía componer diseños de manera proporcional y con buenos márgenes.
Sin embargo, fue durante la Primera Guerra Mundial que se produjo un cambio significativo en el uso de las retículas. Suiza, un país neutral en el conflicto, se convirtió en un punto de encuentro para creativos de diferentes países. Esto presentó un desafío, ya que los principales idiomas utilizados en Suiza (francés, italiano, alemán e inglés) tenían particularidades tipográficas distintas. Por ejemplo, el alemán, con su promedio de casi 12 letras por palabra, era difícil de encajar en una retícula «perfecta» como la definida por Honnecourt.
Fue en este contexto que surgió el estilo suizo, también conocido como Swiss Style. Promovió el uso de retículas asimétricas, donde no todo debía estar fijo en un área concreta. Se permitió la creación de diferentes tipos de módulos, generados mediante progresiones matemáticas, combinados entre sí para lograr diversas disposiciones.
Josef Muller-Brockmann, uno de los máximos exponentes de la escuela suiza, escribió un libro que todavía se considera una referencia en el tema.
En resumen, la escuela suiza sentó las bases del tipo de retícula que utilizamos actualmente. Se basa en diferentes tamaños de textos y módulos combinados con imágenes y otros elementos, organizados en márgenes más o menos estándar.
Beneficios del uso de retículas
Las retículas aportan una serie de beneficios fundamentales en el diseño. Estos incluyen:
1. Claridad y coherencia en los diseños
Enfrentarnos a un proyecto de diseño puede resultar abrumador, especialmente cuando debemos crear múltiples pantallas en poco tiempo. Sin embargo, al utilizar una retícula desde el inicio, podemos asegurarnos de que todas las pantallas sean coherentes entre sí y generen sensaciones de simetría, proximidad y continuidad.
La implementación de una retícula nos permite proporcionar elementos visuales y jerarquizar el contenido de manera efectiva. Además, crea espacios en blanco estratégicos que generan un ritmo de lectura agradable y facilitan la comprensión del contenido.
2. Facilitan el trabajo de los desarrolladores
Los desarrolladores te agradecerán enormemente si utilizas una retícula en tus diseños. Al tenerla como base, les facilitará programar la adaptación a cualquier pantalla necesaria, ya que siempre sabrán la ubicación de cada elemento, su tamaño y la cantidad de módulos que ocupan.
Trabajar sin una retícula significa que deben programar casi todos los elementos «a mano», sin la posibilidad de sistematizar componentes reutilizables, lo que además ralentiza su trabajo considerablemente.
3. Otorgan consistencia
Utilizar una retícula te brinda la posibilidad de establecer elementos estándar que podrán ser reutilizados en toda la aplicación. Por ejemplo, podrás definir que el margen a izquierda y derecha sea de 8pt, que el margen entre botones sea de 16 y que el padding del interior sea de 8, entre otros.
Gracias a esto, cada botón tendrá un aspecto consistente y no habrá margen para errores
4. Permiten trabajar más rápido y de manera eficiente
Al trabajar con módulos de tamaños predeterminados, puedes definir rápidamente cómo se ubicará cada elemento y cómo se integrará con el resto del diseño.
Esta eficiencia y velocidad se debe a que la retícula establece un marco de referencia claro, lo que te ayuda a tomar decisiones de diseño de forma más rápida y precisa. Además, al tener una estructura predefinida, puedes encajar los elementos de manera fluida y asegurarte de que todo se vea armonioso y coherente en el diseño final.
5. Facilitan el cambio de resolución
Utilizar una retícula hace que sea mucho más sencillo adaptar el diseño a diferentes tamaños de pantalla, ya sean más grandes o más pequeñas que la base que estás utilizando.
Por ejemplo, si en un tamaño se utilizan 4 columnas, en otro tamaño se pueden utilizar 3 o incluso una sola columna que ocupa todo el ancho. La retícula te permite ajustar fácilmente la distribución de elementos para garantizar que se vea bien en cualquier resolución.
6. Puedes romper la retícula
Diseñar con una retícula no significa que cada elemento deba estar dentro de una columna o módulo de forma obligatoria, ni que tengas que usar 12 o 16 columnas. De hecho, el uso de una retícula te permite hacer exactamente lo contrario, romperla libremente.
Siéntete libre de experimentar y salir de los límites establecidos por la retícula. Juega con diferentes tamaños, posiciones y diseños para crear un impacto visual único y original. La retícula es una herramienta flexible que te brinda estructura y organización, pero también te da la libertad de romper las reglas y explorar nuevas ideas.
Las retículas y la tipografía siempre van de la mano
Esta relación se remonta a los primeros carteles impresos que utilizaban la grid de Villard de Honnecourt y se ha mantenido con la Escuela Suiza.
La tipografía utiliza la línea base, que son las líneas horizontales que atraviesan la retícula de izquierda a derecha. Esto permite alinear mejor los textos, así como organizar, estructurar y dar el espacio adecuado entre los bloques.
Al prestar atención a la línea base, logramos generar un ritmo entre los elementos, de manera que se percibe como una decisión consciente. La tipografía no aparece de forma aleatoria, y todas las cajas de texto se apoyan en una base constante.
💡 Y no te preocupes, calcularla no es tan complicado, aquí tienes una calculadora que te ayudará.
Como utilizarlas en diseño web y app
Cuando se trata de diseño impreso o de los primeros diseños de páginas web que solíamos hacer utilizando la retícula de 960px, todo iba muy bien.
Sin embargo, el problema surge cuando las pantallas de escritorio se vuelven cada vez más grandes y panorámicas, y los dispositivos móviles tienen tamaños cada vez más variados (Apple y Android no nos lo ponen fácil) e incluso añaden elementos que hacen que las pantallas no sean rectangulares.
Es probable que te preguntes: ¿Con qué pantalla debo empezar y cómo deberían ser la retícula y los elementos?
La respuesta es comenzar por el diseño móvil y la pantalla más pequeña. Esto ayudará a seleccionar mejor qué contenido añadir y cómo hacerlo. Si empiezas por la pantalla más grande, es probable que te emociones creando composiciones y estructuras que luego será difícil adaptar correctamente a los dispositivos móviles.
Características
Estas son las dos características principales que debes tener en cuenta al trabajar con una retícula:
- Sigue el sistema de 8 puntos: Aunque profundizaremos en este tema en un próximo artículo, en resumen, se trata de utilizar el número 8 como base para definir el tamaño de todos los elementos, asegurándote de usar medidas que sean múltiplos o divisiones de 8.
- Utiliza los estándares: Si quieres evitar conflictos entre diseñadores y desarrolladores, es recomendable seguir los estándares establecidos por Apple con su Human Interface Pautas o por Android con el Material Design. En particular, fíjate en cómo componen los diseños. Si bien esto se aplica principalmente a aplicaciones, también se puede adaptar fácilmente al diseño de escritorio redistribuyendo los elementos en un diseño más amplio y ampliando los espacios.
Composición
Ahora que tenemos las bases definidas, es momento de aprender cómo alinear y colocar los diferentes elementos en tu diseño.
Observa detenidamente estos ejemplos y cómo todo puede variar dependiendo de si utilizas correctamente la retícula o si, por el contrario, te inventas proporciones, tamaños, distancias y alineaciones sin seguir ninguna estructura:
Obviamente, este ejemplo es exagerado, pero te sorprendería cuántas veces, Por querer ir rápido, dejamos de prestar atención a lo que realmente importa.
Conclusión
En resumen, las retículas son fundamentales para abordar cualquier diseño, pero es importante no casarse con una retícula específica. Mi consejo es que utilices la que mejor se adapta a tu proyecto, en lugar de forzar tu diseño en una retícula convencional preestablecida, como la de 960 píxeles, por ejemplo. No obstante, asegúrate de utilizarla de manera consistente en todo tu diseño, especialmente para no complicar la tarea del desarrollador.
Por último, te recomiendo el libro Sistemas de retículas. En él se explica todo lo necesario para dominarlas de forma correcta: cómo componerlas, distribuir cajas de texto e imágenes, entre otros aspectos.