Pendahuluan
Dalam dunia desain UI/UX, tren visual terus berkembang. Dua tren desain modern yang semakin populer adalah Neumorphism dan Glassmorphism.
✅ Neumorphism adalah gaya desain yang menggabungkan efek embossed dan debossed untuk menciptakan elemen yang tampak seperti bagian dari latar belakangnya.
✅ Glassmorphism adalah teknik desain yang memberikan efek transparan seperti kaca, sering digunakan dalam elemen UI yang elegan dan futuristik.
Pelatihan ini akan mengajarkan cara menerapkan kedua gaya desain ini dengan Figma dan CSS, serta bagaimana mengoptimalkannya dalam pembuatan antarmuka pengguna yang modern dan interaktif.
💰 Harga hanya Rp1.250.000
📍 Pelaksanaan online, fleksibel, dan bisa diikuti dari mana saja!
📜 Sertifikasi resmi BNSP berlaku seumur hidup
Unit Kompetensi yang Dipelajari
1. Pengenalan Neumorphism dan Glassmorphism
✅ Apa itu Neumorphism dan bagaimana prinsip dasarnya?
✅ Apa itu Glassmorphism dan bagaimana cara menggunakannya?
✅ Keunggulan dan keterbatasan kedua gaya desain ini dalam UI modern
2. Mendesain dengan Neumorphism di Figma & CSS
✅ Cara menggunakan Shadow & Highlights untuk efek embossed dan debossed
✅ Mendesain tombol, kartu, dan input field dengan Neumorphism
✅ Implementasi desain Neumorphism dalam HTML & CSS
3. Mendesain dengan Glassmorphism di Figma & CSS
✅ Menggunakan blur & transparency untuk efek kaca
✅ Mendesain card, navbar, dan modal UI dengan Glassmorphism
✅ Implementasi desain Glassmorphism dalam HTML & CSS
4. Studi Kasus & Implementasi
✅ Mendesain dashboard aplikasi modern menggunakan Neumorphism
✅ Mendesain landing page futuristik dengan Glassmorphism
✅ Menerapkan desain ke dalam kode menggunakan HTML & CSS
Studi Kasus dan Penyelesaian
Studi Kasus:
Sebuah fintech startup ingin membuat dashboard aplikasi mobile banking dengan tampilan modern. Mereka ingin menerapkan Neumorphism untuk tombol dan input form, serta Glassmorphism untuk kartu informasi.
Solusi:
-
Menggunakan Neumorphism untuk tombol & form input
-
Membuat efek embossed untuk tombol aktif
-
Menggunakan shadow lembut untuk input field
-
-
Menerapkan Glassmorphism untuk kartu informasi
-
Menambahkan efek blur dan transparansi untuk latar belakang kartu
-
Menggunakan warna lembut dan gradien modern
-
Berikut contoh implementasi dengan CSS:
Hasil akhirnya adalah dashboard aplikasi modern yang stylish, responsif, dan mudah digunakan.
Silabus Pelatihan (2 Hari)
| Hari | Materi | Keterangan |
|---|---|---|
| 1 | Pengenalan Neumorphism & Glassmorphism | Konsep dasar, kelebihan, dan penerapan |
| 1 | Mendesain dengan Neumorphism di Figma | Efek shadow & highlights, pembuatan tombol & input field |
| 1 | Mendesain dengan Glassmorphism di Figma | Efek blur, transparansi, dan pembuatan kartu UI |
| 2 | Implementasi dengan HTML & CSS | Menulis kode untuk efek Neumorphism & Glassmorphism |
| 2 | Studi Kasus | Mendesain UI dashboard dengan kedua gaya desain |
| 2 | Optimasi & Best Practices | Cara menghindari kesalahan dalam desain UI modern |
Kesimpulan
Pelatihan ini akan memberikan pemahaman mendalam tentang Neumorphism & Glassmorphism, sehingga peserta dapat menciptakan UI yang modern, elegan, dan fungsional.
✨ Pelaksanaan online, fleksibel, dan bisa diikuti dari mana saja!
✨ Harga terjangkau hanya Rp1.250.000
✨ Sertifikasi resmi BNSP yang berlaku seumur hidup
📌 Daftar sekarang dan lihat detailnya di:
🔗 https://mobilefaculty.com/skema-sertifikasi-bidang-komputer/