Bento Notícias Curadas

Historical Context

Flipboard changed everything in 2010. Before it, news aggregation meant reverse-chronological lists — dense, undifferentiated, exhausting. Their magazine-style card layout proved something radical: editorial hierarchy could be algorithmic. A lead story gets the full-width hero. Supporting pieces tile beneath in smaller cards. The grid itself communicates importance without a single editor writing a headline slug. Apple News refined this further, introducing the bento approach where card sizes aren't just aesthetic choices — they're semantic. A two-column span means "this matters more." A thumbnail card means "here's context if you want it." The density varies by section: politics gets breathing room, sports packs tight with scores and updates. Google Discover took it mobile-native, proving that a single-column bento with varied card heights could feel curated even when fully automated. What makes bento grids work for news specifically is the tension between uniformity and surprise. The grid provides predictability — you know where to look. The varied card sizes provide editorial voice — someone (or something) decided this story deserves more space. That tension is the entire design problem.

When to Use

When your content has natural hierarchy but unpredictable volume. Bento grids for news work when you need to surface 15-40 items without making them feel like a database dump. They're ideal when stories vary in importance, when you mix media types (video, longform, quick hits), and when users scan rather than read sequentially. Skip this pattern if every item has equal weight — use a masonry or uniform grid instead. The bento earns its complexity only when editorial judgment (human or algorithmic) assigns meaning to size.

Design Principles

• Size encodes hierarchy — a card's dimensions are its headline before the headline. Never make all cards equal unless you genuinely mean equal importance.
• Typography does the heavy lifting across card sizes. Your largest card needs display type that rewards attention; your smallest needs a tight, scannable style. Design at least three distinct typographic treatments, not one scaled up and down.
• Whitespace between cards is editorial punctuation. Tight gutters say 'these stories are related.' A gap says 'new section.' Don't uniform-gutter your way into visual monotony.
• Content density should shift by context — breaking news sections pack tighter, feature sections breathe. A single rigid density across all content types flattens the reading experience.
• The grid must degrade gracefully when content is missing or sparse. Design the 4-item state and the 40-item state. If your layout only looks good at exactly 12 cards, it's a poster, not a system.

Technical Specs

Related

Editorial & Tipografia

Bento Portfólio de Produto

Editorial & Tipografia

Bento Produtividade Flexível

Editorial & Tipografia

Bento Dados Estruturados

Editorial & Tipografia

Bento Eventos Dinâmicos

Flat & Soft UI

Flat Design Produtivo