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

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.

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

1. Memberikan

1. Membantu klien

1. Memudahkan

1. Menyampaikan

1. Mengumpulkan

Tools Populer

1. Figma

1. Balsamiq

1. Whimsical

1. MockPlus

1. UXPin

1. Justinmind

Kapan Menggunakan Apa?

• Wireframe

• Mockup

• Prototype

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

• Gunakan wireframe untuk

• Prototype hanya diperlukan untuk fitur yang

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