Webdesign-Trend: Bento Grid

Webdesign-Trend: Bento Grid
Bekannt geworden durch die Präsentationen von Apple und mittlerweile ein echter Trend im Webdesign: das Bento Grid! Hier erfährst du was man darunter versteht, wie man es einsetzen kann. Außerdem findest du und viele tolle Beispiele und Inspiration für dein nächstes Webdesign Projekt.

Das Konzept des Bento Grids

Die Bento Box stammt aus Japan und ist ein Behälter, in dem Speisen transportiert werden. Die japanische Version einer Brotdose sozusagen. Eine Bento Box ist in der Regel in mehrere Fächer unterteilt, um verschiedene Lebensmittel wie Reis, Gemüse, Fleisch oder Süßes voneinander zu trennen. Oft können Abschnitte auch modular angeordnet und individuell angepasst werden.

Von dieser Art der Anordnung leitet sich der Webdesign Trend „Bento Box“ oder auch „Bento Layout“ oder „Bento Grid“ ab. Das Konzept findet im Webdesign und Interface-Design von Apps immer größere Beliebtheit. Dabei wird genau gleich vorgegangen wie beim japanischen Original:

- Man nimmt eine vorgegebene Fläche

- Unterteilt sie in ein grobes Raster, zum Beispiel 3x3

- Und unterteilt die Flächen in nochmal kleinere Flächen

- Am besten unregelmäßig

Original Bento Box mit verschiedenen Speisen
Original Bento Box mit verschiedenen Speisen

Was das Bento Grid Layout gut kann

Ein Bento Grid eignet sich hervorragend um:

  • verschiedene Inhalte kompakt an einem Ort zeigen
  • Trockene Zahlen ansprechend darstellen
  • Produkt Features in Szene zu setzen
  • Besonders gut sieht es aus wenn man Text, Bild, Video oder Illustration kombiniert
  • Außerdem gut geeignet für eine Übersicht an Produkten, Blog-Beiträgen, Referenzen

DJI Webdesign als Bento Grid
Bento Grid zeigt DJI Produkt Features, kombiniert mit Bildmaterial: www.dji.com/de/mini-4-pro

Bolt Webdesign als Bento Grid
Vorteile von Bolt dargestellt als Bento Grid, in Kombination mit Illustrationen: www.bolt.com

Webdesign von Gitness als Bento Grid
Animierte Produkt Features von Gitness, kombiniert mit einem großen Call-To-Action: www.gitness.com

Website von Pipe.com als Bento Grid
Interaktive Darstellung der Benefits von Pipe: www.pipe.com

Vorteile als Bento Grid Webdesign
Alle Vorteile von novu auf einen Blick: www.novu.co

Und was das Bento Grid Layout nicht so gut kann

Die Stärken des Bento Grids können gleichzeitig auch Schwächen sein, wenn man es für die falschen Inhalte einsetzt:

  • Keine klare Hierarchie der Inhalte
  • Alle Elemente erregen ähnlich viel Aufmerksamkeit
  • Kann überfordernd wirken

Webseite von Dev.hire als Bento Grid
Startseite in Dashboard Optik: www.dribbble.com/shots/21145885-IT-human-resources-platform

Fazit

Wie ihr in den Beispielen seht, kann ein Bento Gridein echter Hingucker sein! Wenn es mit den richtigen Inhalten gefüllt ist und visuell ausgewogen ist können Sie ein Design enorm aufwerten. Gefällt auch der Webdesign-Trend? Habt ihr schon mal mit einem Bento Grid gearbeitet? Hinterlasst mir gerne eine Nachricht mit eurem Feedback.

Noch mehr Inspiration findet ihr außerdem hier: www.bentogrids.com

Bento Grids Inspiration
Inspiration bei bentogrids.com