Desain merupakan bagian yang cukup penting untuk sebuat website. Tidak heran, untuk merancang sebuah website dibutuhkan proses desain yang cukup kompleks dan lumayan memakan waktu lama. Namun, seiring dengan perkembangan teknologi yang semakin maju, mendesain website bukanlah hal yang menyulitkan lagi.
Proses desain website jauh lebih mudah dengan penggunaan wireframe. Wireframe merupakan kerangka dasar dari halaman website, yang berisikan berbagai komponen seperti banner, header, content, footer, link, form, dan lain-lain. Proses wireframe adalah langkah penting dalam proses desain layar. Karena, wireframe membantu UI desainer dalam merencanakan tata letak dan interaksi antarmuka tanpa terganggu oleh warna, pilihan jenis huruf atau bahkan salinan. Berikut ini Vocasia sudah merangkumkan cara mudah untuk membuat wireframe website untuk pemula.
Cara Membuat Wireframe Website
1. Lakukan Riset
Langkah pertama dalam membuat wireframe website adalah melakukan riset. Hal tersebut dibutuhkan dengan tujuan untuk membuat rancangan website yang sesuai dengan trend yang populer. Selain itu melakukan riset juga berguna untuk memahami target pengguna, hal-hal yang pengguna butuhkan, dan membuat persona pengguna.
Pastikan kamu juga melakukan riset pada website lain secara umum atau website kompetitor. Hal itu akan membantu kamu untuk mendapat beragam referensi rancangan desain website yang disukai pengunjung. Tidak hanya itu, melakukan riset kompetitor juga dapat membantu menganalisis desain yang mereka gunakan untuk menjadi tolak ukur dalam membangun wireframe.
Baca Juga: 7 Cara Mudah Desain Website
2. Merancang Proses Wireframe
Langkah kedua adalah merancang proses wireframe. Desain adalah sebuah proses yang organik, sebab itu setiap desainer memiliki pendekatan terjemahan visual dan kode yang berbeda-beda. Usahakan kamu menemukan proses kamu sendiri yang memberikan kenyamanan.
Terdapat banyak proses khas dalam pembuatan wireframe, terkadang kamu harus mencobanya sendiri untuk beberapa kali, sebelum menemukan proses yang paling efektif. Berikut merupakan contoh proses pembuatan wireframe yang bisa kamu coba.
Contoh proses pembuatan wireframe. Sumber: techfor.id
3. Tentukan Tools
Langkah selanjutnya setelah merancang proses adalah menentukan tools yang ingin digunakan untuk membangun desain wireframe. Terdapat banyak referensi tools yang dapat kamu coba untuk membangun desain wireframe. Mulai dari tools yang dapat diakses secara yang gratis hingga yang berbayar. Kamu dapat menentukan sendiri mana yang sekiranya lebih sesuai dengan gaya desain dan modal yang kamu miliki. Berikut ini beberapa referensi tools, diantaranya
- Balsamiq
- ProtoShare
- Indesign
- Illustrator
- Firework
- Adobe CS
- FairBuilder
- Axure
- Omnigraffle
4. Lakukan Pengaturan Grid
Langkah ketiga dalam pembuatan wireframe website adalah melakukan pengaturan grid. Pada langkah ini, kamu diharapkan mengatur halaman website menjadi beberapa kolom sebagai tempat dari komponen yang ingin kamu gunakan.
Fungsi dari melakukan pengaturan grid ini ialah membuat proses penataan yang lebih mudah dengan hasil yang rapi. Sehingga, tampilan website akan terlihat lebih proporsional dengan beberapa komponen di dalamnya.
5. Tentukan Tata Letak
Setelah melakukan pengaturan grid, langkah selanjutnya dalam pembuatan wireframe adalah menentukan tata letak elemen website. Dengan bantuan grid yang sudah dibuat, kamu dapat menggunakannya untuk setiap komponen yang akan digunakan. Pastikan untuk mengatur komposisi komponen dengan baik.
Pada tahap ini kamu dapat mengatur penepatan logo, apakah lebih baik di tengah halaman website atau berada di sisi kanan kiri. Selain itu kamu juga dapat menentukan seberapa besar bagian footer website tersebut. Sesuaikan letak-letak komponen tesebut dengan keinginan atau rancanganmu. Kamu juga dapat meminta pendapat tim untuk tata letak yang terbaik untuk rancangan websitemu.
Baca Juga: 6 Cara Mudah Mendesain Logo
6. Tentukan Hierarki Informasi dengan Tipografi
Langkah keenam dalam pembuatan wirefame ialah menentukan hierarki informasi dengan tipografi untuk konten website. Dalam menuliskan informasi untuk konten, pastikan strukturnya sesuai dengan keinginan kamu dan lakukan secara bertahap.
Selain itu, pastikan juga informasi yang kamu ingin sampaikan kepada audiens harus jelas dan mudah dibaca. Kamu dapat menyiasatinya dengan penggunaan ukuran font yang berbeda untuk membedakan antara tingkatan informasi.
Pada tahap ini, kamu tidak perlu takut untuk bereksperimen. Inti dari proses wireframing sendiri adalah membuat iterasi sebanyak mungkin untuk mempersempit cara komunikasi dalam mewakilkan informasi yang ingin disampaikan.
Baca Juga: Apa Itu Lorem Ipsum?
7. Ubah Wireframe ke Visual
Langkah terakhir dalam pembuatan wireframe website adalah mengubah format wireframe menjadi bentuk visual. Jika pada rancangan proses kamu menggunakan Illustrator untuk wireframing, maka kamu dapat mengekspor ke dalam format .psd yang sebagian besar jenis lapisannya dapat diedit. Lalu, jika kamu menggunakan Photoshop, kamu tidak perlu mengedit terlalu banyak. Sebab dalam Photoshop dilengkapi alat kontrol tipe inferior.
Leave a Reply