Collaboration with Developer
Desain hebat tidak berarti jika gagal diterjemahkan ke kode. Modul ini mengajarkan handoff, anotasi spec, Dev Mode, dasar HTML/CSS/Tailwind, mindset komponen, dan cara menjelaskan desain ke developer.
Tujuan Modul
User bisa bekerja dengan developer secara profesional.
- Menyiapkan handoff yang jelas dan lengkap.
- Menulis anotasi perilaku responsif dan state.
- Memahami dasar HTML, CSS, dan Tailwind.
- Berpikir dalam komponen seperti developer.
Handoff & Anotasi yang Jelas
24 menit
Tujuan Lesson
Apa yang dibutuhkan developer
Developer butuh lebih dari gambar: ukuran, spacing, token warna, perilaku responsif, dan state. Handoff yang baik menjawab pertanyaan sebelum ditanya, sehingga implementasi lancar.
Anotasi spec
Beri catatan pada hal yang tidak terlihat dari gambar diam:
- Perilaku saat layar mengecil (apa yang reflow).
- State interaktif (hover, focus, disabled, loading).
- Aturan teks panjang (truncate atau wrap).
- Animasi dan durasinya bila ada.
Dev Mode
Dev Mode menyajikan ukuran, warna token, dan aset siap pakai untuk developer. Pastikan komponen rapi dan ber-token agar nilai yang muncul bermakna, bukan angka acak.
Design QA
Setelah developer membangun, lakukan QA: bandingkan hasil dengan desain pada spacing, warna, dan perilaku. Sampaikan temuan dengan spesifik dan ramah, fokus pada solusi.
Contoh Baik
Handoff dashboard dengan anotasi reflow tiap breakpoint, daftar state komponen, dan token warna, sehingga developer tidak perlu menebak.
✕ Contoh Buruk
Mengirim screenshot tunggal tanpa anotasi, lalu kecewa karena developer salah menebak perilaku responsif.
Kesalahan Umum Pemula
- ⚠Hanya mengirim gambar tanpa spec.
- ⚠Tidak menjelaskan perilaku responsif.
- ⚠Melewatkan state interaktif.
- ⚠QA yang menyalahkan, bukan menyelesaikan.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat handoff lengkap untuk 1 halaman dashboard.
- Tulis anotasi responsif dan state untuk 3 komponen.
- Susun design QA checklist.
Checklist Lesson
Uji Pemahaman
Apa yang harus disertakan dalam handoff selain gambar?
Dasar HTML, CSS & Mindset Komponen
24 menit
Tujuan Lesson
Kenapa designer perlu paham kode dasar
Memahami HTML/CSS membuatmu mendesain hal yang mungkin dibangun, berkomunikasi dengan istilah yang sama, dan mengerti keterbatasan teknis. Kamu tidak harus jadi programmer, cukup paham mediumnya.
HTML & CSS secukupnya
HTML adalah struktur (heading, paragraf, tombol, input). CSS mengatur tampilan (warna, spacing, layout dengan flexbox/grid). Mengenal keduanya membantumu berpikir dalam blok yang nyata.
Tailwind & token
Tailwind memakai utilitas yang mirip token desain (p-4, text-lg, gap-2). Memahami pola ini mempermudah handoff karena bahasa desain dan kode menjadi dekat.
Component mindset & constraint
Developer berpikir dalam komponen reusable, bukan halaman utuh. Mendesain dengan mindset yang sama (komponen + state + props) membuat desainmu lebih mudah diimplementasikan dan dirawat.
Contoh Baik
Designer menjelaskan kartu sebagai komponen dengan props (judul, status, aksi) dan state, sehingga developer langsung paham strukturnya.
✕ Contoh Buruk
Designer mendesain 20 kartu unik tanpa pola, memaksa developer membuat 20 implementasi terpisah.
Kesalahan Umum Pemula
- ⚠Mendesain hal yang sulit/mahal dibangun tanpa sadar.
- ⚠Tidak berpikir dalam komponen reusable.
- ⚠Mengabaikan keterbatasan teknis.
- ⚠Memakai istilah berbeda dari developer.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat component documentation untuk 1 komponen (props + state).
- Pelajari dan tiru 1 layout sederhana dengan HTML/CSS dasar.
- Petakan 1 halaman menjadi daftar komponen reusable.
Checklist Lesson
Uji Pemahaman
Kenapa designer perlu paham HTML/CSS dasar?
Project Modul
Handoff Package Profesional
Siapkan paket handoff untuk satu halaman dashboard: anotasi, dokumentasi komponen, dan QA checklist.
Deliverables:
- Handoff 1 halaman dengan anotasi.
- Anotasi perilaku responsif + state.
- Component documentation.
- Design QA checklist.