Nedir bu Neumorphism?
Kimileri Soft UI diyor, kimileri Skeumorphism. Bunların ne anlama geldiğine beraber bakalım. Bazı tasarımcılar Neumorphism’in 2020'de Kullanıcı arayüzü tasarımında yeni bir trend olacağını söylüyor. Tabi ki buna karşı görüşlerde var, bunu zamanla göreceğiz.
Öncelikle nedir bu Skeumorphism?
Skeumorphism ilk etapta Apple’ın kullandığı bir tasarım dilidir. Skeumorphism’e göre arayüz tasarımı gerçek hayatta benzer amaçlarla kullanılan nesneyi çağrıştırmalıdır. Dilimizde taklit nesne olarak çevirilebilir “Skeuomorphism”, dokunmatik ekrana geçişi sağlamak için kullanılan bir yöntemdi ve başarılıda oldu. Cep telefonlarında fotoğraf çekerken çıkan deklanşör sesi veya eski instagram logosunun gerçek bir fotoğraf makinesine benzemesi buna iyi bir örnektir.
Skeuomorphism ilk terk eden firma Microsoft’tur. Windows 8 ile benimsediği Flat Design’ı kimliğinin yeni bir parçası olarak tanıtmıştı ancak pek sevilmedi.
Gelelim Neumorphism’e
Neumorphism Skeumorphism’in güncel versiyonudur. Neumorphism’e göre arayüz tasarımında kullanılan objeler boyutlu gözükmelidir (kabartma şeklinde tercih edilir). Bunun tam karşısında farklı bir tasarım anlayışı olan iOS 6 dan iOS 7'ye geçişte Apple’ında uyguladığı Flat Design var. Bir başka yazıdada ona değineceğim. Neumorphism (Yeni + Skeuomorfizm) dilimizde (Yeni taklit nesne olarak çevrilebilir) adını taşıyor.
Artık ne olduğunu bildiğimize göre uygulamaya dökebiliriz. Adım adım anlatacağım.
Figma
- Öncelikle artboard oluşturuyoruz.
- Artboard’ın arka plan rengini beyaz dışında bir renkte ayarlıyoruz. Ben #C4C4C4 kullandım (Bir açık bir koyu gölge olacağından #FFFFFF background rengiyle çalışmıyor.)
- Artboard’a arka planla aynı renkte bir rectangle alıyoruz (Corner Radius:20).
- Rectangle’a drop shadow veriyoruz. (Blur:20 - X:6 - Y:6 Color: #8F8F8F Opaklık:%25)
- Tam zıt yönde bir drop shadow daha ekliyoruz. (Blur:20 — X:-6 — Y:-6 Color: #E5E5E5 Opaklık:%25)
Eğer shadowları drop shadow yerine inner shadow verirseniz içeri girmiş görünümü kazanırsınız.
Adobe XD
- Öncelikle artboard oluşturuyoruz.
- Artboard’ın arka plan rengini beyaz dışında bir renkte ayarlıyoruz. Ben #C4C4C4 kullandım (Bir açık bir koyu gölge olacağından #FFFFFF rengiyle çalışmıyor.)
- Artboard’a arka planla aynı renkte bir rectangle alıyoruz (Corner Radius:20).
- Rectangle’a drop shadow veriyoruz. (Blur:20 — X:6 — Y:6 Color: #8F8F8F Opaklık:%50)
- Rectangle seçili iken CMD+C ardından CMD+V yaparak tam üstüne kopya alıyoruz.
- Üstteki rectangle’ı seçip gölge ayarlarını Blur:20 — X:-6 — Y:-6 Color: #E5E5E5 Opaklık:%50)
- İki rectangle’ı seçip CMD+G ile grupluyoruz.
İki tane gölge ekleme özelliği ve Inner shadow özelliği Adobe XD’de mevcut olamdığından farklı bir yöntem kullanılıyor.
Sketch
- Öncelikle artboard oluşturuyoruz.
- Artboard’ın arka plan rengini beyaz dışında bir renkte ayarlıyoruz. Ben #C4C4C4 kullandım (Bir açık bir koyu gölge olacağından #FFFFFF background rengiyle çalışmıyor.)
- Artboard’a arka planla aynı renkte bir rectangle alıyoruz (Corner Radius:20).
- Rectangle’a drop shadow veriyoruz. (Blur:20 — X:6 — Y:6 Color: #8F8F8F Opaklık:%25)
- Tam zıt yönde bir drop shadow daha ekliyoruz. (Blur:20 — X:-6 — Y:-6 Color: #E5E5E5 Opaklık:%25)
Gelelim benim yorumuma; Ben görsel olarak sade ve şık buluyorum ancak kullanım alanının çok geniş tutmamak gerektiğine inanıyorum. Gerçek hayatta bir karşılığı olan bir obje tasarlarken kullanmalıyız. Örnek olarak bir sosyal medya uygulamasında değilde, akıllı tv kumanda uygulamasında, akıllı ev kontrol uygulamasında veya hesap makinesi tarzındaki arayüzlerde kullanmak daha doğru bir kullanım olabilir.
Beni diğer sosyal medya hesaplarımdan takip etmek isterseniz linkleri aşağıya bırakıyorum.
