Wireframe

assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan berbagi tentang wireframe. Apa itu wireframe ? Mari kita bahas.

I. Latar Belakang
Di dalam proses pembuatan website maupun sebuah program 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. Sebelum masuk ke tahap visual design kita perlu menuangkan apa yang diinginkan client ke dalam bentuk wireframe terlebih dahulu sebagai tahap awal.

II. Maksud dan Tujuan
Mempelajari dan memanfaatkan tools yang dapat digunakan untuk pelengkap perencanaan awal dalam membuat design / tampilan halaman  web maupun program aplikasi.

III. Alat dan Bahan
- Wireframesketcher  Download Disini
- Cacco Kunjungi Disini
- Mockingbird Kunjungi Disini
- Mockflow Kunjungi Disini

IV. Pembahasan
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.

Fungsi
Mockup / Wireframe berfungsi sebagai acuan kerja pembuatan website agar tidak menyimpang dari tujuan awal membuatnya. Biasanya, pembuatan website yang menggunakan mockup lebih efektif dan terstruktur karena pada saat pembuatan mockup itu sudah ditentukan kerangka pembuatan websitenya.

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.

Aplikasi pembuat Wireframe
Untuk aplikasi pembuat Wireframe sangat banyak juga pilihannya, anda bisa memanfaatkan secara gratis namun biasanya hanya untuk beberapa saat / saat kuota fitur untuk trialnya habis anda akan diharuskan untuk beralih menjadi PRO untuk tetap bisa memanfaatkan penggunaan aplikasi tersebut, berikut beberapa Aplikasi pembuat wireframe :
- Wireframesketcher  Download Disini
- Cacco Kunjungi Disini
- Mockingbird Kunjungi Disini
- Mockflow Kunjungi Disini

V. Langkah kerja
Cara menginstal wireframe
Kali ini saya akan menjelaskan bagaimana cara me-install wireframe. Aplikasi yang saya gunakan adalah wireframe sketcher, dapat didownload terlebih dahulu Disini.

1. Download terlebih dahulu Wireframe sketcher. Ketik pada URL.
"www.wireframesketcher.com

2. Klik Download

3. Kemudian akan muncul halaman seperti dibawah ini. Klik "Download for ubuntu/Debian 64-bit(57MB)" karna kebetulan laptop saya menggunakan OS Linux Mint 17.3 serta 64-bit.

4. Save file download.

5.Tunggu Sampai download selesai .

6. Buka file pada software manager.
Menu => Software Manager => Search wireframe. Jika sudah ada artinya wireframe sudah terinstall, teman-teman bisa langsung menggunakannya.


VI. Kesimpulan
Kesimpulannya adalah kita dapat merancang terlebih dahulu desain web/halaman - halaman lain dengan mudah dengan menggunakan aplikasi yang telah ada untuk perancangan awal sebagai langkah-langkah membuat web design.

VII. Referensi
- http://wireframesketcher.com/download.html
- http://bukalebar.blogspot.co.id/2015/01/wireframe-proses-mendesain-layout.html

Sekian yang dapat saya posting kali ini, terimakasih semoga bermanfaat.
wassalamualaikum wr. wb.