Neobrütalizm vs. brütalizm: 7 temel fark (örneklerle)

Bu konuşmayı sayamayacağım kadar çok kez yaptım:

Müşteri: „Brütalist bir web sitesi istiyoruz.“

Ben: „Harika. Peki brütalist sizin için ne anlama geliyor?“

Müşteri: „Hani, kalın kenarlıklar, canlı renkler, o cesur hava.“

Ben: „O neobrütalizm, brütalizm değil.“

Müşteri: „…bir fark mı var?“

Evet. Hem de büyük bir fark. Ve 2026'da „brütal“ bir şey tasarlayacaksanız, ne inşa ettiğinizi tam olarak bilmeniz gerekir.

Brütalizm ile neobrütalizm aynı DNA'yı paylaşır, ama kardeş değildir: tamamen farklı yönlere gitmiş uzak kuzenlerdir. Biri savaş sonrası mimariden doğdu. Diğeri ise yuvarlatılmış köşelerden bıkmış asi web tasarımcılarından.

Bu iki çarpıcı tasarım akımını ayıran 7 temel farkı inceleyelim.

Kısa bir tarih dersi (söz veriyorum, konuyla ilgili)

Farklara dalmadan önce sahneyi kuralım.

Brütalizm: 1950'lerin mimarisi web ile buluşuyor

Brütalizm, 1950'lerde bir mimari akım olarak doğdu. Adı, Fransızca „ham beton“ anlamına gelen béton brut'dan gelir; brütalist yapıların görünümünü kusursuzca anlatan bir ifade.

Devasa beton yapılar, açıkta bırakılmış malzemeler, geometrik formlar ve sıfır süsleme düşünün. O yapılar güzel görünmeye çalışmıyordu. İşlevsel, dürüst ve pervasızca hamdılar.

Ünlü örnekler:

• Londra'daki Barbican Centre
• Boston City Hall
• Montreal'deki Habitat 67

2000'lerin başına atlayalım: web tasarımcıları brütalist ilkeleri ödünç almaya başladı; ham HTML, minimal CSS, bilerek „çirkin“ yerleşimler. O dönemin aşırı tasarlanmış, Flash yüklü sitelerini reddediyorlardı.

Web brütalizmi, benimsenmiş bir anti-tasarıma dönüştü. Biçimden önce işlev. Cilalanmışlıktan önce içerik. Parlaklıktan önce dürüstlük.

Neobrütalizm: dijitalde doğan bir başkaldırı

Neobrütalizm, giderek tekdüzeleşen web tasarımına bir yanıt olarak 2015-2018 dolaylarında ortaya çıktı. Brütalizm eksiltirken neobrütalizm tersini yaptı: her şeyi sonuna kadar açtı.

Kalın siyah kenarlıklar. Sert gölgeler. Yüksek kontrastlı renkler. Asimetrik ızgaralar. Brütalizmin cüretini korudu, ama üzerine oyun, renk ve bilinçli tasarım kararları ekledi.

Neobrütalizm anti-tasarım değildi: cesur bir tasarımdı. 2010'lara hâkim olan yumuşak, yuvarlatılmış, her yeri pastel estetiği reddediyordu.

Gumroad, Balenciaga ve Spotify gibi markalar onu benimsedi. Dribbble ve Behance'teki tasarımcılar onu bir trende dönüştürdü. Peki ya bugün? Kullanabileceğiniz en tanınabilir tasarım dillerinden biri.

7 temel fark

Tarihi geride bıraktığımıza göre, bu stilleri gerçekte neyin ayırdığına bakalım.

1. Amaç ve felsefe

Brütalizm: her şeyin önünde işlev

Brütalist tasarım, kökünü minimalizm ve dürüstlükten alır. Felsefesi basit: yapıyı göster. İskeleyi gizleme. Süsleme uğruna süsleme ekleme.

Web tasarımında bu şu demektir:

• Minimal CSS
• Açıkta bırakılmış HTML yapısı
• Temel tipografi
• Hiçbir animasyon ya da süs
• İçerik kraldır

Örnek: Brütalist bir blog büyük olasılıkla varsayılan sistem yazı tiplerini, siyah ve beyazın ötesinde sıfır rengi ve gezinme için yalın <ul> listelerini kullanır. Okunabilir, işlevsel ve güzel görünmek için en ufak bir çaba göstermez.

Neobrütalizm: cesur ifade, ama niyetle

Neobrütalizm hamlığı korur, ama üzerine kişilik ekler. Anti-tasarım değildir: kendinden emin bir tasarımdır. Felsefesi şudur: öne çık, akılda kal, ama kullanılabilirliği asla feda etme.

Web tasarımında bu şu demektir:

• Düşünülmüş renk paletleri (siyah/beyaz + canlı vurgular)
• Bir bildiri olarak tipografi (kalın, geometrik yazı tipleri)
• Kontrast ve boyutla kurulan görsel hiyerarşi
• UX'i zenginleştiren mikroetkileşimler
• „El yapımı“ hisseden bir tasarım

Örnek: Neobrütalist bir açılış sayfası başlıklar için Archivo Black, her öğede kalın 4px kenarlıklar, 6px kaydırılmış sert gölgeler ve canlı sarı bir CTA düğmesi kullanır. Cesur, ama her seçim bilinçli.

Fark: Brütalizm sorar: „Buna gerçekten ihtiyacımız var mı?“ Neobrütalizm sorar: „Bunu görmezden gelinmesi imkânsız hâle nasıl getiririz?“

2. Rengin kullanımı

Brütalizm: monokrom ya da hiç

Brütalist tasarım siyaha, beyaza ve gri tonlarına bağlı kalır. Renk çıksa bile, genellikle tesadüfen (mavi bağlantılar) ya da salt işlevsel olarak (hatalar için kırmızı) çıkar.

Sebebi? Renk süslemedir ve brütalizm süslemeyi reddeder.

Örnek palet:

Kopyala:root {
  --background: #ffffff;
  --foreground: #000000;
  --gray: #666666;
}

Hepsi bu. Üç renk. Kendinizi çılgın hissediyorsanız dört.

Neobrütalizm: yüksek kontrastlı renk blokları

Neobrütalizm rengi SEVER, ama ince pastelleri değil. Cesur, doygun, pervasız tonlardan söz ediyoruz. Siyah ve beyaz temeli oluşturur, sonra göze çarpan bir ya da iki vurgu rengi eklersiniz.

Popüler neobrütalist paletler:

• Siyah + beyaz + neon sarı (#FFDB33)
• Siyah + beyaz + çarpıcı pembe (#FF006E)
• Siyah + beyaz + siber mavi (#00F0FF)

Örnek palet:

Kopyala:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #ffdb33;
  --accent: #ff006e;
  --border: #000000;
}

Renkler yalnızca vurgu değildir: vurguya, hiyerarşiye ve enerjiye hizmet eder.

Örnek: Gumroad, siyah arka planlar üzerinde canlı sarı CTA'lar kullanır. Feastables neon yeşiller ve morlarla oynar. Bunlar tesadüf değil: marka kimliğinin çekirdeği.

Fark: Brütalizm rengi damla damla kullanır ya da hiç kullanmaz. Neobrütalizm onu stratejik ve cesur biçimde kullanır.

3. Tipografi

Brütalizm: sistem yazı tipleri ve varsayılanlar

Brütalist tasarım çoğunlukla tarayıcının beraberinde getirdiğini kullanır:

• Arial
• Times New Roman
• Sistem yazı tipi yığınları

Neden? Özel yazı tipleri gereksiz süsleme olarak görülür. Metin okunabilir olmalıdır, güzel değil.

Örnek:

Kopyalabody {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Başlıklar belki biraz daha büyüktür, ama ağırlık ya da stille kurulan bir hiyerarşi yoktur. Bu, bilerek yalın bırakılmış bir metindir.

Neobrütalizm: kalın, geometrik başlık yazı tipleri

Neobrütalizm tipografiye bir başrol öğesi gibi davranır. Başlıklar KOCAMANDIR, kalındır ve genellikle şöyle çarpıcı geometrik yazı tiplerine dayanır:

• Archivo Black
• Bebas Neue
• Monument Extended
• Druk

Örnek:

Kopyalah1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
 
body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

Tipografi görsel hiyerarşiyi kurar. Gövde metni okunabilir kalır, ama başlıklar dikkat ister.

Gerçek örnek: Balenciaga'nın web sitesine bir göz atın. Tipografileri devasa, kalın, gözden kaçması imkânsız. İşte bu neobrütalizmdir.

Fark: Brütalizm varsayılan yazı tiplerini bir anti-süsleme olarak kullanır. Neobrütalizm kalın tipografiyi başlı başına bir tasarım öğesine dönüştürür.

4. Yerleşim ve yapı

Brütalizm: açıkta ızgaralar, ham HTML

Brütalist yerleşimler HTML'in varsayılan akışını kucaklar. Şunları görürsünüz:

• Tek sütunlu yerleşimler
• Stilsiz listeler
• Tablo gibi görünen tablolar
• Hiçbir gösterişli ızgara ya da flexbox numarası

Yerleşim işlevseldir ve çoğunlukla erken dönem webi taklit eder (GeoCities ya da Craigslist'i düşünün).

Örnek: Brütalist bir portföy, projelerini tarihleriyle birlikte yalın bir <ul> içinde listeler. Kart yok, üzerine gelme efekti yok, tarayıcı varsayılanlarının ötesinde boşluk yok.

Kopyala<ul>
  <li>Project 1 - 2025</li>
  <li>Project 2 - 2024</li>
  <li>Project 3 - 2023</li>
</ul>

Yalın. Ham. Belki birkaç kenar boşluğu ayarı dışında hiç CSS yok.

Neobrütalizm: asimetrik ızgaralar ve katmanlama

Neobrütalist yerleşimler ızgarayı kırar, hem de bilerek. Şunları görürsünüz:

• Öğelerin asimetrik yerleşimi
• Üst üste binen bölümler
• „Süzülen“ ya da kaydırılmış öğeler
• Yaratıcı düzenler için CSS Grid ve Flexbox'ın yoğun kullanımı

Her şey yine de işlevseldir, ama yerleşim görsel ilgi uyandırır.

Örnek: Neobrütalist bir hero bölümü şunları içerebilir:

• Sola kaydırılmış büyük bir başlık
• Başlığın üzerine binen, kalın kenarlıklı bir görsel
• Asimetrik konumlandırılmış bir CTA düğmesi
• Derinlik yaratan sert gölgeler

Kopyala<section className="grid grid-cols-2 gap-8 relative">
  <div className="col-span-2 md:col-span-1 z-10">
    <h1 className="text-7xl font-bold uppercase">Your Product</h1>
    <p className="text-xl mt-4">Bold designs for bold brands.</p>
    <Button className="mt-6">Get Started</Button>
  </div>
  <div className="absolute right-0 top-10 w-1/2 border-4 border-black shadow-[8px_8px_0_0_#000]">
    <img src="/hero.png" alt="Hero" />
  </div>
</section>

Fark: Brütalizm yapıyı olduğu gibi gösterir. Neobrütalizm yapıyı etki için sahneye koyar.

5. Kenarlıklar ve gölgeler

Brütalizm: yok ya da asgari

Brütalist tasarımlar kenarlık ya da gölgeyi nadiren kullanır. Çıksalar bile ince olurlar: bölümleri ayırmak için 1px'lik bir çizgi, olsa olsa.

Sebebi? Gölgeler ve kenarlıklar süsleyicidir. Brütalizmin kaçındığı bir görsel ağırlık katarlar.

Örnek:

Kopyala.section {
  border-top: 1px solid #ccc;
  padding: 20px 0;
}

Brütalizmin kendine izin verdiği süsleme aşağı yukarı bu kadardır.

Neobrütalizm: kalın kenarlıklar, sert gölgeler

Neobrütalizm TAMAMEN kenarlık ve gölge demektir. Kalın kenarlıklar (3-6px) ve sert gölgeler onun görsel imzasıdır.

Her kart, düğme, giriş alanı ve görsel şunu alır:

• Kalın siyah bir kenarlık (genellikle 3-4px)
• Sert, kaydırılmış bir gölge (bulanıklık yok, yalnızca kaydırılmış düz bir renk bloğu)

Örnek:

Kopyala.card {
  border: 4px solid #000;
  box-shadow: 6px 6px 0 0 #000;
  padding: 2rem;
  background: #fff;
}
 
.button {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  transition: transform 0.2s, box-shadow 0.2s;
}
 
.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}

Etki yanılmazdır: öğeler sayfaya „mühürlenmiş“ gibi görünür.

Gerçek örnek: Neobrutalism bileşenlerinin tümü bu gölge stilini kullanır. Gumroad'ın kartları. Feastables'ın ürün kutucukları. Bu, neobrütalizmin kartvizitidir.

Fark: Brütalizm her türlü görsel derinlikten kaçınır. Neobrütalizm onu sert gölgeler ve kalın kenarlıklarla kucaklar.

6. Etkileşim ve animasyon

Brütalizm: ilkesel olarak statik

Brütalist siteler çoğunlukla statiktir. Üzerine gelme efektleri mi? Asgari ya da hiç. Animasyonlar mı? Ne gerek var. Tasarım içerikle ilgilidir, etkileşimle değil.

Etkileşimli öğeler varsa, tıpkı varsayılan HTML gibi davranırlar:

• Bağlantılar mavi ve altı çizilidir
• Düğmeler <button> öğeleri gibi görünür
• Formlar stilsiz <input> alanlarıdır

Örnek:

Kopyala<a href="/about">About</a>

O bağlantı mavi kalır. Üzerine gelince altı çizilir. Hepsi bu.

Neobrütalizm: ince ama bilinçli mikroetkileşimler

Neobrütalizm, UX'i abartmadan zenginleştirmek için mikroetkileşimleri kullanır. Örneğin:

• Üzerine gelince hafifçe kayan düğmeler (gölge hareket ediyormuş gibi)
• Renk değiştiren ya da kalın bir alt çizgi kazanan bağlantılar
• Etkileşimde büyüyen ya da yükselen kartlar
• Akıcı sayfa geçişleri

Animasyonlar hızlıdır (100-300ms) ve bilinçlidir, asla rahatsız edici değildir.

Örnek:

Kopyala// Framer Motion button interaction
<motion.button
  whileHover={{
    x: 2,
    y: 2,
    boxShadow: "2px 2px 0 0 #000"
  }}
  whileTap={{
    x: 4,
    y: 4,
    boxShadow: "0px 0px 0 0 #000"
  }}
  transition={{ duration: 0.1 }}
  className="border-3 border-black shadow-[4px_4px_0_0_#000]"
>
  Click Me
</motion.button>

Düğme tıklandığında „basılır“ ve dokunsal bir geri bildirim verir. Eğlenceli, ama abartısız.

Fark: Brütalizm statik ve hamdır. Neobrütalizm, kullanılabilirliği güçlendiren keyifli etkileşimler ekler.

7. Estetik amaç

Brütalizm: anti-estetik

Brütalizm geleneksel güzelliği reddeder. Alışıldık anlamda iyi görünmeye çalışmaz: dürüst, işlevsel ve zaman zaman meydan okuyucu olmaya çalışır.

Estetik amacı, her türlü yapmacıklığı sıyırıp altındaki ham yapıyı göstermektir. Kullanıcılar çirkin bulursa, sorun değil, belki de asıl mesele budur.

Örnekler:

• Craigslist (istemeden brütalist)
• The Outline (benimsenmiş brütalist gazetecilik)
• Bloomberg'in erken dönem yeniden tasarımları (önce içerik, sıfır süsleme)

Neobrütalizm: cesur bir estetik

Neobrütalizm fark edilmek ister. Cesur, kendinden emin, akılda kalıcıdır. Estetik amacı, işlevsel kalırken öne çıkmaktır.

Anti-güzellik değildir: başka türden bir güzelliktir. Ham, geometrik, eğlenceli ve pervasız.

Örnekler:

• Gumroad'ın ürün sayfaları (cesur, doğrudan, renkli)
• Feastables'ın web sitesi (eğlenceli, enerjik, yüksek kontrastlı)
• Spotify'ın kampanya sayfaları (deneysel, asimetrik, canlı)

Fark: Brütalizm der ki: „Bu böyle, ister al ister bırak.“ Neobrütalizm der ki: „Şuna bak, bahse girerim böyle bir şeyi daha önce hiç görmedin.“

Yan yana karşılaştırma

Tüm bunları görsel bir tabloya dökelim:

Gerçek örnekler karşılaştırıldı

Bu farkları eylemde görmek için gerçek sitelere bakalım.

Brütalist örnek: The Outline

Onu brütalist yapan nedir:

• Beyaz arka plan üzerinde siyah metin, sıfır renk
• Her yerde sistem yazı tipleri
• Minimal CSS, içeriği önceleyen yerleşim
• Kenarlık yok, gölge yok, süsleme yok
• Statik, işlevsel, ham

Tasarım seçimleri:

• Tek sütunlu makale yerleşimi
• Büyük ama stilize edilmemiş başlıklar
• Görseller ızgarayı doğal biçimde kırar
• Gezinme yalın bir listedir

Okunabilir, işlevsel ve trendde olmak için en ufak bir çaba göstermez. İşte bu brütalizmdir.

Neobrütalist örnek: Gumroad

Onu neobrütalist yapan nedir:

• Siyah, beyaz ve canlı sarı bir palet
• Kalın ve tıknaz tipografi
• Her kart ve düğmede kalın kenarlıklar
• Derinlik yaratan sert gölgeler
• Düşünülmüş boşluklarla asimetrik yerleşimler

Tasarım seçimleri:

• Kocaman bir başlık ve sarı bir CTA ile hero bölümü
• 4px kenarlıklı ve 6px gölgeli ürün kartları
• Üzerine gelince kayan düğmeler
• Yüksek kontrast, görmezden gelinmesi imkânsız

Cesur, eğlenceli ve öne çıkmak için tasarlanmış. İşte bu neobrütalizmdir.

Ne zaman brütalizm, ne zaman neobrütalizm

Peki hangisini seçmelisiniz? Bu, hedeflerinize bağlı.

Şu durumlarda brütalizmi kullanın:

1. İçerik her şeyse

Bloglar, haber siteleri, dokümantasyon: içerik tüm mesele ise, brütalizm dikkati orada tutar.

2. En üst düzey erişilebilirlik istiyorsanız

Varsayılan HTML inanılmaz derecede erişilebilirdir. Brütalizmin minimal CSS'i, ekran okuyucular açısından bozulabilecek daha az şey demektir.

3. Bir duruş sergiliyorsanız

Brütalizm meydan okuyucudur. Markanız düzen karşıtı, DIY ya da bilerek pürüzlüyse, brütalizm oturur.

4. Performans kritikse

Minimal CSS = hızlı yükleme süreleri. Brütalist siteler çoğunlukla 100KB'ın altında olur.

Şu durumlarda neobrütalizmi kullanın:

1. Öne çıkmak istiyorsanız

Girişimler, ajanslar, kreatif portföyler: akılda kalmanız gerekiyorsa, neobrütalizm bunu sağlar.

2. Markanızın kişiliği varsa

Neobrütalizm cesur, eğlenceli, kendinden emin ya da asi markalarda işe yarar.

3. Bir ürün inşa ediyorsanız

SaaS panoları, açılış sayfaları, e-ticaret: neobrütalizm benzersiz kalırken görsel hiyerarşi kurar.

4. Modern bir estetik istiyorsanız

Neobrütalizm güncel hisseder. 2026'da trend oluyorsa, bunun bir sebebi vardır.

İkisini harmanlayabilir misiniz?

Kesinlikle. En iyi tasarımların bir kısmı ikisinden de ödünç alır.

Örnek hibrit yaklaşım:

• Brütalizmin önce içerik felsefesini benimseyin
• Neobrütalizmin cesur tipografisini ve renklerini ekleyin
• Yerleşimleri yalın tutun (brütalist), ama stratejik kenarlıklar/gölgeler ekleyin (neobrütalist)
• Animasyonlarda ölçülü kalın (brütalist), ama üzerine gelme durumları ekleyin (neobrütalist)

Anahtar, niyettir. Yalnızca trendleri kopyalamak yerine, her öğeyi NEDEN seçtiğinizi bilin.

Sık yapılan hatalar

Hata 1: her şeye „brütalist“ demek

Tasarımınızda kalın kenarlıklar ve canlı renkler varsa, o neobrütalisttir. Brütalizm daha ham ve daha az süslüdür.

Hata 2: neobrütalizmi „bilerek çirkin“ yapmak

Neobrütalizm cesurdur, bozuk değil. Yine de hiyerarşisi, okunabilirliği ve kullanılabilirliği olmalıdır.

Hata 3: brütalizmi abartmak

Gerçek brütalizm sert olabilir. Kullanıcılar sitenizde gezinemiyor ya da içeriğinizi okuyamıyorsa, çok ileri gitmişsinizdir.

Hata 4: neobrütalizmde yarım kalmak

Bir kenarlık ekleyip ona neobrütalizm demek işe yaramaz. Estetiğe bağlanın: kalın kenarlıklar, canlı renkler, sert gölgeler.

Son düşünceler

Brütalizm ve neobrütalizm aynı şey değildir. Asi bir ruhu paylaşırlar, ama uygulamaları birbirinden dünyalar kadar uzaktır.

Brütalizm her şeyi sıyırıp atar. Ham, dürüst ve aşırıya varacak kadar işlevseldir. Süslemeyi tümden reddeder.

Neobrütalizm her şeyi sonuna kadar açar. Cesur, renkli ve kendinden emindir. Bilinçli olduğu sürece süslemeyi kucaklar.

İkisinin de kendi yeri var. Brütalizm, netlik ve performans gerektiren içerik odaklı projeler için kusursuzdur. Neobrütalizm, öne çıkması ve iz bırakması gereken markalar için idealdir.

Yapabileceğiniz en kötü şey ne? İkisini karıştırmak ya da herhangi birine yarım gönülle bağlanmak. Brütaliste gidiyorsanız, hamlığa gidin. Neobrütaliste gidiyorsanız, cesarete gidin.

Artık farkı biliyorsunuz. Bilgece kullanın. 🚀

Neobrütalist arayüzler kurmak mı istiyorsunuz? Neobrutalism'ye göz atın: cesur ve akılda kalıcı tasarımlar için kurulmuş eksiksiz bir UI kütüphanesi. Kullanılabilirlikten ödün vermeden neobrütalist estetiği kucaklayan bileşenler, bloklar ve şablonlar.