- 5 Sections
- 49 Lessons
- Lifetime
Expand all sectionsCollapse all sections
- Modul 1: Fondasi & Strategi (Mindset UX)Sebelum menyentuh software, Anda harus memahami strategi di balik landing page yang menghasilkan uang.12
- 1.11.1 Pengenalan Ekosistem Landing Page
- 1.2Perbedaan Website vs. Landing Page.
- 1.3Jenis-jenis Landing Page: Lead Generation vs. Click-Through.
- 1.4Memahami psikologi pengunjung internet di Indonesia.
- 1.51.2 UX Research & User Persona
- 1.6Cara melakukan riset kompetitor.
- 1.7Membuat User Persona: Siapa yang akan membaca halaman ini?
- 1.8Menentukan Unique Selling Point (USP) agar desain memiliki arah yang jelas.
- 1.91.3 Copywriting & Information Architecture
- 1.10Teknik AIDA (Attention, Interest, Desire, Action) dalam desain.
- 1.11Menyusun hierarki informasi: Apa yang harus dibaca pertama kali?
- 1.12Penempatan Call-to-Action (CTA) yang strategis.
- Modul 2: Struktur & Kerangka (Wireframing)Tahap membangun "tulang punggung" desain tanpa terdistraksi oleh warna.11
- 2.12.1 Low-Fidelity Wireframe
- 2.2Sketsa tangan (Hand-sketching) untuk ideasi cepat.
- 2.3Memahami F-Pattern dan Z-Pattern dalam perilaku membaca user.
- 2.4Penempatan elemen utama: Hero Section, Social Proof, dan Footer.
- 2.52.2 Pengenalan Tool: Figma for Beginners
- 2.6Pengenalan Interface Figma (Layers, Properties, Canvas).
- 2.7Menggunakan Shapes, Frames, dan Groups.
- 2.8Manajemen aset sederhana.
- 2.92.3 Mid-Fidelity Wireframe
- 2.10Mengubah sketsa menjadi desain digital hitam-putih.
- 2.11Memastikan jarak (spacing) dan proporsi sudah masuk akal.
- Modul 3: Estetika & Visual (UI Design)Memberikan "nyawa" pada kerangka yang telah dibuat.12
- 3.13.1 Teori Warna & Branding
- 3.2Psikologi warna untuk konversi (Misal: Mengapa tombol CTA sering berwarna kontras?).
- 3.3Membuat palet warna yang harmonis (60-30-10 Rule).
- 3.4Aksesibilitas warna (Contrast check) agar nyaman untuk mata semua orang.
- 3.53.2 Tipografi yang Menjual
- 3.6Memilih font Pairings (Heading vs Body Text).
- 3.7Pengaturan Line Height dan Letter Spacing untuk keterbacaan maksimal.
- 3.8Skala tipografi digital.
- 3.93.3 Aset Visual & Ikonografi
- 3.10Mencari dan menggunakan gambar berkualitas tinggi (Stock Photos vs Illustration).
- 3.11Penggunaan ikon untuk mempercepat pemahaman informasi.
- 3.12Teknik masking dan dasar manipulasi gambar di Figma.
- Modul 4: Interaktivitas & ResponsivitasMemastikan desain berfungsi baik di berbagai perangkat.8
- 4.14.1 Responsive Design (Mobile First)
- 4.2Teknik mengubah layout Desktop ke Mobile.
- 4.3Menggunakan Auto Layout di Figma (Sangat krusial untuk efisiensi kerja).
- 4.4Memahami Grid System (12 Column Desktop vs 4 Column Mobile).
- 4.54.2 Prototyping Dasar
- 4.6Menghubungkan antar elemen (Hover effects pada tombol).
- 4.7Membuat Scrolling effect yang mulus.
- 4.8Cara mempresentasikan desain kepada klien/stakeholder.
- Modul 5: Final Project & PortofolioMempraktikkan semua ilmu ke dalam satu karya nyata.6
- 5.15.1 Studi Kasus Landing Page
- 5.2Proyek Mandiri: Membuat Landing Page untuk produk/jasa (Contoh: Kursus Online, SaaS, atau E-commerce).
- 5.3Iterasi desain berdasarkan Self-Usability Testing.
- 5.45.2 Persiapan Portofolio
- 5.5Cara menyusun Case Study di Behance atau Dribbble.
- 5.6Menjelaskan “Kenapa” di balik keputusan desain Anda (Bukan cuma pamer gambar bagus).
Perbedaan Website vs. Landing Page.
Next