7 alat wireframing dan prototyping terbaik untuk pembuat aplikasi

Akhir-akhir ini saya banyak berdiskusi tentang UI dan UX. Tidak ada yang mengeluh tentang ini, jadi saya kira kita telah mencapai titik di mana semua orang yang terlibat dengan pengembangan aplikasi menyadari pentingnya UI dan UX.

Ide aplikasi yang bagus dapat dengan mudah dirusak oleh antarmuka dan pengalaman yang tidak dipikirkan dengan matang. Dan dengan banyak alat yang sekarang tersedia untuk wireframing dan prototyping cepat, seharusnya tidak ada alasan untuk tidak menjalankan pengalaman yang brilian.

Meskipun istilah tersebut sering digunakan bersama, ada perbedaan yang jelas antara wireframe dan prototipe.

Gambar rangka adalah tata letak kerangka tanpa tulang dari struktur aplikasi Anda. Biasanya dilakukan tanpa warna apa pun - hitam dan putih sederhana - dan meskipun wireframe menunjukkan di mana teks, gambar, dan elemen desain lainnya akan pergi, itu tidak termasuk gambar, teks, dll. Namun, masing-masing elemen wireframe adalah ditampilkan pada skala yang sebenarnya. Alasannya adalah wireframes dimaksudkan untuk memfokuskan perhatian Anda pada struktur, bukan desain sebenarnya. Mirip dengan cetak biru untuk rumah atau bangunan: Anda mendapatkan gambaran yang jelas tentang struktur dan penempatan semuanya, tanpa terganggu oleh desainnya.

Prototipe berada di antara gambar rangka dan aplikasi yang berfungsi penuh. Bagian terpenting dari prototipe adalah penggunaan animasi, yang memungkinkan Anda memeriksa bagaimana aplikasi Anda akan merespons interaksi pengguna, dan transisi halaman atau layar. Prototipe juga dapat mencakup gambar aktual, kumpulan ikon, dan teks, tetapi ini ditentukan oleh tujuan prototipe. Jika Anda hanya menguji interaksi dan alur layar, Anda dapat membuat prototipe yang hanya menyertakan animasi dan mungkin sedikit warna. Jika Anda mencoba memvalidasi ide Anda, atau menawarkan kepada calon investor, Anda ingin prototipe Anda lebih dipoles, menggunakan gambar, teks yang tepat, dll.

Meskipun alat yang saya sertakan dalam ringkasan ini membuatnya lebih mudah untuk membuat prototipe, termasuk lebih banyak elemen di atas dan di atas animasi dan percikan warna berarti Anda memerlukan lebih banyak waktu untuk membuat perubahan apa pun pada prototipe.

1. Balsamiq

Jika Anda hanya tertarik untuk menyusun wireframe ide aplikasi Anda, maka Balsamiq adalah alat untuk Anda. Tersedia sebagai aplikasi desktop dan web, Balsamiq telah ada sejak 2008.

Wireframe dimaksudkan untuk membutuhkan sedikit usaha dan waktu, jadi Balsamiq dirancang untuk membantu Anda membuat wireframe Anda dengan cepat. Cukup tambahkan elemen dasar yang Anda butuhkan, lalu ubah ukuran, posisikan, dan sesuaikan sesuai kebutuhan. Gambar rangka yang Anda buat dengan Balsamiq akan terlihat sedikit kasar, tetapi itu disengaja. Tim kreatif di balik alat ini percaya bahwa gambar rangka yang lebih mirip sketsa mendorong curah pendapat. Yang merupakan alasan utama wireframing.

Kontrol versi sederhana akan membantu Anda melacak dari mana Anda memulai, dan di mana Anda sekarang. Dan hanya karena ini adalah gambar rangka bukan berarti Anda tidak bisa mendapatkan masukan dari calon pengguna / klien. Anda tidak dapat membuat prototipe yang sepenuhnya interaktif menggunakan Balsamiq, tetapi Anda dapat menautkan layar / halaman yang Anda buat untuk menghasilkan prototipe klik-tayang sederhana. Tidak ada animasi atau interaksi: tujuannya semata-mata untuk mendemonstrasikan aliran.

Dan jika Balsamiq tampak sedikit terlalu terbatas, Anda selalu dapat menambahkan ekstensi, templat, dan paket ikon yang dibuat oleh komunitas.

Balsamiq tersedia sebagai aplikasi desktop, dengan harga $ 89 / pengguna, aplikasi berbasis web mulai dari $ 12 / bulan, atau aplikasi tertaut Google Drive, dengan harga $ 5 / pengguna / bulan. Tetapi Anda dapat memulai dengan uji coba gratis terlebih dahulu, untuk melihat apakah itu alat yang tepat untuk Anda.

2. WireframePro

Meskipun lisensi MockFlow menyertakan akses ke delapan aplikasi berbeda, WireframePro yang akan Anda minati saat mulai mengembangkan aplikasi Anda sendiri. Sekali lagi ini adalah aplikasi berbasis web, dengan antarmuka seret dan lepas untuk membuat bingkai gambar dengan mudah.

Muncul dengan semua elemen UI standar, bersama dengan banyak komponen lain yang mungkin Anda perlukan, termasuk pilihan untuk jam tangan pintar Apple dan Android. Aplikasi ini juga memberi Anda akses ke Mock Store, yang menawarkan banyak pilihan template pihak ketiga yang dapat Anda gunakan untuk inspirasi, atau sebagai titik awal cepat untuk wireframe Anda sendiri.

Seperti semua alat yang tercantum di sini, WireframePro dirancang untuk individu dan tim, dengan alat kolaborasi yang ada di dalamnya. Inklusi yang bagus adalah kemampuan untuk secara otomatis menghasilkan spesifikasi untuk setiap elemen, jadi jika Anda tidak melakukan pekerjaan desain sendiri, desainer Anda akan memiliki akses mudah ke semua detail terkait desain.

Terakhir, saat berbagi proyek apa pun, Anda dapat menetapkan hak, membatasi beberapa orang menjadi hanya dapat melihat dan mengomentari proyek, sementara orang lain juga dapat mengeditnya.

WireframePro tidak memiliki paket gratis, tetapi Anda dapat mencobanya selama 30 hari sebelum beralih ke paket berbayar. Lisensi mulai dari $ 19 / bln untuk satu pengguna, dan $ 39 / bln untuk maksimal tiga anggota tim.

3. UXPin

Seperti namanya, tim di belakang UXPin menekankan pada UX. Tidak ada yang salah dengan itu, wireframing dan prototyping dimaksudkan untuk membantu Anda menyempurnakan UX aplikasi Anda. Dengan UXPin, Anda dapat menangani wireframing dan prototyping, jadi tidak perlu berpindah alat.

Seperti yang Anda harapkan, UXPin mendukung file sumber Sketch dan file Photoshop. Tetapi ia juga memiliki editor bawaan yang mendukung cuplikan kode CSS, memungkinkan Anda menyesuaikan elemen apa pun yang digunakan dalam kerangka gambar dan prototipe Anda. Dan UXPin membuatnya sangat mudah untuk melacak setiap iterasi dari setiap file yang Anda tambahkan atau buat, jadi Anda tidak perlu mengklik lusinan file untuk mencari versi aslinya.

Membuat kerangka gambar dasar dan prototipe cepat dan mudah, dengan semua interaksi prototipe standar tersedia. Secara alami, Anda masih dapat membuat interaksi khusus jika diperlukan. Dan setelah prototipe Anda siap, Anda dapat mengirimkannya kepada siapa saja untuk diuji, dengan semua interaksi direkam dalam video, bersama dengan audio dari setiap komentar penguji.

UXPin mendukung wireframing dan pembuatan prototipe situs web, aplikasi seluler, dan aplikasi web, dan dilengkapi dengan 14 titik putus yang telah ditentukan sebelumnya, sehingga Anda dapat dengan mudah melihat desain Anda di beberapa perangkat. Harga mulai dari $ 19 / bln untuk paket dasar, dan $ 29 / bln untuk membuka fitur lanjutan.

4. Prott

Meskipun Prott dicap sebagai alat prototyping, Prott juga menyertakan fitur wireframing. Jika ide aplikasi Anda tidak lebih dari sketsa yang digambar secara kasar, Anda dapat memotret sketsa Anda dan mengimpornya langsung ke dalam aplikasi. Sketsa ini kemudian dapat dianimasikan, atau digunakan sebagai dasar untuk wireframe Anda. Seret dan lepas bentuk yang telah ditentukan sebelumnya dan elemen UI langsung ke sketsa Anda untuk langsung beralih dari garis yang goyah, ke wireframe lo-fi profesional.

Prott menyertakan sejumlah besar kit UI untuk berbagai perangkat, dari iOS hingga Android dan web. Tetapi Anda juga dapat membuat pustaka elemen antarmuka Anda sendiri.

Alih-alih hanya membagikan prototipe Anda dengan orang lain, Anda sekarang bahkan dapat menyertakan peta terperinci yang dengan jelas menunjukkan struktur aplikasi Anda. Dan siapa pun yang Anda bagikan prototipe Anda dapat berkomentar langsung di setiap layar, sehingga lebih mudah bagi Anda untuk memahami apa kaitan komentar mereka.

Prott menawarkan uji coba 30 hari berfitur lengkap, dengan paket gratis yang tidak memiliki batasan selain jumlah proyek yang dapat Anda buat. Jika Anda perlu membuat lebih banyak proyek, Anda dapat beralih ke paket Starter atau Pro, dengan harga mulai $ 19 / bln.

5. InVision

InVision secara eksklusif untuk pembuatan prototipe, tetapi dengan dukungan untuk berbagai penggunaan. Dengan InVision Anda dapat dengan cepat membuat prototipe interaktif dari situs web, aplikasi web, atau aplikasi seluler Anda, lalu melihat prototipe tersebut pada perangkat yang sebenarnya. Dan ini termasuk tablet dan perangkat yang dapat dikenakan, bukan hanya ponsel.

Prosesnya sesederhana:

  • Tambahkan aset desain Anda (InVision mendukung GIF, PNG, JPEG, PSD, dan file sumber Sketsa) melalui seret dan lepas, atau dengan menyinkronkan dengan Dropbox.
  • Gambar hotspot di setiap aset, dan setel untuk ditautkan ke aset lain, URL eksternal, atau jangkar.
  • Tambahkan interaktivitas dalam bentuk isyarat (ketukan atau gesekan), area tetap (bilah menu, dll.), Dan transisi.

Setelah selesai, Anda dapat melihat proyek di ponsel, tablet, atau komputer, atau bahkan SMS atau email tautan ke teman dan kolega. Ini memudahkan Anda untuk melibatkan orang lain dalam proses desain, dengan siapa pun yang Anda kirimi tautan untuk dapat mengomentari setiap desain.

Harga InVision dimulai tanpa biaya untuk satu prototipe, $ 25 / bln untuk prototipe tak terbatas, dan $ 99 / bln untuk tim dengan maksimal 5 anggota.

6. Mengagumkan

Seperti InVision, aplikasi Marvel adalah untuk pembuatan prototipe. Ini termasuk dukungan standar untuk file Sketch dan Photoshop, atau Anda dapat menggunakan alat desain Canvas bawaan mereka. Marvel juga memiliki aplikasi iOS dan Android yang memungkinkan Anda untuk memotret coretan dan desain Anda sendiri, dan mengunggahnya langsung ke perpustakaan Marvel Anda.

Sangat mudah untuk membuat hotspot pada desain Anda, dengan lusinan interaksi dan transisi layar yang tersedia untuk menghidupkan prototipe Anda. Dan Anda dapat menguji prototipe Anda di banyak layar, termasuk Apple Watch.

Tentu saja, tidak ada alat pembuatan prototipe yang layak didiskusikan jika tidak menyertakan kolaborasi. Dan dengan Marvel Anda dapat memberi anotasi pada prototipe Anda untuk menyoroti area tertentu yang Anda ingin orang-orang komentari. Komentar dapat dibuat oleh siapa pun yang Anda kirimi prototipe Anda, tanpa perlu mereka membuat akun Marvel terlebih dahulu.

Harga di Marvel mulai dari $ 0 / bln untuk satu pengguna dan hingga dua proyek, tetapi dengan fitur terbatas. Dengan $ 14 / bln Anda mendapatkan proyek tak terbatas, dan semua fitur, dengan harga terpisah untuk tim dan klien perusahaan.

7. Proto.io

Proto.io adalah alat pembuatan prototipe populer yang menerima pembaruan besar-besaran pada tahun 2016. Proto.io menyertakan semua fitur yang diperlukan dalam alat pembuatan prototipe, tetapi pembaruan tersebut juga menghadirkan banyak fitur yang disederhanakan.

Bersamaan dengan UI yang didesain ulang yang membuat semua fitur inti lebih mudah diakses, Proto.io juga memberikan banyak penekanan pada animasi. Gerakan adalah fitur penting dari aplikasi seluler, dan fitur Transisi Status Proto.io memudahkan siapa saja untuk membuat dan menyesuaikan animasi dalam prototipe mereka.

Proto.io juga telah memperkenalkan pustaka pola desain interaksi, membuat penambahan interaksi menjadi mudah. Pola ini mencakup interaksi seperti menu geser-masuk, dan tarik untuk menyegarkan. Yang harus Anda lakukan adalah menambahkan interaksi ke proyek Anda, dan menyesuaikannya.

Versi baru Proto.io memperluas kemampuan Anda untuk meminta pengguna menguji dan mengomentari prototipe Anda. Ini terintegrasi dengan platform pengujian pengguna seperti Validately dan UserTesting, memberi Anda akses ke kumpulan pengguna nyata yang lebih besar. Dan dengan integrasi Lookback, Anda mendapatkan rekaman tak terbatas - hanya di iOS, untuk saat ini - yang menunjukkan kepada Anda bagaimana pengguna berinteraksi dan menavigasi aplikasi Anda.

Proto.io menawarkan uji coba 15 hari berfitur lengkap, setelah itu Anda dapat beralih ke akun gratis yang sangat terbatas. Paket berbayar mulai dari $ 29 / bln, tergantung pada ukuran tim Anda.

Kesimpulan

Saat Anda baru saja memulai pengembangan aplikasi, Anda mungkin ingin membuat wireframe dan prototipe ide aplikasi Anda. Tetapi ketika Anda merasa lebih nyaman dengan proses pengembangan, Anda dapat mempertimbangkan untuk melakukan satu atau yang lain.

Karena wireframe sangat mendasar dalam desain, mereka memaksa Anda untuk fokus untuk mendapatkan alur dan pengalaman pengguna yang benar. Prototipe dapat membantu Anda menyempurnakan aliran dan UX, menyoroti kekurangan desain, dan yang lebih penting, terlihat lebih baik daripada kerangka gambar jika Anda perlu mempresentasikannya kepada klien atau investor. Dan meskipun mungkin tergoda untuk memilih alat yang menggabungkan wireframing dan prototyping, faktor penentu harus selalu menjadi alat mana yang menyertakan semua fitur yang sebenarnya Anda butuhkan, dan paling nyaman digunakan. Dan karena setiap alat yang tercantum di sini menawarkan paket atau uji coba gratis, mengapa tidak menghabiskan satu hari untuk menguji semuanya sebelum membuat keputusan?