Silabus Intensif Web Design
Berbasis Standar Kompetensi Nasional & Project-Based Learning
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Grid System & Anatomi Halaman Web
🎯 Latihan Mandiri / Tugas
Membuat layouting template kosong di Figma menggunakan sistem 12 kolom untuk desktop (1440px) dan 4 kolom untuk mobile (360px).
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Tipografi & Kontras Warna Aksesibilitas Web
🎯 Latihan Mandiri / Tugas
Membuat panduan gaya (Style Guide) web mini yang berisi palet warna beserta uji kontrasnya standar WCAG, dan skala ukuran teks web.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Anatomi Hero Section & Komunikasi Visual
🎯 Latihan Mandiri / Tugas
Meredesain Hero Section dari sebuah website bisnis lokal yang tidak jelas pesannya menjadi prototipe kasat mata (Lo-Fi) dengan CTA yang kuat.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Web Copywriting & Alur Informasi
🎯 Latihan Mandiri / Tugas
Mengubah tulisan artikel panjang mengenai deskripsi sebuah produk teknologi menjadi struktur visual web yang mudah dipindai (Scannable Landing Page).
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Review Konsep & Creative Brief
🎯 Latihan Mandiri / Tugas
Menentukan 1 tema proyek utama website yang akan digarap sampai hari ke-25 (misal: E-commerce atau SaaS) dan menyusun diagram struktur halamannya.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Mendesain Komponen UI Web (Aset Vektor)
🎯 Latihan Mandiri / Tugas
Membuat set ikon navigasi khusus web (Search, Cart, User, Menu, Chevron, Close) menggunakan vector tools di Figma.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Manajemen Gambar & Banner Promosi Web
🎯 Latihan Mandiri / Tugas
Mendesain 2 buah promotional banner menggunakan teknik image masking dan overlay warna agar tulisan di atas gambar tetap terbaca jelas.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Mendesain Komponen Navigasi & Footer
🎯 Latihan Mandiri / Tugas
Mendesain variasi Header (saat normal & saat di-scroll) dan Fat Footer yang memuat tautan navigasi sekunder serta info legalitas.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Studi Kasus Card Layout
🎯 Latihan Mandiri / Tugas
Mendesain komponen kartu (cards) untuk list produk e-commerce, lengkap dengan visualisasi status default, hover, dan stok habis.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Pembuatan Ragam Karya Grafis Web
🎯 Latihan Mandiri / Tugas
Menggabungkan komponen dan aset yang sudah dibuat dari Hari 6 hingga Hari 9 menjadi sebuah halaman promosi produk tunggal (Teaser Page).
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Praktik Manajemen Layer & Penamaan Aset
🎯 Latihan Mandiri / Tugas
Merapikan struktur penamaan layer di Figma menggunakan konvensi standar dev-handover (misal: 'ic_search', 'btn_primary_default').
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Optimasi & Ekspor Aset untuk Developer
🎯 Latihan Mandiri / Tugas
Mengekspor semua aset desain ke format SVG dan WebP dengan melakukan kompresi ukuran file tanpa menurunkan kualitas visual.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Arsitektur Informasi & Sitemap
🎯 Latihan Mandiri / Tugas
Menyusun peta situs (Sitemap) logis untuk proyek utama website Anda agar mudah dipahami user dan ramah SEO.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
User Flow Interaksi Web
🎯 Latihan Mandiri / Tugas
Menggambar diagram alur pengguna (User Flow) untuk proses pendaftaran akun baru dan alur transaksi pembelian barang di web.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Low-Fidelity Wireframing Desktop
🎯 Latihan Mandiri / Tugas
Membuat kerangka layout (Lo-Fi Wireframe) hitam putih tanpa gambar untuk 3 halaman utama proyek web Anda versi Desktop.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Responsive Wireframing (Mobile Layout)
🎯 Latihan Mandiri / Tugas
Mentransformasikan susunan layout 12 kolom desktop dari wireframe Hari 15 menjadi susunan vertikal 4 kolom versi Mobile.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Pengujian Alur & Navigasi (Usability Testing)
🎯 Latihan Mandiri / Tugas
Melakukan uji coba navigasi pada wireframe kasat mata kepada teman/secara mandiri untuk mendeteksi alur informasi yang membingungkan.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Iterasi & Perbaikan UX Layout
🎯 Latihan Mandiri / Tugas
Melakukan revisi susunan komponen wireframe berdasarkan data kebingungan user yang didapatkan dari pengujian di Hari 17.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Membangun Web UI Kit / Design System
🎯 Latihan Mandiri / Tugas
Membuat komponen reusable di Figma yang berbasis Auto-Layout untuk atom dasar: Button states, Form input fields, dan Dropdowns.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
High-Fidelity UI Design (Halaman Utama Desktop)
🎯 Latihan Mandiri / Tugas
Mengimplementasikan warna, font, foto, dan komponen UI Kit ke dalam kerangka wireframe Beranda/Landing Page versi Desktop.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
High-Fidelity UI Design (Halaman Pendukung & Mobile)
🎯 Latihan Mandiri / Tugas
Menyelesaikan desain visual final untuk halaman dalam (Halaman Form/Produk) sekaligus membuat layout responsif versi Mobile-nya.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Interactive Prototyping
🎯 Latihan Mandiri / Tugas
Menghubungkan antar halaman di Figma, mengatur tautan menu navigasi, dan menerapkan efek fixed header saat melakukan scroll simulator.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Desain Micro-interactions Web
🎯 Latihan Mandiri / Tugas
Membuat animasi interaksi mikro (Smart Animate) pada komponen web seperti efek transisi hover menu dan loading state pada tombol submit.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Menyusun Web Design Case Study
🎯 Latihan Mandiri / Tugas
Mengompilasi seluruh dokumentasi proses (Sitemap -> Wireframe -> UI Kit -> UI Final -> Prototype) menjadi satu studi kasus portofolio siap pajang di Behance atau PDF.
Materi & Tugas Belum Rilis
Materi ini akan terbuka secara otomatis tepat pada waktunya.
Simulasi Ujian Sertifikasi (Speed Design Challenge)
🎯 Latihan Mandiri / Tugas
Tantangan mandiri dengan batas waktu 5 jam: Membuat UI Landing Page desktop & mobile yang rapi berbasis Auto-Layout berdasarkan studi kasus instan baru.