Langsung ke konten utama

Desain Wireframe

Apa itu Wireframe ?

Wireframe adalah kerangka untuk membuat suatu item pada halaman website yang dilakukan sebelum proses desain yang sesungguhnya dimulai. Wireframe dapat berupa sketsa yang digambar dengan tangan, visualisasi yang dibuat dalam perangkat lunak atau halaman kode. Wireframe digunakan untuk menyusun tata letak, navigasi, organisir konten dan panggilan untuk bertindak. Untuk membuat wireframe, kita bisa menggunakan alat gambar sederhana seperti kertas dan spidol atau menggunakaan tools seperti Balsamiq, Sketch, Figma dan tools-tools lainnya. Sedangkan Wireframing adalah cara untuk merancang layanan situs web ditingkat struktural.

Manfaat Fireframe
  • Wireframe berguna untuk web developer untuk membantu pekerjaan meraka agar proses perkembangan dapat terstruktur dan terarah. 
  • 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.
Kelebihan Wireframe
1. Memberikan gambaran awal dari layout aplikasi atau website yang akan dibuat.
2. Membangun kepercayaan dengan user.
3. Menghemat waktu dan biaya.

Elemen Wireframe
1. Desain Informasi
Desain informasi adalah penempatan presentasi dan memprioritaskan informasi dengan cara yang memfasilitasi pemahaman. Desain informasi adalah bidang desain pengalaman pengguna, yang dimaksudkan untuk menampilkan informasi secara efektif untuk komunikasi yang jelas. Untuk situs web, elemen informasi harus diatur sedemikian rupa sehingga mencerminkan tujuan dan tugas pengguna.

2. Desain Navigasi 
Desain untuk Navigasi pada Web harus memiliki tampilan yang mudah digunakan. Sistem navigasi pada web hendaklah memudahkan pengguna dalam memindahkah halaman satu ke halaman lainnya melalui situs web.  Navigasi berguna untuk memberikan petunjuk bagi pengguna agar tidak membingungkan. 

3. Desain Interface
pada bagian ini, merupakan bagian memilih dan mengatur elemen interface agar memungkinkan pengguna berinteraksi dengan sistem. Bagian ini merupakan bagian untuk memilih penempatan elemen seperti Judul, Tombol, Link, Text-Align, Font-Size dan lainnya. 

Tools Membuat Wireframe
Apabila Anda ingin membuat wireframe maka dapat menggunakan beberapa tool berikut ini, dia antaranya Cacoo, Jumpchart, Gliffy serta Mockflow yang memiliki toolset dan feature yang bagus. Selain itu, ada yang sebagian yang menggunakan Adobe Illustrator. Anda pun bisa melakukan secara manual dengan cara menggunakan pensil lalu membuat sketch di atas kertas.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...
Posting Komentar
Baca selengkapnya

Implementasi HTML Bootstrap Design Web ke WordPress

Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress. Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding. Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis. Ada tiga macam cara convert HTML ke WordP...
Posting Komentar
Baca selengkapnya

Logika Fuzzy (Model Sugeno dan Tsukamoto)

Logika Fuzzy adalah metodologi sistem kontrol pemecahan masalah yang cocok digunakan untuk diimplementasikan pada berbagai sistem, mulai dari sistem yang sederhana, sistem kecil, embedded system, jaringan PC, multichannel atau workstation berbasis akuisisi data dan sistem kontrol. Logika ini  merupakan suatu logika yang memiliki nilai kekaburan atau kesamaran antara benar atau salah. Logika Fuzzy sering digunakan dalam bidang elektronika. Konsep logika ini pertama kali diperkenalkan oleh Prof. Lotfi Astor Zadeh pada tahun 1962. A. Model Sugeno Model Sugeno adalah metode interfensi fuzzy untuk aturan yang dipresentasikan dalam bentuk IF-THEN, output yang dihasilkan sistem tidak berupa himpunan fuzzy, tetapi berupa konstanta atau persamaan linear. Sebagai fungsi keanggotaan dari konsekuen, Michio Sugeno mengusulkan penggunaan singleton. Singleton adalah sebuah himpunan fuzzy dengan fungsi keanggotaan yang pada titik tertentu mempunyai sebuah nilai dan 0 diluar titik tersebut. Du...
Posting Komentar
Baca selengkapnya