Assalamualaikum warahmatullahi wabarakatuh

Hai teman, jumpa lagi nih di blog kesayangan kita semua...

Hari ini aku bakal ngebahas mengenai Wireframe, kemaren kan aku ngebahas materi mengenai desain font / typography tuu, kalo sekarang aku bakal ngebahas mengenai desain wireframe. Yukk langsung aja ke pembahasannya.

DEFENISI WIREFRAME

Wireframe adalah sebuah kerangka yang berfungsi untuk membuat tata letak pada suatu website agar sesuai dengan bagaimana keinginan klien atau pelanggan sebelum masuk ke proses desain atau coding. 

Dimana komponen yang menjadi bahan untuk proses wireframe diantaranya meliputi bagian header, body/content, footer, sidebar, dan beberapa komponen tambahan lainnya.

TUJUAN WIREFRAME

Wireframe memiliki tujuan untuk memberikan pemahaman visual tentang sebuah halaman di tahap awal proyek sebelum memulai  proses desainnya. Wireframe juga dapat digunakan untuk membuat navigasi global dan sekunder untuk memastikan terminologi dan struktur yang digunakan untuk website dapat memenuhi harapan pengguna.

     Berikut adalah komponen dalam proses pembuatan wireframe website, diantaranya :

1.                                    Layout Utama

Hal pertama kali yang perlu dipersiapkan dalam pembuatan sebuah wireframe website adalah antarmuka (interface) 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

Navigasi adalah suatu bagian dari peta dan juga petunjuk arah yang biasa digunakan para pengguna untuk membantu menjelajahi isi konten yang ada. Bagian ini harus benar-benar dikonsep secara matang mulai dari proses wireframingnya agar kedepannya menjadi semakin nyaman untuk digunakan oleh pengunjung.

3.                                    Elemen Tambahan

Komponen selanjutnya yang perlu dipersiapkan 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.

PROSES PEMBUATAN WIREFRAME

1.      Lakukan Riset

Sebelum kamu membuat wireframe, Kamu harus terlebih dahulu memahami siapa audiens kamu melalui riset pengguna, melihat hal-hal apa yang dibutuhkan, membuat persona pengguna dan mendefinisikan kasus penggunaan, serta melengkapi ini semua dengan riset industri dan pesaing kamu.

2.      Desain Proses Wireframe

Desain adalah proses organik dan oleh karena itu setiap desainer memiliki cara menggunakan visual dan code yang berbeda-beda . Kamu harus bisa menentukan proses kamu sendiri dengan berbagai cara. 

3.      Tentukan Tools / Software Yang digunakan

4.      Setting Grid

5.      Menentukan Tata Letak dengan Kotak

Langkah selanjutnya, ialah mulai dengan menggambar kotak pada grid yang tadi kita input. Pikirkan tentang urutan informasi yang ingin kamu sampaikan kepada pengunjung website kamu.

6.      Mendefinisikan Hirarki Informasi dengan Typography

      Selanjutnya mulai isi desain tata letak kamu dengan konten sedikit demi sedikit untuk mengetahui apakah informasi tersebut terstruktur dengan baik. Informasi yang akan kamu sampikan haruslah jelas dan mudah dibaca. Menggunakan ukuran font yang berbeda sebagai permulaan adalah cara yang bagus untuk membedakan antara berbagai tingkat informasi desain kamu.

7.      Poles wireframe dengan Grayscale

Menggunakan Grayscale dapat membantu kamu menentukan kekuatan visual pada wireframe yang kamu buat sebelum nantinya diterapkan pada website. Disini kamu dapat melihat gambaran tampilan desain kamu tanpa harus memberikan warna.

8.      Mengubah format Wireframe Menjadi  Bentuk Visual