Sistema de retículas para diseño web

Sistema de retículas para diseño web

Para diseñar páginas web hacemos uso de un recurso tan antiguo como útil: el sistema de retículas. En este artículo comentamos cómo surgió este sistema, sus ventajas y algunos frameworks CSS para ponerlos en práctica.

sistema de reticulas para diseño web

Una retícula está formada por columnas divididas por un espacio llamado medianil (que define si el contenido se ve más compacto o más fluido). También es llamada “grilla”, grid o cuadrícula. Sirve para acomodar los elementos de nuestra página web.

960-12-col-grid

Imagen de: Sitepoint.com

Cómo surgió

Originalmente los libros se escribían a mano. Para facilitar esta enorme tarea, los monjes o escribas tenían un sistema de retículas, que utilizaban para guiarse y dar al libro una estructura consistente a lo largo de la obra, si acaso solo hacían pequeños cambios en el tamaño y color de la fuente. 

antiguo sistema de reticulas

Imagen de: Arquehistoria.com

Cuando se inventó la imprenta se mantuvo la idea de retículas, es por eso que las primeras publicaciones tienen el mismo estilo o estructura visual de las publicaciones escritas a mano.

reticula en biblia

Imagen de: Wikiwand.com

Los primeros diseñadores formalizaron el sistema de retículas y desde entonces los libros, revistas y posters se diseñan utilizando éste sistema.

Ventajas

Los sistemas de retículas constituyen una respuesta a un problema de diseño por complejo que éste sea. Algunas de sus ventajas son:

  • Toda la lectura del sitio es similar y consistente
  • El diseño se ve equilibrado
  • Agiliza el proceso de diseño (acomodar las cosas)

Cuando alguien entra a una web “lee visualmente” da un vistazo y obtiene un mensaje. Es por eso que debemos considerar: ¿La composición está bien hecha? ¿Es legible visualmente?

Sistema de retículas en Frameworks CSS

Prácticamente cualquier framework CSS utiliza algún tipo de sistema de retículas para organizar los elementos de diseño. A continuación mostramos solo algunos.

Retícula de Leaf

Trabaja con todos los navegadores modernos, smartphones y tablets. Es responsive y ampliamente configurable.

sistema de reticula leaf

Retícula de Essence

Basado en un sistema de 12 columnas, muy flexible y permite una amplia variedad de diseños.

sistema de reticula essence

Retícula de Bootstrap

Sus sistema de retícula es responsive, orientado a mobile first, basado a 12 columnas, que escala dependiendo el dispositivo o tamaño de la pantalla.

sistema de reticula bootstrap

Retícula de Semantic UI

Su sistema de retícula es muy completo y extenso, basado en un modelo de 16 columnas, permite personalizar casi cualquier aspecto de la retícula.

sistema de reticula semantic ui

Retícula de Bulma

Bulma tiene un sistema de retícula muy simple y fácil de usar, con nombre de clase sencillos y una amplia variedad en formas de implementación.

sistema de reticula de bulma

Para finalizar

Observamos que cada uno de los Frameworks CSS tiene una forma distinta de implementar su sistema de retícula. La mayoría están basados a 12 columnas, pero se pueden encontrar algunos a 16 columnas. Cualquiera de ellos nos permite colocar fácilmente los elementos que deseemos en la página web.

Un sistema de retículas para diseño web nos facilita mucho el trabajo y permite obtener resultados rápidamente.

 

 

 

¿Qué te pareció este artículo?
  • Interesante 
  • Regular 
  • No era lo que buscaba 
  • Poco informativo 
  • Excelente 
Facebooktwittergoogle_plusmail

Tu comentario

opiniones

Comments are closed