Membuat desain untuk produk apa pun, terutama untuk situs web atau aplikasi adalah proses berlapis-lapis.

Sangat diinginkan untuk mengikuti semua tahapan untuk memiliki produk profesional dan memastikan bahwa semua detail diperhitungkan. Pada artikel ini, kami akan menceritakan secara singkat tentang tahapan proses desain aplikasi / web seluler seperti:

·         Wireframing

·         Membuat Mockup

·         Pembuatan prototipe

Istilah-istilah ini sering digunakan sebagai sinonim satu sama lain, yang salah dan menyebabkan banyak kebingungan di antara klien dan pendatang baru di bidang desain. Mari kita luruskan dengan terminologi dan mengapa setiap item merupakan tahap penting dalam alur pengembangan.

·         Wireframe adalah skema dasar yang menampilkan elemen tanpa semua detail

·         Mock-up adalah statika kesetiaan tinggi  dari desain masa depan

·         Prototipe adalah simulasi mendetail dari desain masa depan

Wireframing

 mengapa sangat diinginkan untuk membuat kerangka gambar untuk produk masa depan Anda dan tidak pernah mengabaikan langkah proses pengembangan ini? Berikut adalah alasan terpenting, mengapa wireframing sangat membantu:

·         potret konseptual arus logis produk masa depan;

·         deskripsi interaksi pengguna dengan aplikasi/situs dan bagaimana hal itu akan memenuhi kebutuhan klien;

·         dokumen dasar untuk penyesuaian lebih lanjut baik untuk tim dan klien.

Wireframing membantu Anda menetapkan hierarki informasi dan di mana elemen kunci akan ditempatkan. Ini sering digunakan sebagai dokumen informal bagi tim untuk membuat catatan untuk berbagai fungsi.

Maket

Ada berbagai pendapat tentang kedalaman detailisasi mockup. Namun demikian, untuk membuat yang memuaskan, baik untuk klien dan tim desainer, sangat disarankan untuk mengikuti daftar periksa ini:

·         mengembangkan navigasi yang dipikirkan dengan matang;

·         desain UI yang sangat detail;

·         gunakan paket identitas perusahaan lengkap: warna, font, logo, dll.

Pembuatan prototipe

Ada beberapa skenario yang biasanya terjadi dengan prototipe.

Pertama, dan yang sangat singkat – Anda mungkin tidak memilikinya sama sekali

Kasus lainnya adalah:

• prototipe akan mengikuti setelah membuat gambar rangka dan mockup – varian yang cukup tradisional;
• ini bisa menjadi proses terpisah jika Anda perlu menunjukkan dan menguji produk Anda dalam waktu yang sangat singkat.

·         Dalam kedua kasus yang tercantum di atas, prototipe dibuat untuk melakukan hal berikut:

• Untuk mendemonstrasikan berbagai skenario pengguna;
• Untuk memeriksa bahwa situs atau halaman aplikasi bereaksi dan saling mengubah dengan benar;
• Untuk melihat apa yang dapat dioptimalkan, ditambahkan atau dihapus.

Apa keuntungan yang Anda dapatkan dengan prototyping?

Dengan pandangan komprehensif tentang desain dan fungsionalitas masa depan yang disediakan oleh prototipe, Anda dapat yakin bahwa Anda melakukan pekerjaan dengan benar (atau mungkin tidak – sesuatu terjadi). Anda mendapatkan satu kesempatan lagi untuk memeriksa semuanya dari dalam ke luar.

Alat Prototipe yang Direkomendasikan

Balsamiq Mockups – mungkin alat yang paling terkenal untuk tujuan ini. Ini terutama membantu untuk membuat, mengedit, dan berbagi gambar rangka cetak biru dengan tim Anda. Meskipun tidak memungkinkan untuk membuat prototipe interaktif. Anda dapat menggunakannya melalui browser apa pun (memerlukan Flash) mulai dari $12 per bulan atau mengunduhnya sebagai aplikasi Adobe AIR. Tersedia untuk pengguna Windows, Mac, Linux OS, Android dan iOS. Lisensi pengguna tunggal berharga $79.

Axure adalah perangkat lunak desktop yang memungkinkan untuk membuat gambar rangka sederhana dan prototipe kompleks. Anda dapat membagikan hasilnya dengan klien Anda dan bekerja sama dengan tim dalam alat ini. Ini benar-benar menyediakan berbagai macam fungsionalitas dan tersedia untuk Windows dan Mac OS. Satu-satunya momen yang menggelitik adalah lisensi standar mulai dari $289.

Pidoco adalah aplikasi berbasis web dengan berbagai kemungkinan. Hal ini memungkinkan untuk membuat gambar rangka dan prototipe interaktif untuk web, perangkat iOS dan Android dan menyediakan berbagai macam template, mendukung ekspor ke PNG, HTML, memberikan akses bersama ke proyek dan banyak lainnya. Harganya bervariasi dari $12 sampai $175 per bulan.

Penultimate adalah alat sketsa yang dikembangkan hanya untuk pengguna iPad. Ini sangat berguna bagi mereka yang ingin membuat gambar rangka saat bepergian di perangkat favorit mereka. Dapat disinkronkan dengan Evernote. Harganya $12-23.

Framebox adalah alat sketsa ringan gratis berbasis web. Akan sangat membantu untuk membuat kerangka gambar untuk proyek Anda dengan cepat dan membagikannya dalam URL unik dengan tim Anda.

Justinmind juga merupakan layanan berbasis web yang memberi Anda kesempatan untuk merancang gambar rangka dan prototipe interaktif untuk semua jenis platform dan mengujinya pada perangkat tertentu. Ini memiliki berbagai alat dan templat, juga mendukung ekspor ke HTML yang tidak hanya memungkinkan Anda menampilkan gambar statis tetapi juga menunjukkan cara kerja produk dalam gerakan. Kebijakan harga: $29 per bulan, $19 per bulan untuk langganan tahunan atau $495 pembayaran satu kali untuk jangka panjang.