Notifikasi website sudah menjadi hal yang lumrah. Kami melihatnya di eCommerce, komunitas keanggotaan, dan media sosial. Mereka sulit untuk melarikan diri.
Dan mereka juga penting bagi pengguna. Notifikasi memberikan detail mengenai pesanan, pesan, dan informasi akun lainnya.
Oleh karena itu, menarik untuk melihat bagaimana UI notifikasi berkembang. Desainer menggunakan kreativitas mereka dan menambahkan kepribadian. Mereka membuktikan bahwa notifikasi dapat memiliki bentuk dan fungsi.
Dengan itu, mari kita lihat delapan UI notifikasi unik. Mereka menggunakan CSS dan (dalam beberapa kasus) JavaScript untuk melampaui dasar-dasarnya.
Lihat đź ‹
Sistem Pemberitahuan Neon dengan Efek hover oleh CleverYeti
UI notifikasi ini sangat cocok untuk situs web yang menggunakan mode gelap. Tampilannya elegan sekaligus mudah dicerna. Kami akan memberikan poin bonus untuk menyertakan beberapa efek animasi CSS yang halus.
Lihat Pena Sistem notifikasi neon oleh CleverYeti
Pemberitahuan Garis Waktu Vertikal oleh Alina N.
Inilah cara rapi untuk mengatur banyak notifikasi. Tata letak garis waktu ini membuat setiap item menonjol. Jarak antar entri membuat segala sesuatunya mudah diikuti. Bidang pencarian juga merupakan tambahan yang disambut baik.
Lihat Pena Garis Waktu Vertikal – Pemberitahuan oleh Alina N.
Animasi Lencana Pemberitahuan oleh Valery Alikin
Ingin menambahkan unsur kesenangan? UI kecil yang cerah ini menyerupai karakter “Minion”. Dan jika warnanya tidak menarik perhatian Anda, animasi percikan akan berfungsi.
Lihat Pena Animasi Lencana Pemberitahuan oleh Valery Alikin
Pemberitahuan Proyek oleh Landon Messmer
Mungkin ikon “lonceng” agak berlebihan digunakan. Namun dalam kasus ini, ini lebih tentang apa yang ada di dalamnya. Panel notifikasi ini cantik dan fungsional. Ini menampilkan tampilan yang bersih dan beberapa fitur berguna.
Lihat Pena Pemberitahuan Proyek oleh Landon Messmer
Pemberitahuan Kesalahan, Sukses, Peringatan, dan Peringatan oleh Swarup Kumar Kuila
UI notifikasi ini menghadirkan estetika sederhana namun berteknologi tinggi. Dengan warna cerah dan animasi sederhana pasti menarik perhatian. Ini didukung oleh CSS, dengan bantuan dari perpustakaan ikon Font Awesome yang populer.
Lihat Pena pesan kesalahan, sukses, peringatan dan peringatan oleh Swarup Kumar Kuila
Komponen Situs Info, Peringatan, dan Peringatan oleh Dom Jay
Komponen notifikasi ini cocok untuk konten berdurasi panjang. Gunakan mereka untuk menampilkan detail penting dalam kursus online. Atau sebagai kotak panggilan dalam postingan blog. Lagi pula, peringatan bukan hanya untuk informasi spesifik pengguna.
Lihat Pena Komponen Situs – Info/Peringatan/Peringatan oleh Dom Jay
Sukses, Kesalahan, Notifikasi Datar Peringatan oleh AbrarK
Klik tombol dan sactionkan notifikasi berwarna muncul. Presentasi ini menggunakan gaya datar yang mengingatkan pada Facebook dan layanan populer lainnya. Ini juga menampilkan beberapa animasi yang apik.
Lihat Pena Beritahu Datar oleh AbrarK
Pemberitahuan Media Sosial Pop-Up oleh Nooray Yemon
Berikut tampilan UI notifikasi yang sangat bergaya. Hal ini menunjukkan bahwa notifikasi dapat melampaui kegunaannya. Ini juga bisa menjadi peluang branding.
Lihat Pena Munculkan pemberitahuan umpan sosial oleh Nooray Yemon
Sajikan Pemberitahuan dengan Contoh UI Luar Biasa Ini
UI Notifikasi kini menjadi kebutuhan utama dalam desain web. Mereka memengaruhi semua jenis situs web. Kemungkinannya adalah Anda harus mempertimbangkannya dalam proyek mendatang.
Kita pasti bisa tetap menggunakan tampilan umum. Namun ada peluang untuk berbuat lebih banyak. CSS dan JavaScript memungkinkan kami menciptakan pengalaman pengguna yang unik. Contoh di atas hanyalah puncak gunung es.
Ingin melihat UI notifikasi yang lebih luar biasa? Lihat kami Koleksi CodePen!
