Apa kabar nih.? Baik baik aja kan? Ya mimin harap begitu. Dimasa pandemi ini terus jaga kesehatan dan inget pesan ibu yaa. Okee kali ini mimin mau bawain artikel tentang MEMAHAMI APA ITU WIREFAME. Tanpa memperpanjang muqadimah langsung aja simak pembahasan berikut
A. Pengertian Wireframe
Wireframe dapat kita artikan sebuah kerangka. Pengertian sederhananya adalah kerangka gambar. Jadi, wireframe adalah sebuah desain kerangka dasar pada web maupun aplikasi. Di dalam wireframe terdapat beberapa bagian seperti banner, header, content, footer, link, form, dan lain-lain.
Proses pembuatan suatu wireframe dapat disebut wireframing. Dimana wireframing ini biasanya akan di lakukan oleh UI designer. Biasanya ia akan melakukan peramcangan terhadap komponen - komponen yang sudah di sebut sebelumnya. Oleh karena itu UI designer akan bertanggung jawab akan komponen komponen yang akan di aturnya.
Komponen wireframe website
Seperti kita ketahui, website memiliki beberapa komponen yang wajib ditampilkan agar pengunjung bisa semakin mudah menemukan informasi yang dibutuhkan. Adapun komponen dalam proses pembuatan wireframe website sendiri meliputi beberapa poin berikut ini:
1.Layout Utama
Hal pertama yang perlu dipersiapkan dalam membuat wireframe website adalah antarmuka atau layout utama. Elemen yang termasuk dalam layout sendiri meliputi bagian kepala (header), menu navigasi, body, pemilihan jenis dan ukuran font, hingga pemilihan letak sidebar apakah ada di sebelah kiri atau sebelah kanan.
2.Komponen Navigasi
Ibarat sebuah tempat wisata, navigasi adalah bagian dari peta dan juga petunjuk arah yang biasa digunakan para pengguna untuk membantu menjelajahi isi konten yang ada. Jadi, bagian ini harus benar-benar dikonsep secara matang mulai dari proses wireframing agar kedepannya semakin nyaman digunakan oleh pengunjung.
3.Elemen Tambahan
Selain membuat layout antarmuka serta navigasi, komponen selanjutnya yang perlu Anda siapkan pada saat membuat wireframe website adalah elemen pendukung. Bagian ini biasanya memiliki jumlah berbeda-beda tiap website.
Misalnya, untuk website toko online setidaknya memerlukan fitur form konfirmasi pemesanan, fitur cek resi, serta layanan chat untuk diskusi antara penjual dan pembeli.
Sementara untuk website berbasis artikel seperti detik atau tribun, Anda harus memperhatikan fitur subscribe newsletter, kolom komentar, atau tombol bagikan.
Manfaat Wireframe dan Keuntungannya
- Selain mampu memudahkan tugas web developer, adanya wireframe dalam proses pembuatan website juga memberikan banyak keuntungan dari segi relasi terhadap klien. Berikut beberapa contoh manfaat wireframe.
- Menghemat waktu untuk edit dan revisi pada saat project pembuatan website sudah selesai
- Membangun kepercayaan dengan konsumen karena apa yang akan didapatkan sudah tergambar jelas di depan
- 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 Anda membuat wireframe secara manual atau tanpa bantuan software, tips dari kami gunakanlah alat tulis berwarna atau spidol, bahkan kalau perlu sediakan stabilo untuk memberikan tanda khusus pada elemen tertentu.
Aplikasi Untuk Membuat Wireframe
1.MockFlowmockflow
MockFlow merupakan software desain yang mampu membuat rancangan website maupun aplikasi. Guna mengakomodir pembuatan wireframe oleh para UI Designer, MockFlow menyediakan fitur bernama WireframePro.
Melalui fitur tersebut, Anda bisa membuat rancangan UI secara flawless berkat adanya visualisasi desain secara langsung. Jika Anda ditugaskan dalam sebuah team, layanan ini juga menyediakan fitur cloud-base storage untuk melakukan kolaborasi dengan orang lain.
2.MockingbirdMockingbird wireframe
Mockingbird adalah layanan software pembuat wireframe yang mampu menggabungkan ide, informasi, dan interaksi. Membuat desain dengan mockingbird juga terlihat lebih menyenangkan, karena elemen bisa diubah secara drag and drop.
3.Cacoocacoo software
Cacoo adalah layanan yang tepat jika Anda sedang membutuhkan tools yang simpel namun bisa meningkatkan dan mempermudah workflow.
Nah sekian dulu artikel dari Sobat Diksi, tinggalkan saran dan kritik kalian dikolom komentar yaa,, terus pantengin blog ini untuk mendapatkan artikel artikel lainnya.
SEE YOU NEXT TIME.!! SALAM LITERASI.!!
0 Komentar