M
Yumuşak Kabartma neumorphismendüstri trendi
bilinen diğer adları Soft UI · neomorphism · yumuşak arayüz
"zeminden hamur gibi kabarmış/gömülmüş düğmeler" diyorsan → bunun adı neumorphism.
Neumorphism her kontrolü sayfanın kendisinden kabartılmış ya da içine bastırılmış gibi çizer: zemin ve kontroller tek bir mat rengi paylaşır, biçim tamamen bir çift yumuşak gölgeden doğar — sol üstten açık, sağ alta doğru koyu. Hiçbir şeyin kenarlığı yoktur ve hiçbir şey havada durmaz; arayüzün tamamı tek parça dökülmüş bir yüzey gibi okunur. Fotoğrafta çok iyi görünür, testte kötü sonuç verir: onu ayırt edici kılan yumuşaklık, gerçek kontrollerin ihtiyaç duyduğu kontrastı da siler.
Kapsam: Bu madde 2019-2021 arasındaki Soft UI görünüşünü kapsar. Aynı dokunulabilirlik hissini daha kalın, oyuncak gibi şişkin bir hacimle veren kardeşi ayrı bir maddedir — bkz. Kil Efekti.
- “zeminden kabarmış yumuşak düğmeler”
- “her şey aynı hamurdan dökülmüş gibi”
- “çift gölgeli, yastık gibi kabartma butonlar”
- “sayfaya bastırılmış gibi duran kontroller”
- “kenarlığı olmayan o yumuşak gri panel”
…hepsinde kastettiğin şey neumorphism.
Termostat bu stilin en doğru kullanımı: az sayıda kontrol, büyük hedefler, vitrin niteliğinde bir ekran. Kartla zemin aynı renk — öğeleri ayıran tek şey çift gölge. Aynı ekranı sekiz alanlı bir kayıt formuna çevirdiğin an stilin sorunu ortaya çıkar.
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
Kartın rengi arkasındaki zeminle birebir aynıdır; öğeyi ayıran şey renk değil yalnızca ışıktır. Farklı renk kullandığın anda elindeki şey sıradan gölgeli bir karttır, neumorphism değil.
Kayıt formu, tablo, doküman: sınırların kaybolduğu her yer bu stilin en kötü kullanımıdır. Alan sayısı arttıkça kullanıcı nereye yazacağını göremez.
Sağ altta koyu, sol üstte beyaz gölge; yüzey ışığı tek yönden alıyormuş gibi kabarır. Tek gölgeyle yaptığında hamur hissi kaybolur.
Aynı çift gölge içe alındığında (inset) öğe zemine gömülür: girdiler ve basılı düğmeler gömük, tıklanabilir yüzeyler kabarıktır. Bu ikilik stilin dilbilgisidir.
Sınırı çizgi değil gölge belirler; kenarlık eklediğin anda etki bozulur. Erişilebilirlik sorunu da tam buradan doğar.
16-24px arası yarıçap yaygındır; keskin köşe hamur hissini sertleştirir ama stili bozmaz.
Zemin nötr gri-mavi kalır, tek bir yumuşak renk aktif durumu taşır. Çok renk kullanmak monokrom yüzey mantığını dağıtır.
Klasik seçim soluk gri-mavidir (#e0e5ec) ama etki açık ve az doygun HER temel renkte çalışır. Renk stilin kimliği değil; kimlik, zeminle kontrolün aynı rengi paylaşmasıdır.
WCAG, arayüz bileşeninin sınırının komşusundan en az 3:1 ayrılmasını ister; saf neumorphism bunu yapısal olarak sağlamaz. Gerçek üründe kullanacaksan gölgeye ek bir ayırt edici koymak zorundasın.
Kil Efekti değil. Bu neumorphism'dir çünkü panel zeminle AYNI renktedir ve öğeyi ayıran tek şey koyu+beyaz çift gölgedir. Claymorphism olurdu eğer panelin kendi rengi zeminden ayrılsaydı ve gölge renkli olsaydı. Bu tesadüf değil: kil, aynı tasarımcının iki yıl sonra tam da bu kontrast sorununu çözmek için tanımladığı kardeş stildir.
Gerçekçi Taklit değil. Bu neumorphism'dir çünkü hiçbir gerçek nesneyi taklit etmez: ortada deri, metal ya da kâğıt dokusu yoktur, yalnızca ışık vardır. Skeuomorphism olurdu eğer yüzey belirli bir malzemeyi taklit etseydi — dikişli deri, fırçalanmış metal, çizgili defter kâğıdı.
Tam sayfa örneğini gez →baştan sona landing; şeritten stil atlayabilirsin
⚠ Kontrast ve erişilebilirlik zayıftır — form ağırlıklı gerçek ürünlerde ölçülü kullan.
Yukarıdaki brief çerçeve-bağımsızdır; bunlar stack'in uyuyorsa somut tutamaklar.
- CSS
background:#e0e5ec; box-shadow:-6px -6px 12px rgba(255,255,255,.85), 6px 6px 12px rgba(163,177,198,.6); border-radius:16px;Klasik temel renk üzerinde KABARIK öğe.
- CSS
box-shadow: inset -4px -4px 8px rgba(255,255,255,.75), inset 4px 4px 8px rgba(163,177,198,.55);GÖMÜK hâl: girdiler ve basılı durumlar — aynı çift, içe alınmış.
- CSS
:focus-visible { outline: 3px solid #2f6fed; outline-offset: 2px; }Zorunlu ek: odak gölgeyle gösterilemez, gölge zaten dilin kendisi.
- Bu stilin kalbi bir erişilebilirlik sorunudur: kontrolü zeminden ayıran tek şey gölgedir ve düşük parlaklıklı ekranda, güneş altında ya da düşük görmede o gölge yok olur. WCAG 1.4.11 arayüz bileşeni sınırı için 3:1 ister.
- İkonu etiketsiz bırakma. Bu stilde ikonlar sık sık yazısız kullanılıyor; sınır zaten zayıfken etiketi de kaldırmak arayüzü tahmin oyununa çevirir.
- Odağı gölgeyle gösterme — gölge zaten dilin kendisi. Klavye odağı için ayrı ve kontrastlı bir halka kullan.
- Karar kuralı: neumorphism'i vitrinde ve az sayıda büyük kontrolde kullan (oynatıcı, termostat, hesap makinesi). Ürünün asıl iş akışına sokacaksan sınırları güçlendir ve stilin saflığından vazgeç.
| ✅ Kullan | Müzik/podcast oynatıcı, akıllı-ev/IoT kontrol paneli, hesap makinesi tarzı araçlar. |
| ⛔ Kaçın | Yoğun formlar ve metin ağırlıklı sayfalar; düşük parlaklıklı ekranlarda kaybolur. |
2020 dribbble dalgası
banka kartı widget'ları
ses mikseri arayüzleri
Sektör terimi, akademik bir terim değil. 2019 sonunda bir yorumda önerildi ('new' + 'skeuomorphism' birleşimi) ve Michal Malewicz'in yazılarıyla tanımlanıp yaygınlaştı. Bir platform sahibinin dili değil, tasarım topluluğunun ürettiği bir ad — ve kısa ömürlü oldu, çünkü ad ile eleştiri birlikte geldi.
Dribbble dönemi bir akım. Görsel kıvılcım Alexander (Oleksandr) Plyuto'nun 2019 tarihli 'Skeuomorph Mobile Banking' çalışmasıydı: ağır doku taklidini (ahşap, deri) bırakıp yumuşak plastik bir görünüşe geçiyordu ve hızla viral oldu. Adı bir yorumda Jason Kelly önerdi — 'new' ile 'skeuomorphism'in birleşimi; hangi platformdaki yorum olduğu konusunda kaynaklar ayrışıyor (kimi Dribbble, kimi Malewicz'in yazısının altı diyor), bu nokta teyitsizdir. Michal Malewicz Aralık 2019'daki yazısıyla stili tanımladı, yaygınlaştırdı ve aynı yazıda çözülmesi gereken sorunu da işaret etti. Sorun çözülmedi: kontrol ile zemin aynı renk olduğu için düğmenin sınırı kayboluyordu. Akım 2020 boyunca konsept görsellerde parladı, erişilebilirlik maliyetini kaldırabilen çok az gerçek ürün oldu. Aynı tasarımcı 2021'de bu kontrast sorununu çözen kardeş stili, claymorphism'i tanımladı.
- birincilMichal Malewicz — Neumorphism in user interfaces (UX Collective, Ara 2019) ↗
Terimi ortaya atan yazı. Medium giriş duvarı çıkarabilir.
- standartW3C — WCAG 2.2, Non-text Contrast (1.4.11) ↗
Arayüz bileşeninin sınırının komşusundan en az 3:1 ayrılması şartı — saf neumorphism'in yapısal olarak zorlandığı kriter.
- ikincilNielsen Norman Group — Skeuomorphism 101 ↗
Soy bağı: neumorphism adını skeuomorphism'den alır; bu yazı kökteki kavramı tanımlıyor.
- ikincilAxess Lab — Neumorphism, erişilebilir yol ↗
Erişilebilirlik laboratuvarının eleştirisi ve düzeltme önerileri; tek dayanak değil, kriterle birlikte oku.
- birincilAlexander Plyuto — Skeuomorph Mobile Banking (Dribbble, 2019) ↗
Akımı başlatan görsel çalışmanın kendisi; adı konmadan önceki hâli.
Kil Efekti claymorphismGerçekçi Taklit skeuomorphismDüz Tasarım flat design