Glassmorphism Trend UI Desain yang Populer di 2021
![]() |
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?
Baca Juga : 6 Aplikasi Terbaik untuk Belajar UI/UX Design
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 |
Nggak mau kalah, Apple juga pernah menerapkan trend glassmorphism di iOS 7.
![]() |
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 |
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 |
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 |
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 |
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?