M
Kil Efekti claymorphismendüstri trendi
bilinen diğer adları clay UI · claymorphic design · kil arayüz
"oyun hamurundan yapılmış gibi tombul kartlar" diyorsan → bunun adı claymorphism.
Claymorphism, arayüz öğelerini yumuşak oyun hamurundan yoğrulmuş gibi gösterir: kalın yuvarlatılmış köşeler, açık pastel bir dolgu ve imza reçetesi — İKİ iç gölge (üstte parlak olan üst kenarı yakalar, altta koyu olan gölgeler) artı nesneyi sayfanın üstünde yüzdüren BİR yumuşak dış gölge. Her öğe kendi rengine sahiptir ve zeminden açıkça ayrılır; hiçbir şey sayfadan kabartılmaz, her şey sayfanın üstüne konur. Genellikle tombul 3B kil illüstrasyonlarla birlikte kullanılır ve ortaya oyuncak dünyası tonunda, dostane bir arayüz çıkar.
Kapsam: Bu madde arayüz uygulamasını kapsar. Yanında dolaşan 3B karakter illüstrasyon modası (şişkin, pürüzsüz plastik tenli figürler) onunla birlikte gezer ama bir illüstrasyon modasıdır, arayüz stili değildir.
- “oyun hamurundan yapılmış gibi tombul butonlar”
- “kartlar balon gibi şişmiş duruyor”
- “sevimli, sıkılası bir arayüz”
- “içi yumuşak, yuvarlak hatlı düğmeler”
- “şu 3B kil illüstrasyonlu panellerden”
…hepsinde kastettiğin şey claymorphism.
Kil kendi doğal yerinde: alışkanlık takibi ve oyunlaştırma. Kart zeminden RENK olarak ayrılıyor — neumorphism'den ayrıldığı yer burası — ve gölge gri değil, panelin kendi renginin koyusu.
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
İmza reçetesi üç katmandır: üstte parlak bir iç gölge, altta koyu bir iç gölge, altında da yumuşak bir dış gölge. Üçü birlikte yüzeyi OYULMUŞ değil ŞİŞMİŞ gösterir; biri eksikse hacim okunmaz.
Renksiz gölge kil hissini öldürür. Gölge, öğenin kendi renginin koyu tonudur — nötr gri değil.
Her öğenin zeminden farklı kendi dolgusu vardır ve gerçek bir düşen gölgeyle sayfanın üstünde durur. Hiçbir şey sayfadan kabartılmaz — her şey sayfanın üstüne konur.
Dolgu sayfayla aynı renge dönüp biçimi yalnızca gölgeler ima etmeye başladıysa kile değil neumorphism'e kaymışsındır. Kil nesneleri kendi renklerine sahiptir.
Kil, oyunlaştırma ve dostane ürün dilidir; finansal tabloda ya da yönetim panelinde hem çocuksu kaçar hem bilgi yoğunluğunu düşürür.
Kural sabit piksel değil orantıdır: yarıçap, öğe yüksekliğinin kabaca üçte biri. Böylece biçim 'köşeleri yuvarlatılmış kart' değil, yumuşak bir hacim gibi okunur.
Sütlü lila, nane, mercan, krem. Gölgelerin hacim olarak okunabilmesi için açık dolgular gerekir; oyuncak tonu da bu yumuşaklıktan doğar.
Tonların kendisi serbesttir; stili taşıyan şey renk seçimi değil üç katmanlı gölge reçetesi ile abartılı yarıçaptır. Marka rengin pastele çekilebiliyorsa kil onunla da kurulur.
Şişkin, pürüzsüz 3B nesne ve figürler genelde kontrollere eşlik eder ve oyuncak dünyası tonunu kurar. Arayüzün parçası değil, yanında gezen bir moda.
Basınca dış gölge küçülür ve üstteki açık iç gölge koyuya döner: kil ezilmiş gibi görünür. Gölgeyi tamamen kaldırmak değil, derinleştirmek doğru olanıdır.
Yumuşak Kabartma değil. Bu claymorphism'dir çünkü panel zeminden RENK olarak ayrılır ve gölge renklidir. Neumorphism olurdu eğer panel zeminle aynı renkte olsaydı ve öğeyi yalnızca koyu+beyaz çift gölge ayırsaydı. Kil, tam olarak o kontrast sorununu çözmek için tanımlandı — bu yüzden ikisini karıştırmak, sorunu çözümle karıştırmaktır.
Neo-Brütalizm değil. Bu claymorphism'dir çünkü palet pastel, köşeler tombul ve gölge yumuşak ve renklidir. Neo-brütalizm olurdu eğer renkler çiğ ve doygun olsaydı, kenarlar 3px siyah çizgiyle çevrilseydi ve gölge bulanıksız sert bir ofset olsaydı. İkisi de 'tombul ve oyuncaklı' hissi 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-radius: 26px; background: #f4e7fd; box-shadow: 0 20px 36px rgba(120,90,180,.22), inset 0 -8px 14px rgba(120,90,180,.18), inset 0 6px 12px rgba(255,255,255,.65);Tam kil reçetesi: bir DIŞ + iki İÇ gölge. Üçü birden olmadan hacim okunmaz.
- CSS
:active { box-shadow: 0 8px 16px rgba(120,90,180,.2), inset 0 -4px 8px rgba(120,90,180,.22), inset 0 10px 14px rgba(120,90,180,.12); }Basınca kil ezilir: dış gölge küçülür, üstteki açık iç gölge koyuya döner.
- CSS
border-radius: calc(var(--yukseklik) / 3);Yarıçap kuralı orantısaldır: öğe yüksekliğinin kabaca üçte biri — sabit px değil.
- Tuzak pastel üstüne pastel: nane ya da lila dolgu üzerindeki beyaz veya krem metin 4.5:1'i genelde geçmez. Çözüm paleti koyulaştırmak değil, METNİ koyulaştırmaktır — oyuncak tonu dursun, yazı okunsun.
- Yumuşak gölgeler dekoratiftir, DURUM değildir. Basılı ve seçili hâlleri yalnızca gölge derinliğiyle gösterme; yanına bir renk ya da içerik değişikliği koy.
- Üç katmanlı gölgeyi çok sayıda öğeye uygularsan düşük güçlü cihazlarda kaydırırken titreme olur; reçeteyi ana yüzeylerle sınırla.
- Tombul düğmeler görsel olarak büyük durur ama dokunma hedefi görsel kütleyle aynı olmayabilir; 44px hedefi ayrıca ölç.
- Kil dili güçlü bir 'çocuk/eğlence ürünü' çağrışımı taşır. Kurumsal ya da finansal bir üründe kullanacaksan bunu bilerek seç — ton, güven algısını doğrudan etkiler.
| ✅ Kullan | Çocuk/eğitim ürünleri, oyunlaştırma, wellness uygulamaları, dostane onboarding'ler. |
| ⛔ Kaçın | Ciddi/veri-yoğun panellerde çocuksu kaçar. |
Duolingo görsel dili
Headspace illüstrasyon dünyası
çocuk uygulaması dalgası
Sektör terimi. Aralık 2021'de yine Michal Malewicz adlandırdı — yani neumorphism'i adlandıran kişi, onun kontrast sorununu çözen kardeş stili de adlandırdı. Ad 'clay' (kil) ile skeuomorphism'in birleşimidir; '-morphism' adlandırma zincirinin devamıdır.
Aralık 2021'de Michal Malewicz, HYPE4 Academy'de yayımladığı 'Claymorphism in User Interfaces' yazısıyla adı koydu. Tetikleyici, o dönem arayüzlerde ve web illüstrasyonlarında hızla yayılan şişkin, tombul 3B görsellerdi. Fikir neumorphism'in bıraktığı yerden devam etmekti: dokunulabilir ve tombul his kalsın ama kontrast geri gelsin. Çözüm iki şeydi — her öğe KENDİ rengini alacak ve gerçek bir dış gölgeyle sayfanın üstünde yüzecekti; hacim ise iki iç gölgeyle kurulacaktı. Smashing Magazine 2022'de tekniği bağımsız olarak ele alıp CSS reçetesini yazdı. Stil özellikle fintech ve eğitim teknolojisi pazarlamasında, yumuşak 3B illüstrasyon dalgasıyla birlikte yerleşti.
- birincilHYPE4 Academy — Claymorphism in User Interfaces (adı koyan yazı) ↗
Malewicz'in kendi yayınında, terimin ortaya atıldığı metin; reçete de burada tanımlı.
- ikincilSmashing Magazine — Claymorphism: Will It Stick Around? ↗
Tekniğin bağımsız ele alınışı: CSS reçetesi ve sınırları; adı koyan kaynaktan ayrı bir göz.
- birincilHYPE4 Academy — Claymorphism CSS üreteci ↗
Aynı yazardan araç: değerlerle oynayıp reçetenin nasıl çalıştığını elle görmek için.
- standartW3C — WCAG 2.2, Contrast (Minimum) ↗
Pastel üstüne pastel metin bu eşikte kırılır; 4.5:1 kontrolü şart.
Yumuşak Kabartma neumorphismNeo-Brütalizm neubrutalismGerçekçi Taklit skeuomorphism