Alat Wireframing Terbaik untuk Aplikasi Anda

Diterbitkan: 2018-03-23

Kami membuatkan Anda daftar alat wireframing yang dapat membantu membuat pembuatan aplikasi atau situs web Anda tidak terlalu menakutkan. Jika Anda mencari alat prototipe yang hebat , kami juga menyertakan beberapa saran untuk itu.

Membuat aplikasi atau situs web baru adalah prestasi terhormat yang tidak banyak orang akan capai dalam hidup mereka. Ini tidak berarti Anda harus menyerah untuk melakukannya, tetapi Anda harus meneliti dan memahami semuanya sebelum menyelam terlebih dahulu. Banyak pemula mengalami kesulitan mencari tahu perbedaan antara gambar rangka, prototipe , dan maket, jadi posting ini ada di sini untuk membantu Anda memahami masing-masing.

INDEKS

APA ITU WIREFRAME?
ALAT WIREFRAMING TERBAIK TAHUN 2018
APA ITU PROTOTIPE?
ALAT PROTOTYPING TERBAIK TAHUN 2018
BUAT MOCKUP PRODUK ANDA

APA ITU WIREFRAME?

Anda memiliki ide jenius untuk aplikasi atau situs web baru, tetapi bagaimana Anda mulai mengubahnya menjadi produk yang sebenarnya? Dengan bingkai gambar! Ini adalah langkah pertama dalam proses perencanaan, jadi penting bagi Anda untuk tidak melewatkannya.

Dasar-dasar Wireframe

Sebelum membuat keputusan desain utama, aplikasi atau situs web Anda terlebih dahulu membutuhkan tata letak fungsional yang masuk akal. Di sinilah wireframe masuk. Kebanyakan orang memulai dengan membuat sketsa gambar tangan tentang tampilan aplikasi atau situs web yang mereka inginkan. Langkah selanjutnya adalah mengubah sketsa ini menjadi layout atau outline digital yang terlihat lebih tertata dan profesional.

Gambar rangka Anda perlu mengomunikasikan struktur dasar halaman tanpa menyertakan elemen desain atau konten sebenarnya.

Bekerja melalui gambar rangka sebelum mulai memperindah apa pun akan memungkinkan Anda untuk menangkap kesalahan dalam kegunaan yang akan sulit untuk ditangani nanti. Pada tahap ini, lebih penting untuk memastikan elemen yang disertakan masuk akal dan berfungsi, terutama untuk audiens target Anda. Jika Anda mencoba menarik perhatian investor, gambar rangka juga akan membantu mereka memahami produk Anda dengan lebih mudah. Faktanya, tidak menyiapkan setidaknya wireframe dapat membuat investor kehilangan minat dengan sangat cepat. Elemen yang termasuk dalam wireframe cenderung berupa kotak untuk judul, tombol, kotak teks, dan kotak gambar.

Gambar rangka vs. Mockup

Sangat mudah untuk membingungkan wireframe dengan mockup karena mereka mengandung elemen yang sangat mirip. Namun, saat bekerja dengan tim pengembang, desainer, dan investor, Anda perlu memahami apa yang membedakan mereka.

Untuk memulai, wireframe digunakan untuk mengatur konten dan fitur aplikasi Anda , tetapi dengan cara yang sangat sederhana. Anggap saja sebagai garis besar yang menunjukkan struktur dasar dari apa yang akan disertakan dalam aplikasi Anda. Setelah Anda mulai menambahkan elemen lain, seperti warna, ikon, gambar, font, dan foto, itu akan mulai berubah menjadi mockup.

Mockup menyediakan representasi fidelitas menengah dari aplikasi atau situs web Anda dalam pengembangan. Ini adalah representasi yang jauh lebih realistis dari apa aplikasi Anda sedang dibentuk. Pikirkan langkah dalam proses ini sebagai menambahkan sedikit substansi pada wireframe barebone Anda atau memberinya sedikit lebih banyak kehidupan.

ALAT WIREFRAMING TERBAIK

BALSAMIQ
MOCKPLUS
MOQUPS
WIREFRAME.CC
MOCKFLOW

BALSAMIQ

Tersedia untuk semua sistem operasi karena berbasis web.

Fitur utama: Balsamiq adalah alat wireframing yang sangat direkomendasikan yang memungkinkan pengguna membuat wireframe untuk aplikasi desktop, aplikasi seluler, situs web, jendela dialog, aplikasi web, aplikasi tablet, dan banyak lagi . Membuat wireframe Anda melalui Balsamiq mirip dengan menggambar di papan tulis, dan program ini juga memungkinkan Anda untuk menarik dan melepas elemen UI, mendapatkan umpan balik tentang sketsa dari tim Anda, merevisi desain, dan menyempurnakan pekerjaan Anda secara real time.

Harga: Harga alat ini akan bervariasi tergantung pada sejumlah situasi. Anda dapat memulai dengan uji coba gratis 30 hari, tetapi setelah itu Anda harus membayar biaya bulanan atau tahunan tergantung pada platform yang Anda pilih. Misalnya, versi cloud akan dikenakan biaya $9 per bulan atau $90 per tahun untuk maksimal dua proyek. Versi desktop akan dikenakan biaya $89 untuk satu lisensi pengguna.

Bonus: Balsamiq menawarkan kursus gratis yang tersedia melalui Udemy dan Skillshare untuk membantu Anda mempelajari cara menggunakan produk mereka dan mendapatkan hasil terbaik darinya.

MOCKPLUS

Tersedia untuk Mac OS, Windows, Android, dan iOS.

Fitur Utama: Karena proyek dapat ditautkan ke penyimpanan cloud, MockPlus memungkinkan seluruh tim untuk berkolaborasi dalam satu proyek dengan mudah. Pengguna dapat berkomentar langsung pada proyek dan menandainya untuk dilihat orang lain. Anda juga dapat mengirim email pemberitahuan ke tim Anda untuk tetap berhubungan tentang perubahan. Bagian terbaiknya adalah Anda dapat melakukan semua ini tanpa coding atau pemrograman, jadi lebih mudah untuk fokus pada pekerjaan di depan Anda.

Harga : Ada opsi gratis yang tersedia untuk pengguna tunggal yang mencakup produk tak terbatas, meskipun terbatas dalam aspek lain. Setelah itu, harganya akan berkisar dari $199 per tahun untuk individu hingga $2999 per tahun untuk perusahaan. Anda juga dapat membeli lisensi, yang berkisar dari $399 untuk satu pengguna hingga $5999 untuk perusahaan (30 pengguna).

Bonus: Pengundian terbesar MockPlus adalah memungkinkan pengembang membuat gambar rangka dengan kecepatan lebih cepat berkat alat yang mereka rancang untuk mempercepat proses.

MOQUPS

Tersedia untuk semua sistem operasi karena berbasis web.

Fitur Utama: Moqups adalah platform berbasis web yang dapat digunakan untuk membuat gambar rangka untuk aplikasi web dan aplikasi seluler untuk iOS, Android, dan Bootstrap. Karena platform ini berbasis web, Anda memiliki kemampuan untuk terhubung dan bekerja dari mana saja. Platform ini tidak hanya untuk gambar rangka, Anda juga dapat membuat diagram dan prototipe. Anda dapat dengan mudah menarik dan melepas elemen, menggunakan kit stensilnya, memilih dari berbagai font, memilih objek, dan menarik dan melepas gambar Anda sendiri ke dalam apa pun yang sedang Anda kerjakan.

Harga : Seperti kebanyakan alat wireframing, Moqups menawarkan uji coba gratis. Setelah itu, harga akan tergantung pada sejumlah faktor. Misalnya, langganan tahunan yang mencakup proyek, objek, penyimpanan, dan komentar tak terbatas akan dikenakan biaya $13 per bulan untuk satu pengguna dan $19 per bulan untuk Tim Kreatif (3 orang). Anda harus menghubungi Moqups secara langsung untuk mendapatkan penawaran untuk akun Perusahaan.

Bonus: Jika Anda tergabung dalam LSM, sekolah, atau nirlaba, Moqups akan memberi Anda Akun Premium tanpa biaya.

WIREFRAME.CC

Tersedia di semua sistem operasi karena berbasis web.

Fitur Utama: Wireframe.CC dianggap sebagai salah satu alat wireframe paling dasar yang tersedia. Itu tidak selalu merupakan hal yang buruk, terutama jika Anda seorang pemula. Faktanya, karena desainnya yang sederhana, pengembang mungkin lebih mudah untuk fokus pada pekerjaan mereka. Program berbasis web ini dapat digunakan untuk membuat bingkai jendela browser, aplikasi seluler, atau aplikasi tablet.

Harga : Wireframe.CC menawarkan uji coba gratis 7 hari dan akun dasar gratis. Setelah itu, biayanya $16 per bulan atau $144 per tahun untuk sekali pakai, $439 per bulan atau $390 per tahun untuk tiga pengguna, atau $99 per bulan atau $990 per tahun untuk perusahaan (pengguna tidak terbatas).

Bonus: Kesederhanaan program ini membuat Anda sulit teralihkan dan menunda-nunda. Bahkan, elemen UI hanya akan muncul sebagai opsi saat dibutuhkan.

MOCKFLOW

Tersedia sebagai aplikasi desktop untuk Mac OS dan Windows atau sebagai aplikasi web.

Fitur Utama: Program ini dapat digunakan untuk merancang aplikasi web, aplikasi seluler, antarmuka, dan perangkat lunak di antara opsi lainnya. Mereka menawarkan paket komponen untuk antarmuka pilihan Anda agar pekerjaan Anda lebih mudah. MockFlow juga menawarkan fitur kolaborasi yang memungkinkan semua anggota tim Anda melihat perubahan secara real time sambil juga memungkinkan Anda membuat komentar beranotasi untuk dilihat semua orang. Anda dapat mengekspor file Anda dalam banyak format, termasuk DOC, PDF, dan HTML.

Harga : Akun dasar, yang mencakup satu pengguna dan satu proyek maksimal di setiap alat, gratis. Akun p remium untuk satu pengguna berharga $14 per bulan. Satu-satunya downside adalah pembatasan berbagi. Paket tim untuk tiga pengguna berharga $29 per bulan, tetapi Anda dapat menambahkan pengguna ke akun ini dengan biaya tambahan. Akun perusahaan tidak memiliki batasan dalam hal pengguna dan akan dikenakan biaya $160 per bulan.

Bonus: Salah satu keuntungan menggunakan MockFlow adalah MockStore mereka, yang menjual template UI untuk semua jenis antarmuka. Jika Anda merasa tidak terinspirasi, Anda dapat menelusuri toko mereka untuk mencari ide atau bahkan membeli template.

APA ITU PROTOTIPE?

Prototipe belum menjadi produk jadi, tetapi harus sangat mirip dengannya dalam hal tampilan dan fungsi umumnya. Prototipe aplikasi atau situs web Anda dengan fidelitas tinggi ini harus digunakan untuk menguji produk Anda dan mendapatkan beberapa umpan balik pengguna untuk membantu Anda memperbaiki masalah apa pun yang mungkin muncul.

Dasar-dasar Prototipe

Sebuah prototipe biasanya datang pada akhir proses desain dan bertindak sebagai jembatan ke produk akhir. Pada tahap ini, desainer akan dapat memamerkan karya mereka dan menggunakannya untuk mendapatkan umpan balik yang bermanfaat. Prototipe tidak hanya mencakup elemen desain, tetapi juga harus menunjukkan bagaimana proyek akan bekerja ketika selesai.

Sebuah prototipe mungkin tidak mencakup semua animasi dan interaksi proyek akhir, tetapi harus dapat menunjukkan bagaimana aplikasi akan mengalir. Memungkinkan Anda untuk menguji kinerjanya.

Anda dapat meminta pengguna mengujinya dan memberi Anda umpan balik untuk meningkatkan pengalaman pengguna. Anda mungkin merasa seperti sedang menggunakan aplikasi nyata, tetapi prototipe hanyalah kumpulan gambar yang terhubung satu sama lain. Jenis prototipe ini, termasuk prototipe interaktif, sangat ideal karena Anda dapat melihat desain yang sudah jadi sambil juga berinteraksi dengannya. Membuat prototipe interaktif yang baik dapat memakan waktu dan biaya, tetapi itu pasti sepadan dengan investasinya.

ALAT PROTOTYPING TERBAIK

PROTO.IO
MARVELPP
PROTT
AXURE RP
INVISI

PROTO.IO

Tersedia untuk Mac OS dan Windows.

Fitur Utama: Tagline Proto.io adalah, “ Prototipe yang terasa nyata,” dan dengan alasan yang bagus. Produk mereka memungkinkan desainer untuk membuat prototipe dengan ketelitian tinggi yang sedekat mungkin dengan aslinya. Dapat digunakan untuk membuat prototipe untuk aplikasi seluler serta aplikasi web. Alat perekaman layar mereka memungkinkan tim Anda untuk melihat dengan tepat bagaimana audiens Anda berinteraksi dengan prototipe, dan mode offline memungkinkan Anda berinteraksi dengan prototipe tanpa koneksi internet, semua ini tanpa harus menulis satu baris kode pun.

Harga : Anda dapat memulai pengalaman Proto.io Anda dengan uji coba gratis 15 hari dan kemudian memiliki opsi untuk mendapatkan akun gratis, meskipun itu cukup terbatas. Akun berbayar berkisar dari $24 per bulan (langganan tahunan untuk satu pengguna yang mencakup 5 proyek) hingga $160 per bulan (langganan tahunan, 10 pengguna, dan termasuk 30 proyek aktif).

Bonus: Beberapa alat terbaru mereka termasuk animasi vektor yang dapat Anda impor sendiri atau pilih dari perpustakaan animasi vektor mereka. Mereka juga baru-baru ini memperkenalkan pustaka komponen VR yang memungkinkan Anda mengintegrasikan gambar 360 dengan mudah.

MARVELPP

Tersedia sebagai aplikasi web untuk Mac OS, iOS, Android, dan Windows.

Fitur Utama: MarvelApp adalah alat prototipe hebat untuk desainer dengan pengalaman minimal. Antarmukanya yang sederhana mungkin terlihat cukup mendasar, tetapi itulah bagian dari daya tariknya. Tidak hanya merupakan titik awal yang baik untuk desainer baru, tetapi juga menawarkan hasil profesional yang dicari oleh desainer yang lebih berpengalaman. Marvel memudahkan untuk tetap mengikuti perubahan, komentar baru, dan kemajuan berkat opsi untuk mengimpor tim Anda dari Slack atau Asana. Meskipun ini adalah aplikasi, Anda dapat menggunakannya untuk membuat prototipe untuk web atau seluler.

Harga : MarvelApp tersedia gratis untuk satu pengguna dan mencakup dua proyek. Langganan berbayar mereka mulai dari $ 12 per bulan untuk satu pengguna, proyek tidak terbatas, prototipe yang dilindungi kata sandi, dan opsi untuk mengunduh prototipe Anda.

Bonus: MarvelApp berfungsi di semua perangkat iOS, yang berarti Anda dapat dengan cepat dan mudah melihat pekerjaan Anda di iPhone, iPad, Apple Watch, dan bahkan Apple TV.

PROTT

Tersedia sebagai aplikasi iOS dan Android.

Fitur Utama: Bekerja pada aplikasi seluler untuk membuat prototipe mungkin terdengar agak membatasi, tetapi Prott membuktikan tidak harus demikian. Faktanya, platform ini dikemas penuh dengan fitur dan alat yang dapat digunakan untuk membuat mockup UI, prototipe perangkat lunak desktop, tata letak situs web, gambar rangka interaktif, dan prototipe. Jika Anda bekerja dengan tim yang luas, Prott memudahkan untuk berbagi perubahan dengan mereka dan mendapatkan umpan balik secara real time.

Harga : Prott menawarkan uji coba gratis yang berubah menjadi langganan gratis setelah periode 30 hari berakhir. Opsi ini untuk satu pengguna dan satu proyek. Paket berbayar mereka mulai dari $19 per bulan untuk satu pengguna, tiga proyek, layar tak terbatas, dan pengulas tak terbatas.

Bonus: Platform Prott memungkinkan Anda untuk meninggalkan komentar di mana saja di proyek, membantu Anda berkomunikasi dengan tim Anda dengan lebih mudah dan jelas. Anggota tim Anda dapat merespons langsung komentar Anda, memastikan tidak ada yang hilang di sepanjang jalan.

AXURE RP

Tersedia untuk Mac & Windows.

Fitur Utama: Axure RP dianggap sebagai salah satu alat paling komprehensif untuk pembuatan prototipe , jadi tidak mengherankan berapa banyak pengguna yang mereka miliki. Meskipun antarmukanya sangat lengkap, ini adalah pilihan yang lebih baik bagi mereka yang memiliki banyak pengalaman. Alasan lain mengapa ini sangat terkenal di industri ini adalah karena sudah ada sejak lama dan merupakan alat yang paling banyak dipelajari desainer untuk mempelajari keterampilan mereka di awal tahun 2000-an. Perlu disebutkan bahwa Anda memerlukan pengetahuan pengkodean untuk mendapatkan apa yang Anda butuhkan dari alat ini.

Harga : Anda dapat memulai dengan uji coba gratis 30 hari. Setelah itu, langganan mulai dari tingkat Pro seharga $29 per bulan per pengguna dan naik hingga $99 per bulan per pengguna di tingkat Perusahaan. Lisensi abadi mulai dari $49 per bulan per pengguna, tetapi tidak tersedia di tingkat Perusahaan.

Bonus: Axure RP menawarkan desainer pilihan paling banyak jika dibandingkan dengan alat prototyping lainnya. Meskipun antarmukanya memang menyediakan fungsionalitas paling banyak, ia datang dengan harga sistem yang lebih rumit. Setelah dikuasai, Axure RP akan memberi Anda hasil yang luar biasa.

INVISI

Tersedia di semua sistem operasi karena berbasis web.

Fitur Utama: InVision adalah alat yang terkenal dan sangat dihormati di industri yang memungkinkan desainer membuat prototipe untuk web, iOS, dan Android. Platform ini dirancang dengan mempertimbangkan tim besar, jadi kolaborasi sangat mudah. Ini cukup mudah digunakan, Anda hanya perlu mengunggah file desain Anda dan menambahkan elemen seperti animasi, gerakan, dan transisi ke dalamnya. Hasil akhirnya adalah prototipe yang andal dan memiliki fidelitas tinggi.

Harga : InVision menawarkan paket gratis yang mencakup satu prototipe aktif, setelah itu paket berbayar mulai dari $15 per bulan untuk tiga prototipe untuk satu pengguna. Langganan tim untuk lima pengguna dan itu termasuk prototipe tak terbatas akan dikenakan biaya $100 per bulan.

Bonus: InVision baru-baru ini merilis Studio yang sangat dinanti, yang mengklaim sebagai "alat desain layar paling kuat di dunia." Alat baru ini diharapkan dapat menyederhanakan proses antara merancang dan membuat prototipe fungsional. Bagian terbaiknya adalah gratis!

BUAT MOCKUP PRODUK ANDA

Setelah prototipe Anda siap dan Anda telah kembali untuk memperbaiki masalah apa pun yang Anda temui selama proses pengujian, Anda mungkin semakin dekat dengan tanggal peluncuran. Namun, sebelum Anda ditayangkan, pastikan Anda memiliki alat yang tepat untuk memasarkan aplikasi atau situs web Anda dengan benar. Menggunakan maket yang menampilkan seperti apa aplikasi atau situs web baru Anda di perangkat nyata dapat membantu menarik lebih banyak perhatian.

Apa itu Mockup?

Kami sebelumnya membahas perbedaan antara wireframe dan mockup , tetapi jenis mockup yang sedang kita bicarakan di sini adalah sesuatu yang sama sekali berbeda. Jenis mockup ini muncul di bagian akhir, setelah aplikasi atau situs web Anda siap untuk ditayangkan. Ini pada dasarnya adalah foto yang dapat Anda sesuaikan dengan gambar atau tangkapan layar produk akhir Anda. Misalnya, Anda dapat mengambil tangkapan layar aplikasi Anda dan meletakkannya di layar iPhone X.

Maket itu penting karena dapat digunakan untuk memasarkan dan mempromosikan aplikasi atau situs web Anda. Mereka juga dapat digunakan saat membuat tangkapan layar aplikasi Anda untuk App Store atau Play Store. Maket Placeit mudah digunakan dan tersedia dalam berbagai macam. Anda dapat menemukan semua jenis mockup termasuk mockup iPhone, mockup iPad, mockup MacBook, mockup browser, dan mockup Android.

Pamerkan Pekerjaan Anda di Mockup

Anda mungkin senang akhirnya bisa menyelesaikan proyek yang telah Anda kerjakan dengan sangat keras selama ini. Kami tahu Anda mungkin tidak punya banyak uang tersisa untuk iklan, di situlah maket Placeit ikut bermain. Mereka mudah digunakan, menghasilkan gambar yang bagus dari produk Anda, dan sangat terjangkau! Apa pun yang Anda promosikan, aplikasi iPhone, aplikasi iPad, atau situs web baru, Placeit memiliki maket gadget terbaru yang telah Anda liput!

Jika Anda menikmati postingan ini, silakan coba 10 daftar alat pengoptimalan toko aplikasi ini atau lihat 7 tips untuk mempromosikan aplikasi Anda.