Saat ini, semakin banyak tools yang dapat membantu UI dan UX Designer untuk membuat sebuah proyek desain. Misalnya seorang UI Designer akan membutuhkan tools untuk membuat mockup dan prototype desain. Lalu UX Designer akan menggunakan tools yang bisa memudahkan mereka dalam merancang perjalanan users secara keseluruhan.
Penasaran ada tools apa saja yang harus dikuasai oleh UI dan UX Designer? Yuk, cari tahu di sini!
Figma adalah all-in-one design platform yang biasa digunakan desainer untuk membuat prototype dan mockup desain. Platform ini berbasis web, sehingga bisa dijalankan di berbagai sistem, seperti MacOS, Windows, dan Linux.
Nah, salah satu kelebihan Figma adalah fitur kolaborasinya yang memungkinkan sejumlah orang mengerjakan sebuah proyek yang sama dalam waktu yang bersamaan. Selain itu, Figma juga punya FigJam, yaitu papan tulis online tempat para desainer melakukan brainstorming ide secara bersama-sama.
Berikutnya, ada juga Whimsical yang bisa digunakan untuk melakukan berbagai hal, seperti flowcharting, wireframing, mindmapping, hingga membuat catatan di documents pada satu platform yang sama. Semuanya pun memiliki fitur kolaborasi, sehingga semua anggota tim bisa mengerjakan secara bersamaan dan saling memberikan komentar.
Gak cuma itu, di Whimsical juga ada tools untuk project management, sehingga kita bisa melihat dengan lebih jelas proyek-proyek apa saja yang harus dikerjakan, sedang dalam pengerjaan, hingga yang sudah selesai.
InVision juga merupakan tool yang bisa desainer gunakan untuk membuat pola navigasi UI, prototype, wireframe, dan merencanakan perjalanan pengguna. Sesama desainer pun bisa melakukan brainstorming di Freehand, fitur papan tulis online yang mereka miliki.
Telah ada berbagai template yang tersedia, mulai dari template untuk membuat peta perjalanan users, moodboard, wireframe, sampai template untuk membantu merencanakan meningkatkan produk dari minimum viable product (MVP) menjadi most lovable product (MLP).
Adobe XD ialah aplikasi yang memang dikhususkan untuk membantu para UI/UX Designers. Di sini kita bisa membuat prototype desain untuk website dan aplikasi. Lalu, ada banyak fitur menarik yang bisa digunakan, seperti melakukan voice prototyping, membuat desain kita menjadi 3D, dan menambahkan animasi.
Kemudian, karena merupakan produk Adobe, jadi tentu saja terintegrasi dengan produk Adobe lainnya. Misalnya kita bisa menambahkan gambar yang kita edit di Photoshop dan mengambil ikon dari Illustrator dengan mudah.
Ada lagi nih software desain kolaborasi yang bisa kamu gunakan. MockFlow memungkinkan kita untuk membuat prototype aplikasi dan website, serta berbagai wireframe untuk klien. Tool ini bisa digunakan di berbagai sistem, seperti Windows, Android, iOS, dan Mac OS.
Mockup juga dilengkapi dengan aneka fitur lain yang membantu proses desain UI/UX kita. Contohnya adalah fitur untuk membuat user testing, membuat style guide, hingga terintegrasi dengan berbagai aplikasi, seperti Trello dan Google Drive.
Kalau sejumlah tools lainnya berusaha menggabungkan proses mendesain UI dan UX ke dalam satu platform yang sama, FlowMapp adalah tool yang fokus pada perencanaan UX Design.
Di sini kita bisa merancang struktur halaman website dengan Sitemap, merancang peta perjalanan users melalui fitur User Flow dan Flowchart, hingga mengidentifikasi pola perilaku users menggunakan Personas. Kalau sudah selesai, kita pun bisa meng-export file kita ke berbagai format.
Balsamiq adalah tool yang akan sangat bermanfaat kalau kamu ingin merancang wireframe sebuah website atau aplikasi. Wireframing sendiri adalah pembuatan kerangka awal sebuah produk digital. Jadi, dengan tool ini kita akan diajak untuk fokus dalam membangun struktur dan konten apa saja ingin ditampilkan.
Terdapat 3 versi Balsamiq yang bisa kamu pilih sesuai kebutuhan: Balsamiq Cloud yang bisa diakses melalui browser, Balsamiq for Desktop yang bisa digunakan di Windows atau Mac, dan juga Balsamiq for Google Drive.
Tool yang satu ini memudahkan kita untuk mendesain website tanpa perlu memiliki kemampuan coding. Kita bisa memulainya dengan kanvas kosong dan bebas berkreasi dengan menggabungkan elemen-elemen yang tersedia, atau menggunakan template yang telah tersedia.
Selain itu, kita pun juga bisa menggunakan fitur interactions and animations yang tersedia agar tampilan web kita menjadi lebih dinamis. Misalnya membuat scroll-based animation atau menampilkan konten on-click.
Nah, kalau tools-tools sebelumnya biasa digunakan untuk hal-hal yang sifatnya lebih ‘menyeluruh’, seperti membuat wireframe, prototype, hingga mockup, kali ini ada tool yang bisa digunakan UI Designer untuk membuat color palette.
Pemilihan warna gak kalah penting untuk user interface produk kita, lho! Di Adobe Color, kita bisa berkreasi dengan memilih serta mengkombinasikan aneka macam warna. Lalu, kita juga bisa menduplikasi warna dari gambar yang sudah ada sebelumnya.
Selain warna, pemilihan font juga enggak kalah penting bagi tampilan website atau aplikasi kita. Salah satu web yang menyediakan aneka font gratis untuk penggunaan personal dan komersial adalah Fontshare. Ada ratusan font yang bisa kamu pilih untuk disesuaikan dengan kebutuhan produkmu.
Butuh mencari vektor, ilustrasi, atau ikon yang customizable? Storyset adalah salah satu web yang bisa kamu eksplor. Saat memilih suatu ilustrasi, kita bisa mengedit warnanya hingga menjadikannya sebagai animasi. Kalau menggunakan Figma, kamu bisa langsung menggunakan plugin Storyset di sana.
Pasti sudah enggak asing lagi dong dengan tool yang satu ini? Yap, Google Docs dan Google Sheets memang sudah sangat umum digunakan banyak orang, termasuk non-desainer.
Dalam proses melakukan desain, ada kalanya kita butuh untuk membuat rencana atau catatan yang nantinya perlu dibagikan ke pihak luar, seperti klien. Makanya, penting juga nih untuk tetap menggunakan tool yang mudah digunakan oleh siapa saja.
Nah, itu dia 12 tools yang bisa kamu coba gunakan dan kuasai untuk membantumu mendesain UI dan UX. Dalam proses mendesain sebuah produk digital, UI dan UX adalah 2 hal yang saling berhubungan dan sama pentingnya. Kalau mau tahu lebih lanjut tentang perbedaan keduanya, bisa cari tahu di artikel ini ya!
