Seni Rupa & Desain

Mengenal Tren Desain UI Glassmorphism, yang Populer Banget di Kalangan Desainer

Desain Ui Glassmorphism

Ngomongin soal desain user interface, ada satu gaya desain yang lagi tren di kalangan para desainer akhir-akhir ini, lho. Jika sebelumnya kita tahu ada style Neumorphism yang begitu digandrungi, tren baru ini menawarkan keunikan lain yang lebih segar, guys. Glassmorphism, udah tahu style ini? Apa, sih, yang bikin tren desain UI Glassmorphism ini sangat disukai?

Perlu kamu ketahui, jika desain UI Glassmorphism artinya adalah transparansi dengan efek kaca yang ngeblur berkat penggunaan Background Blur. Selain itu, yang bikin Glassmorphism semakin populer di kalangan desainer adalah pendekatan berlapis-lapis dengan objek mengambang, penggunaan warna-warna cerah yang menonjolkan transparansi yang blur serta garis batas halus dan tipis pada objek yang tembus cahaya.

Nah, karena tampilan kaca itulah, efek ini dikenal dengan sebutan Glassmorphism.

Sekilas Sejarah tentang Desain UI Glassmorphism

Desain UI Glassmorphism

Desain UI Glassmorphism (Sumber : medium.com)

Latar belakang efek nge-blur kali pertama diperkenalkan secara global pada tahun 2013 oleh iOS 7. Dan kemunculannya membawa perubahan yang cukup radikal, tapi mengingat semua kontroversi seputar font ultra-light dan tampilan ikon yang jelek, kehadiran efek nge-blur sebagai satu bentuk perubahan ini justru bikin orang-orang jatuh hati.

Menggulirkan notifikasi dengan cepat jadi hal yang begitu menyenangkan untuk dilakukan, karena kita bisa melihat dengan jelas tampilan ikon-ikon memudar dan nge-blur di bawah panel baru.

Tren Baru dalam Desain UI

Desain UI Glassmorphism

Desain UI Glassmorphism (Sumber : medium.com)

Dan gara-gara itu, Apple malah memutuskan untuk mengurangi efek kaca blur di OS seluler mereka, lho, guys. Tapi, tenang, karena baru-baru ini mereka kembali menghadirkan efek buran transparan di Mac OS Big Sur.

Sistem desain Microsoft Fluent juga punya pengaruh besar pada efek ini. Elemen khusus ini disebut sebagai The Acrylic dan memamerkannya sebagai bagian integral dari sistem desain mereka.

Cara untuk Mencapai Efek Glassmorphism

Desain UI Glassmorphism

Sumber : Medium.com

Nggak sulit, kok, sebenarnya untuk mencapai efek Glassmorphism. Tapi meski begitu ada beberapa hal yang wajib kamu perhatikan. Pertama, tata letak berbasis kartu, di mana semakin dekat objeknya dengan kita, maka akan semakin banyak menarik cahaya. Artinya, tampilannya menjadi sedikit lebih transparan.

Baca Juga :   Tutorial Lengkap Cara Membuat Doodle Art untuk Pemula

Dasar untuk seluruh efek ini datang dari kombinasi bayangan, transparansi dan keburaman latar belakang. Kamu cuma bisa menggunakan satu atau beberapa lapisan transparan, tapi kalau mau efeknya terlihat menonjol, seenggaknya dua tingkat tembus cahaya muncul di latar belakang yang berwarna-warni.

Gimana Cara Mengatur Transparansi yang Benar?

Transparasi

Mengatur Transparansi (Sumber : Medium.com)

Sangat penting diingat, kamu nggak boleh membuat seluruh bentuk transparan. Sebagian besar design tool ketika kamu mengatur tingkat transparansi di angka 100% dan transparansi objek lebih rendah, maka background blur akan dinonaktifkan.

Dalam contoh di atas, ada nilai background blur yang sama persis, yakni 8, tapi kok, bisa gambarnya terlihat beda banget. Jika opasitas isian 100%, maka nggak masalah seberapa rendah opasitas objeknya.

Gimana Memilih Background yang Pas?

Background

Memilih Background (Sumber : Medium.com)

Background memegang peran penting untuk membuat efek ini bersinar. Terlarang membuatnya terlalu simple atau membosankan kalau kamu ingin membuat efeknya terlihat sempurna. Selain itu, kamu juga nggak boleh membuatnya dengan detail yang terlalu dalam.

Mungkin itulah kenapa Apple memilih background warna-warni sebagai wallpaper default pada Mac OS Big Sur. Pasalnya, perbedaan tonal yang mudah dilihat itu lebih gampang kamu lihat ketika ada permukaan buram transparan yang membentang di atasnya. So, saat kamu memilih latar belakang, pastikan background pilihanmu itu punya perbedaan tonal yang cukup agar glass effect bisa benar-benar terlihat dengan cantik.

Akhir Kata

Desain UI Glassmorphism

Dan hal terakhir yang bisa kamu coba adalah menambahkan 1p inner border dengan beberapa transparansi pada bentuk yang diinginan. Cara ini akan mensimulasikan tepi kaca dan membuat bentuk jadi lebih menonjol dari background-nya.

Gimana, udah siap mencoba tren desain UI Glassmorphism?

About author

Related posts
Seni Rupa & Desain

Tren Desain Logo yang Bakal Booming di 2022

Seni Rupa & Desain

Gimana Sih Cara Merancang Booth Pameran Yang Menarik?

Seni Rupa & Desain

Meraup Cuan Sekaligus Menyelamatkan Lingkungan, Peluang Bisnis Furniture Daur Ulang Sampah Plastik

Seni Rupa & Desain

Tren Media Sosial Instagram Tahun 2022 Terbaik untuk Personal Branding