Nedir bu Glassmorphism
Bu yılın ilk aylarında tasarım konusunda trend olmaya çalışan, Samsung’un reklamlarında kullanmasıyla heyecanlandıran ama kullanabilirlik ve kontrast konusunda sınıfta kalan ve Dribbble gönderilerinden pek öteye gidemeyen Skeumorphism temelli bir stil olan Neumorphism hakkında Nedir bu Neumorphism makalesini yayınlamıştım. Son zamanlarda trend olan adını sıklıkla duyduğumuz Glassmorphism hakkında da bildiklerimi aktarmak istedim.
Glassmorphism nedir?
Kelime anlamı olarak Cam Biçimlilik anlamına gelir. Tasarımda kullandığımız objenin buzlu cam görünümünü taklit etmesi olarak ifade edebiliriz.
Temelde Glassmorphism’i en iyi tanımlayan özellikleri şunlardır:
- Saydamlık. (Arka plan bulanıklığı kullanarak buzlu cam efekti).
- Bulanık şeffaflığı vurgulamak için arka planda canlı renkler ve gradientler.
- Yarı saydam nesneler üzerinde blur efekti.
- Objeyi arka plandan ayıracak gölgeler.
Tarihçe
İlk olarak 2002 yılında Windows Media Center’da karşımıza çıkan bu stil, 2013 yılında iOS 7 işletim sistemi ile cebimize kadar girdi. O zaman için oldukça radikal bir değişiklikti, ultra hafif yazı tipleri ve yeni simgelerle beraber bu buzlu cam efekti tartışmalarla sebep olmuştu. Bu adımı atmada büyük rol oynayan isim o dönem Apple’da CDO olarak çalışan Jonathan Ive’dan başkası değildi. Geçmişte iPhone ve iPod gibi fiziksel ürün tasarımı konusunda çalışmış bir tasarımcı olan Jonathan Ive’in öncülük ettiği bu adım o dönem için bu trendin yeniden doğması için önemli bir adımdı. Günümüzde ise son gelen MacOS Big Sur güncellemesiyle birlikte Mac tarafında da arka plan bulanıklığı arayüz genelinde daha sık kullanılmaya başlandı.
Neumorphism ile farkları neler
Temel olarak baktığımızda Neumorphism, plastik bir yüzeydeki kabartmaları taklit ederken Glassmorphism buzlu cam yüzeyi taklit eder.
Dribbble’da yaklaşım nasıl?
Herhangi bir UI trendinde olduğu gibi, Dribbble’da oldukça sıcak bir karşılama söz konusu. Dribbble’ı aktif kullanan tasarımıncılar bu akımı sevmiş gibi görünüyor. Bir ekran görüntüsü olarak hepsi çok güzel görünüyor. Fakat gerçek bir ekranda test edildiğinde nasıl sonuçlar vereceğini bilemiyoruz. Sadece arayüz olarak değil ikonlar konusundada çalışmalar yapılmış durumda, yine görsel olarak oldukça iyi görünüyorlar ancak kontrast konusunda tartışma yaratabilir.
Nasıl Glassmorphism elde edilir?
Bu trendin temeli şeffaflık ve arka plan bulanıklığının birleşiminden gelir. Oldukça yoğun, renkli bir arka planda kullanıldığında en belirgin görünümüne sahip olur.
- Öncelikle renkli bir arka plan seçin.
- Önüne efekti uygulayacağınız shape ekleyin.
- Shape’e renk ekleyin.
- Rengin opaklığını düşürün.
- Shape’e gölge ekleyin.
- Background Blur efekti uygulayın.
- *Bonus* Daha güçlü bir cam hissi için Stroke ekleyin. Rengi linear olarak seçip seçtiğiniz rengin opaklığını istediğiniz bir yüzde ile başlatıp sıfıra kadar düşürün.
Bu noktada özellikle %24 opaklık 16 bulanıklık gibi değerler vermek istemedim. Kendi tercihinize göre en uygun olanı uygulayabilirsiniz.
Ek olarak Glassmorphism için bir websitesi keşfettim. Girdiğiniz blur, opaklık gibi değerlere göre CSS kodu veriyor.
Benim bu trendle ilgili düşüncem ise okunabilirlik ve kontrasta dikkat edildiği sürece Neumorphism’den daha kullanışlı olduğudur. Belki bir geçiş olarak direkt arayüzde kullanmak yerine daha statik olacak şekilde ve riski düşük yerlerde test edip sonucuna göre ilerlemekte fayda olabilir.
Beni diğer sosyal medya hesaplarımdan takip etmek isterseniz linkleri aşağıya bırakıyorum.
