Diseño masonry

Masonry dispone los elementos como una cuadrícula de tarjetas de altura variable, rellenando el espacio como un tablón de anuncios. Muestra más del menú de un vistazo que cualquier otro diseño basado en fotografías.

Cómo se ve

• Elementos dispuestos en columnas, cada tarjeta dimensionada según su contenido e imagen.
• Los encabezados de categoría separan las secciones.
• Los comensales se desplazan verticalmente por todo el menú.
• Nombre, precio e iconos de alérgenos en cada tarjeta.

Cuándo funciona

• Menús con muchas fotografías donde cada elemento tiene una imagen.
• Menús de longitud media, aproximadamente entre quince y cincuenta elementos.
• Menús de postres, cócteles, tapas y opciones para compartir, donde los comensales exploran en lugar de buscar.
• Sitios que quieren mostrar gran parte del menú rápidamente.

Cuándo no funciona

• Menús con fotografía incompleta. Los huecos en una cuadrícula son el fallo más visible en cualquier diseño.
• Listas muy largas, donde una cuadrícula se convierte en una pared.
• Cartas de vinos y licores, que se escanean, no se exploran.
• Precios multiformato; cuatro líneas de precio en una tarjeta la desequilibran hacia arriba.

Fotografía

La cuadrícula es tan buena como su imagen más débil:

• cada elemento necesita una foto;
• un estilo coherente importa más que la calidad de una foto concreta;
• aquí se toleran orientaciones mezcladas — la cuadrícula absorbe alturas variables —, pero los estilos mezclados no;
• evita una imagen mucho más alta que el resto, que saca a una columna de su ritmo.

Descripciones

Mantenlas cortas y, sobre todo, de longitud parecida. La altura de la tarjeta sigue al contenido, así que un plato con un párrafo y sus vecinos con una línea produce una cuadrícula irregular.

Usa la descripción larga para lo sustancial; se abre a demanda en lugar de alargar la tarjeta.

Densidad de la cuadrícula en un móvil

Una cuadrícula masonry se convierte en una o dos columnas en un móvil. Comprueba que:

• las tarjetas siguen siendo legibles a ese ancho;
• el precio no se parte de forma extraña;
• los iconos de alérgenos se mantienen en una línea;
• el desplazamiento vertical no se vuelve interminable — aquí es donde un menú de cincuenta elementos se convierte en una pared.

Ordenación

Como los comensales captan varias tarjetas a la vez, la ordenación importa algo menos que en una lista, pero la primera fila de cada sección sigue siendo lo que más ve la gente. Coloca los elementos que quieres que se pidan al principio de cada categoría.

Compruébalo en un móvil

• [ ] Cada elemento tiene una imagen; no se ven marcadores de posición.
• [ ] Las tarjetas son legibles a una o dos columnas.
• [ ] Las alturas de las tarjetas son razonablemente uniformes.
• [ ] Los precios son visibles sin abrir el elemento.
• [ ] Los encabezados de categoría son claros mientras la cuadrícula se desplaza.
• [ ] Los iconos de alérgenos son legibles a su tamaño real.
• [ ] La página carga lo bastante rápido con una conexión de móvil.
• [ ] Desplazarse por todo el menú no resulta excesivo.