Membuat mock up adalah tahapan yang cukup penting dalam pekerjaan UI/UX designer. Karena itu, tak heran jika kini banyak sekali aplikasi aplikasi atau tools pembuat wireframe bertebaran di internet, mulai dari yang gratis bahkan hingga yang berbayar. Semakin banyak pilihan justru semakin membuat anda bingung? Jangan khawatir, kali ini kami akan menyajikan rekomendasi beberapa pilihan tools wireframe atau mock up yang bisa Anda gunakan secara gratis, beserta dengan perbedaannya masing-masing secara singkat.
Mockup merupakan desain grafis statis berkualitas bagus yang digunakan untuk menunjukkan calon tampilan produk yang akan dibuat. Dalam konteks ini, produk yang dimaksud adalah sebuah website atau pun aplikasi.
Tujuan dari pembuatan mockup ini kurang lebih untuk memperlihatkan elemen-elemen semacam: skema warna yang digunakan, layout konten, pilihan font, ikon, navigasi, gambar, beserta keseluruhan visual yang menggambarkan tampilan produk aslinya.
Mockup bukanlah satu satunya tahapan dalam “presentasi” ini. Ada yang namanya sketsa, wireframe, mockup, dan juga prototype.
Uniknya, kebanyakan orang masih sering menganggap keempat diantaranya adalah satu hal yang sama saja. Biar nggak keterusan, jadi begini perbedaannya:
Sketsa: Ini adalah gambar grafis yang umumnya mempunyai kualitas yang seadanya. Bisa Anda buat dengan corat-coret di kertas maupun pada perangkat elektronik. Sketsa akan memuat gambaran kasar tentang ide bagaimana nantinya website maupun aplikasi tersebut bakal berwujud.
Wireframe: Dari sketsa, sekarang naik ke wireframe di mana Anda akan menggambarkan struktur keseluruhan dari web atau aplikasinya. Poin-poin dari wireframe berisikan visual sekaligus dengan penjelasan fungsi masing-masing. Misalnya, jika Anda memencet tombol A, maka akan terbuka laman B. Ini adalah kerangka utama dari sebuah desain web atau aplikasi.
Mockup: Lalu hadirlah mockup yang mempunyai tampilan visual beresolusi bagus. Ini adalah gambaran realistis tentang bagaimana wujud web atau aplikasi anda nanti. Orang yang lihat jadi punya kesan awal sewaktu melihat tampilanya.
Prototipe: Ini adalah versi yang kompleks dari sebuah mockup. Sebab, di prototipe pengguna dapat merasakan langsung tampilan sekaligus juga dengan fungsionalitas produknya.
Mockup memberikan banyak manfaat bagi para pengembang aplikasi dan web. Antara lain adalah sebagai berikut:
Mempermudah revisi
Kalau Anda tidak punya mockup dan terus jalan bikin aplikasi, nantinya ketika ada revisi pasti Anda akan kesulitan sendiri. Terutama ketika permasalahannya itu berkaitan langsung dengan aspek UI/UX nya.
Dengan adanya mockup, Anda bisa dengan mudah mendeteksi bagian serta area mana yang butuh perbaikan maupun revisi. Melacak coding-nya pun juga jadi lebih gampang.
Lebih meyakinkan
Ibaratkan perusahaan anda yang bergerak di bidang pengembangan web dan aplikasi mau pitching. Dengan adanya mockup, Anda bisa dengan lebih mudah untuk melakukan presentasi ke calon pemberi dana. Calon investor jadi tahu, “Oh, nanti kurang lebih bakal seperti ini bentukan website dan aplikasinya.” Tentunya hal ini jauh lebih meyakinkan jika dibandingkan hanya mengutarakan ide tanpa contoh visual sama sekali.
Mempermudah tes pasar
Pengembangan mockup akan memastikan bahwa website atau aplikasi anda “ramah” pasar dari segi estetika. Biasanya, setiap jenis web atau aplikasi punya kekhasan tampilannya sendiri-sendiri. Dengan begitu produk anda nantinya tidak dianggap orang-orang “salah kostum” sebab mereka bisa langsung menilainya dari tampilan awal web atau aplikasi anda.
Meningkatkan user experience (UX)
Sudah jelas ya kalau mockup pasti nyambung dengan user interface (UI), tapi ternyata ia juga dapat meningkatkan user experience (UX). Ia memberi gambaran kepada para calon pengguna tentang bagaimana nantinya elemen-elemen tersebut bekerja.
Berikut ini adalah tools untuk membuat Mockup dan juga wireframe yang gratis untuk anda:
Figma adalah aplikasi desain berbasis web yang juga bisa digunakan untuk membuat sebuah wireframe dan juga mockup. Layout Figma memudahkan para desainer untuk membuat banyak desain dalam dalam satu project, melakukan perubahan dan juga desain ulang yang dapat langsung dibandingkan secara bersisian.
Selain itu, karena berbasis web, Figma juga memfasilitasi proses kolaborasi dengan tim. Anggota tim lain dapat log in untuk bisa melihat desain, melakukan revisi ataupun menambahkan konten, lalu meninggalkan feedback dengan menambahkan sticky notes yang berisikan komentar. Versi gratis Figma hanya dapat digunakan untuk maksimal 3 project, sedangkan versi berbayarnya dipatok dengan harga $12 perbulan yang dibayar tahunan.
Balsamiq adalah tool wireframe yang memiliki fitur desain cepat, user testing, dan juga sharing desain. Tool gratis ini dilengkapi dengan fitur fitur koleksi template serta elemen yang sangat lengkap. Penggunaannya juga sangat mudah dan simpel. Anda hanya perlu melakukan drag-and-drop serta menyusun elemen pada kanvas. Balsamiq sangat cocok digunakan oleh para desainer pemula karena cukup mudah untuk dipelajari.
Kekurangan Balsamiq yaitu tidak dilengkapi dengan fitur animasi dan juga elemen interaktif sehingga tidak cocok digunakan untuk membuat prototype yang kompleks.
Pencil project adalah tool untuk dapat membuat wireframe berbasis aplikasi yang dapat diunduh untuk PC berbasis Windows dan juga Mac. Pencil project menyediakan banyak pilihan template baik untuk aplikasi mobile atau website dengan sketsa desain yang sangat beragam. Pencil project dikenal karena memiliki elemen-elemen interaktif yang bisa digunakan untuk membuat desain berbasis diagram. Misalnya, kita dapat membuat flowchart dengan mudah dengan menggunakan fitur connector tool dan juga page linking yang ada pada Pencil project. Aplikasi gratis ini penggunaannya pun sangat mudah dan intuitif, oleh karena itu cocok digunakan oleh desainer pemula sekalipun.
Mockplus adalah salah satu tool gratis yang dapat digunakan desainer untuk dapat membuat wireframe interaktif untuk aplikasi dan website. Mockplus memungkinkan desainer untuk membagikan desain dan juga melakukan tes, bahkan sejak tahapan awal pembuatan desain. Selain itu, Mockplus juga memiliki fitur yang mampu menambahkan catatan dan dokumentasi pada desain, sehingga desainer dapat menyimpan style guide untuk bisa dibagikan pada tim dan memudahkan anggota tim untuk dapat memberikan feedback.
Cacoo adalah tool kolaborasi berbasis cloud yang dapat digunakan untuk membuat presentasi interaktif dan juga wireframe. Dengan Cacoo, Anda bisa melakukan brainstorming serta proses ideasi bersama tim dengan lebih mudah. Cacoo cocok digunakan untuk membuat wireframe low-fidelity hingga dengan mid-fidelity. Terdapat banyak template yang tersedia, yang bisa dipilih untuk membuat diagram, user flow hingga dengan prototype.
Wireframe CC adalah tool wireframe berbasis web yang sangat mudah digunakan, semudah menggambar coretan dengan menggunakan pensil dan kertas. Hal ini karena tampilan antarmuka Wireframe CC yang sangat minimalis tanpa icon dan juga toolbar yang kompleks seperti pada tampilan aplikasi sketsa lainnya. WireframeCC ini memiliki desain template yang simple dengan pilihan tampilan landscape, mobile vertical, dan juga webpage.
Pada dasarnya, Miro adalah sebuah tools kolaborasi yang digunakan untuk melakukan komunikasi dengan tim, diskusi dan juga brainstorming. Miro dilengkapi dengan tools tools yang lengkap untuk memudahkan proses ideasi, misalnya presentasi interaktif dan workshop, termasuk dengan tool yang dapat digunakan untuk membuat wireframe. Fitur Miro yang sangat lengkap dan fleksibel mampu memfasilitasi diskusi tim serta pembuatan konsep desain dapat dilakukan dalam sekaligus pada satu tempat.
FluidUI merupakan tool wireframe berbasis web yang dapat digunakan untuk membuat wireframe untuk berbagai jenis platform. Versi gratisnya ini menawarkan penggunaan hingga 10 halaman per project untuk pengguna tunggal.
Berbeda dengan tools wireframe lainnya, Fluid UI lebih unik karena mendukung penggunaan elemen-elemen interaktif seperti transisi dan juga animasi. Selain itu, Fluid UI juga menyediakan lebih dari 2000 icon, widget serta elemen yang mudah dikustomisasi dan penggunaannya tinggal drag-and-drop. Fluid UI sangat cocok digunakan untuk dapat membuat high-fidelity wireframe.
NinjaMock adalah tool kolaborasi yang dapat digunakan untuk membuat wireframe dan mockup, tak hanya mendesain namun juga bisa digunakan untuk melakukan testing. Membuat wireframe dengan menggunakan NinjaMock ini sangat cepat dan efisien. Tampilan antarmukanya yang sangat simpel dan intuitif sehingga mudah untuk dipelajari. Selain itu, NinjaMock juga menyediakan berbagai elemen elemen interaktif yang dapat digunakan untuk desain aplikasi mobile ataupun desktop.
NinjaMock memungkinkan tim untuk dapat berbagi dan mengedit desain bersama klien dengan menggunakan fitur link unik sehingga proses kolaborasi dan editing dapat dilakukan dengan secara real time. NinjaMock tersedia pada berbagai platform mobile termasuk iOs, Android, Windows dan juga versi web.
Memilih tools wireframe yang tepat dapat disesuaikan dengan proses desain dan juga tujuan hasil akhir desain yang diinginkan. Jika memerlukan desain cepat yang sederhana, tentu akan lebih baik menggunakan tools yang mudah dan juga sederhana. Lain halnya jika Anda ingin membuat desain yang lebih kompleks seperti high-fidelity wireframe, menggunakan tools yang mendukung grafis, animasi serta elemen interaktif tentu akan lebih baik. Yang terpenting, sering-seringlah praktik dengan mengeksplorasi tools tools yang ada, dengan begitu Anda akan terbiasa memakai tools yang beragam serta kemampuan desainmu pun akan lebih terasah.
Kesempatan lowongan magang terbaru di tahun 2024
Baca Selengkapnya..