Sertifikasi BNSP dan Pelatihan Online UI/UX: Mendesain UI Modern dengan Neumorphism & Glassmorphism

27-Sep-2025

Pembuat : Admin Mobile Faculty

Kategori : Media Pembelajaran

Sertifikasi BNSP dan Pelatihan Online UI/UX: Mendesain UI Modern dengan Neumorphism & Glassmorphism

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:

  1. Menggunakan Neumorphism untuk tombol & form input

    • Membuat efek embossed untuk tombol aktif

    • Menggunakan shadow lembut untuk input field

  2. 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:

css
/* Neumorphism Button */ .neumorphic-btn { background: #e0e0e0; border-radius: 12px; box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff; padding: 15px 30px; border: none; font-size: 16px; } /* Glassmorphism Card */ .glassmorphic-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 15px; padding: 20px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }

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/