Content Development
Modul Praktikum · Edisi Interaktif 2026

Content Development

Panduan praktik berbasis proyek (Project-Based Learning) untuk merancang, memproduksi, dan meluncurkan sebuah Landing Page kampanye produk yang live, etis, dapat diakses semua orang, dan teroptimasi — dari nol hingga terukur.

🎓 Program D3 Vokasi ⚙ 4 SKS Praktikum 📦 8 Modul · 16 Pertemuan 🚀 Luaran: Landing Page Live
8
Modul terstruktur
40+
Langkah praktik terpandu
9
Infografis interaktif
1
Portofolio nyata

Kata Pengantar

Di era digital, konten bukan sekadar teks dan gambar — ia adalah aset strategis untuk mengomunikasikan nilai, membangun kepercayaan, dan mendorong konversi.

Modul ini dirancang khusus untuk mahasiswa Diploma 3 (Vokasi) dengan menitikberatkan pada penguasaan keterampilan praktis yang dibutuhkan industri digital. Melalui pendekatan Project-Based Learning, Anda tidak hanya mempelajari teori, tetapi langsung membangun produk nyata yang dapat dimasukkan ke dalam portofolio Anda.

Dibanding edisi sebelumnya, edisi ini diperluas dari 4 menjadi 8 modul dengan tambahan materi yang sebelumnya hilang namun krusial di dunia kerja: strategi konten & persona, etika & hak cipta, pemanfaatan AI, aksesibilitas (accessibility), dan analitik konversi. Setiap langkah kini dilengkapi penjelasan mendalam, infografis, boks tips & penanganan masalah, serta latihan interaktif.

📘
Tentang edisi iniEbook ini adalah satu berkas HTML mandiri — dapat dibuka di komputer atau ponsel mana pun tanpa koneksi internet. Semua fitur (pencarian, mode gelap, checklist, kuis, kalkulator nilai) berjalan langsung di peramban Anda.

Penyusun,
Tim Pengajar Mata Kuliah Content Development

Pendahuluan

Panduan Penggunaan, CPL & CPMK

Pahami cara kerja ebook ini, capaian pembelajaran yang dituju, dan peta perjalanan praktikum Anda selama satu semester.

Cara Menggunakan Ebook Ini

🔎

Pencarian cepat

Gunakan kotak cari di sidebar untuk melompat ke modul atau istilah tertentu.

◐

Mode gelap/terang

Tombol tema di pojok bawah sidebar. Pilihan Anda tersimpan otomatis.

✓

Checklist tersimpan

Centang kemajuan Anda; status tersimpan di peramban walau ebook ditutup.

🧮

Kalkulator nilai

Simulasikan skor proyek akhir Anda dengan rubrik interaktif di bab Penutup.

💡
Kenali ikon boks Tips = trik mempercepat kerja · Info = konteks tambahan · Perhatian = hal yang sering keliru · Penanganan Masalah = solusi saat macet. Kata ber-garis putus-putus menampilkan definisi saat disentuh kursor.

Capaian Pembelajaran Lulusan (CPL) yang Didukung

KodeRumusan Capaian Pembelajaran Lulusan
CPL-1Mampu menerapkan pemikiran logis, kritis, dan inovatif dalam merancang solusi konten digital yang berorientasi pada kebutuhan pengguna dan tujuan bisnis.
CPL-2Mampu memproduksi aset konten (teks, visual) yang komunikatif, estetis, dan teroptimasi secara teknis untuk media web.
CPL-3Mampu mengoperasikan perkakas (tools) pengembangan konten dan web builder secara profesional sesuai standar industri.
CPL-4Mampu menjunjung etika profesi, menghargai hak cipta, dan menerapkan prinsip inklusivitas (accessibility) dalam berkarya.
CPL-5Mampu mengevaluasi performa konten berbasis data dan mengambil keputusan perbaikan secara terukur.

Capaian Pembelajaran Mata Kuliah (CPMK)

Setiap modul memetakan satu atau lebih CPMK berikut, yang merupakan turunan dari CPL di atas:

KodeCapaian Mata KuliahCPL · Modul
CPMK-1Merumuskan strategi konten, persona audiens, dan proposisi nilai (USP) sebuah produk.CPL-1 · M1–M2
CPMK-2Menyusun naskah persuasif (copywriting) dan teks antarmuka (UX writing) yang berorientasi konversi.CPL-1,2 · M2
CPMK-3Memproduksi dan mengoptimasi aset visual sesuai identitas merek & standar performa web.CPL-2 · M3
CPMK-4Menerapkan etika konten, lisensi hak cipta yang benar, dan memanfaatkan AI secara bertanggung jawab.CPL-4 · M4
CPMK-5Membangun halaman web fungsional menggunakan CMS & page builder (no-code).CPL-3 · M5
CPMK-6Menerapkan prinsip aksesibilitas (WCAG) agar konten dapat dinikmati semua pengguna.CPL-4 · M6
CPMK-7Mengoptimasi SEO on-page dan performa teknis (Core Web Vitals) sebuah halaman.CPL-3 · M7
CPMK-8Mengukur performa konten dengan analitik dan merumuskan rekomendasi perbaikan berbasis data.CPL-5 · M8

Peta Perjalanan Praktikum (16 Pertemuan)

Mata kuliah 4 SKS ini berlangsung selama satu semester. Setiap modul dialokasikan ±2 pertemuan (1 pertemuan praktikum = 170 menit), termasuk waktu pengerjaan proyek mandiri.

1

Modul 1–2 · Fondasi & Naskah (Pert. 1–4)

Strategi konten, persona, USP, lalu copywriting & UX writing + wireframe.

2

Modul 3–4 · Produksi & Etika (Pert. 5–8)

Aset visual & brand identity, lalu etika, hak cipta/lisensi, dan AI tools.

3

Modul 5–6 · Bangun & Inklusif (Pert. 9–12)

Integrasi konten di WordPress+Elementor, lalu accessibility (WCAG).

4

Modul 7–8 · Optimasi & Ukur (Pert. 13–16)

SEO on-page & performa, lalu analytics, konversi, dan launching final.

Skema Penilaian

Komponen Nilai

Proyek Akhir (Landing Page)40%
Tugas per Modul35%
Kuis & Partisipasi15%
Ujian/Refleksi10%

Luaran Proyek Akhir

  • Landing Page kampanye produk yang live & dapat diakses publik.
  • Konsisten secara visual dengan brand guideline buatan sendiri.
  • Responsif di perangkat seluler & lolos standar aksesibilitas dasar.
  • Skor Lighthouse (SEO & Best Practices) di atas 85.
Modul 1 · Pertemuan 1–2

Strategi Konten, Riset Audiens & Persona

Sebelum menulis satu kata pun, kita rancang fondasinya: untuk siapa konten dibuat, apa yang membuatnya unik, dan bagaimana memandu audiens dari "tidak kenal" menjadi "membeli".

⏱ 2 × 170 menit🎯 CPMK-1📤 Luaran: Content Strategy Brief
🎯 Tujuan Praktikum

Setelah menyelesaikan modul ini, Anda mampu:

  • Menjelaskan posisi landing page dalam keseluruhan strategi konten (content funnel).
  • Menyusun persona audiens berbasis riset, bukan asumsi.
  • Merumuskan Unique Selling Proposition (USP) dan proposisi nilai yang tajam.
  • Mengisi Content Strategy Brief sebagai pondasi seluruh proyek.

1.1 Mengapa Strategi Dulu, Baru Eksekusi?

Kesalahan pemula paling umum adalah langsung membuka web builder dan mendesain. Akibatnya konten cantik tapi tidak menjual, karena tidak menjawab kebutuhan audiens yang tepat. Analogikan konten seperti membangun rumah: strategi adalah fondasi & denah, desain adalah cat dan perabot. Tidak ada yang mengecat tembok sebelum fondasinya berdiri.

1.2 Content Marketing Funnel (TOFU – MOFU – BOFU)

Audiens tidak langsung membeli saat pertama kali bertemu merek Anda. Mereka bergerak melalui sebuah corong (funnel). Memahami posisi audiens membantu Anda memilih pesan yang tepat. Landing page kampanye umumnya menyasar tahap BOFU (siap mengambil keputusan), namun sering juga menangkap audiens MOFU.

TOFU — Top of Funnel · Kesadaran (Awareness)Audiens baru sadar punya masalah. Konten: artikel, video edukasi, post media sosial. Tujuan: menarik perhatian.
MOFU — Middle · Pertimbangan (Consideration)Audiens membandingkan solusi. Konten: studi kasus, webinar, perbandingan, lead magnet. Tujuan: membangun kepercayaan.
BOFU — Bottom · Keputusan (Decision)Audiens siap membeli. Konten: landing page, demo, penawaran, testimoni. Tujuan: konversi.
Gambar 1.1 — Corong pemasaran konten. Lebar corong menggambarkan jumlah audiens yang menyusut di tiap tahap.
🎯
Posisikan landing page AndaKarena landing page berada di tahap BOFU, pesannya harus spesifik, meyakinkan, dan minim distraksi. Hanya ada satu tujuan dan satu tombol aksi utama (CTA).

1.3 Riset Audiens & Persona

Persona adalah representasi semi-fiktif dari pelanggan ideal Anda, dibangun dari data nyata (wawancara, survei, kolom komentar, ulasan kompetitor). Persona mengubah "audiens" yang abstrak menjadi sosok konkret yang bisa Anda ajak bicara lewat tulisan.

"Rina si Pejuang UMKM"
Pemilik toko kue rumahan · 32 th · Bandung

😟 Pain Point (Masalah)

Penjualan stagnan; bingung promosi online; tidak punya waktu & budget besar.

🎯 Goal (Tujuan)

Pesanan naik tanpa harus jadi ahli teknologi.

🔍 Perilaku

Aktif di Instagram & WhatsApp, scroll lewat HP, mudah ragu pada hal "ribet".

💬 Keberatan (Objection)

"Apa ini susah dipakai?", "Mahal nggak ya?", "Beneran works?"

Gambar 1.2 — Contoh kartu persona. Setiap elemen kelak menjadi bahan baku copywriting Anda.

1.4 Merumuskan USP & Proposisi Nilai

USP menjawab satu pertanyaan maut dari pelanggan: "Kenapa saya harus pilih kamu, bukan yang lain (atau tidak sama sekali)?" USP yang kuat itu spesifik dan sulit ditiru pesaing.

❌ USP Lemah

  • "Kualitas terbaik"
  • "Harga terjangkau"
  • "Pelayanan ramah"

Klise, semua orang mengklaim hal yang sama.

VS

✅ USP Kuat

  • "Kue ulang tahun custom, sampai dalam 3 jam di Bandung."
  • "Garansi uang kembali jika telat."

Spesifik, terukur, dan menjawab pain point.

1.5 Alat & Bahan

📄

Google Docs

Menyusun brief & persona.

🔍

Google Trends

Validasi minat & tren topik.

⭐

Ulasan/Marketplace

Sumber pain point asli pelanggan.

🗂

Whimsical/Figma

(Dipakai di Modul 2 untuk wireframe.)

1.6 Tutorial Praktis

Pilih produk & lakukan riset cepat25 mnt▶

Pilih satu produk/jasa nyata (boleh UMKM lokal, brand favorit, atau ide sendiri). Lalu kumpulkan bahan riset:

  1. Buka Google Trends, ketik nama kategori produk. Catat apakah trennya naik/stabil.
  2. Cari produk serupa di marketplace/Google Maps. Baca 10 ulasan (positif & negatif). Catat kata-kata persis yang dipakai pelanggan saat memuji atau mengeluh — ini emas untuk copywriting.
  3. Buat dokumen Google Docs baru: NIM_Nama_M1_StrategyBrief.
💡
TipsBahasa pelanggan > bahasa marketing. Kalau pelanggan bilang "adonannya lembut banget", pakai frasa itu, jangan diganti jadi "tekstur premium".
Bangun kartu persona30 mnt▶

Berdasarkan riset tadi, isi kartu persona (lihat Gambar 1.2). Minimal cakup: nama & foto stereotip, demografi, pain point, goal, perilaku digital, dan keberatan. Gunakan template di bawah.

Template Persona
Nama Persona   : "____ si ____"
Demografi      : Usia __ · Pekerjaan __ · Lokasi __
Pain Point     : 1) __  2) __  3) __
Goal           : __
Perilaku       : Platform __ · Perangkat __ · Kebiasaan __
Keberatan      : 1) __  2) __
Rumuskan USP & isi Content Strategy Brief35 mnt▶

Gabungkan semuanya dalam satu tabel brief. Ini akan menjadi "kompas" yang Anda rujuk di setiap modul berikutnya.

KomponenIsian Anda
Nama Produk/Brandcth: Sepatu Aerostreet
Persona Utama(ringkasan dari Langkah 2)
USP(spesifik & terukur)
Tujuan Landing Pagecth: pengunjung klik "Beli Sekarang"
Satu Pesan UtamaInti yang ingin diingat audiens dalam 1 kalimat
Tahap FunnelBOFU (umumnya)
⚠
PerhatianSatu landing page = satu tujuan. Jika Anda ingin orang "beli" sekaligus "follow IG" dan "daftar newsletter", fokus akan pecah dan konversi turun.

1.7 Tugas Modul 1

📤
Yang dikumpulkanSatu file PDF (NIM_Nama_M1) berisi: (1) ringkasan riset audiens, (2) kartu persona lengkap, dan (3) Content Strategy Brief. Unggah ke LMS.

1.8 Evaluasi Diri

1.9 Uji Pemahaman

1.Sebuah landing page kampanye penjualan paling tepat menyasar tahap funnel yang mana?
TOFU (Awareness)
MOFU (Consideration)
BOFU (Decision)
Tidak terkait funnel sama sekali
Tepat! BOFU adalah tahap keputusan, sehingga pesan harus fokus pada konversi.
Belum tepat. Landing page penjualan menyasar BOFU — audiens yang sudah siap mengambil keputusan.
2.Manakah contoh USP yang paling kuat?
"Produk berkualitas dengan harga terjangkau."
"Kue custom diantar dalam 3 jam se-Bandung, atau gratis."
"Kami melayani dengan sepenuh hati."
Benar! Spesifik, terukur (3 jam), dan ada jaminan — sulit ditiru.
Kurang tepat. USP kuat itu spesifik & terukur, bukan klaim umum yang dipakai semua orang.
Modul 2 · Pertemuan 3–4

Perencanaan Konten & UX Writing

Menerjemahkan strategi menjadi kata-kata yang menjual dan struktur halaman yang memandu. Di sinilah copywriting bertemu UX writing, lalu dituangkan ke wireframe.

⏱ 2 × 170 menit🎯 CPMK-2📤 Luaran: Naskah + Wireframe
🎯 Tujuan Praktikum
  • Membedakan dan menerapkan copywriting (persuasif) vs UX writing (fungsional).
  • Menggunakan kerangka copywriting (AIDA, PAS, FAB) untuk menyusun naskah.
  • Merancang struktur konten menjadi wireframe landing page berkonversi tinggi.

2.1 Anatomi Landing Page yang Mengonversi

Landing page yang baik mengikuti alur psikologis: menarik perhatian → menyentuh masalah → menawarkan solusi → membuktikan → mengajak bertindak. Berikut anatominya dari atas ke bawah:

1. Hero SectionHeadline + sub-headline + CTA utama + visual. Kesan 3 detik pertama.Perhatian
2. Problem / AgitationMenyentuh "rasa sakit" (pain point) audiens agar merasa dimengerti.Empati
3. Solution / BenefitsProduk sebagai solusi. Fokus pada manfaat, bukan sekadar fitur.Solusi
4. Social ProofTestimoni, logo klien, rating, jumlah pengguna — membangun kepercayaan.Bukti
5. Final CTADorongan terakhir + penegasan tawaran/garansi untuk menutup keraguan.Aksi
Gambar 2.1 — Anatomi standar landing page berkonversi. Urutan ini mengikuti alur emosi pengunjung.

2.2 Copywriting vs UX Writing

✍️ Copywriting

Tujuan: menjual & membujuk.

  • Headline, sub-headline, deskripsi benefit.
  • Emosional, persuasif.
  • Cth: "Tingkatkan penjualan 200% dalam 30 hari!"
≠

🧭 UX Writing

Tujuan: memandu agar tidak bingung.

  • Teks tombol, label form, pesan error.
  • Jelas, ringkas, bermanfaat (Clear, Concise, Useful).
  • Cth: "Daftar Sekarang", "Email salah formatnya".

2.3 Tiga Kerangka Copywriting Andalan

AIDA

Attention → Interest → Desire → Action.
Cocok untuk struktur halaman secara keseluruhan.

PAS

Problem → Agitate → Solution.
Ampuh untuk bagian Problem/Solution.

FAB

Feature → Advantage → Benefit.
Mengubah fitur menjadi manfaat di bagian benefit.

💡
Rumus Headline yang manjur[Hasil yang diinginkan] + [Waktu/cara spesifik] + [Tanpa risiko/masalah].
❌ "Aplikasi pembukuan kami bagus." → ✅ "Kelola keuangan bisnis lebih rapi dalam 5 menit, tanpa perlu paham akuntansi."

2.4 Dari Fitur ke Manfaat (FAB in Action)

Feature (Fitur)Advantage (Keunggulan)Benefit (Manfaat yang dirasa)
Baterai 5000 mAhTahan lebih lamaTahan 2 hari — bebas cemas saat bepergian.
Bahan katun combed 30sAdem & menyerap keringatNyaman dipakai seharian walau cuaca panas.
Garansi 30 hari uang kembaliMengurangi risiko beliCoba dulu tanpa rugi — tidak cocok, uang balik.

2.5 Prinsip Teks Tombol (CTA)

⚠
Hindari kata generikKata seperti Submit, Kirim, atau Klik di sini tidak memberi tahu apa yang akan terjadi. Gunakan kata kerja aktif + nilai: "Coba Gratis 7 Hari", "Ambil Diskon 50%", "Pesan Sekarang".

2.6 Alat & Bahan

📄

Google Docs

Menyusun naskah.

🧩

Whimsical / Figma

Membuat wireframe.

🧭

Brief Modul 1

Rujukan persona & USP.

2.7 Tutorial Praktis

Tulis Hero Section dengan rumus headline30 mnt▶

Buka Google Docs NIM_Nama_M2_Naskah. Tulis 3 alternatif headline memakai rumus di 2.3, lalu pilih satu yang terkuat. Tambahkan sub-headline 2–3 kalimat yang memperjelas manfaat.

Template Hero
HEADLINE (pilih 1 dari 3):
1) __
2) __
3) __ ✅

SUB-HEADLINE: __ (2-3 kalimat)
CTA UTAMA   : __ (kata kerja aktif + nilai)
Susun bagian Problem → Solution (PAS)25 mnt▶

Ambil pain point dari persona Modul 1. Tulis paragraf Problem (sebutkan masalahnya), Agitate (perparah/bayangkan akibatnya), lalu Solution (kenalkan produk Anda sebagai jalan keluar).

Ubah 3 fitur menjadi manfaat (FAB)20 mnt▶

Buat tabel seperti 2.4 untuk produk Anda. Hasil kolom "Benefit" inilah yang akan ditampilkan sebagai 3 keunggulan di landing page.

Buat wireframe di Whimsical45 mnt▶
  1. Akses whimsical.com → Sign Up → New → Wireframe.
  2. Tarik elemen Window (web desktop) ke kanvas.
  3. Susun mengikuti anatomi (Gambar 2.1): Hero → Problem/Solution → Grid 3 benefit → Social Proof → Final CTA.
  4. Copy-paste naskah dari Google Docs ke wireframe.
  5. Klik Share → Get Shareable Link → Copy Link.
🛠
Penanganan MasalahLink share tidak bisa dibuka teman? Pastikan akses diset ke "Anyone with the link", bukan "Only invited".

2.8 Tugas Modul 2

📤
Yang dikumpulkanPDF (NIM_Nama_M2) berisi naskah lengkap (Hero, PAS, 3 benefit FAB, teks CTA) + tautan wireframe Whimsical di bagian bawah dokumen. Unggah ke LMS.

2.9 Evaluasi Diri

2.10 Uji Pemahaman

1.Teks "Password minimal 8 karakter" pada form pendaftaran termasuk…
Copywriting
UX writing
Headline
Tepat! Itu teks fungsional yang memandu pengguna — ranah UX writing.
Belum tepat. Teks yang memandu pengguna (label/aturan form) adalah UX writing, bukan copywriting persuasif.
2.Kerangka mana yang paling pas untuk bagian "masalah → solusi"?
FAB
PAS
SEO
Benar! PAS (Problem–Agitate–Solution) dirancang persis untuk alur ini.
Kurang tepat. PAS (Problem–Agitate–Solution) adalah kerangka untuk bagian masalah–solusi.
Modul 3 · Pertemuan 5–6

Produksi Aset Visual & Brand Identity

Tampilan membangun kredibilitas dalam sekejap. Kita rancang palet warna & tipografi, produksi aset di Canva, lalu optimasi agar web tetap ngebut.

⏱ 2 × 170 menit🎯 CPMK-3📤 Luaran: Brand Kit + Aset Terkompres
🎯 Tujuan Praktikum
  • Menentukan brand identity sederhana (palet warna & tipografi) yang sesuai produk.
  • Memahami rasio kontras agar teks terbaca semua orang.
  • Memproduksi aset (hero image, ikon) dan mengoptimasinya di bawah ambang ukuran.

3.1 Psikologi Warna

Warna memicu asosiasi emosional. Pilih warna yang selaras dengan pesan merek Anda. Pakai maksimal 3 warna: primary (dominan), secondary (aksen), dan action (khusus tombol CTA, harus mencolok).

Biru
Percaya, profesional, tenang (finansial, teknologi)
Hijau
Sehat, alami, tumbuh (organik, keuangan)
Merah
Energi, urgensi, berani (diskon, F&B)
Oranye/Kuning
Ramah, optimis, hemat (CTA, ritel)
Ungu
Mewah, kreatif, premium (beauty, edukasi)
Merah Muda
Lembut, playful, feminin (fashion, anak)
Hitam
Elegan, eksklusif (luxury, gadget)
Abu/Netral
Seimbang, modern (background, teks)
Gambar 3.1 — Asosiasi emosi warna. Konteks budaya dapat memengaruhi makna.

3.2 Kontras & Keterbacaan (WCAG)

Warna cantik percuma jika teks tak terbaca. Standar WCAG mensyaratkan rasio kontras minimal 4.5:1 (teks normal) dan 3:1 (teks besar/judul).

Teks putih di biru tua
Kontras ±8:1 ✓ Lolos
Putih di kuning
Kontras ±1.2:1 ✗ Gagal
Hitam di abu muda
Kontras ±15:1 ✓ Lolos
💡
Cek cepatGunakan WebAIM Contrast Checker atau panel "Contrast" di Coolors untuk memvalidasi pasangan warna teks & latar sebelum dipakai.

3.3 Tipografi Web

Gunakan maksimal 2 font: satu untuk heading, satu untuk body. Google Fonts seperti Inter, Poppins, Montserrat, Roboto, Open Sans, Lora sangat terbaca di layar.

Pasangan aman

  • Poppins (judul) + Inter (teks)
  • Montserrat + Open Sans
  • Lora (judul serif) + Roboto
+

Aturan ukuran

  • Body ≥ 16px agar nyaman di HP.
  • Hierarki jelas: judul jelas lebih besar dari teks.
  • Line-height 1.5–1.7 untuk paragraf.

3.4 Format & Ukuran Gambar untuk Web

Pemula sering mengunggah foto 5 MB ke web — akibatnya halaman lambat dan SEO anjlok. Pahami format yang tepat lewat alur keputusan ini:

?

Apakah gambar berupa foto nyata (banyak warna)?

→ Ya: pakai JPG atau (lebih baik) WebP.

?

Butuh latar transparan / grafis tajam?

→ Ya: pakai PNG atau WebP.

?

Ikon/logo berbasis garis & bidang?

→ Ya: pakai SVG (vektor, tajam di ukuran apa pun, ukuran file kecil).

★

Standar modern

WebP adalah format web masa kini — kompresi superior tanpa mengorbankan kualitas.

Gambar 3.2 — Pohon keputusan memilih format gambar.
<200KB
Ukuran maks. tiap gambar besar (hero)
<100KB
Ukuran maks. tiap ikon
1200×675
Dimensi hero image (rasio 16:9)
📐
Catatan dimensiUntuk gambar di samping teks (hero side-by-side) cukup 1200×675 px. Untuk background full-lebar yang memenuhi layar, boleh hingga 1920×1080 px — tetapi tetap kompres <200 KB. Pilih sesuai peran gambar di wireframe Anda.

3.5 Alat & Bahan

🎨

Coolors

Palet warna + cek kontras.

🖌

Canva

Desain hero & ikon.

🗜

Squoosh / TinyPNG

Kompresi gambar.

☁️

Google Drive

Penyimpanan aset.

3.6 Tutorial Praktis

Rumuskan brand guideline di Coolors25 mnt▶
  1. Buka coolors.co/generate, tekan Spasi berulang hingga menemukan 3–4 warna yang merepresentasikan produk.
  2. Catat kode HEX (cth: #FF5733 tombol, #FFFFFF latar, #333333 teks).
  3. Cek kontras teks vs latar (fitur Contrast Coolors). Pastikan ≥ 4.5:1.
  4. Tentukan pasangan font (cth: Poppins + Inter).
Desain Hero Image di Canva35 mnt▶
  1. Canva → Create a design → Custom Size → 1200×675 px.
  2. Pilih elemen relevan (foto orang tersenyum/mockup produk) dari tab Elements.
  3. Download sebagai JPG (atau PNG bila ada area transparan).
💡
TipsJangan tumpuk banyak teks di dalam gambar — teks utama (headline) dibuat di web builder agar tetap tajam & terbaca SEO/screen reader.
Buat 3 ikon benefit25 mnt▶

Canva → desain 500×500 px. Cari ikon di tab Elements (cth: ⚡ kecepatan, 🛡 keamanan), warnai sesuai brand, download PNG transparan. (Tanpa Canva Pro, hapus latar lewat remove.bg.)

Kompresi aset (WAJIB)20 mnt▶
  1. Buka squoosh.app, drag & drop hero image.
  2. Panel kanan: ubah format ke WebP, atur Quality hingga Estimated size < 200 KB tanpa penurunan kualitas kasat mata.
  3. Klik Download. Ulangi untuk semua gambar & ikon (< 100 KB).
🛠
Penanganan MasalahWebP tidak diterima web builder? Sebagian besar mendukungnya kini. Jika tetap gagal, ekspor ulang sebagai JPG berkualitas 70–80% — biasanya tetap < 200 KB.

3.7 Tugas Modul 3

📤
Yang dikumpulkanFolder Google Drive NIM_Nama_AsetWeb (akses: Anyone with the link can view) berisi: dokumen brand guideline (HEX + font), 1 hero image (<200 KB), 3 ikon (<100 KB), dan 1–2 gambar pendukung. Kumpulkan link ke LMS.

3.8 Evaluasi Diri

3.9 Uji Pemahaman

1.Format paling tepat untuk logo/ikon berbasis garis agar tajam di segala ukuran?
JPG
SVG
BMP
Benar! SVG berbasis vektor, tajam di ukuran apa pun & berukuran kecil.
Kurang tepat. Untuk garis/ikon vektor, SVG paling ideal.
2.Rasio kontras minimal WCAG untuk teks normal adalah…
1:1
4.5:1
100:1
Tepat! 4.5:1 untuk teks normal, 3:1 untuk teks besar.
Belum tepat. Standarnya 4.5:1 untuk teks normal.
Modul 4 · Pertemuan 7–8

Etika Konten, Hak Cipta, Lisensi & AI Tools

Konten profesional bukan hanya yang menarik, tapi juga yang legal dan jujur. Modul ini membekali Anda agar tidak terjerat masalah hak cipta dan mampu memanfaatkan AI secara bertanggung jawab.

⏱ 2 × 170 menit🎯 CPMK-4📤 Luaran: Aset Berlisensi + Log AI
🎯 Tujuan Praktikum
  • Membedakan jenis-jenis lisensi konten (hak cipta, Creative Commons, public domain).
  • Mendapatkan gambar & font yang aman dipakai secara komersial dan memberi atribusi yang benar.
  • Memanfaatkan AI (teks & gambar) untuk mempercepat kerja tanpa melanggar etika.

4.1 Mengapa Etika Konten Penting?

Mengunduh gambar dari Google lalu memasangnya di web komersial adalah pelanggaran hak cipta yang umum namun berisiko: teguran (takedown), denda, hingga tuntutan hukum. Sebagai Content Developer profesional, Anda wajib memastikan setiap aset boleh digunakan.

🚫
Mitos berbahaya"Kalau saya cantumkan sumbernya, berarti boleh dipakai." Salah. Atribusi tidak otomatis memberi izin. Anda tetap butuh lisensi yang mengizinkan penggunaan tersebut.

4.2 Spektrum Lisensi Konten

© Hak Cipta Penuh (All Rights Reserved)Tidak boleh dipakai tanpa izin/membeli lisensi. Default semua karya.Hindari
CC BY / CC BY-SABoleh dipakai & komersial, WAJIB mencantumkan atribusi pembuat.Beri kredit
CC0 / Public DomainBebas dipakai untuk apa pun, tanpa atribusi. Paling aman.Bebas
Royalty-Free / Berbayar (lisensi dibeli)Bayar sekali, pakai sesuai ketentuan lisensi (cth: stok premium).Berlisensi
Gambar 4.1 — Spektrum lisensi dari paling ketat (atas) ke paling bebas.
⚠
Perhatikan klausulNC (Non-Commercial) = tidak boleh untuk komersial. ND (No-Derivatives) = tidak boleh diubah. Untuk proyek landing page (komersial), hindari aset ber-NC.

4.3 Sumber Aset Aman & Gratis

🖼

Foto

Unsplash, Pexels, Pixabay — gratis & komersial. Cek lisensi tiap foto.

🔤

Font

Google Fonts (open source, aman komersial).

⭐

Ikon

Lucide, Heroicons, Flaticon (cek atribusi), Font Awesome Free.

4.4 Cara Memberi Atribusi yang Benar

Untuk aset yang mensyaratkan kredit, format umum "TASL": Title, Author, Source, License.

Format atribusi (TASL)
Foto "Sunrise Coffee" oleh Jane Doe
via Unsplash, Lisensi Unsplash.
(tautan: unsplash.com/photos/xxxx)

4.5 Memanfaatkan AI Secara Bertanggung Jawab

AI adalah asisten, bukan pengganti penilaian Anda. AI bisa mempercepat brainstorming headline, variasi copy, alt text, atau membuat gambar ilustrasi. Tapi hasilnya wajib diverifikasi, disunting, dan diberi sentuhan manusia.

✅ Pemanfaatan etis

  • Brainstorm 10 alternatif headline lalu pilih & poles.
  • Membuat draf alt text, lalu diperiksa akurasinya.
  • Membuat ilustrasi/ikon dengan AI image generator berlisensi.
  • Mengecek tata bahasa & ringkasan.
VS

❌ Penyalahgunaan

  • Copy-paste mentah tanpa verifikasi fakta.
  • Mengklaim testimoni/angka palsu buatan AI.
  • Meniru gaya/karya berhak cipta milik orang lain.
  • Membuat klaim menyesatkan tentang produk.
💡
Anatomi prompt yang baikPeran + Konteks + Tugas + Batasan + Format.
Cth: "Bertindak sebagai copywriter. Produk: sepatu lari lokal untuk pemula. Buat 5 headline benefit-driven, maks 12 kata, gaya santai, dalam bahasa Indonesia."
⚖️
Transparansi & akurasiAI dapat "berhalusinasi" (mengarang fakta). Jangan pernah memuat statistik/klaim dari AI tanpa sumber valid. Untuk tugas, dokumentasikan bagian mana yang dibantu AI (AI usage log).

4.6 Tutorial Praktis

Audit ulang aset Modul 320 mnt▶

Periksa setiap gambar/ikon/font dari Modul 3. Untuk masing-masing, catat: sumber, jenis lisensi, dan apakah butuh atribusi. Ganti aset yang lisensinya tidak jelas/komersial dilarang dengan alternatif dari sumber aman (4.3).

Buat tabel lisensi & atribusi25 mnt▶
AsetSumberLisensiAtribusi?
hero.webpUnsplashUnsplash LicenseOpsional
icon-speed.svgLucideISC (bebas)Tidak
font PoppinsGoogle FontsOFLTidak
Eksperimen AI untuk copy & alt text30 mnt▶

Gunakan AI untuk menghasilkan 5 alternatif headline & draf alt text gambar. Pilih, sunting, dan poles. Catat prompt yang Anda pakai dan perubahan yang Anda lakukan di AI Usage Log.

AI Usage Log
Tugas dibantu : Headline / Alt text / Ilustrasi
Tool          : __
Prompt        : __
Output mentah : __
Editan saya   : __ (apa yang diubah & alasan)

4.7 Tugas Modul 4

📤
Yang dikumpulkanPDF berisi (1) tabel lisensi & atribusi seluruh aset, dan (2) AI Usage Log. Aset yang melanggar harus sudah diganti. Unggah ke LMS.

4.8 Evaluasi Diri

4.9 Uji Pemahaman

1.Lisensi mana yang paling bebas (boleh dipakai tanpa atribusi, termasuk komersial)?
CC BY-NC
CC0 / Public Domain
All Rights Reserved
Benar! CC0/Public Domain bebas untuk apa pun tanpa kewajiban atribusi.
Kurang tepat. CC0/Public Domain adalah yang paling bebas; CC BY-NC melarang komersial.
2.Sikap yang benar terhadap output teks dari AI adalah…
Menyalin mentah karena pasti akurat
Memverifikasi fakta lalu menyunting & mempolesnya
Menambahkan statistik karangan AI agar meyakinkan
Tepat! AI itu asisten — output wajib diverifikasi & disunting manusia.
Belum tepat. Output AI bisa salah/berhalusinasi; selalu verifikasi & sunting.
Modul 5 · Pertemuan 9–10

Integrasi Konten (Web Builder)

Saatnya merakit. Semua naskah & aset kita susun menjadi halaman web nyata menggunakan WordPress + Elementor dengan pendekatan no-code (drag-and-drop).

⏱ 2 × 170 menit🎯 CPMK-5📤 Luaran: Landing Page (draf live)
🎯 Tujuan Praktikum
  • Memahami arsitektur dasar CMS WordPress.
  • Menggunakan Elementor untuk menerjemahkan wireframe menjadi halaman visual.
  • Menata teks & gambar sesuai prinsip hierarki visual.

5.1 Konsep No-Code & Web Builder

Tidak semua Content Developer harus menguasai HTML/CSS mendalam. Pendekatan no-code memungkinkan kita membangun web fungsional lewat antarmuka visual drag-and-drop. Elementor adalah plugin page builder WordPress terpopuler di dunia.

5.2 Anatomi Elementor: Section → Column → Widget

SECTION (Bagian) — wadah terbesar, selebar layar COLUMN 1 COLUMN 2 Widget: Heading Widget: Text Editor Widget: Button (CTA) Widget: Image
Gambar 5.1 — Hierarki Elementor. Satu landing page = beberapa Section bertumpuk.

5.3 Alat & Bahan + Pilihan Platform

Praktikum butuh instalasi WordPress. Ada dua jalur — pilih sesuai kondisi lab Anda:

⏳
Penting soal TasteWPInstans gratis TasteWP hanya hidup ±2 hari lalu terhapus. Cocok untuk demo cepat di kelas, tetapi berisiko untuk proyek yang dikerjakan berhari-hari. Untuk proyek akhir, gunakan LocalWP (jalur utama yang direkomendasikan) agar pekerjaan Anda aman.

🟢 Jalur Utama: LocalWP (offline, permanen)

  • Aplikasi gratis (Windows/Mac/Linux) dari localwp.com.
  • WordPress berjalan di komputer Anda — tidak hilang.
  • Cocok dikerjakan berhari-hari tanpa internet.
  • Alternatif setara: XAMPP (lebih manual).
atau

🟡 Jalur Cepat: TasteWP (online, sementara)

  • Tanpa instalasi, jadi dalam hitungan detik.
  • Baik untuk latihan/demo singkat di kelas.
  • ⚠ Hidup ±2 hari → backup berkala.
  • Perpanjang/registrasi untuk umur lebih panjang.
💾
Strategi anti-kehilangan kerjaApa pun platformnya, pasang plugin "All-in-One WP Migration" lalu ekspor file backup berkala ke Google Drive. Jika instans hilang, Anda tinggal impor kembali.

5.4 Tutorial Praktis

Siapkan WordPress & pasang Elementor30 mnt▶

Jalur LocalWP: Unduh & pasang LocalWP → Create a new site → ikuti wizard → klik WP Admin.
Jalur TasteWP: buka tastewp.com → "Set it up!" → "Access it now!".

Setelah masuk Dashboard (wp-admin):

  1. Menu kiri → Plugins → Add New.
  2. Cari "Elementor", klik Install Now → Activate.
🛠
Penanganan MasalahEditor Elementor lambat/blank? Pakai Chrome terbaru, nonaktifkan ekstensi pemblokir, dan pastikan RAM cukup. Di LocalWP, naikkan PHP memory limit bila perlu.
Buat halaman kosong (Canvas)15 mnt▶
  1. Pages → Add New, beri judul "[Produk] Landing Page".
  2. Panel kanan → Template → Elementor Canvas (menghilangkan header/footer bawaan agar layar bersih).
  3. Klik Publish, lalu Edit with Elementor.
Bangun Hero Section (2 kolom)40 mnt▶

Klik ikon [+] → pilih struktur 2 kolom.

  • Kolom kiri (teks): seret widget Heading (paste headline Modul 2), Text Editor (sub-headline), Button (teks CTA + warnai sesuai brand Modul 3).
  • Kolom kanan (gambar): seret widget Image → Upload → unggah hero image (WebP/JPG) dari Drive.
Bangun Benefit Section (3 kolom)35 mnt▶
  1. Section baru → struktur 1 kolom, tambahkan Heading "Mengapa Memilih Kami?".
  2. Seret Inner Section, ubah jadi 3 kolom.
  3. Di tiap kolom: Icon Box / Image Box → masukkan 3 ikon (Modul 3) + judul benefit + deskripsi.
  4. Klik Update (tombol hijau) setiap selesai perubahan penting.

5.5 Tugas Modul 5

📤
Yang dikumpulkanLanjutkan membangun hingga Final CTA sesuai wireframe. Terapkan font & warna brand (tab Style). Kumpulkan URL halaman + screenshot full-page + file backup (.wpress) ke LMS.

5.6 Evaluasi Diri

5.7 Uji Pemahaman

1.Urutan hierarki Elementor dari terbesar ke terkecil adalah…
Section → Column → Widget
Widget → Section → Column
Column → Widget → Section
Benar! Section memuat Column, Column memuat Widget.
Kurang tepat. Urutannya Section → Column → Widget.
2.Untuk proyek yang dikerjakan seminggu, platform paling aman dari risiko kehilangan data adalah…
TasteWP tanpa backup
LocalWP (atau TasteWP + backup rutin)
Mengetik langsung di Notepad
Tepat! LocalWP permanen di komputer Anda; jika pakai TasteWP, wajib backup.
Belum tepat. TasteWP hidup ±2 hari; gunakan LocalWP atau backup rutin.
Modul 6 · Pertemuan 11–12

Accessibility & Desain Inklusif

Konten terbaik adalah yang bisa dinikmati semua orang — termasuk penyandang disabilitas. Aksesibilitas bukan sekadar kewajiban etis, tapi juga memperluas jangkauan & menguatkan SEO.

⏱ 2 × 170 menit🎯 CPMK-6📤 Luaran: Laporan Audit A11y
🎯 Tujuan Praktikum
  • Menjelaskan empat prinsip WCAG (POUR) dan relevansinya bagi landing page.
  • Menerapkan alt text, kontras, struktur heading, & target sentuh yang inklusif.
  • Mengaudit halaman dengan alat otomatis & uji keyboard.

6.1 Mengapa Aksesibilitas?

~15%
populasi dunia hidup dengan disabilitas
SEO
praktik a11y memperkuat peringkat pencarian
UX
desain inklusif lebih nyaman untuk semua

Web yang aksesibel membantu pengguna tunanetra (pembaca layar), tuna-motorik (navigasi keyboard), buta warna (kontras), hingga orang dengan koneksi/perangkat terbatas. WCAG adalah standar acuannya.

6.2 Empat Prinsip WCAG: POUR

👁 Perceivable (Dapat Dipersepsi)

Informasi harus bisa ditangkap indra: alt text untuk gambar, kontras cukup, teks bisa diperbesar.

🖐 Operable (Dapat Dioperasikan)

Semua fungsi bisa diakses keyboard; tombol cukup besar untuk jempol; tak ada jebakan fokus.

🧠 Understandable (Dapat Dipahami)

Bahasa jelas, navigasi konsisten, pesan error membantu (bukan "Error 401").

🛡 Robust (Tangguh)

Kode valid agar bisa dibaca beragam teknologi bantu (assistive technology).

Gambar 6.1 — Empat pilar WCAG: Perceivable, Operable, Understandable, Robust.

6.3 Checklist Aksesibilitas untuk Landing Page

AspekYang harus dilakukanPrinsip
GambarSemua gambar bermakna punya alt text deskriptif; gambar dekoratif diberi alt kosong.Perceivable
KontrasTeks vs latar ≥ 4.5:1 (lihat Modul 3).Perceivable
HeadingStruktur runtut: satu H1, lalu H2/H3 berurutan (tak melompat).Understandable
Tautan/TombolTeks jelas ("Beli Sekarang"), bukan "klik di sini". Target ≥ 44×44 px.Operable
KeyboardSemua tombol/link bisa dijangkau & ditekan dengan Tab + Enter.Operable
FormSetiap input punya label; pesan error jelas & menunjukkan cara perbaiki.Understandable
WarnaJangan mengandalkan warna saja untuk menyampaikan makna (mis. wajib + ikon/teks).Perceivable

6.4 Menulis Alt Text yang Baik

❌ Buruk

  • (kosong padahal bermakna)
  • "IMG_2043.jpg"
  • "gambar"
  • "foto sepatu sepatu sepatu lari murah" (keyword stuffing)
VS

✅ Baik

  • "Sepatu lari Aerostreet merah dipakai pelari di trek pagi hari."
  • Deskriptif, ringkas, natural, memuat konteks.

6.5 Tutorial Praktis

Audit otomatis dengan Lighthouse (Accessibility)20 mnt▶

Buka landing page Anda di Chrome → klik kanan → Inspect → tab Lighthouse → centang Accessibility → Analyze. Catat skor & daftar masalah yang ditemukan.

💡
Alat tambahanEkstensi axe DevTools atau WAVE memberi detail masalah a11y yang lebih spesifik beserta cara perbaikannya.
Uji navigasi keyboard15 mnt▶

Tanpa menyentuh mouse, tekan Tab berulang. Pastikan: setiap link/tombol tersorot jelas (focus ring), urutannya logis, dan tombol CTA bisa diaktifkan dengan Enter.

Perbaiki temuan & lengkapi alt text35 mnt▶

Di WordPress → Media → Library, isi Alternative Text tiap gambar bermakna (lihat 6.4). Perbaiki kontras & struktur heading di Elementor. Ulangi audit hingga skor Accessibility ≥ 90.

6.6 Tugas Modul 6

📤
Yang dikumpulkanLaporan audit aksesibilitas: skor Lighthouse sebelum & sesudah perbaikan, daftar masalah yang diperbaiki, dan bukti hasil uji keyboard. Unggah ke LMS.

6.7 Evaluasi Diri

6.8 Uji Pemahaman

1.Singkatan POUR pada WCAG adalah…
Perceivable, Operable, Understandable, Robust
Popular, Online, Useful, Responsive
Performance, Optimization, UX, Ranking
Benar! Empat prinsip inti WCAG.
Kurang tepat. POUR = Perceivable, Operable, Understandable, Robust.
2.Alt text yang baik untuk gambar produk sebaiknya…
Dikosongkan saja
Diisi nama file seperti "IMG_2043.jpg"
Deskriptif, ringkas, & natural sesuai isi gambar
Tepat! Deskripsi natural membantu pembaca layar & SEO.
Belum tepat. Alt text harus deskriptif & natural, bukan kosong/nama file.
Modul 7 · Pertemuan 13–14

SEO On-Page & Performa Web

Konten sebagus apa pun tak berguna bila tak ditemukan. Kita optimasi halaman agar disukai mesin pencari sekaligus ngebut diakses pengguna.

⏱ 2 × 170 menit🎯 CPMK-7📤 Luaran: Halaman teroptimasi + Skor
🎯 Tujuan Praktikum
  • Melakukan riset kata kunci sederhana & memahami search intent.
  • Menerapkan SEO on-page: meta title, meta description, heading, alt text.
  • Mengukur & memperbaiki performa via Core Web Vitals & Lighthouse.

7.1 Cara Kerja Mesin Pencari (Singkat)

1

Crawling

Robot Google menjelajah & menemukan halaman lewat tautan.

2

Indexing

Halaman disimpan & dipahami isinya (judul, heading, konten, gambar).

3

Ranking

Saat ada pencarian, Google mengurutkan halaman paling relevan & berkualitas.

Gambar 7.1 — Tiga tahap mesin pencari. SEO on-page memengaruhi tahap Indexing & Ranking.

7.2 Riset Kata Kunci & Search Intent

Pilih satu kata kunci utama (focus keyphrase) yang sesuai produk & cara audiens mencari. Pahami intent-nya agar konten cocok:

Jenis IntentContoh QueryCocok untuk
Informasional"cara memilih sepatu lari"Artikel/blog (TOFU)
Komersial"sepatu lari terbaik 2026"Perbandingan (MOFU)
Transaksional"beli sepatu lari aerostreet"Landing page (BOFU)
Navigasional"aerostreet official store"Homepage/brand
💡
Riset gratisManfaatkan Google Autocomplete, bagian "Orang juga bertanya", & "Penelusuran terkait" di bawah hasil pencarian untuk menemukan kata kunci nyata yang dicari orang.

7.3 Elemen SEO On-Page

www.tokoanda.com › sepatu-lari
Sepatu Lari Pria Aerostreet — Diskon 50% Hari Ini!
Ringan, empuk, & tahan lama untuk pelari pemula. Garansi 30 hari. Pesan sekarang & rasakan bedanya di lari pagi pertamamu. ★★★★★
Gambar 7.2 — Tampilan hasil pencarian (SERP). Biru = Meta Title, abu = Meta Description.

Meta Title

Judul biru di hasil Google. Maks ±60 karakter, mengandung kata kunci utama di awal.

Meta Description

Deskripsi pemancing klik. Maks ±160 karakter, persuasif + kata kunci.

Heading (H1–H3)

Satu H1 berisi kata kunci; subjudul terstruktur membantu Google memahami isi.

Alt Text & URL

Alt deskriptif (Modul 6) & URL pendek bermakna (cth: /sepatu-lari).

7.4 Performa: Core Web Vitals

Google menilai pengalaman pengguna lewat tiga metrik inti. Halaman cepat = peringkat & konversi lebih baik.

LCP — Largest Contentful Paint (kecepatan muat elemen terbesar)Baik ≤ 2.5s
CLS — Cumulative Layout Shift (kestabilan tata letak)Baik ≤ 0.1
INP — Interaction to Next Paint (respons saat diklik)Baik ≤ 200ms
Gambar 7.3 — Ambang "Baik" Core Web Vitals. Gambar terkompres (Modul 3) sangat membantu LCP.
⚠
Penyebab umum skor jelekGambar tidak dikompres (LCP buruk), gambar/iklan tanpa dimensi tetap (CLS buruk), terlalu banyak plugin/script (INP buruk). Optimasi di Modul 3 sudah mencegah sebagian besar ini.

7.5 Tutorial Praktis

Riset & tetapkan focus keyphrase20 mnt▶

Gunakan Google Autocomplete & "Penelusuran terkait" untuk menemukan kata kunci transaksional yang relevan. Pilih satu sebagai focus keyphrase.

Pasang Yoast SEO & isi meta data30 mnt▶
  1. WordPress → Plugins → Add New → cari "Yoast SEO" → Install → Activate.
  2. Edit halaman (mode standar/Block Editor) → scroll ke kotak Yoast.
  3. Isi Focus keyphrase, SEO title (catchy + kata kunci), Meta description (≤160 kar, persuasif). Kejar indikator Hijau.
  4. Update.
🛠
Penanganan MasalahIndikator Yoast tetap merah? Pastikan kata kunci muncul di: judul SEO, meta description, H1, dan paling tidak satu kali di paragraf awal.
Lengkapi alt text & struktur heading20 mnt▶

Pastikan alt text (Modul 6) memuat konteks kata kunci secara natural, dan hanya ada satu H1 (headline hero).

Uji performa dengan Lighthouse25 mnt▶
  1. Buka URL di tab baru (sebagai pengunjung, bukan editor).
  2. Klik kanan → Inspect → tab Lighthouse.
  3. Centang Performance, Accessibility, Best Practices, SEO; pilih Mobile/Desktop.
  4. Klik Analyze page load. Tunggu 15–30 detik, baca skor & saran perbaikan.

7.6 Tugas Modul 7

📤
Yang dikumpulkanScreenshot hasil Lighthouse (4 skor), bukti meta data terisi (Yoast hijau), dan catatan perbaikan yang dilakukan. Unggah ke LMS.

7.7 Evaluasi Diri

7.8 Uji Pemahaman

1.Metrik Core Web Vitals yang mengukur kecepatan muat elemen terbesar adalah…
LCP
CLS
SEO
Benar! LCP = Largest Contentful Paint (ideal ≤ 2.5 detik).
Kurang tepat. LCP mengukur kecepatan muat elemen terbesar; CLS mengukur kestabilan tata letak.
2.Untuk landing page penjualan, search intent yang paling pas dibidik adalah…
Informasional
Transaksional
Navigasional
Tepat! Intent transaksional = audiens siap membeli.
Belum tepat. Landing page penjualan membidik intent transaksional.
Modul 8 · Pertemuan 15–16

Analytics, Konversi & Launching

Peluncuran bukan akhir, tapi awal. Modul penutup ini mengajarkan cara meluncurkan, mengukur perilaku pengunjung, dan memperbaiki halaman berbasis data — keterampilan pembeda Content Developer profesional.

⏱ 2 × 170 menit🎯 CPMK-8📤 Luaran: Landing Page Final + Laporan
🎯 Tujuan Praktikum
  • Memastikan responsivitas mobile & meluncurkan landing page ke publik.
  • Memahami metrik kunci konversi & cara membacanya.
  • Merumuskan rekomendasi perbaikan berbasis data (termasuk konsep A/B testing).

8.1 Finalisasi: Responsivitas Mobile

Lebih dari 70% kunjungan web berasal dari ponsel — prinsip Mobile-First wajib. Periksa & rapikan tampilan HP di Elementor.

Rapikan tampilan mobile di Elementor30 mnt▶
  1. Edit with Elementor → klik ikon Responsive Mode → pilih Mobile.
  2. Kecilkan ukuran font heading khusus mobile (ada ikon HP di samping pengaturan ukuran).
  3. Jika urutan elemen terbalik, buka Section → Advanced → Responsive → Reverse Columns (Mobile).
  4. Pastikan tombol CTA mudah ditekan jempol & tak ada elemen terpotong. Update.

8.2 Launching ke Publik

🚀
Dari lokal ke liveHalaman di LocalWP bersifat offline (hanya di komputer Anda). Untuk membuatnya benar-benar live, pilih salah satu: gunakan instans online (TasteWP/hosting gratis), atau migrasikan via plugin All-in-One WP Migration ke hosting. Untuk keperluan penilaian, sepakati dengan dosen apakah URL TasteWP/staging sudah memadai.

8.3 Metrik Konversi yang Wajib Dipahami

📈 Conversion Rate

% pengunjung yang melakukan aksi tujuan (klik CTA/isi form). Metrik utama landing page.

👀 Sessions / Users

Jumlah kunjungan & pengunjung unik — ukuran trafik.

⏱ Engagement / Bounce

Seberapa lama & dalam interaksi; bounce tinggi = halaman kurang relevan.

🖱 CTR Tombol

% klik pada CTA — mengukur daya tarik ajakan bertindak.

Contoh perhitungan
1.000 pengunjung → 50 klik "Beli"
Conversion Rate = (50 ÷ 1.000) × 100% = 5%
Gambar 8.1 — Cara menghitung conversion rate.

8.4 Tools Analitik

📊

Google Analytics 4

Trafik, sumber pengunjung, event & konversi.

🗺

Heatmap (Microsoft Clarity)

Gratis. Lihat di mana orang klik & sejauh mana scroll.

🔎

Search Console

Performa di pencarian Google (kata kunci, klik, posisi).

8.5 Perbaikan Berbasis Data & A/B Testing

Keputusan desain sebaiknya dipandu data, bukan selera. A/B testing menguji satu perubahan (mis. warna/teks CTA) pada dua versi untuk melihat mana yang menang.

Versi A

Tombol: Kirim

Konversi 3%

VS

Versi B

Tombol: Coba Gratis 7 Hari

Konversi 5% ✓ Menang

Gambar 8.2 — Konsep A/B testing: uji satu variabel, ukur dampaknya pada konversi.
💡
Aturan emas A/B testUbah satu variabel per percobaan. Kalau Anda ganti headline + warna + gambar sekaligus, Anda tak tahu mana yang berpengaruh.

8.6 Tutorial Praktis

Pasang analytics & heatmap30 mnt▶

Pasang Microsoft Clarity (gratis, mudah) atau GA4 lewat plugin di WordPress. Biarkan merekam beberapa kunjungan (mintalah 5 teman membuka halaman Anda).

Baca data & rumuskan 3 rekomendasi35 mnt▶

Dari heatmap/analytics, identifikasi: sampai mana orang scroll? Bagian mana diabaikan? Apakah CTA diklik? Tulis 3 rekomendasi perbaikan beserta alasan berbasis data.

Template rekomendasi
Temuan   : (cth: 70% pengunjung tidak scroll sampai Final CTA)
Hipotesis: (cth: halaman terlalu panjang / hero kurang menarik)
Aksi     : (cth: pindahkan CTA lebih ke atas)
Ukuran   : (metrik yang akan dipantau setelah perubahan)
Finalisasi & rekam demo25 mnt▶

Pastikan halaman responsif & lolos checklist seluruh modul. Rekam layar singkat (≤1 menit) menampilkan tampilan mobile di-scroll atas→bawah.

8.7 Tugas Akhir (Proyek)

🏁
Yang dikumpulkanDalam satu assignment akhir: (1) URL landing page final, (2) screenshot skor Lighthouse (4 kategori), (3) screenshot heatmap/analytics, (4) laporan 3 rekomendasi berbasis data, (5) video demo mobile (≤1 menit). Unggah ke LMS.

8.8 Evaluasi Diri (Final)

8.9 Uji Pemahaman

1.Dari 2.000 pengunjung, 120 mengisi form. Conversion rate-nya?
12%
6%
60%
Benar! (120 ÷ 2.000) × 100% = 6%.
Kurang tepat. (120 ÷ 2.000) × 100% = 6%.
2.Prinsip paling penting saat menjalankan A/B testing adalah…
Mengubah satu variabel per percobaan
Mengubah sebanyak mungkin elemen sekaligus
Memilih versi favorit tanpa data
Tepat! Satu variabel agar dampaknya terukur jelas.
Belum tepat. Ubah satu variabel saja agar tahu mana yang berpengaruh.
Penutup

Rubrik Penilaian & Kalkulator Nilai

Panduan evaluasi proyek akhir (landing page) sekaligus kalkulator interaktif untuk menyimulasikan skor Anda.

Kalkulator Nilai Interaktif

Geser tiap kriteria sesuai estimasi pencapaian Anda. Nilai akhir terhitung otomatis sesuai bobot.

1. Perencanaan & UX Writing (20%)
80
2. Kualitas Aset Visual & Etika Lisensi (20%)
80
3. Integrasi & Layout (Elementor) (30%)
80
4. Responsivitas, Accessibility & SEO (30%)
80
Nilai Akhir 80

Detail Rubrik

KriteriaBobotSangat Baik (85–100)Cukup (70–84)Kurang (<70)
1. Perencanaan & UX Writing20%Persona & USP tajam; headline benefit-driven; fitur diubah jadi manfaat; CTA kata kerja aktif.Teks ada, masih fokus fitur; CTA generik ("Kirim").Tanpa persona/strategi; copy lemah & membingungkan.
2. Aset Visual & Etika20%Desain profesional, warna konsisten & kontras lolos, gambar <200KB, semua aset berlisensi jelas.Warna/kontras kurang; ada gambar >500KB; lisensi sebagian belum jelas.Berantakan; aset melanggar hak cipta.
3. Integrasi & Layout30%Struktur lengkap Hero→Final CTA; layout rapi, tanpa overlap; brand konsisten.Struktur cukup; spacing tidak proporsional.Tidak selesai; layout pecah.
4. Responsif, A11y & SEO30%Mobile sempurna; a11y ≥90; meta data terisi; Lighthouse SEO/BP >85.Mobile agak berantakan; meta/alt sebagian kosong; skor 70–84.Tidak responsif; meta kosong; skor <70.
Penutup

Glosarium

Kumpulan istilah penting dalam modul ini.

IstilahDefinisi
A/B TestingMembandingkan dua versi halaman (A & B) yang berbeda satu variabel untuk melihat mana yang berkonversi lebih baik.
AIDAKerangka copywriting: Attention, Interest, Desire, Action.
Alt TextTeks deskriptif pada gambar; membantu mesin pencari & pembaca layar bagi tunanetra.
BOFU/MOFU/TOFUTahapan funnel pemasaran: Bottom/Middle/Top of Funnel — dari awareness hingga keputusan beli.
Bounce RatePersentase pengunjung yang pergi tanpa berinteraksi lebih jauh.
Core Web VitalsTiga metrik performa inti Google: LCP, CLS, INP.
CMSContent Management System — perangkat lunak pengelola konten web (cth: WordPress).
Conversion RatePersentase pengunjung yang melakukan aksi tujuan (klik CTA/isi form).
CopywritingPenulisan teks pemasaran yang persuasif untuk mendorong tindakan.
CTA (Call-to-Action)Elemen yang mendorong pengunjung melakukan tindakan langsung.
Creative CommonsSistem lisensi yang mengatur cara karya boleh dipakai/diubah/dikomersialkan.
FABFeature–Advantage–Benefit: kerangka mengubah fitur menjadi manfaat.
Hero SectionBagian teratas landing page; kesan pertama berisi headline + CTA.
Mobile-FirstMerancang/mengoptimasi tampilan untuk layar kecil lebih dulu.
No-CodeMembangun web fungsional via antarmuka visual tanpa menulis kode.
PASProblem–Agitate–Solution: kerangka copywriting untuk bagian masalah-solusi.
PersonaRepresentasi semi-fiktif pelanggan ideal berbasis data riset.
SEOSearch Engine Optimization — praktik meningkatkan visibilitas di mesin pencari.
Search IntentMaksud di balik pencarian: informasional, komersial, transaksional, navigasional.
USPUnique Selling Proposition — keunggulan unik pembeda dari pesaing.
UX WritingPenulisan teks antarmuka yang memandu pengguna (jelas, ringkas, bermanfaat).
WCAGWeb Content Accessibility Guidelines — standar aksesibilitas web (prinsip POUR).
WebPFormat gambar modern Google dengan kompresi superior tanpa kehilangan kualitas berarti.
WireframeSketsa kerangka tata letak halaman sebelum desain visual final.
Penutup

Daftar Pustaka & Sumber Belajar

Rujukan untuk memperdalam materi di luar modul ini.

Buku & Referensi Akademik

  • Bly, R. W. (2020). The Copywriter's Handbook: A Step-by-Step Guide to Writing Copy That Sells (4th ed.). Holt Paperbacks.
  • Podmajersky, T. (2019). Strategic Writing for UX: Drive Engagement, Conversion, and Retention with Every Word. O'Reilly Media.
  • Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. New Riders.
  • Handley, A. (2022). Everybody Writes: Your Go-To Guide to Creating Ridiculously Good Content (2nd ed.). Wiley.

Sumber Daring (Online)

  • Google Developers. Web Vitals: Essential metrics for a healthy site. web.dev/vitals/
  • W3C. Web Content Accessibility Guidelines (WCAG) Overview. w3.org/WAI/standards-guidelines/wcag/
  • Elementor Academy. Web Design & WordPress Tutorials. elementor.com/academy/
  • Google. Search Engine Optimization (SEO) Starter Guide. developers.google.com/search/docs
  • Nielsen Norman Group. UX & Usability Articles. nngroup.com/articles/
  • Squoosh by Google. Image Compression Application. squoosh.app/
🎓
Selamat!Anda telah menuntaskan seluruh modul. Kini Anda memiliki kerangka kerja lengkap seorang Content Developer: dari strategi, produksi, etika, hingga pengukuran. Teruslah berlatih dengan proyek nyata untuk membangun portofolio Anda.