Diprediksi Jadi Tren di 2021, Apa Itu Glassmorphism?

Tayang 29 Mar 2021 - Dibaca 11 mnt

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.

    1. desain kaca transparan adalah yellowslice in

    © Yellowslice.in

    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.
    Baca Juga: 5 Hal yang Harus Diperhatikan saat Menerapkan Emotional Design

    Sejarah Glassmorphism

    Meski diprediksi naik daun pada 2021, gaya desain ini bukanlah inovasi baru. 

    Pada tahun 2006, Microsoft menggunakannya dalam sistem operasi Windows Vista.

    2. glassmorphism dalam windows vista techrepublic com

    © Techrepublic.com

    Tujuh tahun kemudian, Apple juga melakukannya. Perusahaan yang dipimpin Tim Cook ini menerapkannya di iOS 7. 

    3. ios7 desain transparan theverge com

    © Theverge.com

    Mereka juga membawa desain ini ke macOS Big Sur.

    3. macos big sur glassmorphism bgr com

    © Bgr.com

    Perlahan-lahan, banyak orang yang mulai mengikutinya. Tampilan “kaca” ini mulai bermunculan di situs portofolio desainer Dribbble.

    4. desain kaca dribbble com faiz hakim

    © Dribbble.com / Faiz Hakim

    Bukan cuma itu saja, lho. Gaya desain ini juga merambah ke bidang desain icon hingga logo.

    5. icon transparan dribbble com marina silence

    © Dribbble.com / Marina Silence

    Baca Juga: Pelajari 4 Prinsip Persuasive Design Ini guna Menarik Perhatian Audiens

    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:

    6.1 contoh masalah hierarki visual glassmorphism blog prototypr io

    © Blog.prototypr.io

    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

    6.2 pemberian bayangan glassmorphism blog prototypr io

    © Blog.prototypr.io

    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!

    Baca Juga: 5 Jenis Environmental Graphic Design dan Perannya dalam Kehidupan Kita

    2. Bedakan blur elemen depan dan belakang

    6.3 pembedaan blur depan dan belakang glassmorphism blog prototypr io

    © Blog.prototypr.io

    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

    6.4 permainan opacity dalam glassmorphism blog prototypr io

    © Blog.prototypr.io

    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

    6.5 pemberian border glassmorphism blog prototypr io

    © Blog.prototypr.io

    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!

    TINGKATKAN SKILL DESAINMU

    Demikian penjelasan soal gaya desain glassmorphism. Pertimbangkan gaya ini untuk desain produkmu selanjutnya, ya!

    Seberapa bermanfaat artikel ini?

    Klik salah satu bintang untuk menilai.

    Nilai rata-rata 5 / 5. Jumlah vote: 2

    Belum ada penilaian, jadi yang pertama menilai artikel ini.

    We are sorry that this post was not useful for you!

    Let us improve this post!

    Tell us how we can improve this post?


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Artikel Terkait