MODUL 3

UI/UX Design

Arsitektur Informasi & Wireframe

Tim Kelas Desain

Setelah memahami kebutuhan pengguna pada bab sebelumnya, kini saatnya menyusunnya menjadi kerangka nyata. Bab ini membahas tahap awal Develop dalam Double Diamond — bagaimana menyusun struktur informasi yang logis (arsitektur informasi) dan menuangkannya menjadi kerangka tampilan (wireframe), sebelum "didandani" dengan warna dan visual pada bab berikutnya.

Mengapa Arsitektur Informasi Penting?

Definisi

Arsitektur Informasi (IA) adalah proses menyusun & mengorganisasikan konten/fitur suatu produk digital secara logis, sehingga pengguna dapat menemukan informasi dengan mudah dan cepat.

Manfaat Arsitektur Informasi

•Memudahkan pengguna menavigasi produk tanpa kebingungan.

•Mencegah pengguna "tersesat" saat mencari fitur/informasi.

•Menjadi dasar sebelum wireframe & tampilan visual dibuat.

•Mempercepat proses desain karena struktur sudah jelas sejak awal.

Pengaplikasian

Sesuai elemen CP Proses Produksi Desain pada tahap praproduksi, arsitektur informasi & wireframe adalah kerangka rancangan sebelum masuk ke tahap produksi visual pada Bab 4: Visual Design System.

Struktur Navigasi

Definisi

Struktur navigasi adalah pola pengorganisasian konten yang menentukan bagaimana pengguna berpindah antar halaman atau fitur dalam sebuah produk.

Tiga Pola Utama

•Hierarchical — bertingkat dari umum ke spesifik; cocok untuk website atau company profile.

•Sequential — berurutan langkah demi langkah; cocok untuk proses seperti checkout atau onboarding.

•Matrix — pengguna bebas berpindah ke berbagai arah; cocok untuk aplikasi kompleks seperti media sosial.

Pengaplikasian

Pemilihan struktur navigasi bergantung pada tujuan produk & kebiasaan pengguna target hasil riset pada Bab 2.

Hierarchical

Sequential

Matrix

Sitemap (Peta Situs)

Definisi

Sitemap adalah diagram visual yang menggambarkan seluruh halaman/fitur produk & hubungan hierarkisnya — ibarat "denah rumah" sebelum dibangun.

Langkah Membuat Sitemap

1.Daftar semua fitur/halaman dari hasil riset pengguna.

2.Kelompokkan berdasarkan kesamaan fungsi.

3.Susun dari halaman utama ke halaman turunannya.

4.Uji dengan card sorting bersama calon pengguna.

Pengaplikasian

Sitemap menjadi acuan bersama tim (desainer, developer, klien) sebelum masuk ke pembuatan wireframe.

User Flow

Definisi

User Flow adalah diagram alur langkah demi langkah yang dilalui pengguna untuk menyelesaikan satu tugas tertentu, misalnya "memesan makanan" atau "mendaftar akun".

Komponen Utama

•Entry Point — titik awal pengguna masuk ke alur.

•Action — tindakan yang dilakukan pengguna di setiap langkah.

•Decision Point — titik percabangan keputusan (ya/tidak).

•Goal — titik akhir saat tujuan pengguna tercapai.

Pengaplikasian

User flow membantu desainer memastikan tidak ada langkah yang berbelit sebelum dituangkan ke dalam wireframe.

Wireframe: Low-Fidelity vs High-Fidelity

Definisi

Wireframe adalah kerangka visual sebuah tampilan tanpa detail warna & gaya, untuk fokus pada struktur & fungsi. Low-fidelity berupa sketsa kasar; high-fidelity sudah menyerupai tampilan akhir dengan detail lebih presisi.

Perbandingan

•Lo-Fi — cepat dibuat, cocok untuk brainstorming awal & diskusi tim.

•Hi-Fi — lebih detail, cocok untuk presentasi ke klien & panduan tim developer.

Pengaplikasian

Proses desain yang baik dimulai dari Lo-Fi lalu berkembang ke Hi-Fi, sejalan dengan prinsip iterasi pada Design Thinking yang telah dipelajari di Bab 1.

Low-Fidelity

High-Fidelity

Elemen & Anatomi Wireframe

Definisi

Bagian-bagian standar yang membentuk sebuah wireframe agar mudah dibaca dan dipahami oleh seluruh tim.

Lima Elemen Utama

•Navigasi — header & menu utama.

•Blok Konten — area teks/informasi utama.

•Placeholder Gambar — penanda posisi visual/foto.

•Tombol / Call-to-Action — pemicu tindakan pengguna.

•Footer — informasi tambahan di bagian bawah.

Pengaplikasian

Konsistensi elemen ini memudahkan wireframe "diterjemahkan" menjadi desain visual pada Bab 4: Visual Design System.

Dari Wireframe ke Prototype

Definisi

Prototype adalah wireframe yang telah ditautkan (linked) sehingga bisa disentuh/diklik untuk mensimulasikan alur produk secara interaktif.

Langkah Praktis

1.Hubungkan antar-frame sesuai user flow yang sudah dirancang.

2.Tambahkan interaksi sederhana (klik, transisi antar layar).

3.Uji ke calon pengguna sebelum masuk ke tahap visual final.

Pengaplikasian

Bab ini menjadi jembatan menuju Bab 4: Visual Design System, di mana wireframe akan "didandani" dengan warna, tipografi, dan komponen visual.

Kesimpulan

Arsitektur Informasi & Wireframe adalah jembatan antara hasil riset pengguna dan tampilan visual akhir. Dengan menyusun sitemap, user flow, dan wireframe secara sistematis, peserta didik belajar merancang kerangka produk yang logis dan mudah digunakan — bekal penting sebelum masuk ke tahap Visual Design System pada bab berikutnya.

E-Book Modul Ini

Baca ringkasan lengkap materi Arsitektur Informasi & Wireframe dalam format e-book yang bisa dibuka langsung tanpa perlu mengunduh.