Izgara Sistemleri: Tasarımcılar İçin Rehber

Izgara sistemleri, tasarımın en çok işi yapan ve en az takdir gören kısmıdır. Saygı duyduğunuz her ürünün bir ızgarası var, üzerinden kaydırıp geçtiğiniz her ürünün yok. Izgara dekorasyon değildir. Tipografiyi, hiyerarşiyi ve ritmi bir arada tutan sözleşmedir; böylece kullanıcı sayfayı çözmek yerine tek bakışta okuyabilir.

İsviçre okulu bunu altmış yıl önce baskıda kanıtladı. Müller-Brockmann, Hofmann, Ruder: ızgarayı bir yerleşim kısayolu olarak değil, bir düşünme aracı olarak gören koca bir tasarımcı kuşağı. Bu ders, neredeyse her tasarım teorisinden daha iyi yaşlandı. Linear'dan Stripe'a, New York Times'a kadar her modern ürün ızgarası aynı fikirden türer. Bu yazı, 2026 için çalışan ızgara başvuru kaynağıdır.

Müller-Brockmann modern ızgaraya dilbilgisini verdi

Josef Müller-Brockmann'ın 1981 tarihli "Grid Systems in Graphic Design" kitabı hâlâ disiplinin omurgasıdır. O kitaptan önce ızgaralar vardı ama sözcük dağarcığı yoktu. Sonrasında tasarımcıların sütunlar, oluklar (gutter), kenar boşlukları ve modüller için stüdyolar, okullar ve on yıllar boyunca dolaşan ortak bir dili oldu.

İsviçre okulu ızgarayı bir kısıt motoru olarak ele aldı. Bir sistem seç, ona sadık kal, çeşitliliğin doğaçlamadan değil içerikten gelmesine izin ver. Müller-Brockmann'ın Zürih Tonhalle posterleri 2026'da ürün arayüzü ekran görüntüleri gibi görünür, çünkü aynı mantıkla çalışırlar.

Sabit bir ızgara üzerinde güçlü tipografi. Artakalan alan değil, yapısal bir öğe olarak boşluk. Aynı mantık bugün 2026'da neden her SaaS aynı görünüyor gibi yazılarda karşımıza çıkıyor; orada tekdüzelik, ızgaranın kazanıp sonra ısırığını kaybetmesidir.

Web bu dilbilgisini yavaş yavaş miras aldı. CSS önce bize float'ları, sonra Flexbox'ı, en sonunda CSS Grid'i verdi. Her adım, 1961'de baskı tasarımcılarının yapabildikleriyle bir tarayıcıda front-end tasarımcılarının yapabilecekleri arasındaki farkı kapattı.

Sözcük dağarcığı değişmedi. Sütunlar hâlâ sütun. Araçlar sadece yetişti.

Izgaralar neden işe yarar, tek paragrafta

Bir ızgara, tasarımcıdan binlerce küçük kararı kaldırıp onları kullanıcıya öngörülebilirlik olarak geri verdiği için işe yarar. Göz, sayfanın ilk saniyesinde ritmi öğrenir ve sonrasındaki her şeyde gezinmek için o ritmi kullanır.

Izgara olmadan her yerleşim kararı yenidir. Başlık nerede duruyor, görsel nerede bitiyor, gövde metni ne kadar geniş, kenar çubuğu ana sütunla nasıl ilişkili. Izgarayla bu cevaplar önceden verilmiştir.

Tasarımcı dikkatini her bloğu yeniden ölçmeye değil hiyerarşiye ve içeriğe harcar. Kullanıcı dikkatini yapıyı çözmeye değil mesaja harcar. Bütün anlaşma bu.

Beş izgara türü, tek yerde

Çoğu ekip "ızgara"yı tek bir karar sanır. Oysa beş tanedir. Her biri farklı bir yerleşim sorununu çözer ve farklı bir sebeple başarısız olur. Yanlışı seçerseniz sayfa sonsuza kadar sizinle savaşır.

Bu tablo yer imidir. Yerleşim tartışmalarının çoğu, ekip bu beşten hangisini çalıştırdığı konusunda anlaştığı anda biter.

Sütun ızgarası iş atıdır

Sütun ızgaraları, web'de yayınladığınız hemen her şey için varsayılandır. Dikey sütunlar, sabit oluklar, isteğe bağlı kenar boşlukları. İçerik sütunlara akar, yerleşim blokları bir veya daha fazlasına yayılır ve ritmi tuvalin kaç sütuna bölündüğü belirler.

Stripe tüm pazarlama yüzeyinde 12 sütunlu bir ızgara kullanır. Linear'ın uygulama iskeleti, mobilde tek bir raya oturan, masaüstünde kenar çubuğu artı ana sütuna açılan bir sütun ızgarası üzerine kurulu. Vercel'in pazarlama sayfaları bilinçli negatif alan ile 12 sütunlu bir ızgara kullanır; dashboard fiyatlandırma matrisine ya da deploy log yerleşimine gözlerinizi kısarak bakarsanız sütunları görebilirsiniz. 1961'de posterleri çalıştıran aynı ızgara 2026'da pazarlama sitelerini çalıştırıyor, sadece altında media query'ler var.

Sütun ızgarasını yalnızca yerleşim temelde dikdörtgensel değilse atlayın, ki web'de bu neredeyse hiç olmaz. 2026 pazarlama sitesi stack'i incelemesi, bu ızgaranın üstünde duran framework seçimlerini ele alıyor.

Modüler ızgara editoryal yoğunluk içindir

Modüler ızgara, tuvali her iki yönde, sütunlar ve satırlar halinde hücrelere böler. Bir parça milimetrik kâğıda benzer ve öyle davranır. Yerleşim blokları hücre sınırlarına oturur ve yoğunluk bir kaza olmaktan çıkıp bir tasarım kaldıracına dönüşür.

New York Times ana sayfası, web'deki klasik modüler ızgaradır. Manşetler, fotoğraflar, özetler ve reklamlar, görünen kompozisyon çeşitli görünse bile tutarlı genişlik ve yüksekliği paylaşan hücrelere yerleşir. Bloomberg Terminal modüler ızgarayı uç noktaya taşır; sıkı hücre disiplini olmasa çökecek bir bilgi yoğunluğu var. Notion'ın galeri görünümü daha yumuşak bir modüler ızgara sunar: kartlar sabit bir hücre genişliğine oturur, içerik ise içeride uyum sağlar.

Sayfada sistem gibi okunması gereken çok sayıda küçük, karşılaştırılabilir birim varsa modüler ızgara kullanın. İçerik bir ya da iki büyük bloksa atlayın; orada sütun ızgarası aynı işi daha az törenle yapar. İki kart çalıştıran modüler ızgara, kostüm giymiş bir sütun ızgarasına benzer.

Baseline ızgarası ritim motorudur

Baseline ızgarası, dikey ritmi kontrol eden yatay bir ızgaradır. Her metin satırı bir baseline çizgisine oturur, her başlık o çizginin katına denk gelir ve sayfa, kullanıcının hissettiği ama adını koyamadığı sessiz bir müzikal tempoyla okunur.

Apple'ın pazarlama sayfaları sıkı bir baseline ızgarası çalıştırır. Herhangi bir ürün sayfasını açın ve başlığın, alt başlığın, görselin ve gövde metninin ortak bir dikey ritmi nasıl paylaştığına bakın. Medium, uzun biçimli şablonunda baseline hizalaması sunar; bu yüzden 4000 kelimelik bir denemede bile okuma zahmetsiz gelir. Yayıncılık kolu Stripe Press, bastığı ve web'e yayınladığı her sayfada baseline ritmi kullanır.

Web matematiği basit. Bir temel birim seçin, genelde 8 piksel. Gövde satır yüksekliğini bir katına ayarlayın, genelde 24 piksel; bu da 16 piksellik gövde yazısının 1,5 katıdır.

Başlıklar da katlara oturur, yani 56 piksel satır yüksekliğine sahip 48 piksellik bir H1 yine aynı ritme denk gelir. Bütün sayfa tek bir vuruşla uğuldar.

Hiyerarşik ızgara okuma sırası içindir

Hiyerarşik ızgara, içeriğin kendi önceliği etrafında kurulan özel bir ızgaradır. Sütunlardan ve satırlardan başlamak yerine, neyin birinci, ikinci, üçüncü okunacağından başlarsınız. Yerleşim, jenerik bir şablona değil bu kararlara oturur.

Apple'ın ürün lansman sayfaları sahadaki hiyerarşik ızgaralardır. Hero öğesi orantısız alan alır, ikincil içerik sıkı kümelerde durur, üçüncül içerik sona doğru daha dar bir sütunda yaşar. New York Times'ın büyük özel haberleri, uzun kaydırmalı multimedya parçaları, sahne sahne tasarlanmış hiyerarşik ızgaralardır. Anthropic'in ana sayfası, tek bir ifadenin baskın olduğu ve geri kalan her şeyin destek için boyutlandığı hiyerarşik bir ızgara çalıştırır.

Hiyerarşik ızgaralar en çok editoryal muhakeme isteyen ızgara türüdür. Tasarımcılar onları sütun veya modüler ızgaranın disiplinini atlamak için bahane yaptıklarında başarısız olurlar. Hiyerarşik ızgara "ızgarasızlık" değildir. Öncelikleri geometriyi belirleyen bir ızgaradır.

Hiyerarşiniz yanlışsa ızgara da yanlıştır. Önceliğin daha derin mantığı görsel hiyerarşi tasarımı yazısında duruyor.

Manuscript ızgarası uzun biçim içindir

Manuscript ızgarası tek sütundur. Bütün ızgara bu. Düşünceli kenar boşlukları, bilinçli bir satır uzunluğu ve gözle yarışan başka hiçbir şey olmadan sayfa boyunca akan tek bir metin bloğu.

Stripe Press kitapları kâğıt üzerindeki manuscript ızgaralarıdır. Notion'ın doküman sayfaları tarayıcıdaki manuscript ızgaralarıdır. Substack'in okuyucu görünümü, Apple Newsroom uzun okumaları, New York Times Magazine yazılarının tek sütun modu: hepsi aynı ızgarayı çalıştırır. Kitap, uzun biçimli okumayı beş yüzyıldır nasıl sunacağını biliyor. Web, 4000 kelimelik bir denemenin yanına kenar çubuğu koymaya çalışmayı bıraktığımız anda yetişti.

Kısıt, satır uzunluğudur. 65 ila 75 karakteri hedefleyin. Daha genişse göz satır başına dönerken çizgiyi kaybeder. Daha darsa ritim kesik kesik olur.

Diğer kısıt kenar boşluğudur. Cömert yan boşluklar israf alan değildir, okuyucunun gözünün rahatlamasını sağlayan çerçevedir. Boşluk sözlük maddesi, bu boşlukların neden gerçek iş yaptığını anlatıyor.

12 sütunlu sistem modern web'i çalıştırır

12 sütunlu ızgara varsayılandır, çünkü 12 en çok bölünebilen küçük sayıdır. Temiz biçimde 1, 2, 3, 4, 6 ve 12'ye bölünür. Bu, bir pazarlama sitesinin ya da ürün arayüzünün ihtiyaç duyacağı hemen her yerleşim kalıbını kesirlere başvurmadan karşılar.

Bootstrap 12 sütunlu ızgarayı 2011'de web için kodifiye etti ve bu seçim için asla özür dilemek zorunda kalmadı. Tailwind'in grid yardımcıları varsayılan olarak 12 sütun sunar. Material Design'ın duyarlı ızgarası, Carbon Design'ın ızgarası, Shopify'ın Polaris'i: hepsi 12 sütun. Bu seçim tesadüf değil, matematiktir.

İşte çoğu ekibin ya kullandığı ya da kötü biçimde yeniden icat ettiği 12 sütun saha rehberi:

• 12 tam genişlikte hero, banner, footer, kenardan kenara içerik
• 8 + 4 kenar çubuklu ana içerik, klasik ürün uygulama iskeleti
• 6 + 6 ikili içerik blokları, pazarlama özellik satırları, karşılaştırma bölümleri
• 4 + 4 + 4 üçlü kartlar, fiyat kademeleri, üç sütunlu özellik ızgaraları
• 3 + 3 + 3 + 3 dörtlü logolar, ekip ızgaraları, görsel galerileri
• 9 + 3 ince meta sütunlu içerik, editoryal yerleşimlerde yaygın
• 2 + 8 + 2 nefes alan ortalanmış içerik, pazarlama detay sayfalarında kullanılır

Bu kalıpları erkenden sabitleyin; ekip tasarım incelemelerinde yerleşimi tartışmayı bırakır. Kalıp span'leri seçer, span'ler matematiği seçer, matematik sayfayı yayınlar. Tasarım sistemine ihtiyacınız yok yazısındaki argüman, kısmen sıkı bir ızgaranın bir tasarım sisteminin yapmayı vaat ettiği işin çoğunu yaptığıdır.

Baseline ritmi sadece kâğıtta değil, ekranlarda

Baseline hizalaması, tarayıcı bunu dayatmadığı için çoğu ekibin web'de atladığı ızgara teorisi parçasıdır. Atlarsanız sayfa, kullanıcının adını koyamadığı nedenlerle teklemeli hissettirir. Tutarsanız sayfa bitmiş bir ürün gibi hissettirir.

İşin püf noktası piksellerle değil dikey birimlerle düşünmektir. 8 piksellik bir taban seçin. Tüm padding, margin, satır yüksekliği ve bileşen yüksekliği 8'in katı olur.

16 piksel gövde metni ve 24 piksel satır yüksekliği ritme oturur. 56 piksel satır yüksekliğiyle 48 piksellik H1 oturur. 24 piksel kart padding'i oturur. 96 piksel bölüm aralığı oturur. Bütün sayfa tek bir notaya akort edilmiş tek bir enstrümana dönüşür ve göz içinde tek bir takılma olmadan hareket eder.

Linear baseline ritmini issue listesinde sunar. Notion doküman okuyucusunda sunar. Figma'nın Slides ürünü ritmi hem slayt küçük resimlerinde hem de editör tuvalinde korur. Ritmi koruyan ekipler, tipografiyi bir stil sayfası ezmesi olarak değil bir sistem olarak ele alan ekipler olma eğilimindedir.

Panik olmadan duyarlı ızgaralar

Duyarlı ızgara, aynı ızgaranın farklı genişliklerde çalışmasıdır. Her breakpoint'te farklı bir tasarım değildir; viewport küçüldükçe akıllıca çöken aynı kompozisyondur.

Standart yaklaşım masaüstünde 12, tablette 8, mobilde 4 sütundur. Masaüstündeki 4 + 8 yerleşim tablette 4 + 4'e, mobilde tek sütuna dönüşür. 3 + 3 + 3 + 3 dörtlü yerleşim tablette 4 + 4 (iki satırda ikişer) olur, mobilde 4 + 4 + 4 + 4 (dört üst üste) olur. Sütun sayısı temiz kesirlerle düştüğü için matematik tutarlıdır.

Stripe'ın sitesi üretimdeki ders kitabı duyarlı ızgaradır. Linear'ın pazarlama sayfaları, sıkışmış hissettiren tek bir yerleşim olmadan üç breakpoint boyunca yeniden akar. Vercel'in fiyatlandırma matrisi, yan yana karşılaştırmayı üst üste bir akordeona çökerterek yeniden akar; çoğu ekibin asla çözemediği duyarlılık numarası budur: bazen "duyarlı" demek "sütunları değil bileşeni değiştir" demektir. Fiyatlandırma sayfası problemi bu kararı ayrıntılı ele alıyor.

Hata, mobili ve masaüstünü birbiriyle ilgisiz iki yerleşim olarak tasarlamaktır. Kompozisyonlar ayrışır, marka telefonda ve dizüstünde farklı okunur ve ekip iki ürün sürdürmeye başlar. Önce ızgarayı tasarlayın, sonra breakpoint'leri o ızgaranın çöküşleri olarak tasarlayın. Hero bölümü sözlük maddesi, kullanıcıların her breakpoint'te ilk gördüğü ızgara kısmını ele alıyor.

CSS Grid çağı: baskı kalitesindeki araçlar sonunda geldi

CSS Grid, tarayıcının ilk kez baskı tasarımcılarının 1961'de yapabildiğiyle eşleşen bir yerleşim ilkelini bulundurduğu andır. CSS Grid'den önce web tasarımcılarının float'ları, Flexbox'ı ve bol sabrı vardı. Şimdi gerçek ızgara çizgilerimiz, adlandırılmış alanlarımız, boşluk kontrolümüz ve bir sayfayı Müller-Brockmann'ın bir posteri yerleştireceği gibi yerleştirme yeteneğimiz var.

Bu değişim önemli, çünkü daha önce derleme zamanı kararı olan şey (hangi framework'ün ızgarasını kullanıyorum) artık tarayıcıya gömülü bir yerleşim ilkeli. display: grid artı grid-template-columns: repeat(12, 1fr) artı gap: 24px bir 12 sütunlu ızgaradır. Framework gerekmez. Yardımcı sınıf gerekmez. Sadece CSS'in on yıl önce yapması gerekeni yapması.

Tailwind'in grid yardımcıları artık CSS Grid'in üstünde ince bir şeker. Bootstrap'in ızgarası çoğunlukla artık var olmayan bir sorun için uyumluluk katmanı. CSS Grid'den en çok verim alan ekipler onu Flexbox'a yedek olarak değil, bir tasarım aracı olarak ele alır.

Linear'ın editörü issue paneli yerleşimi için CSS Grid kullanır. Figma'nın web editörü tuval kromu için kullanır. Vercel pazarlama sitesinin çoğunda kullanır. Araç çantada; soru, tasarım sisteminin onu kullanıp kullanmadığı ya da 2026 altyapısında 2018 kalıpları çalıştırıp çalıştırmadığı.

İncelemeye değer gerçek ürün ızgaraları

Izgara sistemlerini içselleştirmenin en hızlı yolu, onları iyi yayınlayan ürünleri incelemektir. Uzun uzun bakmaya değer beş tanesi.

Linear, uygulama iskeletinde sıkı bir sütun ızgarası, pazarlama sitesinde 12 sütunlu bir ızgara ve ikisinde de baseline ritmi çalıştırır. Issue listesi, proje görünümü, doküman paneli: hepsi aynı dikey ve yatay ızgaraya oturur. Şu anda ürün arayüzündeki en temiz sütun ızgarası uygulamasıdır.

Vercel, kasıtlı negatif alanla 12 sütunlu bir ızgara çalıştırır. Pazarlama sayfaları nefes alır, dashboard daha yoğun bir modüler ızgara çalıştırır ve yüklenme durumu üründür yazısında ele alınan deploy görünümü, build log'un baskın olduğu ve geri kalan her şeyin ona yer açtığı hiyerarşik bir ızgara çalıştırır.

Stripe, pazarlama yüzeyinde klasik 12 sütunlu ızgara, dashboard'da modüler ızgaradır. Dashboard kartları tutarlı genişliklere oturur, metrik blokları yükseklikleri paylaşır ve bütün ürün otuzdan fazla ekran boyunca tek bir kompozisyon gibi okunur. Anti-dashboard incelemesi, o ızgaranın uyguladığı felsefeyi ele alıyor.

Apple, ürün sayfalarında hiyerarşik ızgaralar, her yerde baseline ritmi ve App Store ile Newsroom'da modüler ızgara sunar. Apple'ın ızgara disiplini web'de İsviçre okulu baskısına en yakın şeydir ve çoğu ürün ekibi, marka izleniminin ne kadarının yalnızca ızgaradan geldiğini hafife alır.

Editoryal ızgaralar: NYT, Figma ve Anthropic

The New York Times, ana sayfada modüler ızgara, büyük özel haberlerde hiyerarşik ızgara, uzun okumalarda manuscript ızgarası çalıştırır. Aynı yayın, editoryal göreve göre aralarında geçiş yaparak bilinçli biçimde üç ızgara kullanır. Ders bu: ızgara türü küresel bir ayar değil, yüzey başına bir tasarım kararıdır.

Figma, dosya tarayıcısında sütun ızgarası, ekip kütüphanesinde modüler ızgara ve tuvalin içinde özel bir ızgara çalıştırır. Notion, dokümanlar için manuscript, veritabanları için modüler ızgara sunar. Daha yeni ürünler olan Loops ve Resend, temiz 12 sütunlu pazarlama ızgaraları ve uygulamada daha sıkı sütun ızgaraları sunar. Anthropic'in sitesi, her bölümde tek bir ifadenin baskın olduğu, ürün arayüzünden çok editoryal yerleşimlerden esinlenen hiyerarşik bir ızgara çalıştırır. Onboarding'siz onboarding yazısı, ızgara disiplininin çoğu zaman tek seferlik yerleşim sayılan ilk çalıştırma akışlarına nasıl taşındığını gösteriyor.

Izgarayı ne zaman bozmalı (bilerek)

Izgarayı bozmak, ancak ızgara o kadar görünürse ki bozulma bilinçli bir seçim olarak okunuyorsa işe yarar. Bozulmanın arkasında bir ızgara yoksa bozulan öğe, sayfada hizası kaymış bir şeyden ibarettir.

Bir hero görselinin kenar boşluğunun ötesine uzanmasına izin veren Apple ürün sayfası, başka her yerde sıkı duran bir ızgarayı bozuyor. Bir fotoğrafın deneme ortasında tam taşmaya (full bleed) çıktığı NYT özel haberi, altında ve üstünde disiplinli modüller çalıştıran bir ızgarayı bozuyor. Anthropic'in ana sayfası ara sıra tek bir alıntının beklenen boyutunun iki katında, eksenin dışında durmasına izin verir ve hamle işe yarar çünkü etrafındaki her şey düğmelenmiştir.

Kural, yüzey başına bir bozulmadır. İki bozulma ızgarasızlık gibi okunur. Bozulma, sayfadaki en çok hatırlanan an olmalı. Öğenin bozduğu ızgarayı gösteremiyorsanız ızgara bozmuyorsunuz, yapısız bir yerleşimi süslüyorsunuz. Wireframe sözlük maddesi, hangi ızgaraya bağlanacağınıza dair erken aşama kararını ele alıyor.

Ayarlar sayfası problemi yazısındaki ayar paneli disiplini ilgili bir derstir. Ayar sayfaları ızgara disiplininin çöktüğü yerler olma eğilimindedir, çünkü her ayar farklı bir yerleşimi hak edecek kadar farklı hissettirir. Hak etmez. Izgarayı tutun, içeriğin onun içinde değişmesine izin verin.

Kimse göstermese de marka ızgaradır

Bu yazıda anılan herhangi bir üründen renkleri, tipografiyi ve görselleri çıkarsanız, ızgaralar yine tanınırdı. Linear'ın ızgarası yine Linear gibi hissettirirdi. Stripe'ın ızgarası yine Stripe gibi. Izgara, bir ürünün yayınladığı en derin marka artefaktıdır, çünkü kullanıcının bilinçli olarak hiç görmeden hissettiği şeydir.

Bir ızgara türü seçin, bir sütun sayısı seçin, bir baseline birimi seçin. Bir yıl boyunca her yüzeyde tutun; marka yüzey işlemesinden değil yapıdan belirmeye başlayacaktır. İsviçre okulunun öğrettiği ve çoğu ürün ekibinin tekrar tekrar yeniden öğrendiği bütün sır bu. İşi ızgara yapar. Gerisi, ızgaranın onu tutmak için orada olup olmamasına göre başarılı ya da başarısız olan dekorasyondur.

SSS

Sütun ızgarası ile modüler ızgara arasındaki fark nedir?

Sütun ızgarası tuvali yalnızca dikey sütunlara böler; yerleşim blokları bir veya daha fazla sütuna yayılır ve ritim yataydır. Modüler ızgara tuvali her iki yönde, sütunlar ve satırlar halinde hücrelere böler; bloklar hücrelere oturur ve yoğunluk tasarlanmış bir özellik olur. Sütun ızgaraları pazarlama sitelerini ve çoğu uygulama iskeletini karşılar. Modüler ızgaralar dashboard'ları, editoryal yerleşimleri ve çok sayıda küçük karşılaştırılabilir birimin sistem gibi okunması gereken her arayüzü karşılar.

12 sütunlu ızgara neden standart?

12, en çok bölünebilen küçük sayıdır. Temiz biçimde 1, 2, 3, 4, 6 ve 12'ye bölünür; bu da hemen her yerleşim kalıbını (tam genişlik, yarılar, üçler, dörtler, altılar) kesir olmadan karşılar. Bootstrap 2011'de kodifiye etti, Tailwind varsayılan olarak sunar ve o zamandan beri her büyük tasarım sistemi bu seçimi eşledi, çünkü matematik matematiktir.

CSS Grid varken hâlâ bir CSS framework'üne ihtiyacım var mı?

Yerleşim için hayır. display: grid ile grid-template-columns: repeat(12, 1fr) ve gap, üç satır CSS'te 12 sütunlu bir ızgaradır. Bootstrap ve Tailwind gibi framework'ler bileşen konvansiyonları, yardımcı kısayollar ve ekip çapında tutarlılık yoluyla değer katar, ama yerleşim ilkeli artık bir tarayıcı özelliğidir. Ekibinizi hızlandırıyorsa framework'ü kullanın. Izgaralar için ona ihtiyacınız olduğunu düşündüğünüz için kullanmayın.

SSS: ızgarayı yayınlamak ve bozmak

Gerçek bir üründe baseline ritmini nasıl korurum?

Bir temel birim seçin, genelde 8 piksel. Her padding, margin, satır yüksekliği ve bileşen boyutunu o birimin katı yapın. 16 piksel gövde yazısı, 24 piksel satır yüksekliği.

Başlıklar 32, 40, 48 veya 56; satır yükseklikleri 40, 48, 56 veya 64. Bölüm aralığı 96 veya 128. Disiplin sıkıcıdır, sonuç ise taslak yerine bitmiş bir ürün gibi okunan bir sayfadır.

Izgarayı ne zaman bozmalıyım?

Yüzey başına bir kez, ızgara bozulmanın bilinçli okunacağı kadar görünürken. Bozulma, sayfadaki en çok hatırlanan an olmalı. Öğenin bozduğu ızgarayı gösteremiyorsanız sayfanın henüz ızgarası yok, yerleşimi var. Önce ızgarayı düzeltin, sonra bozun.

CTA

Izgara sistemlerini lansmandan önceki son dakika işi olarak değil, ürünün omurgası olarak tasarlayan bir ekip istiyorsanız, Brainy'yi kiralayın. İşi ızgaranın yaptığı, markanın tek bakışta okunduğu ve ritmin her yüzeyde tuttuğu ürünler yayınlıyoruz. Müller-Brockmann onaylardı. Kullanıcılarınız da onaylar, hangi ızgaraya baktıklarını hiç bilmeseler bile.