Bento Izgara Tasarımı: 2026 İçin Düzenler, Aralıklar ve Ne Zaman Kullanılmaması Gerektiğine Dair Kılavuz

Bento ızgarası, her biri kendi içinde bağımsız bir içerik parçası barındıran, farklı boyutlarda hücrelerden oluşan bir bölümdür; hücre boyutlarının kendileri, önemli olanı sıralayacak şekilde düzenlenmiştir. Hücre, anlam birimi haline gelir ve göz, bir kelimeyi okumadan önce boyutundan önemi okur.

2026'da web'deki bento ızgaralarının çoğu dekoratiftir. Hücreler aynı boyuttadır, içerik onlara uyacak şekilde sonradan düzenlenmiştir ve düzen bir kart duvarı gibi görünür. İyi olanlar bunun tam tersidir. Hücre boyutları içindeki içeriğe göre belirlenir, boşluklar ve dolgu ritmi korur ve duyarlı katlanma özelliği mobil cihazlarda bile okunabilir kalır. Bu kılavuz, anatomi, boyutlandırma mantığı, boşluk, içerik uyumu, duyarlılık, yedi ayrıştırma örneği (Apple, Linear, Vercel, Stripe, Arc, Apple Vision Pro, Figma) ve bento ızgara tasarımının sayfaya zarar verdiği durumları ele almaktadır.

Bento ızgara tasarımı, çalışma tanımı

bento ızgarası, her hücrenin kendi içinde bağımsız bir içerik parçası barındırdığı ve hücrenin boyutunun içindeki içeriğe göre belirlendiği kasıtlı bir kompozisyondur.

Üç özellik onu kart ızgarasından ayırır. Hücreler kasıtlı oranlarda boyutlandırılır. Hücreler, aynı şablonun tekrarı yerine farklı içerik türlerini barındırır. Düzen, tek bir kompozisyon olarak okunur. Bu üç özellikten herhangi birini kaldırırsanız, bir kart duvarı elde edersiniz.

Bu desen, gerçek bir sorunu çözdüğü için popüler hale geldi. 2023 yılına gelindiğinde, özdeş simge-başlık-paragraf kartlarından oluşan üç veya dört sütunluk özellik satırı, web'deki en ucuz düzen haline gelmişti. Bento, tasarımcılara bölümün kendisi şablon gibi görünmeden birden fazla özelliği sunmanın bir yolunu sağladı.

Bento ızgarasının anatomisi

Her bento düzeni dört bölümden oluşur: çapa hücresi, destekleyici hücreler, oluk ve çevreleyen kenar boşluğu. Bunlardan herhangi birini yanlış yaparsanız, ızgara çöker.

Çapa hücresi en büyük olanıdır, genellikle sol veya sol üstte yerleştirilir ve en güçlü içeriği taşır. İlk önce gelir ve geri kalanını çerçeveler. Net bir çapası olmayan bir bento, düz bir kart satırı gibi okunur. Destekleyici hücreler, kompozisyonu ikincil içerikle doldurur ve ilk okumada çapaya öncelik verir. Oluk yapısaldır ve gözün bunların tek bir kompozisyonun ayrı hücreleri olduğunu anlamasını sağlar. Çevreleyen kenar boşluğu, bölümün ayrı bir birim olarak okunmasını sağlayan sınırlayıcı kutudur.

Çapa, sıralamayı belirler. Destekleyici hücreler ayrıntıları doldurur. Oluk ritmi, kompozisyonu bozmadan birimleri ayırır. Çevreleyen kenar boşluğu bütünü çerçeveler.

Hücre boyutlandırması içerik odaklıdır, dekorasyon değil

Ekiplerin yaptığı en büyük hata, hücreleri içerdikleri içeriğe uyacak şekilde boyutlandırmak yerine, tuvali dolduracak şekilde boyutlandırmaktır.

Tek satırlık bir başlıkla tek bir sayı içeren bir hücre, bir ekran görüntüsü ve üç cümle içeren bir hücreyle aynı boyutta olmak zorunda değildir. Bunları eşitlemeye zorlarsanız, biri boş, diğeri sıkışık görünür. Izgara dekorasyon amaçlıdır, iletişim aracı değildir.

Sırayı tersine çevirin. Bölüme hangi içeriğin ait olduğuna karar verin, çapayı seçin, ikincil parçaları seçin, ardından her hücreyi içeriğin doğru nefes alma alanı ile sığacak şekilde boyutlandırın. Her hücre yaklaşık yüzde yirmi ila otuz iç boşluk içermelidir. Daha az olursa sıkışık görünür. Daha fazla olursa boş görünür.

En temiz ızgaralar oranları kullanır. Çapa, en büyük destekleyici hücrenin alanının yaklaşık iki katıdır. Bu oran, sayfanın geri kalanının kullandığı görsel hiyerarşi'i yansıtıyor ve bölüme sıkıştırılmış durumda.

Bağlantı hücresi okumayı taşıyor

Her bento'nun bir bağlantı hücresi vardır ve çoğu zayıf ızgara tek bir bağlantı hücresine bağlı kalmaz. Bağlantı hücresi, ideal olarak bir sonraki hücrenin alanının iki katı büyüklüğünde, boyut açısından ve içerik yoğunluğu açısından açık bir farkla kazanır. En güçlü metin, en önemli görsel veya en yüksek riskli etkileşim bağlantı hücresinde bulunur. Bağlantı hücresi genel bir illüstrasyon iken, destekleyici bir hücre gerçek başlığı içeriyorsa, okuma yolu bozulur.

Apple'un Mac ürün sayfası, dar bir ürün fotoğrafı ve kalın bir başlıkla bağlantı kurar. Linear, özellikler sayfasında bunun tersini yapar; dar bir başlık ve bir UI parçası içeren, metin ağırlıklı bir bağlantı hücresi ve daha seyrek destekleyici hücreler kullanır. Aynı prensip, farklı içerik şekli.

Hata: iki bağlantı hücresi. Tasarımcılar, eşit alana sahip bir sol panel ve bir sağ panel olarak ayırıp buna bento diyorlar. Bu, iki sütunlu bir kahraman. Bölüm, ilk okuma için iki eşit iddiaya sahip olduğu anda, bento çalışmayı bırakır.

Izgaranın çökmesini önleyen boşluk kuralları

Bento ızgaraları, boyutlandırmadan çok boşluk konusunda başarısız olur, çünkü oluk ve iç dolgu iki farklı görevdir ve çoğu ekip bunları tek bir görev olarak ele alır.

Oluk, gözün bir hücrenin nerede bittiğini ve bir sonrakinin nerede başladığını gösterir. Çok dar, tek blok. Çok geniş, bağlantısız. İç dolgunun yaklaşık yarısı kadar bir oluk kullanın. İç dolgu, gözün içeriğin nefes alması için ne kadar alana sahip olduğunu gösterir. Çevreleyen kenar boşluğu üçüncü boyuttur, dikey olarak en az 1,5 kat oluk kadar nefes alma alanı, böylece bölüm ayrı bir birim olarak okunur.

Yaygın bir hata. Ekipler üçü için de aynı değeri kullanır. Izgara ritmini kaybeder. Üçünü, az da olsa, farklılaştırmak ritmi geri kazandırır.

İçerik uyumu kuralları, bir hücreye gerçekten neyin ait olduğu

Bir bento hücresi, yalnızca içerdiği içerik birimi kadar iyidir. Çoğu hücre, içeriğin hücreye zorla yerleştirilmesi yerine hücrenin içeriğe göre şekillendirilmesi gerektiği için başarısız olur.

Bir bento hücresi tek bir fikri barındıran bir kaptır. Tek bir iddia, tek bir özellik, tek bir sayı, tek bir ekran görüntüsü, tek bir referans. İyi içerik: tek satırlık bir başlık ve kullanıcı arayüzü önizlemesi içeren tek bir özellik, altyazılı tek bir ölçüm, atıf içeren tek bir referans. Kötü içerik: uzun bir paragraf, sütunlar arası karşılaştırma, çok adımlı bir süreç, hizalanmış satırlara sahip bir fiyatlandırma tablosu.

Karar kuralı: Hücrenin içindeki içerik, anlamını kaybetmeden başka bir paragrafa çıkarılıp yerleştirilebiliyorsa, hücre işini yapıyor demektir. Çevresel bağlama ihtiyaç duyuyorsa, bento onu parçalara ayırıyor demektir.

Duyarlı davranış, gerçek test

1440 çözünürlükte harika görünen ve 768 çözünürlükte bozulan bir bento, bir masaüstü posteridir, bir düzen değildir ve duyarlı daraltma, çoğu üretim ızgarasının sessizce öldüğü yerdir.

Zorluk, hücrelerin tekdüze olmamasıdır. Bir özellik satırı düzgün bir şekilde daralır. Bir bento şablonu, farklı genişlik ve yüksekliklere sahip hücrelerle ne yapacağına karar vermelidir. Kuralları yanlış uygularsanız, mobil görünüm uyumsuz kutular yığını gibi görünür.

İşleyiş kılavuzu: Önce masaüstünü tanımlayın. Tablette (768 ila 1024), bağlantı noktası her iki sütunu da kapsayacak şekilde iki sütuna daraltın. Mobilde (768'in altında), tek sütun, her hücre tam genişlikte ve üst üste yığılmış, önce bağlantı noktası, ardından destekleyici hücreler öncelik sırasına göre. Hücrelerin sadece küçültülmüş değil, orantılı görünmesi için her kırılma noktasında iç dolgu ve boşlukları ayarlayın.

Kaçınılması gereken hata: Genişlik değişiminden sonra içeriği kaybolan hücreler. Masaüstü hücredeki yatay bir infografik, mobil sütunda okunamaz hale gelir. İçeriği sadece bir şekil için değil, her iki şekil için de planlayın.

Yedi gerçek ürün sayfası, açıklamalı

Çerçeve, yalnızca piyasaya sürülen sayfalarla temas ettikten sonra geçerliliğini korursa önem taşır. Şu anda üretimde yedi bento uygulaması var. Hiçbiri mükemmel değil. Hepsi SaaS açılış sayfası temel çizgisinin üzerinde.

Apple, ürün tiyatrosu olarak bento

Apple'in ürün sayfaları, kaydırma odaklı bir tiyatro olarak bento kullanıyor. Çapa hücreleri çok büyük, genellikle neredeyse tam ekran ölçeğinde tek bir ürün fotoğrafı, destekleyici hücrelerin üç veya dört katı oranlar. Cömert aralıklar. Her hücrede bir özellik bulunur, asla iki değil. Ziyaretçi, sayfayı Apple'in istediği sırayla okuyarak ayrılır. Eksiklik: Hareket ağırlıklı içerikler, yavaş bağlantılarda bozulabilir ve sıralamayı düzleştirebilir.

Linear, geliştirici yoğunluğu olarak bento

Linear, web'deki en yoğun bento ızgaralarından birini sunuyor ve acımasız tipografi ve her zaman kazanan bir çapa sayesinde okunabilirliğini koruyor. Soldaki çapa, en büyük destekleyici hücrenin iki katı alana sahip, sağda üç küçük hücreden oluşan iki sütun, dar boşluklar, daha geniş iç dolgu. Her hücre, kısa bir başlık ve kullanıcı arayüzü parçasıyla tek bir özelliği barındırır. Tipografi sistemi sıralamayı belirler. Daha zayıf bir tipografi, deseni çökertebilir.

Vercel, hareket koreografisi olarak bento

Vercel, hareket için bir sahne olarak bento kullanıyor. Her hücre, kaydırmayı küçük bir açığa çıkarma ile ödüllendiriyor ve ızgara, geliştirme ve dağıtım hikayesini anlatıyor. 1,5x'te net bir çapa ve dört ila altı destekleyici hücre. Birlikte, geliştirici iş akışı hakkında bir anlatı oluşturuyorlar. Eksiklik: hareket, hareketten kaçınma tercihleri ​​olan kullanıcıları gereğinden fazla etkileyebilir.

Stripe, kısıtlama olarak bento

Stripe'in bento bölümleri listedeki en sessiz olanlardır ve bu da tam olarak gürültülü tasarıma güvenmeyen bir kitle için işe yaramalarının nedenidir. Çapa artı iki veya üç destekleyici hücre. Oranlar net ancak dramatik değil. Editörsel aralık. Her hücre, kısa bir kod örneği veya tek bir illüstrasyonla tek bir iddiayı barındırır. Desen, süsleme olmadan özgüven olarak okunuyor.

Sayfayı süslemek yerine sıkıştıran bir bento mu istiyorsunuz? Brainy'ı işe alın. UXBrainy, hücre hücre tasarlanmış bento düzenleriyle açılış sayfası tasarımı'ü sunuyor. AppBrainy ise aynı disiplinle ürün arayüzü sunuyor.

Arc, kişilik olarak bento

Arc, marka kişiliğini ifade etmek için bentoyu bir araç olarak kullanıyor. Hücreler, ürünün neşeli yönünü ifade etmek için şekil, renk ve hareket değiştiriyor. Yuvarlak köşeler, gradyanlar, çeşitli yükseklikler, gevşek oranlar. Arc kuralları esnetiyor ve işe yarıyor çünkü marka, konumlandırma yoluyla izin satın almış, iyi brutalist web tasarımı'ün arkasındaki aynı içgüdü, izin kazanılmış, ödünç alınmamış.

Apple Vision Pro, mekansal önizleme olarak bento

Vision Pro, iki boyutlu hücreler aracılığıyla üç boyutlu bir ürün izlenimi vermesi gerektiği için web'deki en iddialı bento'dur. Çapa hücreleri, mekansal derinliği ima etmek için video kullanır. Dramatik oranlar, sinematik aralıklar. Video içeriği mekansal işi yapar ve hücre boyutlandırması her anı çerçeveler. Doğru içeriğin, düzeni yalnızca hücre şeklinin yapabileceğinin ötesine taşıyabileceğine dair en güçlü argümandır.

Figma, özellik yoğunluğu olarak bento

Figma, emsallerinden daha fazla paralel özelliği işler ve tip sistemi ve hücre ritmi yükü taşıdığı için yoğunluğun üstesinden gelir. Bölüm başına altı veya yedi hücre, net bir çapa, sıkıştırılmış oranlar, sıkı boşluklar, cömert iç dolgu. Her hücre, bir UI parçası ve sıkı bir başlıkla bir özellik içerir. Figma'ün tipografi sistemi'i, birçok küçük hücrede sıralamayı koruyacak kadar güçlüdür. Daha zayıf bir tip sistemi, hücre sayısı arttıkça sıralamasını kaybeder.

Bento ızgarası ne zaman kullanılmamalı?

Bento, sırayla okunması, ayrıntılı olarak karşılaştırılması veya tek bir karar için taranması gereken herhangi bir içerik için yanlış bir düzendir. Çoğu sayfa kontrol etmeden ona yönelir.

Bento'nun sayfayı sabote ettiği durumlar:

• Uzun metinli editoryal içerik. Bento, okuma yolunu parçalara ayırır.

• Karşılaştırma içeriği. Fiyat tabloları, özellik karşılaştırmaları, öncesi ve sonrası listeleri. Hücreler, hücreler arası okuma için hizalanmamıştır.

• Adım adım süreçler. Nasıl yapılır kılavuzunun net bir sıraya ihtiyacı vardır. Bento hücreleri, adımları değil, paralel fikirleri ima eder.

• Tek karar sayfaları. Sayfa, ziyaretçiyi tek bir CTA'ya yönlendirmek için varsa, bento odağı hücreler arasında böler.

• İçerik açısından hafif sayfalar. Sadece bir veya iki fikirle, tek bir kahraman paneli, boş destekleyici hücrelere sahip bir bento'dan daha dürüsttür.

Bento, ziyaretçinin herhangi bir sırayla tarayabileceği, benzer nitelikteki paralel fikirler içindir. Sıralama, karşılaştırma, karar veya tek iddia içeren sayfalar için atlayın.

Göndermeden Önce Bento Uygunluk Kontrol Listesi

Bir düzeni Bento'ya kaydetmeden önce şunları çalıştırın:

1. Çapa uyumu. Bir hücre, bir sonrakinin en az 1,5 katı büyüklüğünde mi?

2. Hücre içeriğine uygunluk. Her hücre tek başına bir fikir kabı olarak durabilir mi?

3. Sıralı bağımlılık. Ziyaretçinin hücreleri sırayla okuması gerekiyor mu? Eğer evet ise, Bento yanlıştır.

4. Hücreler arası karşılaştırma. Hücrelerin satır satır karşılaştırılması gerekiyor mu? Eğer evet ise, tablo kullanın.

5. İç dolgu oranı. İç dolgu, oluk boşluğunun yaklaşık iki katı mı?

6. Çevreleyen kenar boşluğu. Üstte ve altta en az 1,5 kat daha fazla boşluk var mı?

7. Duyarlı plan. Her hücrenin masaüstü, tablet ve mobil cihazlarda planlanmış bir şekli var mı?

8. Mobil cihazlarda bağlantı noktası. Bağlantı noktası sabit kalıyor mu (ilk hücre, tam genişlik)?

9. İçerik yoğunluğu. Hücre başına yaklaşık yüzde yirmi ila otuz iç boşluk mu?

10. Bölüm sayısı. Sayfada üçten fazla bento bölümü mü var? Sayfa bir bento galerisine dönüşüyor.

Bu on kontrolü geçen bir sayfa, düzenini hak eden bir bento bölümüne sahiptir.

SSS

Web tasarımında bento ızgarası nedir?

Bento ızgarası, her biri kendi içinde bağımsız bir içerik parçası barındıran farklı boyutlarda hücrelerden oluşan bir bölümdür ve hücre boyutları önemli olanı sıralar. Adı, farklı boyutlardaki farklı yiyecekleri tek bir tepsiye bölümlere ayıran Japon bento kutusundan gelir. En sık ürün özellik bölümleri, yetenek özetleri ve referans duvarları için kullanılır.

Bento ızgarası ne zaman kullanılmalıdır?

Ziyaretçinin herhangi bir sırayla tarayabileceği benzer kayıtta birkaç paralel fikriniz olduğunda kullanın. Ürün özellikleri, yetenek özetleri ve referans duvarları için uygundur. Sıralı okuma, hücreler arası karşılaştırma, adım adım süreçler ve yalnızca bir veya iki fikir içeren sayfalar için kullanmayın.

Bento ızgarasında hücre boyutlandırması nasıl yapılır?

İçerikten içe doğru boyutlandırın. Çapa öğesini seçin, ikincil parçaları seçin, ardından her hücreyi içeriğin yaklaşık yüzde yirmi ila otuz iç boşlukla sığacağı şekilde boyutlandırın. Çapa öğesi, en büyük destekleyici hücrenin alanının en az iki katı olmalıdır.

Bento ızgarası için doğru boşluk aralığı nedir?

İç dolgunun yaklaşık yarısı kadar bir boşluk kullanın. Hücrelerde 32 piksel dolgu varsa, 16 piksel boşluk kullanın. Oran, mutlak değerden daha önemlidir.

Bento ızgarası mobil cihazlarda nasıl davranır?

Tabletlerde iki sütuna, mobil cihazlarda ise tek sütuna daralır; önce çapa öğesi, ardından destekleyici hücreler öncelik sırasına göre yeniden düzenlenir. İç dolgu ve boşluk değerleri her kırılma noktasında ölçeklenir, böylece hücreler orantılı görünür. Genişlik değişimine dayanamayacak içeriğe sahip hücreler, mobil şekle göre yeniden tasarlanmalıdır.

Bento ızgarası ile kart ızgarası arasındaki fark nedir?

Kart ızgarası tekdüzedir, her kart aynı boyutta ve içerik türündedir. Bento ise hücrelerin farklı oranlarda boyutlandırıldığı ve farklı içerik türlerini barındırdığı kasıtlı bir kompozisyondur. Bento, boyut yoluyla hiyerarşiyi ima ederken, kart ızgarası tekdüzelik yoluyla paralelliği ima eder.

2026'da geçerliliğini koruyan bento ızgaralarının ardındaki model

2026'da geçerliliğini koruyan bir bento ızgarası, zekice hücrelerle dolu bir ızgara değildir. Her hücrenin tek bir fikrin kasıtlı bir sıkıştırması olduğu bir ızgaradır.

Geçerliliğini koruyan markalar, Apple, Linear, Stripe, Figma, tek bir disiplini paylaşıyor. Hücreler yalnızca içerik küçük kazanç sağladığında küçüktür. Hücreler yalnızca içerik büyük kazanç sağladığında büyüktür. Oluk tutarlı, iç dolgu tutarlı, duyarlı daralma planlı. Hiçbir şey tesadüfi değil, çünkü bento deseni web'deki diğer tüm düzenlerden daha fazla kazaları cezalandırıyor.

Kötü yaşlanan markalar, deseni görsel bir stil olarak ele aldılar. Önce hücre şekillerini seçtiler, sonra hangi içeriğin uygun olabileceğini sordular. Hücreler, tasarlanmadıkları içeriği barındırıyor ve duyarlı daralma mobil cihazlarda parçalanıyor. Bu ızgaralar, önümüzdeki yıl boyunca sessizce bölüm bölüm yeniden tasarlanıyor.

Disiplin, içerikten başlamaktır. Bölümün neyi iletmesi gerektiğine karar verin, bağlantı noktasını seçin, paralelleri seçin, ardından hücreleri bu kararlara göre boyutlandırın. Bunu temel web tasarım prensipleri unsurlarınızdan biri olarak ele alın, hiyerarşi ve tipografi gibi, ve gönderdiğiniz bento bölümleri gelecek yıl da doğru görünecektir.

Sayfayı süslemek yerine sıkıştıran bir bento istiyorsanız, Brainy'ı işe alın. UXBrainy, hücre hücre tasarlanmış bento düzenleriyle pazarlama siteleri ve açılış sayfaları gönderiyor. AppBrainy, ürün arayüzünü aynı disiplinle sunuyor.