Web Design — Landing Page Jualan dalam 15 Menit

Cover Mata Kuliah Web Design — Membuat Landing Page dalam 15 Menit

Arah Pembelajaran

Target Pembelajaran Hari Ini

Setelah pembelajaran, mahasiswa mampu menyusun prompt yang jelas, menghasilkan landing page responsif, menguji, dan memublikasikannya.

1

Identifikasi

Menentukan produk, pembeli, keunggulan, harga, dan CTA.

2

Susun Prompt

Mengubah ide produk menjadi instruksi yang terstruktur.

3

Bangun & Uji

Membuat halaman, mengecek mobile dan tombol WhatsApp.

4

Publikasikan

Menghasilkan satu tautan website aktif di Netlify.

Target akhir: 1 landing page produk + 1 link website aktif.

Konsep Inti

Apa yang Penting dalam Landing Page?

Landing page yang efektif membawa pengunjung dari melihat hingga melakukan tindakan.

PERHATIAN→PERCAYA→BERTINDAK

Tes 5 detik: Apa produknya? Untuk siapa? Apa manfaatnya? Bagaimana cara memesannya?

HeroMasalahSolusiKeunggulanBuktiCTA

Buka sampel: ↗ Contoh 1 — Krey ↗ Contoh 2 — Landing Page

Persiapan • 1 Menit

Siapkan Data Produk

NAMA PRODUKKopi Susu Gincu

TARGET PEMBELIMahasiswa

KEUNGGULANCreamy, segar, terjangkau

HARGARp10.000 / gelas

WHATSAPPNomor pemesanan aktif

GAYA DESAINWarm Organic

🥤

Data lengkap, hasil lebih tepat. 6 data inti sebelum mulai

Alur Kerja

Template → PromptCowboy → Netlify

1

Copy Prompt Template

Isi lima data produk dan sisakan satu gaya desain.

2

Paste ke PromptCowboy.ai

Minta AI merapikan dan memperjelas instruksi.

3

Paste ke Netlify

Generate, periksa preview, lalu publikasikan.

Sebelum lanjut: cek produk, target, harga, gaya, WhatsApp, dan larangan klaim palsu.

Urutan praktik

P2 • Buka PromptCowboy.ai ↗ N3 • Buka Netlify ↗

Contoh dosen

# ISI DATA PRODUK

Nama produk: [NAMA PRODUK]
Target pembeli: [TARGET PEMBELI]
Keunggulan produk: [KEUNGGULAN]
Harga: [HARGA]
Nomor WhatsApp: [NOMOR WHATSAPP]

## PILIH SATU GAYA — HAPUS YANG LAIN

* Minimalis Modern — bersih, terang, profesional.
* Bento Grid — modern dengan kartu-kartu rapi.
* Soft Gradient — warna lembut, segar, dan menarik.
* Bold Typography — judul besar, tegas, dan energik.
* Premium Dark — gelap, elegan, dan eksklusif.
* Warm Organic — hangat, natural, dan bersahabat.

# PERINTAH

Buat landing page penjualan profesional satu halaman berdasarkan data dan gaya yang tersisa di atas.

Tentukan otomatis warna, masalah pelanggan, manfaat produk, headline, copywriting, FAQ, dan gambar yang paling sesuai. Gunakan bahasa Indonesia yang sederhana dan persuasif.

Susun halaman dengan urutan:

1. Hero, gambar produk, harga, dan tombol WhatsApp.
2. Masalah pelanggan dan solusi.
3. Manfaat dan keunggulan produk.
4. Cara memesan dalam tiga langkah.
5. Harga dan penawaran.
6. Testimoni placeholder.
7. FAQ.
8. CTA penutup dan footer.

Semua tombol pemesanan harus membuka WhatsApp dengan pesan otomatis:

“Halo, saya tertarik memesan [nama produk]. Mohon informasi selanjutnya.”

Buat tampilannya responsif, cepat, SEO-friendly, mudah dibaca, dan siap dipublikasikan di Netlify.

Jangan membuat testimoni, diskon, garansi, jumlah pelanggan, atau klaim palsu. Hindari teks panjang, desain terlalu ramai, dan tombol yang tidak berfungsi.

# DATA PRODUK

Nama produk: Kopi Susu Gincu
Target pembeli: Mahasiswa yang membutuhkan minuman kopi enak dan terjangkau untuk menemani kuliah, mengerjakan tugas, dan berkumpul bersama teman.
Keunggulan produk: Rasa kopi susu creamy dan seimbang, dibuat segar, serta harganya ramah di kantong mahasiswa.
Harga: Rp10.000 per gelas
Nomor WhatsApp: 6285224889696

## GAYA DESAIN

Warm Organic — hangat, natural, kekinian, dan bersahabat.

# PERINTAH

Buat landing page penjualan profesional satu halaman berdasarkan data dan gaya di atas.

Tentukan otomatis warna, masalah pelanggan, manfaat produk, headline, copywriting, FAQ, dan gambar yang paling sesuai. Gunakan bahasa Indonesia yang sederhana, santai, persuasif, dan dekat dengan mahasiswa.

Susun halaman dengan urutan:

1. Hero, gambar Kopi Susu Gincu, harga, dan tombol WhatsApp.
2. Masalah pelanggan dan solusi.
3. Manfaat dan keunggulan produk.
4. Cara memesan dalam tiga langkah.
5. Harga dan penawaran.
6. Testimoni placeholder.
7. FAQ.
8. CTA penutup dan footer.

Semua tombol pemesanan harus membuka WhatsApp dengan pesan otomatis:

“Halo, saya tertarik memesan Kopi Susu Gincu seharga Rp10.000. Mohon informasi pemesanannya.”

Buat tampilan responsif, cepat, SEO-friendly, mudah dibaca, menarik bagi mahasiswa, dan siap dipublikasikan di Netlify.

Jangan membuat testimoni, diskon, garansi, jumlah pelanggan, atau klaim palsu. Hindari teks panjang, desain terlalu ramai, dan tombol yang tidak berfungsi.

Demonstrasi & Praktik

Buat, Uji, dan Publikasikan

1 menit

Demo Dosen

Perhatikan alur template, PromptCowboy, dan Netlify.

4 menit

Praktik Mandiri

Kerjakan di perangkat masing-masing, lalu revisi satu masalah.

1 menit

Uji & Bagikan

Cek mobile dan WhatsApp, lalu kirim link di chat.

Total 6 menit: hasil pertama tidak harus sempurna—temukan satu kekurangan dan berikan satu instruksi revisi yang spesifik.

Evaluasi Daring

Apakah Landing Page-nya Bekerja?

25%

Prompt

25%

Konten

25%

Desain

25%

Fungsi

☐ Produk dipahami dalam 5 detik?

☐ Manfaat dan harga terlihat jelas?

☐ Tombol WhatsApp berfungsi?

☐ Tampilan smartphone rapi?

Buka link pasangan dari chat: beri 1 apresiasi + 1 saran. Ketuntasan ≥ 75.

Tugas Individu

Buat Landing Page Jasa/Layanan

Ketentuan

Pilih satu jasa/layanan nyata atau simulasi yang wajar.
Jelaskan target pelanggan, masalah, manfaat, dan keunggulan layanan.
Gunakan CTA konsultasi/WhatsApp yang aktif.
Pastikan responsif, lalu publikasikan di Netlify tanpa klaim palsu.

Resume PDF berisi

Identitas mahasiswa & profil layanan • Target pelanggan dan masalah • Prompt final • Screenshot desktop & mobile • Link website aktif • Refleksi singkat

Nama file: Nama_NIM_MataKuliah.pdf

BATAS WAKTU
30 Juli 2026

PUKUL
23.59 WIB

Pengumpulan Tugas

Unggah satu resume PDF dan pastikan link landing page jasa/layanan dapat dibuka.

↗ Kumpulkan Tugas

Penilaian: Prompt 25% • Konten 25% • Desain 25% • Fungsi 25%