Hallo, kembali lagi di blog ku. Nah kali ini tentunya kita akan kembali membahas hal yang akan bermafaat untuk teman – teman semua. Hmm Kita akan membahas tentang wireframe, yang bisanya digunakan oleh UI/UX designer. Yuk langsung aja Kita bahas.!!

            Pengertian Wireframe

            Wireframe adalah sebuah kerangka yang berfungsi untuk membuat tata letak suatu website agar sesuai dengan keinginan klien sebelum masuk ke proses desaindan coding. Proses pada pembuatan wireframe ini dilakukan oleh seorang UI designer dengan menggunakan software khusus wireframe atau dapat menggunakan kertas secara manual.

            Wireframe merupakan tahapan penting sebelum stakeholder menyetujui letak-letak informasi untuk website atau aplikasi sebelum developer mulai mebuat antarmukanya dengan menggunakan kode.

            Wireframe juga digunakan designer untuk mengukur serta menilai bagaimana pengguna website atau aplikasi berinteraksi dengan antarmuka yang telah didesain. Informasi tersebut akan digunakan oleh designer untuk memahami pengguna lebih baik dan membuat produk yang mudah serta nyaman digunakan semua orang.

            Komponen Wireframe

            Komponen ini berguna agar para pengguna dapat semakin mudah dalam menemukan informasi yang dibutuhkan. Baiklah berikut beberapa komponen wireframe:

            1. Layout Utama

            Hal yang pertama yang perlu disiapkan dalam wireframe adalah layout utama, karena ini seperti bentuk dari website atau aplikasi nanti.bagian kecil yang masuk dalam layout utama ini yaitu header, menu navigasi, body, jenis dan ukuran font, sidebar.  

            2. Komponen Navigasi

            Komponen yang penting satu ini harus benar-benar terkonsep bagaiaman dan akan seperti apa, dimulai dari pengkonsepan wireframing ini agar dapt digunakan oleh pengguna dengan nyaman. Komponen navigasi ini ibaratnya peta dan petunjuk arah yang biasa digunakan para pengguna saat menjelajahi isi konten yang tersedia.

            3. Desain Informasi

            Desain informasi disini dimaksudkan sebagai cara mempresentasikan informasi atau konten yang akan disampaikan pada para pengguna dengan baik. Hal yang berkaitan dengan desain informasi ini ialah input, thumbnail, link, paragraph, gambar dan yang lainnya.

            4. Desain Interface

            Desain interface atau desai antar muka ini di dalam wireframe, seorang Ui designer melakukan seleksi penempatan elemen seperti timbol, link, juduk, text-align, ukuran font, dan lainnya.

            Manfaat Dari Wireframe

1. Menghemat waktu untuk edit dan revisi pada saat project pembuatan website sudah selesai

2. Membangun kepercayaan dengan konsumen karena apa yang akan didapatkan sudah tergambar jelas di depan

3. Memberikan gambaran website sejak awal

            Cara Membuat Wireframe

            Membuat wireframe tidak terlepas dari proses riset yang dilakukan untuk menemukan formula terbaik. Dalam hal ini riset bisa berarti melihat apa yang dilakukan oleh kompetitor di industri terkait, bisa juga dengan riset tata cara sebelum masuk proses produksi. Setelah selesai melakukan riset, saatnya masuk ke tahap pembuatan, baik dengan menggunakan bantuan tools atau dilakukan secara manual.

            Pada software desain, coba tentukan grid yang ingin digunakan. Kemudian definisikan hierarki informasi dengan typography yang jelas dan mudah dibaca.

            Jika membuat wireframe secara manual atau tanpa bantuan software, tipsnya gunakanlah alat tulis berwarna atau spidol, bahkan kalau perlu sediakan stabilo untuk memberikan tanda khusus pada elemen tertentu.

            Baiklah demikian pembahasan kita kali ini , semoga dapat bermanfaat dan jangan lupa berkunjung di lain waktu. Tetap jaga kesehatan. Terimakasih.