Mockup website adalah gambaran atau simulasi bagaimana sebuah website akan terlihat. Mockup akan merepresentasikan struktur dan logika wireframe beserta gambar, grafik, dan elemen UI yang nantinya akan ada pada tampilan final website tersebut. Nah, jika kamu hendak membuat mockup website, maka beberapa rekomendasi aplikasi mockup website ini bisa jadi alternatif untuk kamu gunakan.
Baca juga: Catat, ini 10 tips desain UI/UX yang ‘menjual’
1. Adobe XD
Adobe XD menyediakan fitur penyimpanan berbasis cloud - EKRUT
Adobe XD adalah salah satu aplikasi mockup website yang bisa kamu untuk menguji bagaimana website kamu akan terlihat di berbagai medium, seperti mobile, tablet, dan desktop. Tidak hanya untuk membuat mockup website, Adobe XD pada dasarnya juga bisa digunakan untuk membuat prototipe yang berfungsi penuh berdasarkan mockup yang kamu buat.
Adobe XD menawarkan banyak fitur, seperti penyimpanan dan sinkronisasi data otomatis di folder Creative Cloud Files, serta aset grafis yang bisa dibuat dan digunakan kembali pada tool Adobe lainnya seperti Adobe Photoshop. Dengan fitur ini, kamu bisa membuat desain di Adobe Photoshop dan memindahkannya ke Adobe XD saat membuat mockup.
Aplikasi mockup website ini dapat digunakan secara gratis dengan kapasitas cloud storage sebesar 2 GB, namun dengan jumlah font dan fitur berbagi dokumen yang terbatas. Untuk fitur lebih lengkap, kamu harus memilih paket berlangganan berbayar yang ditawarkan.
2. InVision Freehand
Kamu dapat menggunakan InVision untuk langsung berkolaborasi dengan tim dalam merancang desain website - EKRUT
InVision Freehand adalah salah satu aplikasi mockup berbasis cloud terbaik. Beberapa fitur yang ditawarkan oleh InVision Freehand antara lain freehand drafting mode, interactive mockups, user testing, kolaborasi, dan manajemen ide.
Adapun fitur brainstorming dimana pengguna bisa memetakan pengalaman mereka dan memberikan umpan balik semua di satu tempat. Tidak hanya itu, aplikasi mockup ini juga terbilang sederhana dan mudah digunakan. InVision dapat digunakan secara gratis, namun ada batasan hanya untuk membuat satu prototipe saja. Kamu bisa memilih paket berlangganan untuk menggunakan semua fitur yang ada dengan lebih maksimal.
3. Moqups
Selain untuk membuat mockup, Moqups juga bisa kamu gunakan untuk wireframing - EKRUT
Moqups juga merupakan tool yang memungkinkan kamu membuat wireframe, mockup, diagram, dan prototipe secara kolaboratif. Aplikasi mockup website ini mudah digunakan karena terstruktur dengan baik. Contohnya, pada bagian sidebar Moqups, kamu bisa menemukan template yang bisa kamu pindahkan ke area gambar dengan mudah.
Selain itu, ada banyak koleksi font dan icon yang juga bisa kamu gunakan untuk menunjang desain mockups. Sayangnya, untuk menggunakan Moqups secara gratis kamu hanya bisa membuat 1 proyek saja dengan kapasitas penyimpanan 5MB. Selain itu, bila kamu tidak memilih berlanggan, maka kamu hanya bisa menggunakan koleksi objek dalam jumlah terbatas.
4. Mockflow
Mockflow memiliki fitur-fitur editor yang mudah digunakan - EKRUT
Kamu juga bisa membuat mockup website dengan menggunakan Mockflow. Aplikasi mockup ini memiliki antarmuka yang minimalis dan terorganisir. Terdapat pula template dan elemen seperti tombol, tabs, dan gambar yang bisa kamu gunakan. Mockflow pada dasarnya akan memudahkanmu dalam membuat dan mengedit mockups. Pasalnya, Mockflow memiliki editor dengan fitur-fitur lengkap yang mudah dipelajari.
Mockflow juga menawarkan fitur kolaborasi sehingga kamu dapat mengatur proyek ke dalam folder dan sub halaman yang berbeda agar semua tetap rapi saat kamu membagikannya dengan anggota tim lainnya. Untuk menggunakannya, kamu bisa memilih paket basic yang pada dasarnya gratis atau paket berbayar bulanan.
5. FluidUI
Kamu dapat menambahkan link ke dalam desain mockup dengan FluidUI - EKRUT
FluidUI adalah tool lainnya yang umum digunakan untuk membuat mockup website ataupun mobile app. Untuk membuat mockups dengan FluidUI, kamu dapat menggunakan widget dan menu kontekstual yang muncul di layar dengan mudah.
Terdapat pula built-in library dengan lebih dari 2000 jenis item yang biasa digunakan saat merancang desain website. Kamu juga dapat mengunggah desain sendiri untuk membuat perpustakaan khusus. FluidUI juga memungkinkan kamu menambahkan animasi, mouse actions, dan link ke dalam desain untuk membuat tampilan mockup yang hampir sempurna dan menarik.
Kamu dapat menggunakan FluidUI secara gratis, namun ada batasan yakni hanya untuk 1 proyek dengan maksimal 10 halaman. Sementara untuk menggunakan semua fitur dengan maksimal, kamu dapat memilih tiga paket berlangganan lainnya, mulai dari paket Solo, Pro, dan Team.
6. Balsamiq
Kamu bisa membuat template khusus yang bisa digunakan berulang di Balsamiq - EKRUT
Salah satu aplikasi mockup website populer lainnya yang bisa kamu gunakan adalah Balsamic. Tool ini menawarkan fitur-fitur yang membantumu membuat mockup yang interaktif dengan menggunakan elemen UI secara jelas dan cepat. Kamu bisa membuat built-in library berisi aset-aset seperti logo atau simbol yang sering kamu gunakan dalam berbagai proyek, atau membuat template khusus yang bisa digunakan kembali pada proyek-proyek lainnya.
Tidak hanya itu, ada pula fitur lain seperti export draft ke dalam format PDF atau PNG dan fitur kolaborasi dimana kamu bisa mengerjakan satu proyek yang sama bersama tim kamu. Untuk menggunakan Balsamiq, kamu harus memilih paket berlangganan yang disesuaikan dengan biaya dan kapasitas cloud storage yang berbeda. Namun, jika untuk menggunakannya secara gratis, kamu bisa memanfaatkan uji coba gratis 30 hari yang ditawarkan bagi pengguna baru.
7. Marvel app
Kamu juga bisa menggunakan MarvelApp untuk user testing - EKRUT
Jika kamu ingin membuat mockup yang menarik dalam waktu yang singkat, maka Marvel App bisa jadi tool yang tepat untuk kamu pertimbangkan lainnya. Marvel App menyediakan spesifikasi desain otomatis untuk setiap proyek dimana dengan satu klik kamu bisa langsung dapat mengunduh aset dan menghasilkan kode CSS untuk desain kamu.
Tidak hanya untuk mendesain mockup yang bagus, kamu juga bisa menggunakan Marvel App untuk melakukan user testing, lho! Kelebihan lain dari Marvel App yang tidak boleh dilewatkan adalah fitur integrasi Marvel App dengan tools lain seperti Slack dan Sketch, sehingga kamu juga bisa membuat desain sekaligus meningkatkan alur kerja di saat bersamaan.
Sama seperti aplikasi mockup website lainnya, Marvel App dapat digunakan secara gratis maupun berbayar. Untuk menggunakan secara gratis, kamu hanya bisa menggunakan Marvel app untuk satu user dan terbatas untuk satu proyek. Sementara untuk memaksimalkan penggunaan fitur yang ada, kamu bisa memilih paket berlangganan Pro Plan yang memungkinkan kamu membuat proyek tanpa batas di Marvel App, atau paket berlangganan Team Plus untuk multi user.
8. Pidoco
Pidoco aplikasi mockup website hingga prototyping - EKRUT
Pidoco adalah sebuah situs untuk mockup website yang dapat digunakan secara online. Dengan mengakses laman pidoco.com, semua progress kamu akan disimpan di penyimpanan cloud. Tidak hanya ditujukan untuk membuat mockup website, Pidoco juga bisa digunakan untuk melakukan prototyping.
Keunggulan Pidoco terletak pada riwayat perubahan yang bisa dilacak, fitur berbagi yang memungkinkan kamu melakukan pekerjaan bersama secara realtime, dan reusable component yang membuat kamu lebih efisien saat mendesain. Pidoco tersedia dalam versi gratis dan berbayar. Perbedaannya, yaitu terletak pada hasil export dari desain yang telah kamu buat karena akan tertera watermark pada versi gratis. Selain itu, versi gratis hanya tersedia untuk satu project saja.
9. HotGloo
Hotgloo mendukung tampilan editor responsive untuk mockup website - EKRUT
HotGloo merupakan aplikasi mockup website yang menawarkan kemudahan untuk tampilan editor responsive dengan base HTML dengan lebih praktis. Elemen yang disediakan juga cukup komplit, bahkan terdapat elemen untuk shopping website atau aplikasi yang bisa digunakan. Untuk versi gratis, kamu akan diberikan waktu selama 7 hari untuk mencoba aplikasi satu ini.
10. Figma
Figma aplikasi mockup website terbaik dan paling banyak digunakan - EKRUT
Figma menjadi aplikasi mockup website yang paling terkenal. Dengan dasar website, kamu tidak perlu menginstal Figma di perangkatmu. Namun, jika memang diinginkan, tersedia juga software yang bisa kamu install.
Untuk proses yang lebih cepat, kamu hanya perlu membuka laman figma dan memulai desain serta melakukan prototyping website secara online. Progres yang telah kamu buat akan otomatis tersimpan ke dalam cloud secara realtime namun dengan catatan bahwa koneksi internet yang kamu miliki lancar, ya. Aplikasi ini bisa digunakan secara gratis. Kamu juga bisa berbagi dengan tim rekan kamu agar bisa mengembangkan website secara bersama-sama.
11. Axure
Aplikasi mockup website pro Axure untuk kebutuhan para ahli yang canggih - EKRUT
Axure adalah aplikasi mockup website yang ditujukan untuk kebutuhan desain tingkat lanjut. Fitur yang dimilikinya cukup canggih dan pro. Dilengkapi dengan pengeditan mockup dengan HTML dan dokumentasi CSS, aplikasi ini juga akan membantu kolaborasi dengan tim developer. Melihat fiturnya yang cukup komplit, Axure terbukti terpercaya karena telah digunakan oleh Amazon dan Microsoft.
12. Justinmind
Justinmind aplikasi mockup website pro dengan tampilan sederhana - EKRUT
Aplikasi mockup website satu ini mengunggulkan fitur untuk membangun wireframe kasar hingga prototype yang lebih komplit. Tampilannya cukup praktis dan simple untuk tool yang pro satu ini. Tidak perlu takut, Justinmind juga cocok digunakan oleh pemula. Library UI yang dimilikinya juga cukup lengkap, sehingga kamu tidak perlu pusing mencari library dari sumber lain.
Baca juga: 5 Rekomendasi software desain grafis gratis selain Adobe
Itu dia beberapa 12 rekomendasi aplikasi mockup website yang bisa kamu gunakan. Pilih dan gunakan aplikasi mockup mana yang paling sesuai dengan kebutuhan kamu dalam proyek pengembangan website.
Selain dari artikel EKRUT Media ini, kamu masih bisa memperoleh informasi dan berbagai tips bermanfaat lainnya melalui YouTube EKRUT Official. Nah, jika ingin mengembangkan karier dan mencari pekerjaan baru, kamu cukup sekali sign up di EKRUT untuk mendapatkan lebih dari satu kali undangan interview oleh berbagai perusahaan ternama!
Sumber:
- uxplanet.org
- mockplus.com
- allthatsaas.com
- influencermarketinghub.com
.jpg)
