🧮 Empieza montando la estructura (Grid, Layout, retícula, columnas…)
Llámalo como quieras, pero lo primero que debes tener en cuenta al empezar a diseñar es la estructura, los márgenes y las columnas. Olvida el miedo al blanco y empieza creando la base con la que vas a diseñar, ya que serán los pilares de tu universo.
Para mí el layout tiene algo vital en todo el diseño, por varios motivos:
- Ayuda a unificar todas las pantallas y la experiencia general [el diseño va a respirar un mismo aire en todas las pantallas, y no habrá pantallas que descuadren del resto]
- Facilita la adaptación del diseño responsive [si seguimos una retícula será más fácil adaptar el diseño entre dispositivos y resoluciones]
- Agiliza el trabajo de diseño, ya que se normalizan las decisiones [serás mucho más eficiente, sin tener que medir todo para unificarlo]
- Agiliza el trabajo de desarrollo, y también se normalizan las decisiones [SÍ. Podemos salirnos de la retícula y romper un poco los moldes. Pero sinceramente, no te pases demasiado de “artista” y te llevarás mejor con el equipo técnico que va a desarrollar tu diseño]
Generalmente, nos adaptamos al sistema que utilicen en el proyecto o intentamos mejorarlo. A continuación comentaré algunos conceptos y sistemas que yo utilizo y después mostraré cómo hacerlo en la práctica.
¡ADVERTENCIA! El uso compulsivo puede generar cierto TOC y otros trastornos derivados de la creación al píxel de todos tus diseños. Use con moderación y sin perder la visión general.
Diferentes layouts
Habrá muchas otras maneras de trabajar, pero voy a contar un poco lo que conozco y con lo que me siento más cómoda a la hora de trabajar. Cada apartado daría para hablar mucho más, pero intentaré ir al grano.
Responsive layout grid — Google Material Design
Material es un sistema de diseño creado por Google para crear experiencias digitales de calidad. Está pensado para Android, iOS, Flutter y web.
Me encanta este layout, porque está pensado para todos los dispositivos (responsive), todos los sistemas operativos y es muy consistente. Y además tiene una chuleta por si tienes dudas (ver tabla).
Por un lado se establece el número de columnas, la idea general sería, dispositivo móvil a 4 , tablet a 8 y web a 12. Y por otro, se establece el tamaño de los espacios y márgenes (gutter), basado en múltiplos de 8 (16, 24).
Grid System Layout — Bootstrap
Bootstrap es una biblioteca de código abierto para la creación rápida de sitios web responsive y otras herramientas para el front-end.
Se basa en un sistema de 12 columnas y está creado con componentes flexibles pensando en mobile-first. Es muy versátil.
Grid 8pt System
Bueno, y aquí el ojo del huracán. Material o Bootstrap no son suficientes para conseguir una “armonía visual”.
Los componentes pueden estar bien diseñados individualmente, pero además deben verse bien en conjunto. Como sería imposible estar midiendo y calculando todo el rato, se necesita un sistema para definir relaciones de espaciado entre los elementos y conseguir una coherencia.
La idea es que todo esté basado en múltiplos de 8, para que tenga una coherencia y equilibrio visuales. También es muy utilizado el número 4 y sus múltiplos y el número 6. El número 8 es habitual por el simple hecho de que es un número en el que se pueden dividir la mayoría de pantallas. Sin embargo, por ejemplo el iPhone 8 son 375px. No pierdas los nervios, faltará 1px, pero no pasa nada.
Dejo dos links para poder ampliar con más información: 8-point grid y Space, grids and layouts.
Ejemplo práctico
Ahora vamos a ver cómo meter estos valores en los programas. Yo trabajo con los valores del sistema de Google y siempre siguiendo los múltiplos del 8.
Revisión de conceptos (Sketch)
View / Canvas / Layout settings
- Total width: Es el ancho total del conjunto de las columnas. Lo que hago es restar los márgenes al ancho del dispositivo.
- Offset: Es el espacio exterior, siempre lo dejo en blanco (luego lo calcula).
- Number of columns: Pues eso, el número de columnas: 4, 8 ó12.
- Gutter on outside: Siempre lo descarto.
- Gutter width: El ancho de los espacios: 16 ó 24(SIEMPRE MÚLTIPLO 8).
- Column width: Es el ancho de la columna, siempre lo dejo automático (NO SUELE SER NUNCA MÚLTIPLO DE 8).
*Rows → Serían las filas horizontales. Yo no las utilizo demasiado, pero van bien para medir el espacio del scroll, y calcular bien cómo colocamos el contenido y los elementos.
*Grid → También tiene un modo de cuadrícula, pero no lo uso mucho porque me satura un poco a nivel visual. Podemos medir de forma rápido usando la tecla Alt/Option del mac, sin tener 20 mil líneas en pantalla. Opinión personal total, a veces puede resultar muy útil. View / Canvas / Grid settings
Revisión de conceptos (Figma)
Design / Layout Grid / Columns
- Count: Es el número de columnas: 4, 8 ó 12.
- Color: El color que queramos darle a las columnas.
- Type: Es el tipo, yo siempre uso Stretch o Center (tiene también a la derecha o a la izquierda).
- Width: Es el ancho de la columna, será automático.
- Margin: Es el espacio exterior (16 ó 24).
- Gutter: Es el espaciado entre las columnas (16 ó 24).
*Rows → Serían las filas horizontales. Se pueden ir añadiendo los sistemas que queramos a nivel capas.
*Grid → Sería la cuadrícula. Y simplemente se indica el tamaño.
Cualquier móvil en Figma / iPhone 8 y iPhone 11 en Sketch
Gana Figma en cuanto a la creación del layout. Más sencillo y directo. En Sketch (iPhone 8 por ejemplo) tienes que tener en cuenta:
- Total width: 375–32px. Los espacios que nos dice Google son 16, como dejamos esa cantidad por cada lateral (márgenes exterior), restamos 32. [Recuerda que estos programas admiten cálculos en sus campos de form]
- Number of columns: 4 — Gutter width: 16 — Column width:auto
Desktop a pantalla completa
Es el claro ejemplo de diseño full width. En este caso tendremos que calcular el espacio del desktop. Yo trabajo generalmente a 1440x810px.
Desktop en un contenedor
Y a partir de aquí, creo que no hay nada escrito a fuego. Cada empresa trabaja con su marco predeterminado. No es lo mismo el ancho de este contenedor en la web de Medium (bastante estrecho para poder leer cómodamente) que el ancho en la web de Wikipedia (con más divisiones internas y columnas) o el ancho de cualquier e-commerce. También tener en cuenta que el navbar y footer a veces pueden tener un ancho diferente del contenedor main.
Empieza a usar el layout y no podrás parar
Si aún no te he convencido, quizás seas de las personas que piensa que esto limita tu creatividad, o que pierdes mucho tiempo. Hazme caso, a la larga son todo ventajas; no sólo a la hora de diseñar, sino también en la parte de desarrollo del proyecto.
Y tú, ¿cómo empiezas a diseñar? ¿Eres más de usar las columnas o usas la cuadrícula?
👾 Freak out!🤖
