Diseño de cuadrículas Bento: una guía de 2026 sobre diseños, espaciado y cuándo no utilizarlas.

Una cuadrícula bento es una sección compuesta por celdas de diferentes tamaños, cada una con una pieza de contenido independiente, dispuestas de tal manera que el tamaño de las celdas determina la importancia del contenido. La celda se convierte en la unidad de significado, y el ojo percibe la importancia a partir del tamaño antes de leer una palabra.

La mayoría de las cuadrículas bento en la web en 2026 son meramente decorativas. Las celdas tienen el mismo tamaño, el contenido se adaptó posteriormente para ajustarse a ellas y el diseño se asemeja a un tablero de tarjetas. Las buenas son todo lo contrario. El tamaño de las celdas se justifica por el contenido que contienen, los márgenes y el espaciado mantienen el ritmo, y el colapso adaptable conserva la legibilidad incluso en dispositivos móviles. Esta guía trata sobre anatomía, lógica de tamaño, espaciado, ajuste de contenido, diseño responsivo, siete desgloses (Apple, Linear, Vercel, Stripe, Arc, Apple Vision Pro, Figma) y los casos en los que el diseño bento perjudica la página.

Diseño de cuadrícula bento: definición práctica

Un rejilla bento es una composición deliberada donde cada celda contiene un único elemento de contenido y su tamaño se determina según su contenido.

Tres propiedades lo diferencian de una cuadrícula de tarjetas. Las celdas tienen proporciones específicas. Las celdas contienen diferentes tipos de contenido, no la misma plantilla repetida. El diseño se percibe como una composición única. Si se elimina cualquiera de estas tres propiedades, se obtiene un muro de tarjetas.

Este patrón se popularizó porque resolvía un problema real. Para 2023, la fila de características, compuesta por tres o cuatro columnas de tarjetas idénticas con iconos, títulos y párrafos, se había convertido en el diseño más básico de la web. Bento ofreció a los diseñadores una forma de presentar múltiples características sin que la sección en sí misma pareciera una plantilla.

Anatomía de una cuadrícula Bento

Cada diseño Bento se compone de cuatro partes: la celda de anclaje, las celdas de apoyo, el espacio entre celdas y el margen circundante. Si alguna de ellas falla, la cuadrícula se desmorona.

La celda de anclaje es la más grande, generalmente ubicada a la izquierda o arriba a la izquierda, y contiene el contenido más importante. Se ubica primero y enmarca el resto. Un Bento sin un anclaje claro se lee como una fila de tarjetas plana. Las celdas de apoyo completan la composición con contenido secundario y, en la primera lectura, se remiten al anclaje. El espacio entre celdas es estructural, indicando visualmente que se trata de celdas separadas de una misma composición. El margen circundante es el cuadro delimitador que permite que la sección se lea como una unidad independiente.

El anclaje establece la prioridad. Las celdas de soporte aportan detalles. El ritmo del espacio entre celdas separa las unidades sin romper la composición. El margen circundante enmarca el conjunto.

El tamaño de las celdas se basa en el contenido, no en la decoración

El mayor error que cometen los equipos es ajustar el tamaño de las celdas para que llenen el lienzo en lugar de ajustarlas a su contenido.

Una celda con un solo número y una línea de texto no tiene por qué tener el mismo tamaño que una con una captura de pantalla y tres frases. Si se fuerzan a ser iguales, una se ve vacía y la otra, apretada. La cuadrícula decora, no comunica.

Invierte el orden. Decide qué contenido pertenece a la sección, elige el elemento principal, elige los elementos secundarios y, a continuación, ajusta el tamaño de cada celda para que el contenido quepa con el espacio adecuado, ni más ni menos. Cada celda debe tener entre un veinte y un treinta por ciento de espacio en blanco interior. Menos espacio da sensación de estar recargada. Más espacio da sensación de estar vacía.

Las cuadrículas más limpias utilizan proporciones. El elemento principal tiene aproximadamente el doble de área que la celda de soporte más grande. Esa proporción refleja el jerarquía visual que usa el resto de la página, comprimido en la sección.

La celda de anclaje dirige la lectura

Cada bento tiene un anclaje, y la mayoría de las cuadrículas débiles no se comprometen con uno. El anclaje tiene una clara ventaja en tamaño, idealmente el doble del área de la celda siguiente, y también en densidad de contenido. El anclaje es donde se encuentra el texto más impactante, la imagen más importante o la interacción de mayor relevancia. Si el anclaje es una ilustración genérica mientras que una celda de apoyo contiene el titular, la ruta de lectura se interrumpe.

La página de producto para Mac de Apple utiliza como anclaje una fotografía de producto compacta y un titular llamativo. Linear hace lo contrario en la página de características: un anclaje con mucho texto, un titular compacto y un fragmento de interfaz de usuario, con celdas de apoyo más dispersas. El principio es el mismo, pero la estructura del contenido es diferente.

El error: dos anclajes. Los diseñadores dividen la página en un panel izquierdo y un panel derecho de igual área y lo llaman bento. Se trata de un héroe de dos columnas. En el momento en que la sección tiene dos argumentos iguales para la primera lectura, la cuadrícula Bento deja de funcionar.

Reglas de espaciado que evitan que la cuadrícula se colapse

Las cuadrículas Bento suelen fallar más por el espaciado que por el tamaño, ya que el margen interior y el relleno interno son dos funciones distintas y la mayoría de los equipos las tratan como si fueran una sola.

El margen interior indica dónde termina una celda y comienza la siguiente. Si es demasiado estrecho, se forma un bloque. Si es demasiado amplio, se produce una desconexión. Utilice un margen interior de aproximadamente la mitad del relleno interno. El relleno interno indica cuánto espacio tiene el contenido para respirar. El margen circundante es la tercera dimensión, un espacio vertical de al menos 1,5 veces el margen interior para que la sección se lea como una unidad discreta.

Un error común: los equipos utilizan el mismo valor para los tres. La cuadrícula pierde ritmo. Diferenciar los tres, aunque sea ligeramente, lo restablece.

Reglas de ajuste de contenido: qué debe contener una celda

Una celda bento es tan buena como el contenido que contiene. La mayoría de las celdas fallan porque el contenido se forzó en lugar de que la celda se adaptara a él.

Una celda bento es un contenedor de una sola idea. Una afirmación, una característica, un número, una captura de pantalla, un testimonio. Buen contenido: una sola característica con un titular de una línea y una vista previa de la interfaz de usuario, una sola métrica con su pie de foto, un solo testimonio con su atribución. Mal contenido: un párrafo extenso, una comparación entre columnas, un proceso de varios pasos, una tabla de precios con filas alineadas.

La regla de decisión: si el contenido de la celda se puede extraer e insertar en cualquier otro párrafo sin perder significado, la celda cumple su función. Si necesita contexto adicional, la celda bento lo está fragmentando.

Comportamiento adaptable: la prueba de fuego

Un bento que se ve genial a 1440 y se rompe a 768 es un póster de escritorio, no un diseño, y el colapso adaptable es donde la mayoría de las cuadrículas de producción fallan silenciosamente.

El desafío radica en que las celdas no son uniformes. Una fila destacada se colapsa limpiamente. Un bento debe decidir qué hacer con celdas de diferentes anchos y alturas. Si las reglas no se aplican correctamente, en dispositivos móviles se ve como un montón de cajas desiguales.

La estrategia: Definir primero el escritorio. En tabletas (de 768 a 1024), colapsar en dos columnas con el ancla abarcando ambas. En dispositivos móviles (por debajo de 768), una sola columna, cada celda de ancho completo y apilada, ancla primero, apoyando las celdas en orden de prioridad. Ajustar el relleno interno y el margen en cada punto de ruptura para que las celdas se vean proporcionales, no simplemente encogidas.

El error a evitar: celdas con contenido que no se conserva al cambiar el ancho. Una infografía horizontal en una celda de escritorio se vuelve ilegible en una columna móvil. Planifique el contenido para ambos formatos, no solo para uno.

Siete páginas de producto reales, anotadas

El marco solo importa si se mantiene en funcionamiento con las páginas publicadas. Actualmente, hay siete implementaciones de Bento en producción. Ninguna es perfecta. Todas superan el estándar de las páginas de inicio de SaaS.

Apple, Bento como plataforma de producto

Las páginas de producto de Apple utilizan Bento como plataforma interactiva con desplazamiento. Las celdas de anclaje son enormes, a menudo una sola fotografía del producto a escala casi completa, con proporciones tres o cuatro veces mayores que las de las celdas de apoyo. Espacio generoso. Cada celda contiene una sola característica, nunca dos. El visitante abandona la página tras haberla leído en el orden que Apple deseaba. El inconveniente: las animaciones con mucho movimiento pueden degradarse en conexiones lentas y afectar negativamente la clasificación.

Linear, Bento como densidad de desarrollo

Linear presenta una de las cuadrículas Bento más densas de la web y mantiene su legibilidad mediante una tipografía implacable y un ancla que siempre destaca. El ancla se sitúa a la izquierda con el doble de área que la celda de soporte más grande, dos columnas de tres celdas más pequeñas a la derecha, márgenes ajustados y un relleno interior más amplio. Cada celda contiene una función con un título conciso y un fragmento de interfaz de usuario. El sistema tipográfico es fundamental. Una tipografía más débil colapsaría el patrón.

Vercel, Bento como coreografía de movimiento

Vercel utiliza Bento como escenario para el movimiento. Cada celda recompensa el desplazamiento con una pequeña revelación, y la cuadrícula narra una historia de desarrollo y lanzamiento. Un ancla clara a 1,5x con entre cuatro y seis celdas de soporte. Juntas, construyen una narrativa sobre el flujo de trabajo del desarrollador. El inconveniente: el movimiento puede resultar más impactante para los usuarios con preferencias de movimiento reducidas.

Stripe, el bento como sobriedad

Las secciones bento de Stripe son las más discretas de la lista, y precisamente por eso funcionan con un público que desconfía de los diseños llamativos. Un elemento principal más dos o tres celdas de apoyo. Proporciones claras pero no exageradas. Espaciado editorial. Cada celda contiene una afirmación con un ejemplo de código conciso o una sola ilustración. El patrón transmite confianza sin adornos.

¿Quieres un bento que comprima la página en lugar de decorarla? Contratar Brainy. UXBrainy incluye diseño de página de destino con diseños bento diseñados celda por celda. AppBrainy diseña interfaces de usuario de productos con la misma disciplina.

Arc, el bento como personalidad

Arc utiliza el bento como vehículo para la personalidad de la marca. Las celdas cambian de forma, color y movimiento para expresar el carácter lúdico del producto. Esquinas redondeadas, degradados, alturas variadas, proporciones flexibles. Arc rompe las reglas y funciona porque la marca ha obtenido permiso mediante el posicionamiento, el mismo instinto que impulsa a diseño web brutalista: permiso ganado, no prestado.

Apple Vision Pro, bento como vista previa espacial

Vision Pro es el bento más ambicioso de la web, ya que debe sugerir un producto tridimensional mediante celdas bidimensionales. Las celdas de anclaje utilizan vídeo para implicar profundidad espacial. Proporciones dramáticas, espaciado cinematográfico. El contenido de vídeo realiza el trabajo espacial y el tamaño de la celda encuadra cada momento. Es el argumento más sólido de que el contenido adecuado puede elevar el diseño más allá de lo que la forma de la celda por sí sola puede lograr.

Figma, bento como densidad de características

Figma maneja más características paralelas que cualquier otro y sobrevive a la densidad porque el sistema tipográfico y el ritmo de la celda soportan la carga. Seis o siete celdas por sección, un ancla clara, proporciones comprimidas, márgenes ajustados y un generoso relleno interno. Cada celda contiene una característica con un fragmento de interfaz de usuario y un título conciso. El enlace sistema tipográfico de Figma es lo suficientemente robusto como para mantener su posición en muchas celdas pequeñas. Un sistema tipográfico menos potente perdería esta posición a medida que aumenta el número de celdas.

Cuándo no usar una cuadrícula bento

El diseño bento no es adecuado para ningún contenido que deba leerse en orden, compararse en detalle o escanearse para tomar una decisión. La mayoría de las páginas recurren a él sin comprobarlo.

Casos en los que el diseño bento perjudica la página:

• Artículos extensos. El diseño bento fragmenta la ruta de lectura.

• Contenido comparativo. Tablas de precios, comparaciones de características, listas comparativas. Las celdas no están alineadas para facilitar la lectura entre ellas.

• Procesos paso a paso. Un tutorial requiere un orden claro. Las celdas bento implican ideas paralelas, no pasos.

• Páginas de decisión única. Si la página tiene como objetivo dirigir al visitante hacia una única llamada a la acción (CTA), Bento divide el enfoque entre varias celdas.

• Páginas con poco contenido. Con solo una o dos ideas, un panel principal único es más efectivo que un Bento con celdas de apoyo vacías.

Bento se utiliza para ideas paralelas de registro similar que el visitante puede explorar en cualquier orden. Evítalo para páginas de secuencia, comparación, decisión o de una sola afirmación.

Lista de verificación para Bento antes de publicar

Ejecuta esto antes de confirmar un diseño en Bento:

1. Confirmación de anclaje. ¿Hay alguna celda que sea claramente más grande que la siguiente, al menos 1,5 veces?

2. Ajuste del contenido de la celda. ¿Cada celda puede funcionar como un contenedor de una sola idea?

3. Dependencia secuencial. ¿El visitante necesita leer las celdas en orden? Si es así, Bento no es adecuado.

4. Comparación entre celdas. ¿Es necesario comparar las celdas fila por fila? Si es así, usa una tabla.

5. Relación de relleno interno. ¿El relleno interno es aproximadamente el doble del margen?

6. Margen circundante. ¿Al menos 1,5 veces el margen superior e inferior como espacio libre?

7. Diseño adaptable. ¿Cada celda tiene una forma definida para ordenadores de escritorio, tabletas y móviles?

8. Anclaje en móviles. ¿El ancla permanece fija (primera celda, ancho completo)?

9. Densidad de contenido. ¿Aproximadamente entre un 20 y un 30 % de espacio en blanco interno por celda?

10. Número de secciones. ¿Más de tres secciones bento en la página? La página se está convirtiendo en una galería bento.

Una página que supera estas diez comprobaciones tiene una sección bento que justifica su diseño.

Preguntas frecuentes

¿Qué es una cuadrícula bento en diseño web?

Una cuadrícula bento es una sección compuesta por celdas de diferentes tamaños, cada una con una pieza de contenido independiente, donde el tamaño de las celdas jerarquiza la importancia de lo que se muestra. El nombre proviene de la caja bento japonesa, que compartimenta diferentes alimentos de distintos tamaños en una bandeja. Se utiliza con mayor frecuencia para secciones de características de productos, resúmenes de funcionalidades y muros de testimonios.

¿Cuándo usar una cuadrícula bento?

Úsela cuando tenga varias ideas paralelas de registro similar que el visitante pueda explorar en cualquier orden. Funciona bien para características de productos, resúmenes de funcionalidades y muros de testimonios. Evítela para lectura secuencial, comparaciones entre celdas, procesos paso a paso y páginas con solo una o dos ideas.

¿Cómo ajustar el tamaño de las celdas en una cuadrícula bento?

Ajuste el tamaño desde el contenido hacia adentro. Elija el ancla, elija las piezas secundarias y luego ajuste el tamaño de cada celda para que el contenido quepa con un espacio en blanco interno de aproximadamente el 20 al 30 %. El ancla debe tener al menos el doble del área de la celda de soporte más grande.

¿Cuál es el espaciado correcto del margen para una cuadrícula bento?

Use un margen de aproximadamente la mitad del relleno interno. Si las celdas tienen 32 píxeles de relleno, use 16 píxeles de margen. La proporción importa más que el valor absoluto.

¿Cómo se comporta una cuadrícula bento en dispositivos móviles?

Se reduce a dos columnas en tabletas y a una sola en móviles, con el ancla primero y las celdas de soporte reordenadas por prioridad. El relleno interno y los márgenes se ajustan en cada punto de ruptura para que las celdas parezcan proporcionales. Las celdas con contenido que no se adapta a un cambio de ancho deben rediseñarse para la forma móvil.

¿Cuál es la diferencia entre una cuadrícula bento y una cuadrícula de tarjetas?

Una cuadrícula de tarjetas es uniforme: todas las tarjetas tienen el mismo tamaño y tipo de contenido. Una cuadrícula bento es una composición deliberada donde las celdas tienen diferentes proporciones y contienen distintos tipos de contenido. La cuadrícula bento implica jerarquía mediante el tamaño, mientras que la cuadrícula de tarjetas implica paralelismo mediante la uniformidad.

El patrón detrás de las cuadrículas bento que perduran

Una cuadrícula bento que perdure hasta 2026 no es una cuadrícula llena de celdas ingeniosas. Es una cuadrícula donde cada celda es una compresión deliberada de una sola idea.

Las marcas que perduran, Apple, Linear, Stripe, Figma, comparten una misma disciplina. Las celdas son pequeñas solo cuando el contenido genera pocos ingresos. Las celdas son grandes solo cuando el contenido genera muchos ingresos. El margen interior es consistente, el relleno interno es consistente y el colapso adaptable está planificado. Nada es accidental, porque el patrón bento castiga los errores más que cualquier otro diseño web.

Las marcas que envejecen mal trataron el patrón como un estilo visual. Eligieron primero las formas de las celdas y luego se preguntaron qué contenido podría encajar. Las celdas terminan conteniendo contenido para el que no fueron diseñadas y el colapso adaptable se fragmenta en dispositivos móviles. Esas cuadrículas se rediseñan discretamente sección por sección durante el año siguiente.

La disciplina consiste en partir del contenido. Decide qué necesita comunicar la sección, elige el ancla, elige los elementos paralelos y luego ajusta el tamaño de las celdas en función de esas decisiones. Trátalo como uno de tus elementos principales principios de diseño web, de la misma manera que tratas la jerarquía y la tipografía, y las secciones bento que publiques seguirán luciendo bien el próximo año.

Si deseas un bento que comprima la página en lugar de decorarla, contratar Brainy. UXBrainy crea sitios de marketing y páginas de destino con diseños bento diseñados celda por celda. AppBrainy crea interfaces de usuario de productos con la misma disciplina.