Bento Izgara Tasarımı: 2026 Kullanıcı Arayüzü Düzeni Kılavuzu

Üç sütunlu özellik satırı öldü. İki yıldır ölü ve çoğu tasarımcı hala gövdeyi değiştirmedi.

Biliyorsunuz, her birinde bir simge, bir başlık ve bir paragraf bulunan, mobil cihazlarda üst üste dizilmiş üç eşit sütun. 2018 ile 2023 yılları arasında inşa edilen her SaaS sitesinde bir tane vardı. Tek bir yalanı satıyordu: ürününüzün her biri tam olarak %33 dikkat değerinde olan üç özellikten oluştuğunu. Dikkat hiçbir zaman eşit olmadı ve okuyucular, TikTok'un onlara yoğunluğun kusur değil özellik olduğunu öğrettiği yıl bu bölümleri okumayı bıraktılar.

Bento ızgarası kazandı çünkü özellik satırının asla yapmadığı şeyi kabul ediyor: bazı şeyler diğerlerinden daha büyük ve okuyucu bunu bir bakışta bilmeli. Bunun ardındaki daha derin kalıp için görsel hiyerarşi'a bakın. Apple'un Mac sayfaları, bunun üretimde nasıl göründüğünün en temiz canlı örneğidir.

Bento ızgarası aslında nedir?

bento ızgarası, bir bölümün eşit olmayan dikdörtgen hücrelere bölündüğü, her birinde farklı bir içerik parçasının bulunduğu ve tüm ızgaranın birleşik bir kompozisyon olarak okunmasını sağlayacak şekilde düzenlenmiş bir yerleşim desenidir.

Adı Japon bento kutusundan gelir. Farklı boyutlardaki bölmeler, her biri farklı bir şey içerir ve bir bütün olarak görsel olarak dengeli olacak şekilde düzenlenmiştir. Birbirine özdeş sütunlardan oluşan bir sıra değil. Anlatı bölümlerinin bir yığını değil. Bilinçli bir iç hiyerarşiye sahip tek bir kompozisyon.

Desen üç temel özelliğe sahiptir. Birincisi, genellikle 3 veya 4 sütunlu bir ızgara üzerine inşa edilmiş, bazı hücrelerin birden fazla sütun veya satırı kapsadığı eşit olmayan hücreler. İkincisi, hücre başına çeşitli içerik (birinde grafik, diğerinde illüstrasyon, üçüncüsünde ölçüm, dördüncüsünde referans). Üçüncüsü, genellikle paylaşılan arka plan uygulaması, tutarlı kenar yarıçapları ve kısıtlı renk kullanımı yoluyla, bütün boyunca görsel tutarlılık.

Ne değildir: bir CSS Grid demosu. Bir duvar örgüsü düzeni. Bir Pinterest akışı. Rastgele düzenlenmiş kartlar. Bento, algoritmik değil, kompozisyoneldir.

Bento ızgarası sıkıştırmadır. Özellik satırı anlatımdır. Çoğu ürün sıkıştırmaya ihtiyaç duyar.

Özellik satırının yerini neden aldı?

Üç neden. İkisi açık. Biri de bu modelin kalıcı olmasının nedeni.

Birinci neden: kalma süresi. Apple'in pazarlama sayfaları üzerindeki dahili testleri, bento bölümlerinin ziyaretçileri eşdeğer özellik satırlarına göre yaklaşık %47 daha uzun süre tuttuğunu gösterdi. Bunun nedeni gizemli değil, sadece okuyucunun bento ızgarasına göz atabilmesidir. Zorunlu bir okuma sırası yoktur. Sayfaya girerler, ilgilerini çeken hücreyi seçerler ve kalırlar.

İkinci neden: metin duvarları olmadan yoğunluk. İyi tasarlanmış bir bento ızgarası, geleneksel bir düzenin üç şey için kullanacağı alanda altı ila sekiz şey iletir. Hücreler farklı içerik türlerini (görsel, istatistik, metin, referans) barındırdığı için, okuyucu yoğunluğu ağır olarak algılamaz.

Üçüncü neden (gerçek neden): modern ürünlerin gerçekte nasıl satıldığıyla örtüşüyor. 2026'daki çoğu SaaS ürünü üç özellikten oluşmuyor. Bir ana yetenek, üç ila beş destekleyici yetenek, bir entegrasyon hikayesi, bir kanıt noktası ve belki de ayrı olarak belirtilmeye değer belirli bir özellik içeren bir platformdur. Bu yapı üç sütunlu bir satıra uymuyor. Bir bentoya uyuyor. Düzen, içeriği olduğu yerde karşıladı.

| Desen | Bu hikayeye uyuyor | Bu hikayeye uymuyor |

|---------|-----------------|------------------|

| Üç sütunlu özellik satırı | Üç eşit özellik, anlatısal ürün | Eşit olmayan özellik ağırlığına sahip platformlar |

| Özellik yığını (tam genişlikte satırlar) | Derin özellik açıklamaları | Bir bakışta genişliği gösterme ihtiyacı |

| Bento ızgarası | Platformlar, paketler, gösterge panelleri, kanıt sayfaları | Linear eğitimleri, adım adım akışlar |

Şu anda en iyi üç gerçek uygulama

Apple (apple.com/mac). Yukarıda zaten gösterildi. 2022 sonlarından itibaren her Mac ürün sayfası bento kullanıyor. M serisi çip bölümleri en temiz desene sahip: çip görseli için baskın bir hücre, kıyaslamalar ve kullanım durumları için daha küçük hücreler. Paylaşılan koyu arka plan, paylaşılan köşe yarıçapı, tutarlı iç dolgu. Çip her zaman görsel olarak baskındır. Bu, ızgara değil, editöryel bir tercihtir.

Linear (linear.app/features). Geliştirici araçları için bento. Özellikler sayfası, kahraman yeteneğinin (sorun takibi, planlama, derleme) 2x2 hücre kapladığı ve daha küçük özelliklerin 1x1 veya 1x2 aldığı 4 sütunlu bento yığınıdır. Linear'in versiyonu, sadeliğiyle ünlüdür: yalnızca ürün ekran görüntüleri, stok illüstrasyon yok, tek aralıklı etiketler. Bilerek bir teknik özellik sayfası gibi okunuyor.

Vercel (vercel.com). Vercel'ün ana sayfa bento'su hibrit versiyondur. Bazı hücreler illüstrasyon, bazıları ürün ekran görüntüsü, bazıları ise tamamen metindir. Her hücre aynı görsel dili (aynı arka plan, aynı yarıçap, aynı iç boşluk ritmi) paylaştığı sürece, tek bir bento içinde farklı medya türlerini tutarsız hissettirmeden karıştırabileceğinizi kanıtlıyorlar.

Üç farklı sektör, üç farklı ton, aynı temel desen. Desen moda değil. Belirli bir iletişim sorununa yönelik bir düzen: "Birçok şey yapıyoruz, işte bir bakışta hepsi, ilgilendiğinizi seçin."

Izgara Matematiği (Göründüğünden Daha Basit)

Çoğu bento ızgarası iki temel yapıdan birini kullanır.

3 Sütunlu Bento. Dar bölümler, referanslar, öne çıkan özellikler için uygundur. Tipik desen:

• Bir adet 2x1 kahraman hücresi (2 sütun, 1 satır)
• Bir adet 1x1 hücre (1 sütun, 1 satır)
• İkinci bir satırda iki adet 1x1 hücre
• Dikey ağırlıktan fayda sağlayan bir şey için bir adet 1x2 hücre

4 Sütunlu Bento. Daha geniş kapsamlı tam bölümler için daha iyidir. Tipik desen:

• Bir adet 2x2 kahraman hücresi
• Yan yana iki adet 1x1 hücre
• Altta bir adet 2x1 hücre
• Satırı kapatmak için bir adet 1x1 hücre

CSS Grid'de yaklaşık yirmi satırda bir bento ızgarası oluşturabilirsiniz:

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.bento-cell-hero { grid-column: span 2; grid-row: span 2; }
.bento-cell-wide { grid-column: span 2; }
.bento-cell-tall { grid-row: span 2; }
.bento-cell-default { grid-column: span 1; grid-row: span 1; }

Sınıfları alt öğelere uygulayın ve ızgara kendiliğinden düzenlenir. Matematik gerçekten bu kadar basit. Bento'yu zor kılan şey ızgara değil. Hangi hücrelerin ağırlığı hak ettiğine dair editöryel karar.

Bozulmayan Duyarlılık Kuralları

Masaüstü bento kolaydır. Mobil bento ise çoğu uygulamanın başarısız olduğu yerdir.

Hata: ızgara şeklini korumak ve her şeyi küçültmek. 390 piksel genişliğinde, 4 sütunlu bir bento, dört adet 90 piksellik sütuna dönüşür ki bu işe yaramaz. Hücreler gerçek içerik tutamaz.

Kural: yeniden akış sağlayın, küçültmeyin. Mobil cihazlarda, bento ızgarası tek bir sütuna daralır, ancak hiyerarşiyi korumak için hücre sırası değişir.

• Kahraman hücresi en üste taşınır (mobil cihazlarda en büyük görsel etki önce gelir)
• 2x1 genişliğindeki hücreler tam genişlikte tek sütunlu hücrelere dönüşür
• 1x2 yüksekliğindeki hücreler dikey olarak uzatılmadan standart yükseklikte hücrelere dönüşür
• Sıralama, masaüstündeki görsel konuma göre değil, öneme göre yeniden belirlenir

CSS Grid, grid-template-areas ve medya sorguları ile bunu zahmetsiz hale getirir. Veya Tailwind'de: bento aralıklarını yalnızca büyük ekranlarda uygulamak için lg: öneklerini kullanın ve varsayılan mobil yığının kendisini halletmesine izin verin.

| Kırılma Noktası | Izgara Davranışı |

|------------|---------------|

| Masaüstü (1280px+) | Tam bento, çeşitli aralıklara sahip 4 sütun |

| Tablet (768-1279px) | Basitleştirilmiş bento, bazı span'lerle 2 sütunlu |

| Mobil (768 pikselin altında) | Tek sütun, içerik önceliğine göre yeniden sıralanmış |

Test: 390 pikselde, her hücrenin içindeki içeriğin yakınlaştırma veya yatay kaydırma olmadan okunabilir olması için yeterince yüksek olması gerekir. Eğer değilse, hücre yanlıştır, görüntü alanı değil.

Daha fazla düzen dökümü istiyorsanız, Brainy Kağıtlar'nin geri kalanına göz atın. Ziyaretçileri özellik satırlarının duvarına kaptırmayı önleyen bir açılış sayfası'e ihtiyacınız varsa, Brainy'ı işe alın'e bakın ve gerçek düzenler, gerçek metinler, gerçek dönüşümler sunuyoruz.

Bento ızgarası yanlış bir seçim olduğunda

Bento evrensel bir çözüm değildir. Yanlış kullanırsanız, içeriği nefes alması gereken hücrelere zorla yerleştirirsiniz.

Bento şu durumlarda başarısız olur:

• İçeriğiniz sıralıysa. Adım adım bir eğitim, bir kullanıcıya tanıtım akışı, anlatısal bir vaka çalışması. Bunların doğrusal bir sıraya ihtiyacı vardır. Bento okuma sırasını ortadan kaldırır.

• Her parça eşit ağırlıktaysa. Gerçekten üç eşit özelliğiniz varsa, üç sütunlu bir satır hala doğrudur. Bento iç hiyerarşi gerektirir. Bento hücrelerine düzleştirmek, eşit şeylerin rastgele sıralanmış gibi görünmesine neden olur.

• Her hücrenin derinliğe ihtiyacı varsa. Özelliğinizin açıklanması için 200 kelime gerekiyorsa, bir bento hücresine sığmaz. Bunu bir bölüm olarak yazın, bir bölme olarak değil.

• Güçlü görsel varlıklarınız yoksa. Bento tabloları, hücreler görseller (grafikler, ürün fotoğrafları, illüstrasyonlar) içerdiğinde en iyi şekilde okunur. Tamamen metin içeren bentolar, sıkışık gazete düzenlerine benzer.

Karar tablosu:

| İçeriğiniz... | Kullanım |

|--------------------|-----| | Eşit olmayan özellik ağırlığına sahip bir platform | Bento ızgarası |

| Üç eşit, paralel özellik | Üç sütunlu satır |

| Anlatısal bir açıklama | Özellik yığını (tam genişlikte satırlar) |

| Adım adım akış | Numaralandırılmış bölümler |

| Gösterge paneli tarzı bir prova sayfası | Bento ızgarası |

| Bir özelliğe derinlemesine bakış | Kahraman + destekleyici bölümler |

Tasarımcının başlangıç ​​şablonu

Bunu temel olarak kullanın. Buradan düzenleme yapın, sıfırdan oluşturmayın.

Bölüm yapısı:

1. Izgaranın üstünde tam genişlikte başlık (tek satır, etkileyici)
2. 4 sütunlu ızgara, toplam 3 ila 5 satır
3. Görsel olarak en güçlü unsur olan bir kahraman hücresi (2x2)
4. Dört ila altı destekleyici hücre, çeşitli içerik türleri
5. CTA veya prova için isteğe bağlı tam genişlikte kapanış hücresi

Hücre içeriği kuralları:

• Hücre başına en fazla bir cümle. Bir paragrafa ihtiyacınız varsa, hücre çok küçüktür.

• Hücre başına bir öğe (grafik, illüstrasyon, ekran görüntüsü, ölçüm, referans, logo).

• Tutarlı iç dolgu (genellikle 24-32 piksel).

• Tutarlı köşe yarıçapı (genellikle 12-16 piksel).

• Kısıtlı renk kullanımı. Çoğu hücre aynı arka planı paylaşır. Bir veya iki hücre ters çevrilebilir veya vurgu rengi kullanılabilir.

Mobil sıralama: önce ana hücre, ardından en önemli üç destekleyici hücre, sonra da geri kalanlar.

Bir sonraki açılış sayfanızda bir bento bölümü yayınlayın. Farkı hissedeceksiniz.

SSS

Bento ızgarası sadece bir trend mi?

Hayır. Trendler bir ila iki yıl sürer. Bento ızgaraları 2022'den beri büyük ürün sayfalarında baskın durumda ve hala geçerliliğini koruyor. Belirli bir iletişim sorununa yönelik bir düzen modelidir ve bu sorun ortadan kalkmayacak.

Bir blogda veya içerik sitesinde bento ızgarası kullanabilir miyim?

Nadiren. Bento, ürün ve pazarlama yüzeyleri içindir. Blog yazıları sıralı olmalıdır. Makale merkezi veya öne çıkan içerik ızgarası, bento tarzı eşit olmayan hücreler kullanabilir, ancak makalenin tüm gövde içeriği bunu kullanmamalıdır.

Bento ızgarası ile duvar örgüsü arasındaki fark nedir?

Duvar örgüsü algoritmiktir. Hücreler, içerik yüksekliğine göre otomatik olarak yerleştirilir. Bento kompozisyoneldir. Hücreler, tasarımcı tarafından önem sırasına göre kasıtlı olarak yerleştirilir. Duvar örgüsü Pinterest için uygundur. Bento ürünler için uygundur.

Bento ızgaraları gösterge panelleri için uygun mudur?

Evet, gösterge panelinin eşit olmayan widget ağırlığına sahip olduğu durumlarda. Birincil bir metrik, birkaç ikincil metrik, bir grafik, bir günlük, son etkinlik akışı. Bu tam olarak bento şeklidir. Bakınız: Linear'un proje görünümü, Vercel'in dağıtım gösterge paneli.

Bir bento ızgarasında kaç hücre olmalıdır?

Dört ile sekiz arasında. Dörtten az olursa ızgara olarak algılanmaz. Sekizden fazla olursa duvar gibi algılanmaya başlar. Yedi yaygın bir ideal sayıdır.

Özellik Sıraları Oluşturmayı Bırakın

Son üç yılda oluşturulmuş herhangi bir SaaS sitesini inceleyin. Gördüğünüz üç sütunlu özellik sıralarını sayın. Bento bölümlerini sayın. Sayılar her yıl değişiyor.

Bunun bir nedeni var. Özellik sırası, artık anlatmayı bıraktığımız bir hikayenin, "üç eşit özellik" hikayesinin bir düzeniydi. Modern ürünlerin üç eşit özelliği yoktur. Bir platformları, bir ana yetenekleri, bir dizi destekleyici yetenekleri, bir kanıt noktası ve bir kapanış CTA'ları vardır. Bu şekil bir bentoya uyar. Bir sıraya uymaz.

Mevcut sitenizde hala özellik sırası olan bir sayfa seçin. Bu bölümü bir bento ızgarası olarak yeniden tasarlayın. En güçlü yeteneği ana hücreye koyun. Kanıtı destekleyici bir hücreye koyun. Tek satırlık farklılaştırıcıyı başka bir hücreye koyun. Yayınlayın.

Sayfada kalma süresinin arttığını izleyin. Hemen çıkma oranının düştüğünü izleyin. Sayfanın gerçekten işe yaradığını izleyin.

Özellik sıraları oluşturmayı bırakın.