Version 3.0 — Strategi Matang

Web Dev Playbook

Bukan tutorial. Bukan teori. Ini GPS untuk bikin website dari nol sampai live — dalam 8 format yang saling melengkapi.

8
Format Terstruktur
150+
Tools Terkurasi
29
UX Laws
5
Riset Sumber
Format 1 — Mental Model

Prinsip Dasar

Cara berpikir yang benar SEBELUM bikin apapun. Bukan cara kerja, tapi cara melihat masalah.

Aturan 3 Detik

Visitor harus paham dalam 3 detik pertama. Jika tidak, mereka pergi. Tidak ada second chance.

1
Apa ini? — Headline harus langsung menjelaskan produk/layanan tanpa visitor berpikir. Bukan tagline kreatif yang ambiguous.
2
Untuk apa? — Manfaat, bukan fitur. "Hemat 4 jam sehari" bukan "Dashboard real-time dengan analytics".
3
Harus apa? — CTA jelas. 1 tombol utama. Action verb. Kontras warna. Tidak ada ambiguity.
!
Diagnosa:
Tidak paham dalam 3 detik → redesign headline + CTA
Paham tapi tidak tertarik → redesign value proposition
Tertarik tapi bingung → fix information architecture
Fitts's Law
Target besar + dekat = mudah diklik. CTA button min 48px height. Jangan taruh tombol di pojok kecil.
Hick's Law
Banyak pilihan = lama memutuskan. Max 5 nav items. Max 3 pricing tiers. Max 3-5 features di hero.
Miller's Law
Orang ingat 7±2 item. Chunk content. Group fitur jadi 3-5 kategori, bukan 15 list.
Jakob's Law
User suka familiar patterns. Nav di atas. Logo di kiri. CTA di kanan. Jangan reinvent convention.
Von Restorff Effect
Yang beda = diingat. CTA HARUS visually distinct dari elemen lain. Warna, ukuran, atau spacing beda.
Doherty Threshold
Response < 400ms = user engaged. Optimasi load time. Skeleton loader kalau data lambat.
Format 2 — Anatomy

Struktur Halaman

Label setiap bagian. Apa yang harus ada, di mana, dan kenapa. Ini blueprint — bukan template.

landing-page-structure.anatomy
┌──────────────────────────────────────────────────────────┐ │ NAVBAR │ ← Fixed, max 5 item │ Logo(kiri) ──── Nav Links(tengah) ──── CTA(kanan) │ Logo link ke home │ ════════════════════════════════════════════════════════ │ Mobile: hamburger menu │ │ │ HERO SECTION │ ← Max 10 kata headline │ ┌────────────────────────────────────────────────────┐ │ 1 kalimat subheadline │ │ Headline besar (Sora, clamp 2.4-3.8rem) │ │ 1 tombol CTA utama │ │ Subheadline 1 baris (Inter, text-muted) │ │ Social proof di bawah │ │ [CTA Button — bg:accent, h-12] │ │ Max 800px width │ │ "Dipercaya 500+ klien" atau logo bar │ │ │ └────────────────────────────────────────────────────┘ │ │ ════════════════════════════════════════════════════════ │ │ │ │ SOCIAL PROOF BAR │ ← Logo client / angka │ [Logo] [Logo] [Logo] [Logo] [Logo] │ Grayscale, hover: color │ ════════════════════════════════════════════════════════ │ Atau: angka besar + label │ │ │ PROBLEM / PAIN POINT │ ← Opsional tapi powerful │ "Kamu menghabiskan 4 jam/hari untuk..." │ Mirror kata-kata user │ ════════════════════════════════════════════════════════ │ dari discovery session │ │ │ FEATURES (3-5 kolom) │ ← Max 5, icon + judul │ ┌──┐ ┌──┐ ┌──┐ │ + 1 kalimat penjelas │ │ │ │ │ │ │ │ Icon: Lucide / Heroicons │ └──┘ └──┘ └──┘ │ Bukan fitur dump │ ════════════════════════════════════════════════════════ │ │ │ │ HOW IT WORKS / STEPS │ ← 3 step max │ ① ___________ ② ___________ ③ ___________ │ "Daftar → Setup → Selesai" │ ════════════════════════════════════════════════════════ │ │ │ │ TESTIMONIALS / SOCIAL PROOF │ ← Quote + nama + posisi │ ┌─────────────────────────────┐ │ + foto (kalau ada) │ │ "Quote dari client" │ │ Star rating optional │ │ — Nama, Posisi, Company │ │ │ └─────────────────────────────┘ │ │ ════════════════════════════════════════════════════════ │ │ │ │ PRICING (kalau applicable) │ ← 3 tier: basic/pro/enterprise │ ┌──────┐ ┌──────┐ ┌──────┐ │ Highlight recommended │ │ Basic│ │ PRO★ │ │ Ent. │ │ "Most Popular" badge │ └──────┘ └──────┘ └──────┘ │ │ ════════════════════════════════════════════════════════ │ │ │ │ CTA AKHIR (Final Push) │ ← Repeat CTA utama │ Headline + CTA button + urgency element │ Sama persis dengan hero │ ════════════════════════════════════════════════════════ │ Tambah urgency/offer │ │ │ FOOTER │ ← 4 kolom max │ Logo + Links + Contact + Legal │ Copyright, social links │ "Made with ❤️" ← JANGAN │ Dark background └──────────────────────────────────────────────────────────┘
Primary CTA
Content section
Section divider
Key constraint
Format 3 — Recipe

Resep: Landing Page

Step-by-step, berurutan. Mulai dari mana, lalu apa. Setiap step punya output yang bisa dicek.

⏱ 2-4 jam 📊 Intermediate 🛠 Next.js + Tailwind + shadcn
①

Brand Discovery 30 menit

Isi 15 pertanyaan quick discovery. Tentukan 2 archetype (primary + secondary). Pilih Aaker dimension. Isi Brand Attribute Matrix — ini SATU SUMBER KEBENARAN untuk semua keputusan desain selanjutnya.

→ Output: brand-attribute-matrix.md
②

Design Tokens 15 menit

Dari archetypes → lihat color psychology mapping → pilih warna di realtimecolors.com. Pilih font dari personality → fontjoy.com. Isi token template: CSS variables untuk colors, typography, spacing, radius.

→ Output: globals.css (20 tokens)
③

Wireframe 20 menit

Gambar kasar di kertas atau Figma. Tentukan section (max 7). Tentukan hierarchy: mana yang paling besar, mana yang secondary. Jangan mulai code sebelum wireframe selesai.

→ Output: sketsa layout / Figma wireframe
④

Scaffold 15 menit

npx create-next-app@latest + Tailwind + shadcn/ui. Setup token di tailwind.config. Install motion (framer), lucide-react. Buat folder structure atoms/molecules/organisms.

→ Output: project ter-setup, tokens aktif
⑤

Build Section-by-Section 1-2 jam

Satu section per waktu. Jangan lompat-lompat. Urutan: Navbar → Hero → Social Proof → Features → How It Works → Testimonials → CTA → Footer. Setiap section = mobile-first, langsung responsive.

→ Output: semua section ter-build
⑥

Motion & Polish 30 menit

Tambah scroll animation (Framer Motion: fadeInUp, stagger). Smooth scroll di nav. Hover states di semua interactive elements. Loading state kalau ada data fetching.

→ Output: halaman terasa hidup
⑦

Anti-Slop Check 15 menit

Jalankan rubrik evaluasi (Format 5). Cek 3-second rule. Cek WCAG contrast. Cek mobile. Cek performance (Lighthouse). Fix semua yang gagal.

→ Output: halaman siap deploy
⑧

Deploy 5 menit

Push ke GitHub → auto-deploy ke Vercel/Cloudflare Pages. Setup custom domain. Cek production. Share link.

→ Output: URL live 🚀
Format 4 — Matrix

Perbandingan Pendekatan

Pilih pendekatan yang tepat berdasarkan konteks. Tidak ada yang "terbaik" — yang cocok untuk kasusmu.

Style Landing Page

AspekMinimalistBoldEditorialPlayful
Warna dominanPutih/hitamGelap (#0a0a0a)Krem/creamMulti-warna
Accent1 warna2-3 bold1 mutedBright + contrast
Font headingLight sansBold sansSerifRounded/display
SpacingSangat luasMediumLuasMedium-padat
ImagerySedikit/abstractBanyak, full-bleedEditorialIlustrasi/custom
AnimationMinimalHeavy (GSAP)SubtlePlayful/motion
Cocok untukSaaS, tech, B2BAgency, creativeFashion, luxuryStartup, consumer
Anti-patternTerlalu kosong/boringRamus, bikin pusingTidak readableTidak profesional

Tech Stack

KebutuhanPilihanKapan Pakai
FrameworkNext.jsDefault — SSR, SSG, API routes, huge ecosystem
StylingTailwind CSSDefault — utility-first, fast prototyping
Componentsshadcn/uiReact + Tailwind — copy-paste, customizable
AnimationGSAP Framer MotionScroll=GSAP, Component=Framer
IconsLucideClean, consistent, tree-shakeable
FontSora + InterHeading + body. Atau sesuai brand personality.
DatabaseSupabase TursoAll-in-one=Supabase, Edge=Turso
AuthClerk Supabase AuthCepat+UI=Clerk, Gratis=Supabase
DeployVercel CF PagesNext.js=Vercel, Static=Cloudflare

Model AI untuk Generate

ModelStrengthBest ForCost
Claude 4.8Design taste, clean codePremium landing pagePRO (bayar)
Gemini 3.1 ProCreative + large contextComplex page, many sections9Router
MiMo V2.5 ProFast, accurate codeImplementation dari DESIGN.md9Router
DeepSeek V4 FlashSpeed, cost efficiencyBasic landing, rapid iterationFREE
Format 5 — Rubrik Evaluasi

Rate Halamanmu

Skor 1-5 per dimensi. Total 30. Di bawah 15 = redesign. 25+ = ship it.

Visual Hierarchy
Heading jelas beda dari body? CTA menonjol? Eye flow natural?
1
2
3
4
5
Whitespace
Ada "ruang napas"? Tidak terasa sesak? Spacing konsisten?
1
2
3
4
5
Typography
Max 2 font? Ukuran konsisten? Readable (min 16px, 1.5 line-height)?
1
2
3
4
5
Color Harmony
60-30-10 rule? WCAG contrast pass? Bukan random palette?
1
2
3
4
5
Mobile Responsive
Semua elemen adapt? Tidak horizontal scroll? Touch target ≥ 48px?
1
2
3
4
5
CTA Clarity
1 primary CTA jelas? Action verb? Kontras warna? Visitor tahu harus apa?
1
2
3
4
5
—
/ 30 · Klik angka di atas untuk menilai
Format 6 — Anatomy Komponen

Detail Komponen

Label setiap bagian dari komponen kunci. Sizes, variants, states — semua terdefinisi.

Button

Variants × Sizes

variant: string = "primary" | "secondary" | "outline" | "ghost" | "destructive"
size: string = "sm" (h-8, px-3) | "md" (h-10, px-4) | "lg" (h-12, px-6) | "icon" (h-10, w-10)
disabled: boolean = false → opacity-50, cursor-not-allowed
loading: boolean = false → spinner + disabled

States

default hover → bg opacity 90% active → scale(0.98) focus → ring-2 ring-offset disabled → opacity-50 loading → spinner + pointer-events-none

Typography Scale

Heading 1 Sora 800 · clamp(2.4rem, 6vw, 3.8rem)
Heading 2 Sora 700 · clamp(1.8rem, 4vw, 2.6rem)
Heading 3 Sora 600 · 1.25rem
Body text — default paragraph Inter 400 · 1rem · lh 1.7
Small — captions, helper text Inter 400 · 0.875rem · lh 1.5
mono — code, labels, technical JetBrains Mono 400 · 0.78-0.88rem
Format 7 — Before / After

Koreksi Kesalahan Umum

Kenapa ini salah. Bagaimana yang benar. Belajar dari kesalahan orang lain — jangan dari kesalahan sendiri.

❌ SEBELUM

Hero Headline

"Cara kerja platform kami sangat inovatif dan berbeda dari yang lain karena menggunakan teknologi AI terbaru yang dikembangkan oleh tim engineer berpengalaman."

→ Bicara tentang diri sendiri. Visitor tidak peduli. 28 kata, 0 manfaat.
✅ SESUDAH

Hero Headline

"Hemat 4 jam setiap hari."

Otomasi yang biasanya makan waktu, selesai dalam 1 klik.

→ Bicara manfaat untuk user. Angka spesifik. 4 kata headline. Clear.
❌ SEBELUM

Feature List

"Dashboard real-time · Analytics engine · API integration · Machine learning · Scalable infrastructure · 99.9% uptime · Custom reports · Team collaboration"

→ 8 fitur tanpa konteks. Feature dump. Visitor bingung mana yang penting.
✅ SESUDAH

Feature List

Lihat performa dalam 1 klik — Dashboard yang menunjukkan apa yang perlu kamu tahu, bukan semua data yang ada.

Tidak perlu copy-paste lagi — Semua data dari 50+ platform masuk otomatis.

→ Manfaat dulu, fitur sebagai penjelas. Max 3-5. Setiap item = 1 masalah terselesaikan.
❌ SEBELUM

CTA Button

Submit

→ "Submit" bukan action. Warna abu-abu = tidak penting. Tidak ada urgency.
✅ SESUDAH

CTA Button

Mulai Gratis →

→ Action verb. Warna kontras (accent). Arrow = forward motion. "Gratis" = hilangkan risiko.
❌ SEBELUM

Testimonial

"Produk ini bagus sekali!" — Budi, Jakarta

→ Tidak spesifik. Tidak ada posisi/role. Tidak ada angka. Tidak kredibel.
✅ SESUDAH

Testimonial

"Dulu tim saya butuh 5 jam untuk generate laporan. Sekarang 30 menit. ROI-nya terlihat di bulan pertama."

— Budi Santoso, CEO TokoMaju · ⭐⭐⭐⭐⭐

→ Angka spesifik. Nama + posisi + company. Sebelum/sesudah. Rating visual.
❌ SEBELUM

Nav Menu

Home · About · Services · Blog · Portfolio · Team · Careers · Contact · Pricing · FAQ · Docs · Support

→ 12 item. Hick's Law violation. Visitor malas baca. Tidak ada focus.
✅ SESUDAH

Nav Menu

Features · Pricing · Docs · [Mulai Gratis]

→ 3-4 links + 1 CTA. Yang lain masuk footer. Logo = home. Clear hierarchy.
❌ SEBELUM

Color Palette

→ Gradient purple-pink = AI slop default. 6 warna tanpa hierarchy. Tidak ada alasan brand.
✅ SESUDAH

Color Palette

→ 3 warna + neutrals. 60-30-10 rule. Setiap warna punya justifikasi dari brand archetype.
Format 8 — Skala Kompleksitas

Seberapa Bagus?

Tiga tier. Pilih berdasarkan budget, waktu, dan tujuan. Tier 2 recommended untuk kebanyakan kasus.

Hero Section

Tier 1 · Quick

Static Text

⏱ 5 menit
  • Headline + subheadline + CTA
  • Background warna solid
  • Tanpa animasi
  • Cukup untuk MVP/prototype
Tier 2 · Standard

Animated + Social Proof

⏱ 30 menit
  • FadeIn animation (Framer Motion)
  • Logo bar / angka social proof
  • Gradient atau subtle bg pattern
  • Responsive typography (clamp)
Tier 3 · Premium

Interactive + 3D

⏱ 2-4 jam
  • GSAP scroll animation
  • 3D model / particle background
  • Video background atau Lottie
  • Micro-interactions di semua elemen

Testimonial

Tier 1 · Quick

Text Quote

⏱ 2 menit
  • "Quote dari client" — Nama, Kota
  • 1 kolom, simple blockquote
  • Cukup, tapi kurang kredibel
Tier 2 · Standard

Card + Rating

⏱ 15 menit
  • Card layout, quote + nama + posisi
  • ⭐⭐⭐⭐⭐ rating visual
  • Carousel/slider kalau banyak
  • Company logo (opsional)
Tier 3 · Premium

Case Study Style

⏱ 30 menit
  • Foto + quote detail + metrics
  • "Dulu X, sekarang Y" format
  • Company logo + link case study
  • Video testimonial (kalau ada)

Navbar

Tier 1 · Quick

Simple Flex

⏱ 5 menit
  • Logo + links + CTA
  • Mobile: hidden links, hamburger → show
  • Static position
Tier 2 · Standard

Sticky + Blur

⏱ 20 menit
  • Fixed position + backdrop-blur
  • Scroll: bg opacity change
  • Mobile: animated slide-in menu
  • Active link indicator
Tier 3 · Premium

Mega Menu + Search

⏱ 1-2 jam
  • Mega dropdown dengan kolom
  • Command menu (cmdk) / search
  • Smooth transition animations
  • Scroll progress indicator
Quick Reference

Kalau Bingung, Pakai Ini

Satu keputusan per kategori. Tidak perlu mikir lagi — langsung eksekusi.

Framework
Next.js
SSR + SSG + API + huge ecosystem
Styling
Tailwind CSS
Utility-first, fast prototyping, design system built-in
Components
shadcn/ui
Copy-paste, customizable, accessible, beautiful defaults
Animation
GSAP + Framer Motion
Scroll=GSAP, Component=Framer, covers 99% cases
Icons
Lucide
Clean, consistent, tree-shakeable, 1000+ icons
Typography
Sora + Inter
Heading + body. Atau fontjoy.com untuk pairing lain.
Database
Supabase
DB + Auth + Storage + Realtime. Free tier generous.
Auth
Clerk / Supabase Auth
Cepat+UI=Clerk. Gratis=Supabase. Jangan bikin sendiri.
Payment
Midtrans (ID) / Stripe
Indonesia=Midtrans. International=Stripe.
CMS
Sanity / Payload
Client edit=Sanity. Dev control=Payload.
Form
React Hook Form + Zod
Performant + type-safe validation
Testing
Vitest + Playwright
Unit=Vitest. E2E=Playwright. Covers everything.
Deploy
Vercel / Cloudflare Pages
Next.js=Vercel. Static=CF Pages. Both free tier.
Monitoring
Sentry
Error tracking + performance. Free tier enough.
Linting
Biome
Replaces ESLint+Prettier. 100x faster.
AI Model
Claude 4.8 / MiMo V2.5
Premium=Claude. Fast+free=MiMo.
Deep Dive

Extension Documents

Playbook ini = ringkasan. Untuk pembahasan mendalam, buka extension docs di vault.

35 KB · 15 STEPS

Branding & Color System

Aaker + 12 Archetypes + Kapferer. 40 pertanyaan discovery. 4 case studies. Color psychology per industri. 8-week timeline.
15 KB · 150+ TOOLS

Tools & Libraries

GitHub star counts. Components, animation, forms, rich text, data, state, auth, payment, CMS, testing, SEO, deploy.
15 KB · 29 UX LAWS

Learning Roadmap

12 YouTube channels. 16 design systems. Interactive CSS games. Learning paths: 1 week / 1 month / 3 months.
16 KB · REAL EXAMPLES

Design System Architecture

5-layer atomic design. Token structures dari Spectrum, Carbon, Primer, M3. Theme system. Component API patterns.