Glassmorphism Trend UI Desain yang Populer di 2021


Glassmorphism
Glassmorphism by uplabs.com

Setiap tahun selalu ada saja trend-trend baru di dunia desain, tidak terkecuali dengan tahun ini, dimana ada tren baru di jagat desain bernama glassmorphism.


Apa itu Glassmorphism?

Para desainer UI menyebut glassmorphism ini sebagai 'desain kaca', dimana dalam pengaplikasiannya menonjolkan unsur transparan di semua objek dengan batas halus dan tipis.

Gaya desain seperti ini menjadi sangat populer belakangan ini, apalagi setelah banyak developer aplikasi dan website yang menggunakan trend 'glassmorphism' pada desain mereka.

Menilik sedikit kebelakang, sebenarnya gaya desain seperti ini bukan hal yang baru. Pada tahun 2006 misalnya, saat Microsoft menggunakan gaya glassmorphism dalam sistem operasi Windows Vista.

Windows Vista
Windows Vista

Nggak mau kalah, Apple juga pernah menerapkan trend glassmorphism di iOS 7.

Tema Apple
Tema Apple di iOS 7

Dari kedua contoh diatas, bisa diambil kesimpulan bahwa glassmorphism bukan sesuatu yang baru di dunia desain. Hanya saja trend ini kembali naik daun di tahun ini, terbukti dengan semakin banyaknya desain UI/UX yang menggunakan gaya glassmorphism.


Ciri Khas Glassmorphism

Sama halnya seperti gaya desain lainnya, glassmorphism juga mempunyai ciri khas pada setiap desain yang dibuat.

Berikut adalah beberapa ciri khas desain yang menggunakan gaya glassmorphism:

  • Penggunaan unsur yang transparan (objek seperti kaca yang membuat background-nya terlihat blur).
  • Efek objek yang melayang.
  • Penggunaan warna cerah untuk menonjolkan transparansi objek.
  • Border objek membulat dan tipis untuk menambah efek seperti kaca.
  • Sedikit bayangan jatuh untuk menciptakan kesan luas.


Contoh Desain Glassmorphism

Buat kamu yang ingin meniru gaya desain seperti ini, beberapa contoh desain glassmorphism dibawah ini mungkin bisa dijadikan inspirasi.

1. Desain kalender cerdas dari Ghani Pradita

Desain kalender glassmorphism
Desain kalender glassmorphism

Menonjolkan tampilan elegan dengan objek-objek halus dan kaya warna. Latar belakang yang sangat lembut dengan bingkai semi-transparan yang sangat tipis menciptakan tampilan kaca yang sempurna. 


2. Desain food estate dengan morfisme kaca oleh Ghulam Rasol

Desain food estate glassmorphism
Desain food estate glassmorphism

Tren seperti neumorphism dan glassmorphism bekerja paling baik jika kamu tidak mendesain semuanya dengan gaya ini, kombinasikan dan selektif dalam memilih objek.


3. Desain ikon transparan oleh Marshal

Desain Ikon glassmorphism
Desain Ikon glassmorphism

Ikon juga dapat dirancang dengan gaya glassmorphism. Buat ikon transparan dengan warna cerah, lalu buat bagian sisinya membulat dan tipis agar memberi efek shadow yang bagus.


Cara Membuat Desain Glassmorphism

Untuk mulai membuat desain glassmorphism, kamu bisa mencoba dengan membuat lapisan desain kaca sederhana yang terdiri dari beberapa lapis elemen.

Lapisan Elemen Glassmorphism
Lapisan Elemen Glassmorphism

Glassmorphism menciptakan elemen desain seperti kaca di atas gradien kontras tinggi berwarna cerah.

Selain itu, setiap elemen kaca dilengkapi dengan bayangan halus dan garis bingkai 1 piksel yang sangat tipis, tidak mencolok, dan semi transparan. Ini juga menciptakan efek material spasial, sangat mirip dengan morfisme baru.

Efeknya dapat dibuat dengan lapisan yang lebih kompleks, misalnya dengan efek pencahayaan dan gradien yang bisa meningkatkan efek spasial.

Untuk membuat desain seperti ini, kamu bisa menggunakan Adobe XD atau memakai pure CSS seperti panduan dari Alber Walicki.


Kesimpulan

Kepopuleran glassmorphism tentu menjadi magnet tersendiri bagi para desainer UI/UX. Mereka berlomba untuk membuat desain bergaya glassmorphism pada setiap aplikasi, website, atau tampilan antarmuka yang mereka buat.

Seperti tren gaya desain sebelumnya, glassmorphism bisa saja akan semakin populer atau justru malah meredup digantikan oleh tren desain baru. Bagaimana menurutmu?