Halo teman teman, pada artikel kali ini aku membahas tentang
desain wireframe. Selamat membaca!
Sebelum membahas mengenai desain wireframe, tentu kita harus
tahu dulu apa itu wireframe. Apa itu wireframe? Wireframe adalah sebuah
kerangka yang memiliki fungsi untuk membuat tata letak suatu website agar sesuai
dengan keinginan pengguna sebelum masuk pada proses desain atau coding. Wireframe
juga dapat didefinisikan sebagai kerangka yang menjadi representasi visual dari
struktur aplikasi maupun website dan wireframe merupakan salah satu hal yang
paling penting sebelum membuat rancangan sebuah produk atau sistem digital.
Wireframe mempunyai beberapa komponen sebagai berikut.
- Layout utama, komponen utama dari sebuah wireframe website yaitu layout utama. Layout utama ini biasa berisi header, body, menu navigasi, dan juga letak sidebar.
- Komponen interface, merupakan komponen yang terkait dengan interaksi suatu website dengan pengunjungnya biasanya berupa link, judul, font size, logo dan lainnya.
- Kompone navigasi, komponen yang berguna untuk mengarahkan pengunjung untuk menjelajahi website dengan mudah seperti desain menu, tanda panah serta ikon lainnya.
- Komponen informasi, yaitu komponen utama yang ingin disampaikan kepada pengunjung seperti thumbnail, paragraf dan masih banyak lagi.
Komponen tambahan, merupakan komponen yang ditambahkan
sesuai dengan kebutuhan dan jenis website. Berisi fitur fitur yang berupa bagian
tambahan, seperti pada website e-commerce terdapat fitur pesan atau chat antara
penjual dan juga pembeli.
Wireframe juga memiliki tipe tipe yang berbeda beda yang
dapat dibagi tiga tipe yaitu :
1. Low fidelity wireframe, biasa dibuat dalam bentuk kasar dan
merupakan wireframe dengan desain yang paling sederhana. Tipe ini juga hanya
menyertakan gambar sederhana seperti blok atau teks pada heading.
2. Mid fidelity wireframe, merupakan tipe wireframe yang paling
umum digunakan. Tipe yang menampilkan representasi layout yang lebih akurat. Pada
tipe ini juga lebih banyak detail yang ditetapkan pada komponen tertentu dan
perbedaan fitur yang terasa lebih jelas satu sama lainnya.
3. High fidelity wireframe, adalah tipe wireframe yang paling
spesifik. Tipe yang di dalam desainnya sudah dilengkapi menu interaktif dan
juga kerangka desain menggunakan tulisan dan gambar yang sebenarnya. Tipe ini
cocok untuk memberikan gambaran dan mendokumentasikan konsep website yang
kompleks.
Selain membahas wireframe, kita juga harus mengetahui ap
aitu wireflow. Wireflow adalah sebuah Langkah Langkah yang harus dilakukan untuk
mencapai tujuan. Wireflow yang merupakan salah satu jenis dari userflow ini
juga menjadi salah satu hal yang penting. Wireflow merupakan gabungan antara
diagram dengan wireframe.
Sekian penjelasan tentang wireframe dan juga sedikit tentang
wireflow. Tentu saja jika ingin mengetahui lebih mendalam mengenai desain
wireframe dapat dilihat contoh dan tahap-tahapnya. Terima kasih sudah membaca, Semoga
bermanfaat dan menambah pengetahuan teman teman!
0 komentar:
Posting Komentar