Neobrutalizm: Arayüz Kuralları ve Kontrast Tuzağı

Neobrutalizm; kalın siyah kenarlıklar, bulanıklaştırılmamış gölgeler ve yüksek doygunluklu renklerle minimal arayüzlere verilmiş bir tepki. Uygulaması kolay görünür, çünkü görsel dili birkaç net kurala indirgenebiliyor. Zor kısmı o kuralları erişilebilirliği kırmadan uygulamak.

Stilin nereden geldiği

Ad, 20. yüzyıl mimarisindeki brutalizmden geliyor: malzemeyi gizlemeyen, betonun beton olduğunu söyleyen bir yaklaşım. Web tarafındaki karşılığı 2010'ların sonunda belirdi ve birbirine benzeyen, yuvarlatılmış köşeli, yumuşak gölgeli kurumsal arayüzlere karşı bir duruş olarak yayıldı. Brutalizmden ayrıldığı yer renk: mimaride gri olan şey ekranda sarı, camgöbeği, fuşya.

Stilin teknik karşılığı

Neobrutalist bir bileşeni tarif etmek için geniş bir tasarım sistemine gerek yok. Kenarlık ve gölge kısmı iki satır CSS: border: 3px solid #000 ve box-shadow: 6px 6px 0 #000. Gölge bulanıklaştırılmaz, yayılma yarıçapı verilmez, tek renk kalır. Hover durumunda gölgeyi küçültüp elemanı aynı miktarda kaydırmak butonun bastırıldığı hissini verir; bunun için animasyon kütüphanesi kurmayın, transform: translate(3px, 3px) aynı işi görüyor.

Tipografi

Başlıklarda kalın ve karakterli yazı tipleri, gövdede sakin bir aile (Inter, Roboto ya da sistem yığını) iyi çalışıyor. Başlıkla gövde arasındaki punto farkını abartın. Hiyerarşiyi burada kurarsanız renkle kurmak zorunda kalmazsınız, renk de asıl işine, dikkat çekmeye kalır.

Boşluk

Blok yapı yoğun görünür, iç boşluğu 24 ile 32 piksel arasında tutmak nefes aldırır. Kenarlık kalınlaştıkça iç boşluğu da artırın, yoksa metin çerçeveye yapışır.

Kontrast, stilin en sık kırıldığı yer

Canlı renk stilin merkezinde, ama metin rengi olarak kullanıldığı anda sorun çıkarıyor. Beyaz zemin üzerinde parlak sarı bir yazının kontrast oranı 1,4:1 dolayında kalır; WCAG AA gövde metni için 4,5:1 istiyor. Aynı sarıyı zemine alıp metni siyaha çevirdiğinizde oran 15:1'e çıkar ve stil hiçbir şey kaybetmez.

Kural bu kadar basit: doygun renkler zemin ve blok olsun, metin siyah ya da beyaz kalsın. Kontrastı gözle tahmin etmeyin, tarayıcının inceleme panelinde ölçün. Sarı ve açık yeşil bu konuda özellikle yanıltıcı, parlak göründükleri için okunur sanılıyorlar.

Odak halkasını silmeyin

Kalın kenarlıklı bir tasarımda tarayıcının varsayılan odak halkası çirkin durur ve ilk refleks outline: none yazmak olur. Klavyeyle gezen kullanıcı için bu, arayüzü kör etmek demek. Halkayı kaldıracaksanız yerine görünür bir şey koyun: :focus-visible ile kenarlık rengini değiştirin ya da gölgeyi ters yöne kaydırın. Hover ile focus birbirinden farklı görünsün, çünkü ikisi farklı sorulara cevap veriyor.

Nerede işe yarar, nerede yaramaz

Portfolyo siteleri, tasarım stüdyoları, tek sayfalık ürün tanıtımları, küçük ürünlerin açılış sayfaları. Figma ve Gumroad gibi ürünlerin pazarlama yüzeylerinde stilin tuttuğu yer burası: kısa süre bakılan, dikkat çekmesi gereken ekranlar.

Yoğun veri gösteren arayüzlerde aynı stil yorar. Kalın kenarlık her satırda tekrarlandığında tablo okunmaz hale gelir, yüksek doygunluklu renkler saatlerce açık duran bir panelde göz yorar. Uzun formlarda, yönetim panellerinde, hata maliyetinin yüksek olduğu finans ve sağlık arayüzlerinde sakin bir dil daha doğru. Stili yine de oraya taşımak isterseniz renk ve gölgeyi bırakın, sadece kenarlık ve tipografi tarafını alın.