Wireframe - Pengenalan wireframe & Tutorial Installasinya

Posted by : fadly injoker 2017/08/16

Assalamualaikum wr.wb

Pada kesempatan kali ini saya akan membahas tentang apa itu wireframe, kegunaan, manfaat dan bagaimana cara installasinya.

1.Latar Belakang

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.

2.Maksud tujuan

   Mempelajari dan memanfaatkan tools yang dapat digunakan untuk pelengkap perencanaan awal dalam membuat design / tampilan halaman web atau lainnya.

3.Alat dan Bahan

   - Wireframesketcher Download Disini
   - Cacco Kunjungi Disini
   - Mockingbird Kunjungi Disini
   - Mockflow Kunjungi Disini

4. 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.

Mengapa Banyak web designer yang menggunakan wireframe..?
Manfaat?

* 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

5. Langkah kerja

Bagaimana Cara me-Install ... ?

Kali ini saya akan menjelaskan bagaimana cara me-install wireframe . aplikasi yang saya gunakan wireframe sketcher jika teman - teman belum memilikinya bisa download terlebih dahulu "Wireframesketcher Download Disini" Aplikasi ini merupakan aplikasi offline jadi teman - teman bisa menggunakannya tanpa memerlukan koneksi internet.

1. Download terlebih dahulu Wireframe sketcher. Ketik pada URL.

"www.wireframesketcher.com

Gambar 1.1 Alamat URL wireframesketcher

2. Klik Download

Gambar 2.1 Halaman donwload

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

Gambar 3.1 Pilihan sesuai OS yang digunakan

4. Save file download.

4.1 Save

5.Tunggu Sampai download selesai .

5.1 file download tersimpan

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

6.1 Wireframe sudah terinstall

6. 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.

7. Referensi