School of Information Systems

Rekomendasi Tools untuk Membuat Design User Interface

06 May 2020

Rekomendasi Tools untuk Membuat Design User Interface

-Siti Julianingsih Nurfitriyani-

Saat membangun sebuah website atau aplikasi, sangatlah penting untuk membuat user interface yang sesuai dengan kebutuhan pengguna, mudah digunakan dan juga menarik. Oleh karena itu, disini membutuhkan peran dari seorang UX/UI designer dalam merancang user interface yang sesuai dengan kebutuhan target pengguna. Dalam merancang user interface, saat ini para UI/UX designer sangat dimudahkan oleh banyaknya tools yang dapat membantu pada saat proses design. Maka, sekarang tantangan yang harus dihadapi oleh para UI/UX designer adalah tentang memilih serta menguasai tools yang akan digunakan untuk proses design. Untuk dapat mengetahui tools yang sesuai dengan kebutuhan, maka berikut adalah beberapa rekomendasi tools untuk membuat rancangan user interface:

 

  1. Axure RP

Axure RP merupakan aplikasi desktop yang digunakan untuk membuat wireframe, prototype interaktif, flow diagrams, dan dokumentasi untuk aplikasi bisnis, website dan aplikasi mobile. Axure selalu menjadi salah satu pilihan terbaik untuk para UI/UX designer yang ingin membangun wireframe atau prototype kompleks yang membutuhkan data dinamis. Axure berfokus pada fleksibilitas, menyediakan fitur untuk membuat tampilan visual yang bagus dan membantu non-coders (orang yang tidak dapat melakukan coding), dan memberikan fitur yang mudah dimengerti oleh user yaitu dengan drag and drop. Axure RP juga dapat diexport menjadi file HTML agar dapat dilihat melalui web browser. Axure RP dapat dijalankan baik di Windows maupun Mac.

  1. Adobe XD

Adobe XD merupakan sebuah aplikasi yang dikeluarkan oleh perusahaan Adobe.Inc. Beberapa fitur unggulan yang terdapat pada Adobe XD diantaranya adalah: Repeat grid – berfungsi untuk membuat grid untuk item yang berulang seperti lists dan galeri foto; Prototype and animation – membuat prototype animasi lewat linking artboards;   Interoperability – memungkinkan akses files dari aplikasi Adobe lainnya, seperti Illustrator, Photoshop, dan AfterEffects; Voice design – berguna untuk membuat aplikasi agar dapat beroperasi dengan perintah suara; Symbols – dapat membuat simbol untuk menggambarkan logo dan buttons; Responsive resize – dapat menyesuaikan ukuran gambar dan objek lainnya pada artboards secara otomatis. Adobe XD tersedia untuk pengguna Windows maupun Mac OS.

  1. Sketch
    Sketch adalah alat yang sangat populer dalam komunitas desain, dimana dapat memungkinkanmu membuat user interface dan prototype high-fidelity. Fitur-fitur unggulan dari sketch adalah: Symbol & Libraries – memungkinkan kita sebagai desainer membuat komponen desain kita dan menjadikannya sebagai symbol sehingga bisa kita pakai berkali-kali tanpa harus membuat ulang dari awal. Contohnya: Ketika kita membuat sebuah button, maka pada saat kita membutuhkan button lagi, kita tidak perlu membuatnya dari awal dan tinggal menggunakan symbol yang telah kita buat sebelumnya; Smart Layout – dapat menyesuaikan ukuran komponen secara otomatis; Plugins – sketch menyediakan banyak plugins yang dapat digunakan, mulai dari plugin yang simple seperti craft yang memungkinkan kita untuk menambahkan gambar atau nama secara otomatis, bahkan plugins yang lebih canggih seperti untuk menjadikan semua desain yang telah kita buat menjadi sebuah kode programming. Sayangnya, sketch hanya tersedia untuk pengguna Mac OS.

  1. Invision Studio

Invision Studio dapat dikatakan sebagai salah satu tools prototyping yang banyak digunakan oleh UI/UX designer di seluruh dunia. Alasan InVision begitu terkenal lantaran fitur-fitur yang dimilikinya sangat memudahkan para UI/UX designer dalam mendesain prototipe produknya. Fitur-fitur unggulan dari inVision adalah: Interactive Prototype / Animation Protoype – dengan fitur ini, kita dapat membuat prototype yang interaktif sehingga dapat memberikan kesan delightful bagi pengguna dan menambahkan pengalaman yang lebih baik untuk desain yang kita buat; Kolaborasi yang terkoneksi – fitur ini memungkinkan sebuah tim desainer untuk berkolaborasi pada satu projek dengan bersamaan. Pada fitur ini invision menyediakan free-hand (untuk coret-coret), pixel-perfect inspection untuk berkolaborasi bersama developer dan memberikan komen dan feedback pada tim lain secara langsung.; Responsive Design – fitur ini serupa dengan fitur smart layout yang dimiliki oleh Sketch, namun disini inVision membuat metode itu pada artboard, sehingga memudahkan desainer untuk merubah dari desain desktop ke desain mobile atau sebaliknya. Invision Studio tersedia untuk Windows maupun Mac OS.

  1. Figma

Dari segi fungsional, Figma tidak berbeda jauh dengan pesaing-pesaing utamanya, seperti Sketch. Namun, perbedaannya adalah Figma meupakan aplikasi berbasis web, sehingga semua jenis platform baik Windows, Mac, ataupun Linux dapat menggunakan Figma. Fitur-fitur unggulan dari Figma adalah: Smart Animate – berfungsi untuk menambahkan animasi ketika transisi perpindahan tampilan; Plugin – fitur ini memungkinkan kita menggunakan plugin untuk mempercepat proses pembuatan rancangan desain aplikasi. Figma menyediakan beberapa plugin, dimana salah satunya adalah Google Sheet Sync. Dengan begitu, kita bisa menampilkan data yang berada pada Google Sheet, ke dalam sebuah rancangan desain yang sedang kita buat; Auto Layout – berfungsi untuk mempermudah dalam mengatur komponen, terutama yang berhubungan dengan ukuran dan posisi; Kolaborasi – fitur ini memungkinkan kita untuk berkolaborasi langsung baik itu memberikan komentar, melakukan perubahan dan lain sebagainya dengan mudah.

  1. Framer X

Framer X adalah salah satu program desain yang memungkinkan kita untuk menggunakan code programming dengan menggunakan bahasa pemrograman Javascipt dan React. Namun, untuk dapat menguasai Framer X, maka kita perlu memahami dasar programming dan mempelajari React. Fitur-fitur unggulan yang ditawarkan oleh Framer X adalah: Desain interaksi terbaik – hal ini dikarenakan kita dapat menggunakan kode langsung pada desain yang dibuat. Sehingga, kita dapat menggunakan konten asli dari sebuah website atau aplikasi yang ingin dibuat; Plugin – Framex X menyediakan banyak plugin yang dapat digunakan, namun perbedaannya dengan tools lainnya adalah kita dapat menggunakan konten asli dari plugin tersebut, Seperti kita dapat memasukkan peta menggunakan plugin Mapbox, dan peta tersebut akan berfungsi seperti aplikasi map pada umumnya bukan hanya berupa gambar saja; Kode yang bisa langsung digunakan – karena berbasis kode, kita dapat langsung menggunakan hasil desain kita di Framer X untuk langsung digunakan. Sayangnya, saat ini Framer X hanya tersedia untuk Mac OS.

  1. Marvel

Marvel adalah alat prototyping lainnya yang merupakan pilihan tepat ketika digunakan untuk menghasilkan ide-ide cepat dan menyempurnakan interface. Seperti banyak aplikasi lain dari jenis ini, Marvel menawarkan cara membangun halaman (pages) yang sangat rapi dan memungkinkan untuk mensimulasikan desain yang kita buat melalui prototipe. Ada beberapa integrasi hebat dengan Marvel, yang berarti kita dapat memasukkan desain yang telah dibuat ke dalam alur kerja proyek yang sedang dibuat.

Sumber:

https://medium.com/belajar-desain/apa-aplikasi-desain-terbaik-a352028a175e

https://www.dewaweb.com/blog/kelebihan-dan-kekurangan-adobe-xd/

https://kreativv.com/game-teknologi/ui-design/

https://teknologi.id/insight/20-user-interface-ui-design-tools-terbaik-2019-bagian-1

https://garudapixel.com/10-aplikasi-windows-untuk-uiux-design/

https://www.dicoding.com/blog/figma-tools-yang-mempermudah-hidup-ui-designer/

Siti Julianingsih