AI Web Building #04 — Cara Membuat Website Brief yang Lengkap

Artikel 4 dari 8 · Tahap Dokumentasi

Ubah Ide dan Hasil Diskusi Menjadi Instruksi yang Jelas

Pada materi sebelumnya, kita sudah menentukan konsep website melalui proses riset dan diskusi bersama AI.

Kita sudah mengetahui siapa target pengguna, halaman apa yang dibutuhkan, fitur yang harus dibuat, hingga bagaimana desainnya akan terlihat.

Namun, ada satu langkah krusial sebelum mulai membuat website: menyusun semua keputusan tersebut menjadi sebuah dokumen panduan resmi.

Dokumen inilah yang disebut Website Brief.

Mengapa Website Brief Sangat Penting?

Website Brief adalah panduan lengkap yang menjelaskan kebutuhan, tujuan, aturan, dan spesifikasi website yang akan dibuat.

Bayangkan kamu meminta seorang kontraktor membangun rumah. Jika kamu hanya mengatakan, "Buatkan rumah yang bagus," hasilnya bisa sangat jauh dari harapanmu. Kamu mungkin membayangkan rumah minimalis dua lantai, sedangkan sang kontraktor membangun rumah klasik dengan pilar besar.

Begitu juga ketika meminta AI membuat website.

Semakin jelas instruksi yang kamu berikan, semakin sedikit asumsi yang harus ditebak oleh AI. Hasilnya akan jauh lebih presisi dan sesuai ekspektasi.

1. Apa Saja Isi Website Brief?

Website Brief tidak harus menggunakan bahasa teknis yang rumit atau bertele-tele. Yang paling penting adalah informasinya jelas, terstruktur, dan tidak menimbulkan multitafsir.

Berikut 10 bagian utama yang kita gunakan:

2. Jelaskan Informasi Dasar Proyek

Pada bagian pertama, tuliskan identitas dan tujuan dasar proyek secara padat:

# Project Overview

Project Name: Hospital Website
Project Type: Company Profile + Appointment Demo

Description:
Website rumah sakit modern untuk membantu pengunjung menemukan informasi 
layanan, dokter spesialis, jadwal praktik, dan melakukan simulasi pendaftaran online.

Target Audience:
- Pasien rawat jalan
- Keluarga pasien
- Calon pasien baru yang mencari layanan kesehatan

Primary Goal:
Mempermudah pengunjung menemukan jadwal dokter spesialis dalam waktu kurang 
dari 1 menit dan memahami alur pendaftaran rumah sakit.

Informasi ini membantu AI memahami gambaran besar dan batasan proyek. Jika website hanya dibuat sebagai portofolio atau latihan, sebutkan secara jelas bahwa proyek ini adalah demonstrasi frontend.

3. Jelaskan Setiap Halaman Secara Detail

Jangan hanya memberikan daftar halaman kosong seperti Home, About, dan Contact. AI perlu mengetahui apa saja section dan fungsi di setiap halaman:

## Homepage

Purpose:
Memperkenalkan rumah sakit dan membantu pengunjung langsung mengakses informasi utama.

Sections:
1. Header & Navigation (Logo, menu layanan, dokter, kontak, tombol Appointment)
2. Hero Section (Headline terpercaya, subheadline, CTA pendaftaran darurat)
3. Search Doctor (Input nama dokter dan dropdown spesialisasi)
4. Featured Services (Card poliklinik unggulan: Jantung, Anak, Bedah, Gigi)
5. Why Choose Us (Fasilitas modern, akreditasi, dokter berpengalaman)
6. Doctor Preview (Grid foto dokter dengan jadwal singkat)
7. Appointment CTA (Banner ajakan konsultasi)
8. Contact & Location (Alamat Google Maps, jam operasional IGD 24 Jam)
9. Footer (Link penting, legalitas, hak cipta)

Primary CTA:
"Buat Janji Temu" (Mengarahkan ke halaman Appointment)

Secondary CTA:
"Cari Dokter" (Mengarahkan ke filter halaman Doctors)

Lakukan hal yang sama untuk halaman lainnya. Semakin jelas breakdown section-nya, semakin rapi layout yang akan di-generate oleh AI.

4. Tentukan Perilaku Fitur (Input, Output, Validation)

Ini bagian yang paling sering terlewat oleh pemula. Fitur bukan sekadar kotak input visual di layar, melainkan bagaimana sistem merespons interaksi pengguna.

## Fitur: Doctor Search & Filter

Input:
- Teks pencarian: Nama dokter
- Dropdown filter: Spesialisasi (Semua, Anak, Jantung, Penyakit Dalam, dll.)

Behavior:
- Pencarian berjalan secara instan (realtime filter) saat mengetik.
- Menampilkan card dokter yang sesuai dengan kriteria.
- Jika tidak ada dokter yang cocok, tampilkan Empty State ramah: "Dokter tidak ditemukan. Silakan hubungi pusat informasi."
- Mengklik card dokter akan membuka modal atau halaman detail profil dokter.

## Fitur: Appointment Demo

Input Form:
- Nama Lengkap (Wajib, teks)
- Nomor WhatsApp (Wajib, format nomor Indonesia)
- Pilihan Dokter (Wajib, dropdown dari daftar dokter)
- Tanggal Kunjungan (Wajib, tanggal di masa depan)
- Keluhan Singkat (Opsional, textarea)

Validation & Behavior:
- Tidak boleh mengirim form kosong.
- Tanggal tidak boleh sebelum hari ini.
- Setelah tombol "Kirim Janji Temu" diklik, tampilkan modal konfirmasi sukses demo.
- Catatan teknis: Data belum disimpan ke database backend (mode simulasi frontend).

5. Tentukan Kebutuhan Desain dan Teknis

Jelaskan bahasa visual dan spesifikasi teknis yang disepakati:

# Design Requirements

Style:
Modern, clean, trustworthy, healthcare professional.

Colors:
- Primary: #023E8A (Deep Healthcare Blue)
- Accent: #00B4D7 (Cyan Aqua)
- Background: #FFFFFF & #F8FAFC
- Text: #0F172A (Navy Dark)

Typography:
- Font: Inter atau Plus Jakarta Sans (Clean, legible sans-serif)

Layout Guidelines:
- Mobile-first & responsive (Breakpoint: Mobile < 640px, Desktop >= 1024px)
- Padding dan spacing konsisten
- Accessible contrast ratio untuk keterbacaan teks pasien lanjut usia

UI Components:
- Rounded buttons (8px - 12px)
- Clean card borders dengan subtle shadow
- Floating emergency badge (Call IGD 24 Jam)

Untuk kebutuhan teknis, tentukan platform yang digunakan, misalnya:

• Stack: HTML5, Tailwind CSS, Vanilla JavaScript (atau Next.js / React).
• Performance: Gambar teroptimasi WebP, loading cepat, tanpa dependensi library berat yang tidak perlu.

6. Buat Website Brief Menggunakan AI

Sekarang kita bisa meminta AI menggabungkan hasil riset materi #02 dan materi #03 menjadi dokumen brief yang rapi.

Saya sudah menyelesaikan tahap riset dan diskusi konsep website.

Berikut seluruh data dan catatannya:
[TEMPEL HASIL RISET MATERI #02 DAN KONSEP MATERI #03 DI SINI]

Tugas kamu adalah menyusun satu dokumen "Website Brief" yang lengkap, terstruktur, dan siap dieksekusi oleh AI Developer / Frontend Engineer.

Format dokumen wajib mencakup 10 bagian:
1. Project Overview
2. Target Audience
3. Project Goals
4. Sitemap & Detail Section per Halaman
5. Features Specification (Input, Output, Validation, Edge Cases)
6. User Flow Utama
7. Design Direction (Color codes, Typography, UI Style)
8. Content & Assets Checklist
9. Technical Requirements
10. Acceptance Criteria (Checklist syarat selesai)

Tuliskan dalam format Markdown (.md) yang rapi, profesional, dan jangan mengarang informasi bisnis di luar yang sudah saya tentukan.

Setelah AI menghasilkan dokumen tersebut, baca dan teliti kembali. Pastikan tidak ada fitur siluman yang tidak kamu inginkan.

7. Simpan Dokumen sebagai WEBSITE_BRIEF.md

Simpan file dokumen ini di root folder proyekmu dengan nama:

File Markdown ini akan menjadi Single Source of Truth (satu-satunya acuan utama) sepanjang proses pengembangan.

Kapan pun kamu berganti model AI (misal dari ChatGPT ke Claude, Gemini, atau Cursor / AI IDE), kamu cukup melampirkan file WEBSITE_BRIEF.md ini sebagai instruksi proyek.

Hasil Akhir Materi #04

Satu file dokumen WEBSITE_BRIEF.md yang lengkap berisi spesifikasi proyek, detail halaman, aturan fitur, dan kriteria keberhasilan yang siap diberikan ke AI Developer untuk mulai membuat kode.

Kesimpulan

Website Brief mengubah ide abstrak menjadi instruksi terukur yang bisa dieksekusi secara nyata.

Dokumen ini juga menjadi alat kontrol kualitas: ketika hasil website yang dibuat AI terasa kurang pas, kamu cukup mengecek kembali checklist di WEBSITE_BRIEF.md dan meminta AI memperbaikinya berdasarkan acuan tersebut.

Setelah brief selesai dan disepakati, kita siap melangkah ke tahap berikutnya: membangun website secara langsung bersama AI Developer.

Lanjut → AI Web Building #05: Membangun Website dengan AI Developer