Mejora tu diseño UI utilizando retículas

Mejora tu UI con retículas - uiFromMars

Cuando empecé a diseñar aplicaciones y páginas web hace varios años me topaba siempre con el mismo problema, la inconsistencia.

A medida que iba creciendo la cantidad de pantallas y dispositivos para los que diseñaba, el proyecto iba degenerando cade vez más. Prácticamente pasaba de tener una hermosa aplicación de 3 pantallas muy bien definidas a un monstruo de 15 que cada vez se parecía menos al planteamiento inicial.

¿La solución? Utilizar retículas.

Aunque no es tan fácil como parece. Me juego lo que quieras a que más de una vez te has quedado paralizado pensando en qué retícula utilizar, qué características debe tener y cómo colocar los elementos correctamente.

Con este artículo aprenderás…

  • Qué son las grids
  • Cual es su origen
  • Por qué debes utilizarlas
  • Como implementarlas en tus proyectos (con archivo editable que podrás usar como base 😉 ).

¿Qué es son las retículas?

Desde siempre, los diseñadores hemos utilizado retículas (grid en inglés) para estructurar y jerarquizar los contenidos de una página.

Podríamos describirlas como una estructura de líneas verticales y horizontales que divide un espacio en módulos. Estos módulos se utilizan para organizar el contenido, que irá encajado y/o alineado respecto a ellos.

Sencillamente, son el esqueleto de cualquier pieza de diseño. Y es precisamente por este motivo por el que son esenciales.

Retícula en diseño impreso

 

Brevísima historia de las grids

Su origen lo encontramos en el siglo XIII, cuando Villard de Honnecourt creó un diagrama que pretendía alcanzar un “diseño armonioso”. Cogió el formato de la hoja en la que trabajaba y trazó diferentes líneas, que mezclado con la proporción áurea (vaya sorpresa, ¿verdad?) generó una retícula que permitía componer con buenos márgenes y de manera completamente proporcional cualquier diseño:

Retícula Villard de Honnecourt

Curiosamente, se mantuvo este método hasta la Primera Guerra Mundial. Y fue hasta entonces porque Suiza, país neutro en el conflicto, se convirtió en el punto de encuentro de los creativos de la época.

Allí se reunieron multitud de profesionales imprimiendo carteles y libros en los cuatro idiomas principales: francés, italiano, alemán e inglés. Esto presentaba un problema, ya que son idiomas que tienen bastantes particularidades tipográficas: fíjate por ejemplo en el alemán, con un promedio de casi 12 letras por palabra (si tienes curiosidad, puedes ver aquí el resto) es un idioma muy complicado de encajar en una retícula tan “perfecta” como la definida por Honnecourt.

El Swiss Style (Escuela Suiza) promovió la utilización de un estilo asimétrico en el que no todo debía estar fijo en una área concreta. También permitía la creación de diferentes tipos de módulos -que solían generarse mediante progresión matemática- combinados entre sí para generar disposiciones variadas.

Uno de los máximos exponentes de la escuela suiza fue Josef Muller-Brockmann, quien escribió un libro que todavía se toma como referencia:

Retículas escuela suiza

En resumen, la Escuela Suiza fue la que sentó las bases del tipo de retícula que utilizamos ahora: distintos tamaños de textos y módulos, combinados con imágenes y otros elementos, organizado en márgenes más o menos estándar.

Beneficios de utilizar retículas

Sé que todo esto está muy bien, pero… ¿qué aportan las retículas en pleno 2018?
Pues principalmente todo lo que viene a continuación:

Crean claridad y coherencia

Como te comentaba al principio del artículo, empezar un proyecto siempre es fácil, pero si hay que empezar a diseñar pantallas y pantallas, es muy fácil perder el foco y la estructura básica. Sobretodo si debes diseñar «para ayer» y no tienes apenas tiempo de asegurarte sí está todo alineado o dispuesto como debería ser.

Si utilizas la retícula desde inicio te aseguras de que todas las pantallas serán coherentes entre sí y, sobretodo, generarán sensaciones de simetría, proximidad y continuidad (si esto te ha despistado, échale un ojo a las Leyes de UX).

Una retícula ayudará a proporcionar elementos, jerarquizar y crear espacios en blanco para generar ritmo de lectura.

Por ejemplo, fíjate en Mindsparkle Mag. La retícula permite crear un diseño en el que todos los módulos se integran bien entre sí generando «bloques» de contenido que facilitan la lectura:

Mindsparkle Mag

Facilitan el trabajo de los desarrolladores

Los desarrolladores te van a querer muchísimo si usas una retícula. Tenerla como base les ayudará a poder programar la adaptación a cualquier pantalla que sea necesaria, ya que siempre sabrán donde va cada elemento, qué tamaño tiene y cuántos módulos ocupa.

Hacerles trabajar sin una retícula implica que deben estar programando “a mano” casi cualquier elemento y no pueden sistematizar componentes reutilizables, además de que les hace ir mucho más lentos.

Otorgan consistencia

Sí. Utilizar una retícula te permitirá definir elementos estándares que serán reutilizados a lo largo de la aplicación. Por ejemplo, podrás definir que el margen a izquierda y derecha es de 8pt, que el margen entre botones será de 16 y que el padding del interior será de 8, etc.

Esto hará que cada botón sea así sí o sí. No hay margen de error.

Te permiten trabajar más rápido

Si trabajas con una retícula, y en consecuencia utilizas módulos de tamaños “predeterminados”, podrás trabajar más rápido.

¿Por qué? Como ya habrás deducido leyendo el beneficio anterior, básicamente te permiten definir de una forma más eficiente y veloz cómo irá cada elemento y cómo “encajará” con el resto.

Tipografía <3 Grids

Digamos que las retículas y la tipografía van siempre cogidas de la mano. Esto es así desde que se imprimieron los primeros carteles utilizando la grid de Villard de Honnecourt y se mantuvo con la Escuela Suiza.

La tipografía utiliza la línea base, que son las líneas horizontales que cruzan la retícula de izquierda a derecha. Esta permite alinear mejor los textos, además de organizar, estructurar y dar el espaciado correcto entre bloques.

Prestando atención a la línea base conseguiremos generar ritmo entre los elementos, de manera que se percibirá como una decisión deliberada: la tipografía no ha aparecido así por qué sí y todas las cajas de texto reposan sobre una base constante.Línea base tipografía en retículas

Y no te agobies, calcularla no es tan complicado, aquí tienes una calculadora que te ayudará (¡y encima te da el CSS!).

¡Puedes romper la retícula!

No te engañes. Diseñar con retícula no implica que cada elemento va dentro de una columna y/o módulo por narices y que tengas que usar 12 o 16 columnas. El uso de una retícula te permite precisamente lo contrario, romperla libremente.

Se suele hacer para destacar un elemento o transmitir una sensación concreta. Fíjate por ejemplo en la web de Yelvy. Utiliza diferentes retículas «superpuestas», que le permiten alinear textos e imágenes libremente.. sin que se perciba como desordenado.

Yelvi - Ejemplo retícula

Facilitan el cambio de resolución

Mantener una retícula significa que será muchísimo más fácil adaptar ese diseño a cualquier tipo de pantalla, sea más grande o más pequeña que la que estés utilizando como base.

Sencillamente, donde en un tamaño se usan 4 columnas, en otro se usarán 3, o incluso una sola que ocupe todo el ancho.

Como utilizar las retículas en diseño web y app

Todo esto está muy bien si hablamos de diseño impreso o de los primeros diseños de páginas web que hacíamos hace unos años utilizando la maravillosa retícula de 960px.

El problema aquí es que las pantallas de escritorio son cada vez más grandes y panorámicas y las de móvil, cada vez tienen tamaños más variopintos (Apple y Android no quieren hacernos la vida más fácil) y a veces incluso añaden elementos que hacen que no sean rectangulares (¡hola Notch de iPhone X!).

Es muy probable que esto te lleve a la maravillosa pregunta de: ¿con qué pantalla empiezo y cómo deben ser la grid y los elementos? 

Mobile… y pantalla “pequeña”

Puede parecer de cajón, pero más a menudo de lo que me gustaría me encuentro con diseñadores que empiezan a diseñar en escritorio y después “van hacia abajo”. Mala idea.

Empezar a diseñar para la pantalla pequeña (un iPhone 8 sería el ideal) nos hará escoger mejor qué contenidos añadimos y cómo lo hacemos. Si empezamos por la pantalla más grande nos empezaremos a emocionar creando composiciones y estructuras que después no habrá quien sepa adaptar bien a móvil.

Características de la retícula

Aquí está el quid de la cuestión. Estas son las dos características principales que debes considerar:

Sigue el sistema de 8 puntos

Lo veremos en profundidad en un artículo que publicaré pronto, pero en síntesis, se trata de tomar la cifra de 8 y utilizarla para definir el tamaño de todos los elementos, siempre utilizando múltiples y divisibles.

8pt grid

Utiliza los estándares

Si no quieres crear un conflicto entre diseñadores y desarrolladores, lo ideal es que te ciñas a los estándares definidos por Apple con su Human Interface Guidelines o Android con el Material Design. ¿Para qué reinventar la rueda?

De ellos, fíjate en concreto en cómo componen los layouts. Soy consciente de que esto se centra más en aplicaciones, pero es fácilmente aplicable a escritorio si redistribuyes los elementos en un layout más ancho y ampliando los espacios.

No te cases con ninguna retícula

Con este punto me refiero a que utilices la retícula que se adapte a tu proyecto y no al revés. En infinidad de ocasiones he perdido horas tratando de encajar mi idea en una retícula convencional (la de 960 pixeles, por poner un ejemplo) para después darme cuenta de que quizás, mi diseño necesita 10 columnas en lugar de 12, con un ancho distinto y un gutter (espaciado entre columnas) diferente.

Solo asegúrate de que esa retícula es constante en todo tu diseño… más que nada, para no volver loco al desarrollador.

Composición en la retícula

Con las bases ya definidas, es hora de empezar a ver cómo alinear y colocar los distintos elementos que tendrá tu diseño.

Fíjate bien en estos ejemplos y en cómo varía todo si uso bien la grid o si por el contrario, hago un freestyle inventándome proporciones, tamaños, distancias y alineaciones:

Alineaciones elementos retícula

Obviamente este ejemplo es forzado, pero te sorprendería la de veces que por querer ir rápido dejamos de prestar atención a aquello que es más importante.

Apuntes finales

Como te habrás dado cuenta, las retículas son esenciales para afrontar cualquier diseño. Es básico ser consciente de ello, pero también es importante que veas que no hay que entenderlas como grilletes que nos obligan a estandarizar nuestro diseño.

Sencillamente son un elemento que hay que usar como base, pero no seguir a rajatabla siempre.

Te recomiendo este libro, Sistemas de retículas‘. En él se explica todo lo que necesitas para dominar correctamente las retículas: cómo componerlas, cómo distribuir cajas de texto e imágenes, etc.

Descarga la retícula en Sketch

Como te he prometido al inicio del artículo, aquí tienes el archivo editable en Sketch que podrás utilizar en todos los proyectos.

Contiene tres retículas, para escritorio, tablet y móvil:

Haz clic aquí para descargarte el archivo.