M
Neo-Brütalizm neubrutalismendüstri trendi
bilinen diğer adları neo-brutalism · neubrutalism · neo brütalist arayüz
"kalın siyah çerçeveli, sert gölgeli, çiğ renkli" diyorsan → bunun adı neubrutalism.
Neo-brütalizm tasarlanmış bir grafik dildir: kalın siyah konturlarla çevrilmiş düz ve doygun renk blokları, bulanıklığı sıfır sert ofset gölgeler — birkaç piksel kaydırılmış som siyah dikdörtgenler — ve iri display tipografi. Öğeler çıkartma ya da risograf baskı gibi okunur; bir düğmeye basınca düğme fiziksel olarak kendi gölgesinin içine itilir. Adına rağmen hamlığın tam tersidir: her kenar ve her gölge bilinçli bir illüstrasyon kararıdır.
Kapsam: Brutalism'in adını alır ama yöntemini almaz. Gerçekten ham olan kardeşi için Web Brütalizmi maddesine, kelimenin çıktığı yer için mimarideki Brutalizm'e (çıplak beton) bak. Neo-brütalist sayfaları sık süsleyen Memphis tarzı geometrik konfeti ise ayrı bir akımdır.
- “siyah konturlu, sert gölgeli parlak bloklar”
- “kalın siyah kenarlı, gölgesi bulanmayan butonlar”
- “şu sarı-siyah çıkartma gibi duran site”
- “çizgi roman gibi kalın hatlı, tombul arayüz”
- “Gumroad'a benzeyen kalın düz stil”
…hepsinde kastettiğin şey neubrutalism.
PAYLAŞ.
SAT.
Ürününü on dakikada yayına al. Komisyon yok, abonelik yok.
sonsuza kadar
Indie ürün landing'i, stilin doğduğu yer. Gölgeler bulanık değil kaymış kopya; kenarlar 3px siyah; sarı ve pembe degradesiz. Rozet birkaç derece yamuk — dilin şakacı tarafı.
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 öğe siyah bir çizgiyle çevrilir; kenar dekoratif değil yapısaldır. İnceltirsen ya da kaldırırsan geriye sıradan bir düz tasarım kalır.
Gölge 4px 4px 0 #000 gibidir: bulanık değil, kaymış bir kopya. Bulanıklık eklediğin an grafik derinlik yerine ışık taklidi yaparsın ve stil bozulur.
Bu stilin derinliği ışıktan değil geometriden gelir. Degrade ve blur eklemek onu sıradan modern bir arayüze çevirir.
Sarı, limon, sıcak pembe, cyan yan yana ve degradesiz durur. Renk yumuşadıkça dil kile, pastele ya da kurumsal düz tasarıma kayar.
Sarı-siyah klişedir ama yüksek doygunluktaki her set çalışır. Stili taşıyan şey belirli bir renk değil, kalın konturlar ve sert gölgelerdir.
Banka, sağlık, hukuk: çiğlik ciddiyeti bozar. Stil dikkat çeker ama güven vaadi taşımaz.
Başlıklar bağırır: kalın grotesk, çoğu zaman abartılı puntolarda. Gövde metni sade kalır ki başlıklar öne çıkabilsin.
Aktif durumda öğe translate(4px,4px) ile kendi gölgesinin içine oturur ve gölge kalkar. Bu fiziksel geri bildirim stilin imzasıdır.
Birkaç derece döndürülmüş etiketler ve yıldız/patlama biçimli çıkartmalar sık kullanılır. Şart değildir ama dilin şakacı tarafını taşır.
Web Brütalizmi değil. Bu neo-brütalizmdir çünkü görünüş EKLEYEREK kuruldu: kalın kenar, sert gölge, çiğ renk — hepsi bilinçli eklemeler. Web brütalizmi olurdu eğer bunları ÇIKARSAYDIN; kenarlığı, gölgeyi ve rengi kaldırıp tarayıcının varsayılanlarına bıraksaydın. Adları benzediği için sürekli karıştırılıyorlar, oysa ters yönde çalışıyorlar: biri ekleme, diğeri eksiltme.
Kil Efekti değil. Bu neo-brütalizmdir çünkü renkler çiğ, kenarlar 3px siyah ve gölge bulanıksız serttir. Kil olurdu eğer palet pastel, köşeler tombul ve gölge yumuşak ve renkli olsaydı. İkisi de tombul-oyuncaklı bir his verir; ayrım sertliktedir.
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
border: 2px solid #000; box-shadow: 4px 4px 0 #000; border-radius: 8px;İmza kart/buton kurulumu: kalın kontur + bulanıksız ofset gölge.
- CSS
:active { transform: translate(4px,4px); box-shadow: none; }Gölgeye gömülme: öğe kendi gölgesinin yerine oturur, gölge kalkar.
- Tailwind
border-2 border-black shadow-[4px_4px_0_#000] active:translate-x-1 active:translate-y-1 active:shadow-noneAynı kurulumun utility karşılığı.
- Çiğ renk üstündeki metin en riskli yer: siyah metin sarı ve limonda genelde geçer, beyaz metin aynı zeminde geçmez. Her renkli blokta 4.5:1'i ayrı ölç, tek seferde 'nasılsa kontrastlı' deme.
- Dekoratif siyah kenarlık, klavye odak halkasıyla karışır. Odağı kenarlıktan farklı bir renk ve ofsetle göster, yoksa odak görünmez olur.
- Basma animasyonunu (gölgeye gömülme) prefers-reduced-motion açıkken kapat.
- İri tipografi cazip ama satır uzunluğunu 60-70 karakterde tut; blok renkli zeminde uzun satır okunmaz.
| ✅ Kullan | Genç markalar, portföy siteleri, indie ürünler, 'cesur ve eğlenceli' sesler. |
| ⛔ Kaçın | Kurumsal güven isteyen alanlar (banka, sağlık, hukuk) — çiğlik ciddiyeti bozar. |
Gumroad
Figma pazarlama sayfaları dönemi
indie SaaS landing'leri
Sektör terimi, ama adı tartışmalı. İki yazımı birlikte dolaşıyor (neubrutalism / neo-brutalism) ve asıl sorun şu: ad mimarideki brutalism'den ödünç alındı, oysa bu stil süssüzlük değil YOĞUN BİÇİMDE STİLLENMİŞ bir görünüştür. Adlandıran yazı Mart 2022'de Michal Malewicz'ten geldi.
Kökü mimarideki brutalism'e dayanır: Fransızca béton brut, yani ham beton — 1950-60'ların malzemeyi gizlemeyen mimarisi. Web tarafında ad 2022'de kondu ama görünüş daha önce yerleşmişti. En bilinen dönüm noktası Gumroad'un 2021 yeniden tasarımıdır: Sahil Lavingia yönetiminde alışıldık SaaS estetiği bırakıldı, yerine çiğ renkler, kalın siyah kenarlar, iri tipografi ve sert ofset gölgeler geldi. Tepki ikiye bölündü ama arayüz anında tanınır oldu. Adın tartışmalı olmasının sebebi şudur: mimarideki brutalism süsü reddederken bu stil yoğun biçimde stillenmiştir — süssüz değil, farklı biçimde süslüdür.
- birincilMichal Malewicz — Neubrutalism is taking over the web (UX Collective, Mar 2022) ↗
Trendi adlandıran ve yaygınlaştıran yazı. Medium giriş duvarı çıkarabilir.
- ikincilNielsen Norman Group — Neobrutalism: Definition and Best Practices ↗
Kullanılabilirlik araştırma grubunun tanımı ve sınırları; terimi ortaya atan kaynak değil ama ciddi bir denetim gözü.
- standartW3C — WCAG 2.2, Contrast (Minimum) ↗
Çiğ renk blokları üstündeki metin bu eşikte kırılır; her blokta ayrı ölç.
Web Brütalizmi web brutalismKil Efekti claymorphismDüz Tasarım flat design