Perangkat lunak ini akan memudahkanmu dalam membuat wireframe dan mockup seawam apapun kamu. Cocok untuk orang yang ingin membuat desain dengan cepat dan dapat dioperasikandi Mac, Windows, Linux, serta web browser.

Software ini memiliki beberapa elemen drag-and-drop. Bahkan kamu bisa mensimulasikanbagaimana nanti tampilannya lintas gawai dan ragam ukuran layar. Ia pun memiliki toolskolaborasi dan tes pengguna yang pas bagi tim UI/UX.

Kelebihan:

        Gampang digunakan        Tampilannya sederhana

Kekurangan:

        Ditujukan untuk wireframes low-fi

Aplikasi MockupSumber : bitlabs.id >

1. Balsamiq Mockups

Harga: tersedia free trial, US$89/pengguna versi desktop, US$9/bulan versi web

 

UXPin memiliki tampilan yang simpel dan intuitif. Tombol-tombol di dalamnya jelas gunanya buatapa, library UI-nya tinggal drag-and-drop, bahkan mendukung komponen Bootstrap, Foundation,iOS, sampai Android.

Masih kurang? File-nya dapat diimpor/ekspor langsung ke Sketch maupun Photoshop. Sama halnyadengan Balsamiq, di sini juga tersedia fitur kolaborasi tim. Satu lagi, terdapat tools livepresentation untuk pamer langsung ke klien. Cocok buat pemula maupun yang sudah advance.

Kelebihan:

        Tampilan intuitif        Mendukung transfer file Sketch dan Photoshop        Tools presentasi

Kekurangan:

        Tidak ada versi gratis

Harga: tersedia free trial, US$19/editor/bulan

2. UXPin

 

Ketika banyak aplikasi wireframe yang minimalis dengan fitur-fiturnya, Axure RP justru sebaliknya:terlalu canggih. Saking canggihnya, rasanya ini paling cocok buat yang sudah pro.

Software ini memiliki mockup HTML interaktif untuk website maupun aplikasi. Kalau butuh untukngecek desain di smartphone, tinggal gunakan fitur share-nya. Ada pula mode developer inspect,efek animasi, kompatibilitas komputasi awan, hingga ekspor dan dokumentasi CSS.

Karena kekayaan fiturnya, Axure banyak digunakan oleh perusahaan teknologi besar macamMicrosoft hingga Amazon.

Kelebihan:

        Dapat menciptakan prototipe fungsional        Banyak fitur advanced

Kekurangan:

        Butuh waktu ekstra untuk mempelajarinya        Terlalu canggih

Harga: tersedia free trial, mulai dari US$25/bulan

3. Axure RP

Kalau kamu termasuk orang yang maunya semua hal simpel, Wireframe.cc adalah jodohmu.

Ia merupakan tool wireframe berbasis browser yang bisa diakses di mana pun. Karena simpel,pilihan yang diberikan pun juga terbatas, termasuk menu yang “context sensitive” alias hanyamuncul ketika dibutuhkan dan palet warna yang terbatas.

Kelebihan:

        Mudah dioperasikan        Minim distraksi        Tidak perlu mengunduh fitur tambahan

Kekurangan:

        Minim fitur (disengaja)

Harga: tersedia free trial, mulai US$16/bulan

4. Wireframe.cc

5. Justinmind

Justinmind memungkinkanmu untuk membangun kasaran wireframe sampai jadi prototipe. Eits,kalau Axure lebih cocok untuk yang sudah Pro, Justinmind ramah pemula, lho!

Di dalamnya terdapat library UI yang lengkap. Mulai dari tombol-tombol, bentuk-bentuk umum,sampai widgets buat iOS, SAP, dan Android. Untuk prototipe-nya, kamu bisa mengekspor dalamformat HTML.

Kelebihan:

        Mendukung pembuatan prototipe fungsional        Cocok untuk pemula        Tersedia versi gratis

Kekurangan:

        Butuh waktu ekstra untuk mempelajarinya

Harga: tersedia versi gratis dengan fitur terbatas, mulai dari US$19/bulan

6. Adobe XD

Sumber gambar: graphicmama.com

Program ini diluncurkan untuk bersaing langsung dengan Sketch. Ia merupakan alat desainberbasis vektor dan tersedia di semua OS. Karena dikeluarkan langsung oleh Adobe, software iniotomatis dapat digunakan lintas aplikasi—misalnya ke Photoshop maupun Illustrator.

Kelebihan:

        Mendukung cross-platform        Terintegrasi dengan Creative Cloud        Fitur advanced melimpah

Kekurangan:

        Versi lengkap harus berlangganan

Harga: tersedia versi gratis dengan fitur terbatas, mulai dari £9.98/bulan

7. Sketch

Sumber gambar: sketchapp.com

Software ini hanya tersedia di sistem operasi Mac. Sejak diluncurkan di 2010, kehadirannya benar-benar mengubah dunia mockup. Sebagai program desain vektor dan UI, ia ringan untuk diaksesdan punya tampilan sederhana nan intuitif.

Berbeda dengan Adobe yang memakai skema berlangganan, Sketch dapat diperoleh dengansekali pembelian.

Kelebihan:

        Fokus di UI        Ringan        Tampilan intuitif

Kekurangan:

        Hanya tersedia di Mac

Harga: sekali beli US$99

8. Invision Studio

Invision Studio tidaklah selengkap Adobe XD, tetapi ia punya fitur yang cukup untuk melakukanwireframing.

Jangan khawatir, tampilannya responsif dan intuitif, plus ia terintegrasi dengan Invision Freehanduntuk fungsi kolaborasi. Software ini mendukung visual sederhana hingga ke level prototipefungsional.

Kelebihan:

        Gampang digunakan        Terintegrasi dengan Invision Freehand

Kekurangan:

        Tidak terintegrasi dengan banyak tools

Harga: tersedia versi gratis dengan fitur terbatas, mulai dari US$13/bulan

9. Photoshop

Satu lagi dari Adobe—dan sudah sangat terkenal. Program ini dipakai oleh banyak perusahaanteknologi dan sudah jadi standar untuk urusan desain wireframe dan mockup website.

Uniknya, Photoshop hadir bukan untuk tujuan itu sebenarnya. Tidak heran kalau kemudian ia tidakpunya perpustakaan yang lengkap.

Akan tetapi, karena ia pada dasarnya adalah program desain, kamu bisa menggarap banyakpekerjaan UI di sini. Belum lagi ia pun terintegrasi dengan program Adobe lainnya. Komplit sudah.

Kelebihan:

        Menjadi standar di banyak perusahaan        Terintegrasi dengan Creative Cloud        Kaya fitur

Kekurangan:

        Perpustakaan terbatas

Harga: mulai dari US$19.99/bulan dengan skema Adobe Creative Cloud

Baca juga: Apa itu User Experience (UX)? Berikut Manfaat dan Tips Penerapannya!

10. Protopie

Protopie ditujukan untuk membuat prototipe. Akan tetapi kamu dapat pula memanfaatkannyauntuk urusan mockup website dan aplikasi.

Ia menyediakan fitur interaktif sehingga kamu bisa mengoperasikannya tanpa perlu pahamcoding. Selain menyediakan fitur desain, program ini juga mendukung penambahan banyak sensoruntuk disematkan.

Kelebihan:

        Interaktif        Fitur kontrol sensor lengkap

Kekurangan:

        Tergolong mahal

Harga: mulai dari US$79.2 per pengguna

11. Mockplus

Mockplus merupakan website mockup alias tool mockup berbasis web. Ia responsif dan ramahpemula. Kamu bisa membuat mockup dalam waktu singkat, pun tim dapat melakukan kolaborasidi situ secara real-time.

Di dalamnya sudah tersedia berbagai komponen dan ikon resolusi tinggi yang gampang untukdisesuaikan. Butuh buat menggambar langsung? Tenang, tool pen&pencil siap digunakan tanpaharus berpindah aplikasi.

Kelebihan:

        Mudah diakses karena berbasis web        Fitur kolaborasi real-time

Kekurangan:

        Fitur standar aplikasi berbasis web

Harga: freemium, tersedia fitur advanced mulai dari US$5.95/bulan

12. Flinto

Satu lagi aplikasi mockup UI website yang beroperasi di sistem operasi Mac: Flinto. Kamu dapatmembuat mockup serta prototipe dinamis yang punya transisi animasi, efek suara, danpenyesuaian lainnya menggunakan program ini.

Kelebihan:

        Populer di kalangan desainer dunia        Fitur transisi dan efek lengkap

Kekurangan:

        Hanya untuk Mac

Harga: tersedia free trial, atau pembelian US$99/pengguna

13. TemplateToaster

TemplateToaster adalah aplikasi desktop yang mampu menangani pekerjaaan desain berat tanpakendala. Kamu dapat membuat desain tampilan web secara interaktif. Bahkan, terdapat fituruntuk membuat web yang dibuat menjadi responsif dan SEO friendly.

Kelebihan:

        Interaktif        Punya banyak fitur responsif untuk pembuatan website

Kekurangan:

        Terbatas sebagai aplikasi desktop

Harga: tersedia free trial dengan fitur terbatas, untuk pro mulai dari INR2999

14. Froont

Ini adalah tool mockup berbasis web. Meski begitu, ia digunakan oleh banyak perusahaan, sebutsaja TechCruch, Wired, dan sebagainya.

Froont cocok untuk mendesain website tipe single page karena memang tersedia banyak fituruntuk itu di dalamnya. Banyak pula fasilitas visual yang tinggal drag-and-drop. Kalau butuhanimasi untuk prototipe, ada juga di sini.

Kelebihan:

        Mendukung wireframe, mockup, hingga prototipe        Cocok untuk website one page

Kekurangan:

        Pembayaran langsung per tahun (tersedia versi gratis)

Harga: tersedia versi gratis dengan fitur terbatas, langganan mulai US$17/bulan yang dibayarkanper tahun

15. Framer

Airbnb hingga Dropbox menggunakan tool ini, lho!

Framer yang berjalan di sistem Mac ini mendukung pembuatan aplikasi mobile hingga website.Kamu pun dapat membuat ikon custom maupun mengedit yang sudah ada dengan editor yangtelah disediakan.

Kelebihan:

        Banyak pilihan ikon        Desain minimalis

Kekurangan:

        Hanya tersedia di Mac

Harga: tersedia free trial, langganan mulai dari US$12/bulan

16. UX-App

Satu lagi tool mockup berbasis web. UX-App memungkinkanmu untuk mendesain dengan kilatdengan memanfaatkan library yang telah disediakan.

Eits, selain mockup, tool ini juga dapat digunakan untuk membuat prototipe, lho! Ada banyak efekvisual di situ. Semua pekerjaan dapat diekspor ke format PNG maupun HTML.

Kelebihan:

        Portabel karena berbasis web        Menyediakan fitur mockup hingga prototipe

Kekurangan:

        Perpustakaan minimalis

Harga: tersedia free trial, tersedia langganan seumur hidup untuk US$65

17. Gravit

Agaknya semakin ke sini fitur kompatibilitas lintas platform semakin jadi primadona. Gravit adalahsalah satunya. Selain itu, ia mempunyai tampilan yang intuitif. Dengan Gravit, kamu bisamembuat desain vektor tanpa hambatan secara GRATIS!

Kelebihan:

        Desain berbasis vektor        Dapat diakses melalui website maupun aplikasi        Gratis

Kekurangan:

        Masih baru sehingga butuh penambahan fitur

Harga: gratis

18. Lucidchart

Aplikasi mockup yang satu ini berbasis komputasi awan. Di versi gratisnya, pengguna Lucidchartdapat membuat project dengan maksimal 60 objek.

Jangan salah, versi gratisnya turut menyediakan banyak template yang siap untuk diintegrasikanke desainmu, lho! Selain itu, ia pun mendukung kustomisasi desain.

Kelebihan:

        Berbasis komputasi awan        Menyediakan banyak template

Kekurangan:

        Versi gratisnya memiliki batasan objek (bukan batasan fitur)

Harga: gratis dengan batasan objek, langganan US$5/bulan untuk personal, US$20/bulan untuktim

19. Fluid UI

Fluid UI terkenal di kalangan para desainer karena memiliki lebih dari 2000 elemen web siappakai. Kamu bisa membuat mockup hingga prototipe interaktif dengan mudah. Menggunakanversi gratis, kamu dapat membuat satu project dengan akses perpustakaan yang terbatas.

Kelebihan:

        Perpustakaan elemen website yang lengkap        Mendukung pembuatan mockup dan prototipe interaktif

Kekurangan:

        Versi gratis hanya mendukung pembuatan satu project web

Harga: tersedia versi gratis dengan pembatasan fitur, pro mulai US$8.95/bulan

20. SmarMockup

SmartMockup adalah aplikasi online yang yang sangat mudah digunakan untuk berbagaikeperluan mockup seperti :

T-shirt MockupsSmartphone mockupsMugs mockupsDesktop mockupsLaptop mockupsT-shirt MockupsSmartphone mockupsMugs mockupsDesktop mockupsLaptop mockupsTablet mockups dll

Revision #1 Created 28 September 2021 21:40:17 by Haikal Rahman Updated 28 September 2021 21:47:26 by Haikal Rahman