OKEGUYS – Kalau kamu sudah mengerti dalam kosakata desain UI UX, kamu akan memiliki sketsa tentang apa itu wireframe. Pertanyaan selanjutnya adalah bagaimana kamu akan membuatnya, dan inilah panduan awal untuk membuat Wireframe.
Mari kita coba pelajari beberapa hal, untuk bisa mengerti langkah awal dalam membuat wireframe tersebut Guys.
Langkah Awal Panduan Membuat Wireframe
1. Lakukan Riset
Desain UX membutuhkan sebuah proses, dan wireframing bukanlah langkah pertama dalam proses ini. Bahkan sebelum kamu berpikir untuk mengambil pulpen dan kertas, kamu perlu membahas dua langkah pertama; yaitu memahami siapa audiens kamu.
Melalui riset pengguna dan melengkapinya dengan riset pesaing dan industri lebih lanjut. Apa artinya? Itu berarti melakukan analisis lini produk serupa dengan milik kamu, mencari tren UX yang sedang hype dan tentu saja meninjau pedoman desain internal kamu sendiri.
Dan kalau kamu merancang fitur baru, jangan takut untuk meneliti riset diluar sana. Memperkenalkan pelacakan dan visualisasi data sebagai bagian dari layanan perusahaan logistik kamu.
2. Siapkan Penelitian Kamu Untuk Referensi
Kamu bisa bayangkan berapa banyak data kuantitatif dan kualitatif yang akan dihasilkan oleh berbagai tahapan tersebut. Nah, itulah yang perlu kamu ingat saat membuat wireframe. Untuk kamu lebih gampang mengingatnya lebih baik sih pakai reminder atau di notes ya Guys.
Dari beberapa kutipan kamu juga bisa membantu memfokuskan perhatian kamu pada pengalaman pengguna, dan jangan lupa dengan rancangan kamu pastinya.
3. Pastikan Telah Memetakan Alur Pengguna
Wireframing kamu bisa menjadi berantakan dengan sangat cepat jika kamu gak punya gambaran tentang berapa banyak layar yang perlu kamu buat dan alur yang kamu harapkan akan dicoba pengguna.
Penting untuk memiliki konsep yang matang tentang dari mana pengguna kamu akan berasal (saluran pemasaran mana, misalnya, dan dibalik pesan apa), dan di mana kamu akan membutuhkan mereka.
4. Draf, Bukan Menggambar. Buat sketsa, Bukan Ilustrasi
Ok, sekarang kita berada di langkah keempat dan akhirnya kamu bisa mulai meletakkan pena di atas kertas. Maaf, prosesnya memakan waktu selama ini, tetapi langkah sebelumnya sangat penting: Pepatah lama yang harus kamu perhatikan sebelum loncat ke 100% yang relevan dengan UX.
kamu menguraikan dan merepresentasikan fitur dan format, bukan mengilustrasikan dengan sangat mendetail. Jadi kamu harus mulai menuangkan ide-ide, itu adalah keharusan untuk langkah berikutnya.
Jangan memikirkan tentang estetika, jangan pikirkan tentang warna desainer UI bisa mengatasinya. Dan jika kamu satu-satunya desainer di perusahaan rintisan kamu yang masih baru lakukan saja itu belakangan ya Guys.
5. Tambahkan Beberapa Detail dan Lakukan Pengujian
Kalau kamu sudah memiliki alur dan kamu telah menetapkan ide-ide kamu dengan beberapa kolega yang bersangkutan. Langkah selanjutnya adalah menambahkan beberapa detail informasi untuk mempersiapkan wireframe kamu untuk peningkatannya, Megatron-style, to prototype-mode.
Tambahkan detail seperti kamu memproses layar, atau halaman buku secara alami: dari atas ke bawah dan kiri ke kanan. Ingat: wireframe adalah kerangka situs kamu. Kamu belum menambahkan apapun ke konten dan salinannya.
Untuk memperluas metafora agar nyaman, elemen-elemen ini adalah ligamen dan tendon yang akan menghubungkan bentuk dan fungsionalitas.
6. Mulailah Mengubah Wireframe Menjadi Prototype
Setelah kamu mendokumentasikan dan menindaklanjuti masukan dari prototipe pertama kamu, kamu bisa mulai mengembangkan prototipe dengan ke tingkat yang lebih sulit. Ada banyak tools, dari Proto.io hingga Adobe XD dan Framer, tetapi yang paling terkenal adalah Sketch dan Figma berbasis browser, baru (ish) kid-on-the-block.
Jadi inilah Panduan Awal untuk Membuat Wireframe, kalau tim OKEGUYS menggunakan software Figma nih Guys karena tampilannya yang sederhana dan cukup mudah untuk digunakan juga. Semoga juga kalian bisa memprakteknya juga yah.
Discussion about this post