UI mockups & wireframes membangun gambar sebuah antarmuka — layar yang akan dimiliki aplikasi atau situs, dengan fidelitas apa pun yang diminta brief. Ini template untuk "seperti apa tampilannya?" sebelum sesuatu benar-benar dibangun.
Mockup hi-fi atau wireframe lo-fi
Brief mengatur fidelitasnya:
- Sebuah mockup — "layar pengaturan untuk aplikasi foto, tema gelap" — menghasilkan layar hi-fi dengan huruf, warna, dan kontrol nyata, nyaris siap rilis
- Sebuah wireframe — "wireframe-kan alur onboarding, empat layar" — menghasilkan struktur lo-fi: blok, hierarki, label, belum ada styling untuk diperdebatkan
Keduanya file nyata yang bisa Anda arahkan, bukan gambar statis — sematkan pin pada sebuah kontrol, komentari sebuah layout, sesuaikan kepadatannya — sama seperti hasil mana pun.
UI mockup · Devin · swe-2-high · 24 min
Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.
▸ the prompt that made it▾ the prompt that made it
“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”
Satu layar atau satu set
Minta satu layar dan Anda mendapatkannya; minta sebuah alur dan agen membangun set-nya — onboarding, dashboard, pengaturan — sebagai deretan artboard yang bisa Anda telusuri satu per satu atau lihat dalam grid. Pratinjaunya live sepanjang waktu: klik untuk menjelajah, hover, uji state yang dibangun agen.
Wireframe · Devin · e2e · gate PASS
Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.
▸ the prompt that made it▾ the prompt that made it
“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”
Apa yang dikuasainya
- Mengeksplorasi arah — tiga pendekatan untuk layar yang sama, hemat biaya
- Kerja produk awal — set layar untuk sebuah fitur sebelum dispesifikasikan
- Wireframe untuk sign-off — struktur tanpa perdebatan gaya
- Analisis kompetitif — "seperti apa tampilan alur ini?" tanpa harus membangunnya
Mengarahkan mockup
Semua yang ada di pengarahan berlaku — mesinnya sama:
- ⌥-click bagian yang salah, beri komentar di node yang tepat
- Tweaks untuk parameter yang disediakan desain
- Tindak lanjut untuk layar yang kurang atau arah yang keliru
- Variants untuk "dua pendekatan berbeda pada alur yang sama"
Gate tetap berjalan — mockup diperiksa seperti hasil mana pun, karena gambar yang berbohong soal kelayakan bukan gambar yang berguna.
Mockup vs website vs mobile app
- UI mockups — gambar sebuah antarmuka, berbentuk desktop atau web
- Mobile app — layar ukuran ponsel, target sentuh, nav mobile
- Interactive website — situs yang benar-benar berfungsi, multi-halaman
Kalau deliverable-nya adalah sesuatu yang dijelajahi dengan klik alih-alih dilihat, itu bukan mockup — itu website (atau aplikasi mobile kalau bentuknya ponsel).
Tip: Sebutkan fidelitasnya di brief — "mockup hi-fi" vs "wireframe lo-fi" menghasilkan hal berbeda, dan memesan wireframe padahal Anda ingin hi-fi berarti run yang terbuang. Pilihan kata menentukan ekspektasi sebelum agen mulai.
Mengekspor
Mockup diekspor ke PNG atau PDF untuk dibagikan — layar dirender pada ukuran yang akan Anda presentasikan. File sumber tetap di folder proyek untuk pengarahan atau versi berikutnya.