Bento

A grid of tiles of different sizes, one or two large and the rest small. Shows several things at once while still saying which comes first.

Good for: Feature overviews, a range of products or services, home pages of software.

Weak for: Phones, where it becomes a plain list; content of equal weight.

One tile per row on phones, two on tablets; the big tiles only span from 960 px.

The look, in Stylogeny

• Cards & bento tiles: Content partitioned into rounded tiles or cards of varied size.
• Modular grid: Fields defined by rows and columns; every element snaps to modules.
• Layered information: Several reading levels: headline, deck, captions, data.

Parts that show it

• Bento grid

How it is found

In a wireframe: A grid with at least one child that spans more than one column from 960 px.

On a real page: Not read yet: telling tiles of different sizes apart from a messy grid needs more than a skeleton.

Open the example as a page.