Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Grids
Webdesign

Una Introducción Comprensible a las Retículas en el Diseño Web

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Si nunca te has manchado con el empleo de retículas en tus diseños, este artículo está escrito para ti. En él, aprenderás la jerga básica, la teoría, y verás a través de ejemplos de sitios web genuinos cómo se usan las retículas en el mundo real.

Apartados

En esta guía, trataremos de bastantes cosas, entre las que se incluyen:

  • ¿Retículas?
  • Terminología
  • La Regla de los Tercios
  • La Retícula de 12 Unidades
  • Énfasis
  • Limitaciones
  • Mapa Mental

¿Retículas?

Una retícula puede crear una estructura básica, un esqueleto para tu diseño. Consiste en líneas "invisibles" sobre las que ubicar los elementos de tu diseño. Haciéndolo así consigues vincularlos a un "sistema" global y reforzar tu composición—de forma racional.

BBC

Las retículas te ayudan a alcanzar una alineación eficaz y consistente con poco esfuerzo. "Dar alas" y confiar en tu intuición no funciona tan bien. Si se emplean adecuadamente, tus diseños tendrán un aspecto cuidado, organizado, claro y estructuralmente sólido.

Una buena alineación, como en casi todo diseño, debería pasar prácticamente inadvertida para tus usuarios. Menos es más. Si eres demasiado ingenioso corres el riesgo de distraer al usuario de su objetivo principal que consiste el la búsqueda de contenido específico y su rápida digestión. Y esto último es lo que debería ser el centro de tu atención—no el alardear de cuan ingenioso puedas llegar a ser con tus habilidades como diseñador. Sería incluso peor intentar reinventar la rueda para probar algo. La falta de alineación siempre es muy evidente y crea una impresión de descuido. Esto podría muy bien resultar en la falta de confianza por parte de los usuarios que consumen tu diseño—a menos que la falta de alineación sea algo buscado con un propósito creativo concreto.

Terminología

Unidad

Las unidades son los bloques de construcción básicos de toda retícula. Múltiples unidades forman el conjunto de la retícula. En el ejemplo inferior de BBC puedes ver una retícula de 12 unidades. Cada barra púrpura representa una unidad.

Medianil

Las barras amarillas de la ilustración representan los medianiles que separan cada par de unidades. Los medianiles son una forma de micro espacios en blanco que proporcionan a la retícula algo de espacio para respirar.

Columnas

Ahora se va poniendo más interesante. Múltiples unidades y medianiles juntos forman columnas que son los contenedores reales en los que ubicar el contenido—estratégicamente. Podría no parecerlo inicialmente, pero trabajar con estas restricciones puede ser liberador. Las restricciones pueden hacer que las decisiones sobre dónde colocar el contenido sean mucho más fáciles.

En el ejemplo de abajo, puedes ver tres columnas diferentes funcionamiento. Cada columna está dimensionada para un tipo de contenido o para crear énfasis.

Como ves, hay muchas opciones para combinar distintas formas de contenido y elementos de diseño. Lo que también puedes observar es que estas columnas en conjunto forman una estructura sólida que transmite consistencia y orden a través de la alineación. No es un mal precio a pagar por la configuración de unas pocas líneas y por algunas limitaciones, ¿no?

Sectores

Las columnas de contenido forman sectores que son divisiones horizontales de las páginas. No es una mala idea esforzarse por conseguir sectores de igual altura desde la parte inferior de tus páginas. En la práctica esto no siempre se consigue con facilidad. Si tus sectores acaban con la misma altura y esto funciona en tus diseños, genial, si no, avanza y realiza cualquier otra tarea pendiente.

La Regla de los Tercios

La "regla de los tercios" usa una mini retícula e implica que cuando colocas contenido sobre ciertas líneas que dividen el contenido en tercios, el resultado será más atractivo para el ojo humano. Este es un enfoque muy usado en tipografía, por ejemplo. Aunque se trata de un buen punto de inicio y suele dar los resultados deseados, te sugiero que te lo tomes como una aproximación, no es necesario ser demasiado exactos. 

Cuando la gente habla sobre intersecciones mágicas" las cuales se supone que ayudan a colocar los elementos de diseño, te sugiero que te tomes un respiro y consideres el potencial de que sea un bluf. Es fácil acudir en busca de su genial auxilio, especialmente si la "regla" no es difícil seguir, pero nada de esto parece tener un sentido matemático o biológico—y definitivamente no es mágico.

Y no te olvides que no todos percibimos el mundo de la misma manera. Todos somos diferentes. No somos máquinas que se adhieren a precisos puntos de vistra matemáticos cuando observamos el mundo. Echa un vistazo a Reddit por ejemplo. ¿Crees que se preocupan de las intersecciones mágicas?

Sí, la regla de los tercios es una buena guía—o al menos lo puede ser—cuando se adapta y "alinea" con la imagen, diseño o lo que sea, pero no te la tomes demasiado en serio. Rompe las reglas cuando tenga sentido hacerlo. Haz lo que te parezca correcto y en tu trabajo de diseño, sigue tu instinto dentro de las líneas y técnicas que has aprendido. "Nada es cierto, todo está permitido" en el diseño—por citar a Nietzsche fuera de contexto. Podríamos debatir filosóficamente sobre el tema hasta la muerte—sería legítimo, pero en diseño, esto representa una guía firme para explorar tu creatividad sin restricciones "mágicas".

¡Vuélvete loco, rompe las rerglas, diviértete si tienes suerte, encuentra nuevos límites!

¿Proporciones divinas?

Aunque estamos en la esfera mágica de los asuntos del diseño, déjame despotricar sobre algo relacionado: la gente ha creído durante mucho tiempo que usando la proporción "divina" del golden ratio daría como resultado cosas especiales, divinas y atractivas al ojo humano. Se han realizado experimentos que cuestionan estas modernas asunciones con buenos argumentos. 

Vitruvian Man
Hombre de Vitruvio de Leonardo da Vinci

El veredicto final todavía está fuera de esta lejos de solucionarse creo—y seguirá así por mucho tiempo—pero nada nos debería impedir mantener la mente abierta como para no cuestionar estas viejas asunciones. Realmente deberíamos ir más allá del pensamiento mágico. Durante un tiempo para mí tuvo sentido que el "promedio de oro" podría ser atractivo para nosotros los humanos ya que estamos rodeados de él en la naturaleza. Pero de nuevo, sería de agradecer disponer de una evidencia convincente. Quizá sí, quizá no, pero esto no es algo que quiera dar por sentado y sobre lo que construir.

La Retícula de Doce Unidades

De vuelta a aguas más pragmáticas. Me gustaría hablar sobre una retícula muy versátil e iniciarte con algo concreto que creará un buen primer sistema con el que construir tus diseños. La unidad de doce será tu aliada.

Etsy

¿Por qué son las doce unidades tan útiles? Para los principiantes, esto se debe a que se pueden adaptar con facilidad a tres, cuatro y seis columnas, lo cual es suficientemente flexible para manejar todo tipo de contenido con bastante facilidad.  Y destaca sobre todo esto, el que puedas hacerlas simétricas o asimétricas—lo que te ofrece muchas opciones tanto para jugar sobre seguro como para crear diseños más dinámicos que van más allá de la simple simetría.

Veamos un par de maquetaciones de página que usan la flexibilidad que esta retícula nos ofrece. 

Retícula de Cuatro Columnas

Los principales beneficios de una retícula de cuatro columnas es su simplicidad, su equilibrio y además que es bastante formal. Cada columna aquí ocupa tres unidades. El punto negativo es que es muy simétrica, lo que la puede convertir en algo aburrida.

Con frecuencia, necesitas una sección principal para el contenido importante a destacar y una columna auxiliar lateral para elementos secundarios. En el primer ejemplo de abajo, puedes ver que la primera columna se usa para la imagen de marca, las columnas del medio son para el contenido principal, mientras que la última necesita destacar menos.

form
Revista sobre Diseño de Harvard
Etsy
Wallpaper
marie claire

Retícula de Tres Columnas

Con esta retícula, cada columna ocupa el espacio de cuatro unidades. Esta variación es un poco más compleja ya que es una retícula asimétrica y necesitarás ser mas astuto para encontrar un balance en tus diseños. Los diseños asimétricos como éste son con frecuencia considerados más activos y necesitan mayor habilidad. ¡Esto podría cuestionarse por supuesto!

Wallpaper
Kickstarter
Kickstarter
Wallpaper
WIRED

Retícula de Seis Columnas

En este ejemplo cada columna ocupa dos unidades, haciendo las cosas un poco más complicadas que la retícula de tres columnas. Divide cada columna de la retícula de tres en dos columnas. La retícula de seis columnas te proporciona más opciones y oportunidades para cuidar los pequeños detalles. Si estás trabajando en un sitio rico en contenido y necesita ubicar mucha información, una retícula de seis columnas podría ser un inteligente punto de inicio para experimentar.  Dado que es una retícula avanzada, no la recomendaría para como primer rodeo para empezar con las retículas.

Wallpaper
The New York Times

Combinaciones

También puedes combinar retículas en tus diseños, y este el motivo por el cual la retícula de doce unidades es tan útil. Te permite de forma sencilla combinar bloques de tres, cuatro y seis columnas perfectamente.

Etsy
BBC
Etsy
Etsy
BBC
Etsy
Etsy
Etsy

Énfasis

Las maquetaciones de página equilibradas y simples son con frecuencia más agradables que las complicadas. Por otra parte tienes que tener cuidado de no buscar en exceso la seguridad de forma que acabes con un diseño de apariencia aburrida. Para conseguir énfasis, puedes romper la retícula o destacar ciertos elementos en el diseño jugando con diferentes tamaños—combinando múltiples columnas, por ejemplo. Esto puede crear interés visual y establecer jerarquías entre los principales elementos de tu diseño. 

Etsy

Romper la retícula para crear énfasis puede tanto mejorar de forma masiva tu diseño destacando piezas esenciales, como dar un aspecto, bueno, desastroso. Wallpaper realizó un gran trabajo rompiendo la maquetación en cuatro columnas y enfatizando con energicamente el vídeo que querían que vieses.  

Wallpaper
form
Wallpaper

Pero necesitas tener cuidado, romper el ritmo de tu retícula con demasiada frecuencia da como resultado una maquetación que parece quebrar o destacar demasiadas partes con lo cual al final nada resalta.

Limitaciones

Una cuestión que surge con frecuencia es ¿cuándo usar un diseño de retícula? ¡Siempre! Siempre es una buena decisión utilizar una retícula porque ayudan a equilibrar, a establecer jerarquías, la alineación y a mantener la consistencia.

Después siempre está el argumento de que las retículas constriñen tu trabajo. Pero esto es algo bueno ya que una retícula realmente facilita tu creatividad y te guía en tus decisiones de una forma constructiva. Este tipo de restricciones pueden constituir un buen punto para empezar con tu trabajo. Ya que cuando tienes constantes, como el tamaño de los anuncios que te proporciona tu cliente, tienes un punto inicial sobre el que construir tus diseños.   El tamaño de tu retícula puede y debería prestar atención a dichas limitaciones.

En el ejemplo inferior de The Wall Street Journal, puedes ver el tamaño de un anuncio, marcado en verde, que resulta en una decisión de diseño creada a partir de una retícula con esta dimensión en mente.

Mapa Mental

Si tienes éxito, tu retícula te ayudará en la construcción de un modelo mental de tu sitio y sus páginas individuales. Esto también implica que la estructuras de tus páginas no deberían ser completamente diferentes unas de otras—un denominador común que se ajuste a las necesidades de cada página debería formar parte de tu plan.

Veamos otra vez algunos ejemplos de como resuelve Etsy exitosamente esto. Sólo por ésta vez, centrémonos en cómo su retícula apoya las necesidades de diferentes contenidos y cómo los combina a través de las páginas. En mi opinión, lo resolvieron realmente bien manteniendo una cierta consistencia que crea una impresión de unidad, enlazando las páginas claridad. En consecuencia logran, guiar al usuario a través del contenido y éste sabe con antelación qué esperar. El mapa mental de Etsy es memorable y no contiene sorpresas que puedan hacer descarrilar la experiencia del usuario de la estructura.

Han creado un buen ritmo para sus páginas y sus retículas respiran elegancia gracias a la simplicidad.

Pensamientos Finales

En resumen, alinear contenido sistemáticamente es la clave a destacar en todo este tema. Nada es más efectivo para entrelazar varias formas de contenido que las líneas consistentes de una retícula. Crea un eje sólido que los usuarios pueden seguir para orientarse y para guiar sus ojos y acciones a modo de anclas visuales. Esto normalmente resulta en una relación más segura que aglutina tu trabajo y crea cohesión. ¡Mantén la simplicidad! Tus diseños serán más fáciles de mantener y sobre los que construir.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.