Diprediksi Jadi Tren di 2021, Apa Itu Glassmorphism?
Isi Artikel
Ingin membuat desain UI yang kekinian? Glassmorphism adalah salah satu gaya tampilan yang bisa kamu pakai.
Sayangnya, meski terlihat kekinian dan menarik, gaya desain yang satu ini punya tantangan hierarki visual.
Walau begitu, tetap ada solusi dari masalah ini, kok. Kamu tetap bisa mendesan produk yang tidak hanya cantik, tetapi juga nyaman digunakan.
Kira-kira, apa ya solusi itu? Glints akan menjelaskannya di dalam artikel ini. Akan tetapi, sebelumnya, kenalan dulu dengan gaya “desain kaca” yang satu ini, yuk!
Apa Itu Glassmorphism?
Pada 2020 lalu, neumorphism menjadi tren desain UI. Mengutip UX Planet, ciri khasnya adalah minimalis, namun masih memiliki efek tiga dimensi.
Ketika tahun berganti, tren ini pun ikut bergeser. Perlahan-lahan, gaya desain produk lain pun naik daun.
Kira-kira, apa nama tren desain baru itu? Glassmorphism adalah jawabannya.
Mengutip UX Collective, ciri khas darinya adalah:
- Dipakainya 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 yang tipis untuk menambah efek seperti kaca.
Sejarah Glassmorphism
Meski diprediksi naik daun pada 2021, gaya desain ini bukanlah inovasi baru.
Pada tahun 2006, Microsoft menggunakannya dalam sistem operasi Windows Vista.
Tujuh tahun kemudian, Apple juga melakukannya. Perusahaan yang dipimpin Tim Cook ini menerapkannya di iOS 7.
Mereka juga membawa desain ini ke macOS Big Sur.
Perlahan-lahan, banyak orang yang mulai mengikutinya. Tampilan “kaca” ini mulai bermunculan di situs portofolio desainer Dribbble.
Bukan cuma itu saja, lho. Gaya desain ini juga merambah ke bidang desain icon hingga logo.
Hierarki Visual dalam Glassmorphism
Hierarki visual sebagai tantangan
Tampilan UI dengan unsur kaca memang menarik. Meski begitu, seperti yang sudah Glints singgung, mengatur hierarki visualnya merupakan tantangan tersendiri.
Apakah kamu bingung dengan maksudnya? Tenang saja, Glints akan menjelaskannya secara perlahan.
Mengutip Interaction Design Foundation, hierarki visual adalah sebuah prinsip pengaturan elemen. Pengaturan ini berkaitan dengan urutan menu atau informasi.
Lalu, kenapa ia bisa menjadi sebuah tantangan dalam gaya “desain kaca”?
Ingat, elemen utama glassmorphism adalah kaca. Lapisan bening ini bisa mengaburkan urutan informasi.
Untuk memahami hal ini lebih lanjut, Glints akan memberikan sebuah perumpamaan.
Misalnya, kamu sedang berjalan-jalan di mal. Toko-toko di sana tentu punya kaca bening di bagian depannya, termasuk pintunya.
Nah, kamu sedang tertarik pada barang di toko X. Kamu pun mencoba masuk ke dalamnya.
Ternyata, pintu toko itu terbuat dari kaca. Karena sangat bersih dan bening, kamu tak melihatnya dan akhirnya terbentur.
Inilah yang dimaksud dengan tantangan hierarki visual. Urutan elemen dari luar ke dalam seharusnya adalah:
- kamu
- pintu kaca
- bagian dalam toko X
Namun, elemen kedua, yakni kaca, tidak terlihat. Kamu pun mengira bahwa, jika ingin masuk ke toko, jalan saja tanpa perlu membuka lapisan bening itu.
Ini bisa terjadi dalam desain glassmorphism. Pengguna “loncat” ke menu atau informasi yang ada di belakang, padahal masih ada lapisan di bagian depannya.
Untuk lebih jelasnya, kamu bisa memperhatikan gambar di bawah ini:
Hampir tak ada beda di antara ketiga lapisan kaca. Pengguna pun bisa bingung dengan urutan informasi yang ada di hadapannya.
Ini tentu bisa mengganggu user experience.
Solusi tantangan hierarki visual
Lantas, apa yang bisa dilakukan oleh UI designer untuk menghadapi tantangan ini?
Seperti dituliskan Prototypr, tips mempertegas hierarki visual dalam glassmorphism itu adalah:
1. Beri sedikit bayangan
Bayangan bisa memberi efek tiga dimensi. Secara otomatis, ia juga bisa memperjelas hierarki visual.
Oleh karena itu, jangan lupakan bayangan dalam “desain kaca”-mu, ya!
2. Bedakan blur elemen depan dan belakang
Permainan tingkat blur juga bisa menunjukkan urutan elemen, lho. Prinsip yang bisa kamu pakai adalah:
- Semakin dekat suatu objek dengan background, semakin rendah tingkat blurnya (semakin transparan).
- Semakin jauh suatu objek dengan background, semakin tinggi tingkat blurnya (semakin tidak transparan).
Ingat, semakin blur suatu objek, dia akan semakin jelas. Kejelasan ini diberikan pada objek yang paling depan, sehingga mudah dibaca dan dilihat oleh pengguna.
3. Atur tingkat transparansi elemen
Coba bayangkan, kamu menulis sesuatu di atas kaca jendela. Akan tetapi, pemandangan di balik jendela itu berwarna-warni.
Secara otomatis, tulisanmu menjadi sulit dibaca. Goresan tanganmu itu seperti menyatu dengan pemandangan yang ada di baliknya.
Oleh karena itu, coba rendahkan transparansi elemen yang ada di paling depan, ya! Sebaliknya, buat elemen di baliknya sebening mungkin.
Tips desain glassmorphism ini takkan hanya mempertegas hierarki visual. Ia juga membuat tulisan dan objekmu semakin mudah dibaca dan dilihat pengguna.
4. Beri border, meski tipis
Coba buat border tipis di pinggir elemenmu, ya! Ini bisa mempertegas perbedaan hierarki visualnya.
Kira-kira, selain keempat tips di atas, apa lagi yang bisa membuat suatu produk makin ramah pengguna?
Ketahui jawabannya dengan ikut Glints ExpertClass, yuk! Dalam kelas ini, kamu akan bertemu dengan sederet praktisi desain produk yang hebat.
Dengan tambahan ilmu dari mereka, kamu tentu bisa mendesain produk yang lebih ramah pengguna. Hierarki visual? Bukan lagi sebuah masalah.
Sudah siapkah kamu jadi desainer produk yang lebih andal lagi? Yuk, klik tombol di bawah ini untuk ikut Glints ExpertClass sebelum kuota kelasnya habis!
Demikian penjelasan soal gaya desain glassmorphism. Pertimbangkan gaya ini untuk desain produkmu selanjutnya, ya!