Blog Post

Wireframe, Mockup, dan Prototype: Apa Bedanya dan Kapan Menggunakannya

February 13, 2026 System Analysis, Uncategorized by admin

Proses desain UI/UX — dari wireframe ke prototype

Pendahuluan

Dalam proses desain sistem, visualisasi adalah kunci komunikasi antara System Analyst, developer, dan stakeholder. Tiga artefak utama yang sering digunakan adalah wireframe, mockup, dan prototype.

Definisi

Wireframe

Wireframe adalah kerangka untuk menata item dan fungsionalitas di halaman website atau aplikasi dengan memperhitungkan kebutuhan pengguna.

Array

Wireframe ibarat blueprint bangunan — menunjukkan struktur dan layout tanpa detail visual.

Mockup

Mockup adalah skema dengan ketelitian tinggi yang menunjukkan bagaimana produk jadi akan terlihat. Termasuk warna, typography, dan elemen visual lainnya.

Prototype

Prototype adalah model awal produk yang berfokus pada fungsionalitas — memberikan rasa nyata seolah itu produk jadi yang bisa diklik dan diinteraksikan.

Perbandingan

Manfaat Wireframe untuk System Analyst

Memberikan kejelasan pada proyek — semua interaksi dan kebutuhan layout tercover
Membantu klien berpikir tentang kebutuhan sebenarnya
Memudahkan komunikasi ide kepada tim
Menyampaikan pesan inti website lebih efektif
Mengumpulkan feedback pada tahap awal sebelum development mahal dimulai

Tools Populer

Figma — Paling populer saat ini, kolaboratif
Balsamiq — Khusus wireframe, gaya sketsa
Whimsical — Cepat dan simpel
MockPlus — Untuk prototyping cepat
UXPin — Advanced prototyping
Justinmind — Enterprise-grade

Kapan Menggunakan Apa?

Wireframe → Tahap awal discovery, brainstorming layout
Mockup → Setelah wireframe disetujui, sebelum development
Prototype → Untuk validasi UX dengan user testing

Contoh: Alur Proses Desain UI/UX

Visualisasi tahapan dari wireframe hingga prototype dalam proyek nyata:

flowchart LR
    A["DiscoverynInterview + Pain Point"] --> B["WireframenLow-fi Layout"]
    B --> C{"StakeholdernApproval?"}
    C -->|Ya| D["MockupnHi-fi Visual"]
    C -->|Tidak| E["RevisinWireframe"]
    E --> B
    D --> F{"DesignnReview?"}
    F -->|Ya| G["PrototypenInteraktif"]
    F -->|Tidak| H["RevisinMockup"]
    H --> D
    G --> I["User Testing"]
    I --> J{"FeedbacknPositif?"}
    J -->|Ya| K["Handoffnke Developer"]
    J -->|Tidak| L["Iterate"]
    L --> D

Contoh: Wireframe Structure sebagai Sitemap

Contoh sitemap sebuah aplikasi web yang divisualisasikan sebelum masuk ke wireframe detail:

flowchart TD
    HOME["Homepage"] --> LOGIN["Login / Register"]
    HOME --> CATALOG["Katalog Produk"]
    HOME --> ABOUT["Tentang Kami"]
    HOME --> CONTACT["Kontak"]

    LOGIN --> DASHBOARD["User Dashboard"]
    DASHBOARD --> PROFILE["Edit Profile"]
    DASHBOARD --> ORDERS["Riwayat Order"]
    DASHBOARD --> SETTINGS["Settings"]

    CATALOG --> DETAIL["Detail Produk"]
    DETAIL --> CART["Keranjang"]
    CART --> CHECKOUT["Checkout"]
    CHECKOUT --> PAYMENT["Pembayaran"]
    PAYMENT --> CONFIRM["Konfirmasi"]

    ORDERS --> TRACK["Tracking Pengiriman"]

Contoh: State Diagram Proses Desain

Bagaimana sebuah desain bergerak melalui berbagai state:

stateDiagram-v2
    [*] --> Draft : SA buat wireframe
    Draft --> InReview : Submit ke stakeholder
    InReview --> Approved : Feedback positif
    InReview --> NeedRevision : Ada revisi
    NeedRevision --> Draft : SA revisi
    Approved --> Mockup : UX Designer buat mockup
    Mockup --> MockupReview : Submit mockup
    MockupReview --> Prototype : Approved
    MockupReview --> Mockup : Revisi warna/layout
    Prototype --> UserTesting : Deploy prototype
    UserTesting --> Handoff : Testing OK
    UserTesting --> Mockup : Perlu perubahan besar
    Handoff --> [*]

Tips

Mulai selalu dari wireframe — jangan langsung ke mockup
Gunakan wireframe untuk mendapatkan persetujuan struktur sebelum investasi visual
Prototype hanya diperlukan untuk fitur yang interaksinya kompleks

Ditulis oleh Dadang Kriswanto — System Analyst & Blogger di dadang.kriswanto.my.id