M
Düz Tasarım flat designendüstri standardı
bilinen diğer adları flat UI · flat 2.0 · düz arayüz
"gölgesiz, dümdüz renkli bloklar" diyorsan → bunun adı flat design.
Düz tasarım arayüzü saf iki boyutlu çizer: yüzeyler tek renk dolgudur, ikonlar basit geometrik siluetlerdir ve hiçbir şey ışığı, kabartmayı ya da fiziksel bir malzemeyi taklit etmez. Hiyerarşi gölge ve eğimden değil renk, boyut ve tipografiden gelir. 2012-2013'te skeuomorphism'e doğrudan bir tepki olarak yaygınlaştı ve bugün hâlâ en güvenli varsayılan sayılıyor. Bedeli şudur: gölge kalkınca 'bu tıklanır mı' sorusu ortaya çıkar ve ipucunu tek başına renk taşımak zorunda kalır.
Kapsam: Bu madde KATI düz render'ı kapsar. Düz yüzeylere işlevsel gölgelerin geri döndüğü 'flat 2.0' — ve onun sistemleşmiş hâli Material Design — bugünün yaygın uzlaşmasıdır, ayrı bir kategori değil. Minimalizm ile karıştırma: o içerik eksenini yönetir, bu render eksenini.
- “her şey gölgesiz düz renklerden ibaret”
- “düpedüz renkli dikdörtgen butonlar”
- “iOS 7'de her şeyin düzleştiği o görünüş”
- “renkli karelerin üstünde basit beyaz ikonlar”
- “degrade yok doku yok, sadece temiz renk blokları”
- “parlak butonları öldüren tasarım tarzı”
…hepsinde kastettiğin şey flat design.
Metro kutucukları: renk blokları, gölgesiz yüzeyler, tek renk geometrik ikonlar. Hiyerarşiyi taşıyan şey gölge değil renk ve boyut. Dikkat et — bu ekran KALABALIK ama yine de düz; çünkü düzlük render'ı yönetir, içerik miktarını değil.
belirleyici bu olmadan stil o stil değildirdestekleyici sık görülür, şart değildeğişken serbest, değiştirebilirsinkaçın bu stille anılır ama ona ait değildir
Her yüzey tek bir düz renktir: degrade yok, parlaklık yok, doku yok. Yüzeyin kendisi hiçbir şeyi taklit etmez.
Bunları eklediğin anda yol skeuomorphism'e döner. Düzlüğün iddiası, hiçbir şeyin başka bir şeymiş gibi görünmemesidir.
Düşen gölge, eğim ve parlama yoktur; bütün öğeler tek bir düzlemde oturur. Kenarı çizen şey ışık değil renk değişimidir.
İkonlar en az sayıda geometrik siluete indirgenir, çoğunlukla tek renktir. Detaylı, ışık alan ikon bu dile ait değildir.
Parlak ve çoğu zaman doygun renk blokları eylemleri ve bölgeleri ayırır. Gölge olmadığı için ayırt etme işinin tamamı renge ve boyuta biner.
Gölge kalkınca 'bu tıklanır mı' sorusu doğar; araştırmalar düz arayüzlerde kullanıcıların daha az dikkat verip daha çok tereddüt ettiğini ölçtü. Buton ve linke tartışmasız bir renk ipucu ver.
Net bir sans-serif ve güçlü boyut basamakları, kutu ve kabartmanın yerini alır. Tipografi zayıfsa düz arayüz dağınık görünür.
Düz tasarım yalnızca RENDER'ı yönetir: düz bir arayüz seyrek de olabilir, yoğun da. Kalabalık olması stili bozmaz — bozan şey minimalizmde olurdu.
Minimalizm değil. Bu düz tasarımdır çünkü ölçü RENDER'dır: yüzeyler gölgesiz ve degradesiz düz renkle çizilir, içerik miktarı ne olursa olsun. Minimalizm olurdu eğer ölçü İÇERİK olsaydı — az öğe, geniş boşluk, tek mesaj. İkisi farklı eksende çalışır; bir arayüz aynı anda hem düz hem kalabalık olabilir ve bu onu 'kötü minimalizm' değil, sadece minimalizm-olmayan yapar.
Gerçekçi Taklit değil. Bu düz tasarımdır çünkü yüzeyler gölgesiz düz dolgudur ve ikonlar soyut sembollerdir; hiçbir şey fiziksel bir nesneyi ya da malzemeyi taklit etmez. Skeuomorphism olurdu eğer yüzeyler adı konabilir bir malzemeyi (deri, metal, kâğıt) taklit etseydi ve ışık modeli gerçek bir cismi ima etseydi. Düz tasarım zaten tarihsel olarak onun yerine geçmek için doğdu.
Tam sayfa örneğini gez →baştan sona landing; şeritten stil atlayabilirsin
Yukarıdaki brief çerçeve-bağımsızdır; bunlar stack'in uyuyorsa somut tutamaklar.
- CSS
background-color: #2D7FF9; box-shadow: none; border: none;Temel kural: degrade değil düz dolgu, gölge yok. Kenarı renk değişimi çizer.
- CSS
:focus-visible { outline: 3px solid #111; outline-offset: 2px; }Zorunlu: gölge kalktığı için odak halkasını kaldırmak arayüzü klavyeyle kullanılamaz yapar.
- CSS
/* kontrol sınırı için 3:1, metin için 4.5:1 — İKİSİ AYRI ölçülür */Renk çift görev yapıyor: hem hiyerarşi hem sınır. İki eşiği ayrı ayrı doğrula.
- Gölge kalkınca renk çift görev yapar: metin için 4.5:1 ve KONTROL SINIRI için 3:1 eşiklerini ayrı ayrı ölç. Birini geçmek diğerini geçtiğin anlamına gelmez.
- Odak halkasını asla kaldırma. Gölgesiz bir arayüzde odak halkası yoksa klavyeyle gezen kullanıcı için ekranda hiçbir işaret kalmaz.
- Tıklanabilir olanı tartışmasız göster: renk ipucu zayıfsa kullanıcı ne yapacağını bilemez — bu, düz tasarımın ölçülmüş bedelidir.
- Doygun renk bloklarında beyaz metin sık kırılır, özellikle sarı ve cyan üzerinde. Her blok için ayrı ölç.
| ✅ Kullan | Genel amaçlı güvenli varsayılan: pazarlama siteleri, mobil uygulamalar, dashboard'lar. |
| ⛔ Kaçın | Her şey düz olunca tıklanabilir ile süs ayrışmayabilir — butonlara net renk ayır. |
Windows 11 arayüzü
Google Material'ın düz hâlleri
çoğu banka uygulaması
Yerleşmiş akım. Tek bir kişinin ortaya attığı bir ad değil; iki platform sahibinin (Microsoft ve Apple) kendi sistemlerinde uyguladığı yönün sektörde kazandığı ortak addır. Bu yüzden marka dili değil, endüstri standardı sayılır.
2012-2013'te yaygınlaştı ama iki adımda geldi. Microsoft'un Metro dili (Windows Phone 7, 2010; Windows 8, 2012) düz render'ın işletim sistemi ölçeğinde çalışabildiğini gösterdi: büyük parlak kutucuklar, sade sans-serif tipografi, düz ikonlar. Apple'ın iOS 7 yeniden tasarımı (2013) ise skeuomorphism dönemini kamuya kapattı. Daha derin kökü İsviçre/Uluslararası tipografi geleneğine dayanır. Zamanla saf düzlük yumuşadı: işlevsel gölgelerin geri döndüğü 'flat 2.0' ve Material Design bugünün yaygın uzlaşması oldu — çünkü tamamen gölgesiz arayüzlerde kullanıcıların neyin tıklanabilir olduğunu kestirmekte zorlandığı ölçüldü.
- birincilMicrosoft Learn — Windows uygulamaları tasarım kılavuzu ↗
Düz render'ı işletim sistemi ölçeğinde ilk uygulayan platform sahibinin kendi kılavuzu.
- ikincilNielsen Norman Group — Flat Design: Kökeni ve Sorunları ↗
Akımın tanımı ve getirdiği kullanılabilirlik bedeli.
- ikincilNielsen Norman Group — Düz arayüz öğeleri daha az dikkat çekiyor ve tereddüt yaratıyor ↗
Ölçülmüş bulgu: zayıf ipuçlu düz arayüzlerde kullanıcı neyin tıklanabilir olduğunu kestiremiyor.
- standartW3C — WCAG 2.2, Non-text Contrast (1.4.11) ↗
Gölge yokken kontrol sınırını renk taşır; sınır için 3:1 şartı burada.
Minimalizm minimalismGerçekçi Taklit skeuomorphismNeo-Brütalizm neubrutalism