Neumorphism ne zaman ve nasıl ortaya çıktı?

Neumorphism terimi, 'New Skeuomorphism' kelimelerinin birleşiminden gelir ve 2019-2020 yıllarında Dribbble topluluğunda Michal Malewicz'in paylaşımlarıyla gündeme girdi. Flat design'ın minimal estetiğiyle skeuomorphism'in fiziksel derinlik hissini birleştirmeyi hedefler. Nesnelerin arka plandan hafifçe yükseldiği veya içe battığı illüzyonu, aynı renkten iki yönlü gölge (bir açık, bir koyu) ile sağlanır.

Neumorphism erişilebilirlik açısından neden eleştiriliyor?

Neumorphism'in en büyük zayıf noktası düşük kontrast oranıdır. Pastel zemin üzerindeki elemanlar benzer renklerden oluştuğundan, tıklanabilir ve tıklanamaz alanlar arasındaki fark görsel olarak belirsizleşir. Görme güçlüğü olan kullanıcılar için ciddi erişilebilirlik sorunlarına yol açabilir. WCAG AA standartları için 4.5:1 kontrast oranı şarttır; neumorphism bunu büyük ölçüde karşılamakta güçlük çeker. Bu yüzden üretim ortamlarında sınırlı ve bilinçli kullanımı önerilir.

Neumorphism ile glassmorphism arasındaki fark nedir?

Neumorphism, tek renk zemin üzerinde çift yönlü box-shadow ile kısmen yükseltilmiş veya çökertilmiş görünüm yaratır; cam değil, plastik veya kauçuk hissi verir. Glassmorphism ise renkli veya görselli arka planlar üzerinde backdrop-filter: blur() ile buzlu cam illüzyonu yaratır. Biri zemin üzerinde kabartma, diğeri zemin içinden bakma hissidir. İkisi zaman zaman hibrit tasarımlarda birlikte kullanılır.

Tasarım Aracı

Neumorphism CSS Üretici

Soft UI / Neumorphism bileşenleri için CSS box-shadow kodunu görsel olarak oluşturun.

Soft UI

Arkaplan Rengi

Mesafe — 10px

Blur — 20px

Yoğunluk — 0.15

Stil

Şekil

CSS Kodu

Neumorphism Nedir?

Neumorphism (yeni skeuomorphism olarak da bilinir), 2020'de Dribbble'da hızla yayılan ve tasarım dünyasını ikiye bölen bir UI trendi oldu. Temel fikir: elemanların arka plandan hafifçe yükselmiş veya içe bastırılmış görünmesi. Bu illüzyon, aynı arka plan rengi tonunun açık ve koyu varyasyonlarından oluşan çift yönlü box-shadow ile sağlanır. Sonuç, plastik veya kauçuk benzeri, elle tutulabilirmiş gibi hissettiren bir yüzey görünümüdür.

Dört Temel Neumorphism Stili

Flat: Eleman düz, ama gölgeleriyle yüzeyden hafifçe yükselen izlenimi verir. En yaygın kullanılan neumorphism stilidir.
Concave (İç bükey): Yüzeyin ortası hafifçe çökmüş görünür; gradient ile derinlik hissi artar.
Convex (Dış bükey): Ortası dışa doğru kabarık bir görünüm; buton veya yuvarlak icon için doğal hissi güçlendirir.
Pressed (Basılı): Gölgeler inset olarak uygulanır; tıklanan veya aktif durumdaki eleman için kullanılır.

Neumorphism'i Etkili Kullanmak

Neumorphism en iyi, açık pastel tonlu tek renkli arka planlarda çalışır; karmaşık görsel arka planlarda etkisi kaybolur. Kontrast sorununu azaltmak için metnin elemanın arka plan renginden yeterince farklı olduğundan emin olun. Bu araç, metni otomatik olarak açık ya da koyu değere çevirir — ancak gerçek kullanımda kontrast oranını bir araçla test etmek iyi bir pratiktir.

Sık Sorulan Sorular

Dark mode'da neumorphism nasıl çalışır?

Dark mode neumorphism için arka plan rengi koyu bir ton (örn. #1e1e2e, #2d2d3d) olmalıdır. Gölgeler yine çift yönlü uygulanır; ancak "açık gölge" bu kez çok hafif bir beyaz tona (rgba 255,255,255,0.05-0.1) indirgenir. Araçta koyu bir renk seçerek dark mode uyumlu neumorphism kodunu anlık görebilirsiniz.

İlgili araçlar: Glassmorphism CSS Üretici · Box Shadow Generator · Renk Paleti Üretici