Manfaatkan Wireframe Sebagai Tahap Awal Pembuatan Desain Web

Di dalam proses pembuatan website ada beberapa tahap yang akan dilewati dalam pengerjaannya. Dalam tahap-tahap awal pengembangan ini kita akan banyak bertemu dengan client membahas apa maunya pihak client dengan web tersebut. Membahas fitur, content, image, tampilan dan sebagainya. Setelah client menjelaskan apa yang mereka inginkan dengan web tersebut dan kita akomodasikan maka selanjutnya giliran kita menuangkan apa yang diinginkan client ke dalam layout halaman webnya. Apakah dalam tahap ini kita langsung menuangkannya dalam bentuk visual designnya? Membuka photoshop dan membuat desain lengkap dengan warna, tekstur, font, image dan elemen desain lainnya. Tentu saja tidak, sebelum masuk ke tahap visual design kita perlu menuangkan apa yang diinginkan client ke dalam bentuk wireframe terlebih dahulu sebagai tahap awal.

Contoh Wireframe

Apa itu Wireframe?
Wireframe adalah kerangka dasar/blueprint dari halaman web yang akan kita bangun. Secara garis besar di dalam wireframe ini kita menempatkan elemen-elemen penting dari halaman web tersebut pada posisinya masing-masing seperti banner, body content, menu link, kolom, footer maupun fitur-fitur lainnya yang ada dalam web nantinya. Secara visual tampilan dari wireframe ini hanya terdiri dari kotak dan garis yang menandakan posisi dari masing-masing elemen dari layout halaman web.

Pertimbangan Pemanfaatan Wireframe

• Dengan membuat wireframe kita membantu client untuk fokus pada kerangka utama dari pembangun halaman web tersebut.

• Dengan wireframe kita bisa menggiring client untuk fokus pada fitur, elemen dan posisinya dalam web tanpa terganggu perhatiannya oleh warna, typografi atau elemen desain lainnya.

• Dengan wireframe yang hanya berupa kotak hitam-putih akan lebih mudah bagi kita untuk mendeteksi apa yang tidak bekerja dari sisi usability, fungsionalitas. Ibarat rumah wireframe menyajikan layout rumah dalam bentuk draftnya dimana posisi kamar tamu, kamar tidur, kamar mandi, teras, dapur. Sehingga akan mudah bagi client untuk melihat sisi fungsionalitas dan usabilitynya.

Tool Membuat Wireframe

Ada banyak tool yang bisa kita gunakan utuk membuat wireframe diantaranya Cacoo, Jumpchart, Gliffy , Mockflow yang memiliki toolset dan feature yang bagus. Ada juga  sebagian yang menggunakan Adobe Illustrator, bisa juga secara manual menggunakan pensil dengan cara membuat sketch di atas kertas.

Kemudahan Revisi
Dengan adanya wireframe tentu  akan mudah bagi kita untuk memenuhi permintaan revisi dari client. Kita hanya mengecilkan kotak banner bila client merasa banner yang ada terlalu lebar. Kita hanya memidahkan posisi dari fitur tertentu ke posisi lain bila client berkeinginan seperti itu. Bila client menganggap button tertentu terlalu kecil maka akan mudah bagi kita untuk merevisinya. Wireframe sangat memudahkan kita dalam melakukan revisi tanpa membutuhkan waktu lama.

Hanya karena warna button yang tidak disukai client dari layout kita desain dalam bentuk mockup lengkap bisa saja client minta untuk di redesain secara keseluruhan, padahal secara layout tidak bermasalah. Hal ini bisa saja kita hadapi bila kita enggan melalui tahap wireframe.

Hemat Waktu dan Tenaga
Dengan mengisolasi revisi yang diminta client hanya pada tahap wireframe tentu akan menghemat waktu dan tenaga. Bisa kita bayangkan bila harus merombak layout saat layout sudah jadi dalam bentuk mockup Photoshop full color lengkap dengan warna, tekstur, tipografi, elemen desain atau sudah berbentuk halaman HTML/ CSS tentu menjadi lebih rumit. Wireframe membantu kita menyelesaikan masalah revisi yang membuat kita bisa fokus ke tahap selanjutnya tanpa terganggu dengan revisi berarti.