Bento grid, la tendenza dei layout a moduli
Il bento grid è il layout a moduli che negli ultimi anni è comparso su siti, app e presentazioni: tante caselle di dimensioni diverse che convivono in un design ordinato e leggibile. Il nome arriva dal Giappone e dal suo pranzo diviso in scomparti, e la sua logica funziona anche fuori dallo schermo.
Bento grid: cos’è e da dove nasce
Il bento grid è un sistema di layout che divide i contenuti in blocchi modulari di dimensioni diverse, disposti in una griglia come gli scomparti di un bento box. La parola bento deriva da biàndāng, un termine della dinastia Song meridionale che significa “conveniente”. Le prime forme di pranzo portatile giapponese risalgono al tardo periodo Kamakura, tra il 1185 e il 1333, mentre le scatole in legno laccato arrivarono più tardi, alla fine del Cinquecento.
Il bento originale non è mai passato di moda: i contenitori con scomparti restano un gadget concreto, ideale per aziende, ristoranti, mense ed eventi, e si personalizzano facilmente con il logo.
Bento grid nel web design: come funziona il layout a moduli
Nel web design il bento grid organizza testi, immagini, numeri e icone in card di misure diverse: il blocco più grande fa da protagonista, gli altri lo completano. La gerarchia dei contenuti è scritta nel layout stesso, perché l’occhio va prima alla casella più grande e poi a quelle vicine. A renderlo popolare sono state soprattutto le pagine prodotto di Apple, poi imitate da molti siti di software e servizi digitali. Oggi lo si trova in portfolio, dashboard e landing page, dove permette di mostrare in un colpo d’occhio funzioni, numeri e immagini senza appesantire la pagina.
La differenza con una grid tradizionale sta nelle proporzioni: invece di colonne uguali, il bento grid usa una composizione asimmetrica ma bilanciata. Dal punto di vista tecnico è diventato semplice da realizzare con CSS Grid, disponibile sui principali browser da marzo 2017, e si adatta anche agli schermi piccoli, dove i moduli si dispongono uno sotto l’altro in modo responsive.
Dal web alla stampa: il bento grid nei materiali cartacei
Un layout a moduli non vive solo su schermo: grid e design si applicano benissimo anche a ciò che si stampa. Il pieghevole a portafoglio è un bento grid naturale: aperto misura 63 x 29,7 cm e si divide in tre ante da 21 cm, ciascuna perfetta per un contenuto diverso, come servizi, orari e contatti. Si legge a piccoli passi, un modulo alla volta. Anche la carta intestata ragiona così: logo, dati di contatto e spazio per il testo occupano zone precise della pagina.
Lo stesso vale per la tovaglietta menù, il layout a moduli per eccellenza dei locali: sul foglio A3 si possono ricavare riquadri per antipasti, primi, secondi, dolci, bevande e informazioni, con una casella più grande per il piatto del giorno. Ogni sezione ha il suo spazio, e il cliente trova subito quello che cerca.
Come applicare il bento grid ai tuoi materiali
Per portare questo schema nei tuoi materiali stampati basta seguire poche regole: individua il contenuto più importante e dagli la casella più grande, tieni margini uguali tra i moduli, usa lo stesso stile grafico in ogni riquadro e scrivi testi brevi. Meno moduli, ma ben bilanciati, funzionano meglio di tanti riquadri affollati. Prima di andare in stampa controlla sempre la bozza: StampaSi la invia a ogni ordine, ed è il momento giusto per verificare la leggibilità di ogni casella. Se hai già un layout per il sito, riprendine colori e proporzioni anche sulla carta: la tua brand image resterà coordinata tra online e offline.
