WIREFRAME

WIREFRAME DALAM
RANCANGAN PEMBUATAN
APLIKASI / WEBSITE
 MATERI WIREFRAME
KOMPONEN WIREFRAME
PENGERTIAN WIREFRAME
01 Apa maksud dari wireframe dan
apa itu wireframe
02 WEBSITE DAN APLIKASI
Menjelaskan apa saja bagian dari
wireframe aplikasi dan website

TIPE TIPE WIREFRAME MANFAAT WIREFRAME

03 Di dalam wireframe ada banyak
macam yang harus di jelaskan
04 Manfaat sangat penting apa tujuan
dari wireframe tersebut

CARA MEMBUAT WIREFRAME

05 Membuat contoh implementasi
menggunakan aplikasi figma
 TECHNOLOGICAL DEVELOPMENT

App / Web

UI/UX Programming

Wireframe Wireflow Front End Back End

Flow Chart Work Flow BootStrap Laravel

 01
PENGERTIAN WIREFRAME
Apa maksud dari wireframe dan apa itu wireframe
 PENGERTIAN WIREFRAME
Wireframe adalah kerangka dasar dari halaman Di
dalam wireframe terdapat berbagai komponen seperti
banner, header, content, footer, link, form, dan lain-
lain.

Proses pembuatan wireframe website disebut

wireframing di mana akan mengatur semua komponen
di atas sesuai dengan tata letak yang diinginkan.
Wireframing biasanya dilakukan oleh UI Designer.
Dialah orang yang bertanggung jawab membuat
website menarik.
 02
KOMPONEN WIREFRAME
WEBSITE DAN APLIKASI
Menjelaskan apa saja bagian dari wireframe aplikasi dan website
 KOMPONEN WIREFRAME

Komponen Layout Utama

Navigasi

Komponen
Komponen
Informasi
Interface
LAYOUT UTAMA

Komponen utama wireframe adalah layout

utama. Komponen ini biasanya berupa kotak-
kotak yang telah diatur sesuai dengan tata
letak halaman website / Aplikasi . Dalam
komponen ini, terdapat beberapa bagian,
seperti header, menu navigasi, body, hingga
letak sidebar.
 KOMPONEN - KOMPONEN

Komponen Komponen Komponen

Interface Navigasi Informasi
Komponen interface adalah Salah satu komponen dalam Sesuai namanya, komponen
komponen yang terkait dengan wireframe website / Aplikasi informasi merupakan konten utama
media interaksi antara tampilan adalah navigasi. Komponen ini yang ingin disampaikan pada
website / Aplikasi dengan berguna untuk mengarahkan audiens. Contohnya, input,
pengunjung. Komponen ini pengunjung menjelajahi website / thumbnail, link, paragraf, dan lain-
digunakan sebagai penunjang Aplikasi dengan mudah. Desain lain. Oleh karena itu, penting untuk
informasi pada pengunjung yang yang digunakan bisa berupa menempatkan komponen ini di
biasanya berupa button, link, judul, menu, tanda panah, atau ikon lain bagian yang paling mudah dilihat
font size, logo, dan lain-lain. sesuai keinginan. pengunjung.
 Komponen Tambahan
Komponen tambahan bisa dimasukkan dalam
wireframe sesuai jenis dan kebutuhan website
/ Aplikasi. Sebagai contoh jika merancang
untuk toko online. Komponen tambahan yang
bisa di gunakan seperti, fitur cek resi, form
konfirmasi pemesanan, hingga layanan chat
dengan pembeli secara langsung.
 03
TIPE TIPE WIREFRAME
Di dalam wireframe ada banyak macam yang harus di jelaskan
 TIPE TIPE WIREFRAME
Secara umum wireframe dibagi menjadi tiga jenis sesuai dengan detail kerangka desain yang dibuat:

1. Low-fidelity Wirefram
Desain yang paling sederhana. Tipe wireframe ini
biasanya dibuat dalam bentuk yang masih kasar.
Maksudnya, tanpa menggunakan skala, kisi, dan akurasi
piksel. Bahkan, hanya bermodal kertas dan pensil saja,
sudah bisa membuat low fidelity wireframe.
2. Mid-fidelity Wireframe
tipe wireframe yang paling umum digunakan. Wireframe
tipe ini menampilkan representasi layout yang lebih
akurat, meskipun masih belum menggunakan gambar.
3. High-fidelity Wireframe
tipe wireframe yang paling spesifik. Kerangka desain
sudah menggunakan gambar dan tulisan konten yang
sebenarnya. Tak hanya itu, tipe wireframe ini juga sudah
dilengkapi menu interaktif dalam desainnya.
 04
MANFAAT WIREFRAME
Manfaat sangat penting apa tujuan dari wireframe tersebut
 MANFAAT WIREFRAME

1 2 3 4
Memberikan
Pengembangan Memudahkan
Menghemat waktu gambaran web/app
lebih terstruktur kordinasi
sejak awal
 Menghemat waktu
Dengan menggunakan wireframe, pembuatan website /
Aplikasi akan lebih menghemat waktu. Kenapa bisa
demikian? Sebab, perubahan pada desain website / Aplikasi
jauh lebih mudah dan cepat jika dilakukan pada saat masih
berupa konsep.

Bayangkan jika programmer sudah mulai mengerjakan

coding dan setelah selesai desain masih harus diganti.
Artinya, tahapan desain dan coding bisa mulai dilakukan
setelah konsep desain sudah disepakati.
Memberikan gambaran web/app sejak awal

Tak perlu menunggu website / Aplikasi jadi untuk tahu

konsep desainnya. Dengan wireframe, semua orang yang
terlibat dalam proses pengembangan website / Aplikasi bisa
mengetahui gambaran website / Aplikasi sejak awal.
 Pengembangan lebih terstruktur

Dengan adanya wireframe, pengembangan website / Aplikasi

jauh lebih terstruktur. Tidak hanya karena konsep dasar sudah
diketahui tapi juga karena masing-masing komponen sudah
tertata dengan baik. Bahkan, navigasi website / Aplikasi pun
sudah termasuk di dalam kerangka dasar tersebut.

Dengan kondisi tersebut, resiko untuk melakukan perbaikan

setelah website / Aplikasi jadi lebih kecil. Sebab, setiap tahapan
dikerjakan dengan konsep yang jelas.
 Memudahkan kordinasi
Penggunaan wireframe website / Aplikasi memudahkan
koordinasi dalam pengembangan. Baik ketika saat
mengerjakan website / Aplikasi sendiri atau untuk klien.

Semua proses pengerjaan website / Aplikasi bisa mengacu

pada kerangka dasar yang sudah disepakati. Jadi ketika
berdiskusi untuk melakukan perbaikan, Serta bisa melihat
pada wireframe tersebut.
 05
CARA MEMBUAT WIREFRAME
Membuat contoh implementasi menggunakan aplikasi figma
STEP-STEP MEMBUAT WIREFRAME

1 3 5
Melakukan setting
Melakukan riset grid Informasi Konten

2 4
Menentukan tata
Menyiapkan tools letak
 Melakukan Riset
Merancang website / Aplikasi agar sesuai dengan
trend. Hal ini penting mengingat perkembangan
kebutuhan dari tiap jenis website / aplikasi berbeda.

Selain itu, riset juga dilakukan agar mendapatkan

inspirasi desain yang menarik. Bisa dari website / App
lain secara umum atau dari website kompetitor. Hal ini
dilakukan agar mendapat referensi rancangan desain
website yang disukai pengunjung.
Menyiapkan Tools
● Mockflow
● Mockingbird
● Canva
● Figma
● Adobe ilustrator
Melakukan setting grid
mengatur halaman website / Aplikasi
menjadi beberapa kolom sebagai tempat
dari komponen yang sudah ditentukan.

Tujuan dari melakukan setting grid adalah

membuat penataan lebih mudah dengan
hasil yang rapi. Jadi, tampilan website /
Aplikasi akan terlihat lebih seimbang
dengan beberapa komponen di dalamnya.
Menentukan tata letak

Dengan bantuan grid tadi Atur komposisi

komponen dengan baik. Misalnya, apakah
akan menempatkan logo di tengah halaman
website / Aplikasi ataupun di sisi kanan kiri.

Bisa menentukan seberapa besar bagian

footer website / Aplikasi tersebut. Sesuaikan
letak ini dengan keinginan . Pada tahap ini
pula juga bisa berdiskusi dengan tim untuk
tata letak yang terbaik untuk website /
Aplikasi tersebut.
Informasi Konten

Setelah komponen diatur dengan tata letak yang baik,

saatnya menuliskan informasi konten . Untuk
memastikan strukturnya sesuai keinginan, dan bisa
melakukannya bertahap.

Pastikan juga informasi konten jelas dan mudah dibaca.

Cobalah gunakan ukuran dan jenis font yang berbeda
untuk masing-masing komponen. Jadi, bisa sekaligus
membedakan berbagai informasi dalam desain tersebut.

Setelah tahapan ini selesai, juga bisa melanjutkannya

dengan bentuk visual yang lebih detail.
Terima kasih