Design & Prototyping Tools untuk UI/UX yang Kami Gunakan di Codex

Bagi seorang desainer User Interface (UI) dan User Experience (UX), aktivitas prototyping dan design akan menjadi dua hal yang selalu terkait. Mulai dari awal pembuatan desain UI low fidelity hingga high fidelity yang akan digunakan untuk prototyping, sebelum di-develop oleh para frontend engineer.

Para desainer UI/UX sebenarnya dapat menggunakan tools apa saja, sesuai dengan selera mereka masing-masing, mulai dari aplikasi Adobe, Sketch, maupun dengan menggunakan sketsa tangan.

Namun saat ini, sedang populer tools yang berbasiskan platform komputasi awan (cloud), di mana pengguna dapat membagi hasil desainnya kepada tim lain tanpa harus mengunduh file tersebut. File yang tengah dikerjakan di cloud bisa secara otomatis tersimpan (autosave), seperti ketika kamu menggunakan Google Drive.

Di artikel ini, saya akan memperkenalkan design & prototyping tools berbasis cloud yang digunakan oleh tim desainer CODEX dalam kegiatan sehari-hari, yaitu:

Sketch

Sketch adalah aplikasi desain digital dari Mac untuk mendesain UI, mobile web, dan bahkan ikon.

Desainer yang menggunakan sistem operasi Windows mungkin lebih mengenal aplikasi bernama Photoshop. Sketch sendiri merupakan tools dengan fitur desain yang serupa, dan dapat melakukan perancangan lebih detail karena ada pengukuran dengan piksel pada tiap objek.

Tampilan desain mockup pada aplikasi Sketch by Aretta

Kelebihan menggunakan aplikasi Sketch

1. Sketch berbasis vektor 100%.
2. Dengan satu gambar, dapat di-export menjadi berbagai resolusi.
3. Pengaturan pixel yang lebih fleksibel.
4. Dapat membuat banyak halaman desain dalam satu dokumen utama.
5. Proses export ke SVG lebih mudah.
6. Dapat membuat CSS dengan mudah, melalui fitur plugin.

Dengan banyaknya material yang bersifat gratis, pengguna dapat menggunakan banyak komponen dan simbol untuk membuat prototyping dan design dalam satu aplikasi sekaligus, yang jelas dapat menghemat waktu mereka.

The digital design toolkit

Adobe Illustrator

Menurut saya, Adobe Illustrator merupakan aplikasi yang cocok digunakan untuk desainer media iklan dan cetak. Untuk membuat basic card (layer di photoshop), tombol, serta ikon prototyping, dapat menggunakan insert+shape, di mana pengguna dapat secara otomatis membuat bentuk kotak, lingkaran, dan garis, beserta ukuran yang digunakan.

Tampilan desain mockup Adobe Illustrator CS by Ahmad Alamin

Kelebihan Menggunakan aplikasi Adobe Illustrator

1. Dapat memanipulasi vektor lebih beragam dari Sketch, karena memang dibuat untuk pembuatan ilustrasi dengan vektor.
2. Aplikasi desain terbaik untuk printing design.
3. Mempunyai Pen tool terbaik untuk membuat custom line yang akurat, tepat, dan rapi.
4. Dapat membuat design file dalam piksel maupun vektor.
5. Memiliki pattern option.

Karena berbasis vektor, maka apa pun yang kamu buat di Adobe Illustrator dapat dibuat dengan skala sekecil ikon dan skala sebesar billboard secara konsisten.

Buy Adobe Illustrator | Vector graphic design software

Abstract

Tools ini merupakan layanan cloud yang memungkinkan para desainer untuk menyimpan dan mengambil file desain mereka. Selain itu, Abstract juga memudahkan dalam melakukan export dan pemindahan file ke sesama desainer dalam satu kelompok.

Tampilan mockup Abstract, di mana (kiri) adalah kumpulan file dalam 1 cloud dan (kanan) detail history file tentang kapan saja dikerjakan.

Kelebihan menggunakan aplikasi Abstract

1. Integrasi produk yang stabil, dengan update versi terbaru dari Sketch.
2. Representasi visual dari branch aktif dan commit untuk pengguna yang menerapkan sistem agile.
3. Dapat melakukan merge antara file lama dan baru.
4. Pengguna dapat memeriksa setiap pembaruan artboard serta memberi komentar, yang mirip dengan metode review kode.
5. Sinkronisasi otomatis (auto saving) ke cloud, tanpa harus melakukan upload (push) atau download (pull).
6. Memungkinkan restore ke perubahan yang sebelumnya.

Jadi, jika kamu ingin mengontrol proyek desain yang konsisten namun tetap user friendly, sama halnya seperti Git untuk front-end, maka Abstract merupakan pilihan yang tepat.

Sketch version control & design workflow management - Abstract

Figma

Figma adalah tools desain berbasis cloud yang mirip dengan Sketch dalam fungsionalitas dan fitur, tetapi Figma lebih baik sebagai aplikasi untuk kolaborasi tim.

Figma menyederhanakan proses desain karena konsepnya yang dapat memasukkan banyak pengguna untuk melihat dan mengedit desain dalam satu cloud secara efisien.

Tampilan desain mockup Figma by Lubos Kmetko

Kelebihan Menggunakan Figma App

1. Figma gratis untuk beberapa orang, namun untuk menggunakan bersama dengan tim ada biaya $12 per bulan per editor.
2. Siapa pun dapat membuka file Figma tanpa perlu melakukan instalasi. Mereka pun bisa langsung meninjau dan menulis komentar secara gratis.
3. Kecepatan dan performa bisa jauh lebih cepat saat mengedit dan melihat file.
4. Platform bersifat agnostik, sehingga dapat dijalankan di sistem operasi dan browser apapun.
5. Kolaborasi bisa berjalan secara real-time, demikian juga ketika melakukan pembaruan file.

Dengan menggunakan Figma, kamu bisa menjaga sistem desain yang telah dibangun di dalam tim.

Figma: the collaborative interface design tool.

Zeplin

Zeplin adalah alat kolaborasi yang menjembatani antara desainer dan developer dengan cara menciptakan semacam ruang bersama untuk tim produk.

Bekerja dengan Sketch atau Photoshop biasanya membutuhkan waktu lama hanya untuk membuka, menavigasi semua lapisan (layer), serta mencari tahu semua ukuran dan jarak. Dengan Zeplin, kamu tidak perlu melakukan pekerjaan yang tidak efisien tersebut, dan produktivitas kamu bisa meningkat.

Tampilan mockup Zeplin, di mana (kiri) adalah flow UI per project dan (kanan) detail ukuran dan CSS dari UI yang di convert di Zeplin.

Kelebihan menggunakan Zeplin

1. Styleguide yang dibuat bisa langsung sesuai dengan desain mockup.
2. Perbandingan piksel yang sempurna dari Sketch.
3. Tools integrasi mockup ke bentuk CMS & HTML yang akurat dengan ukuran aslinya.
4. Kamu bisa menjelaskan detail dari setiap komponen kepada para developer dalam satu page UI.
5. Otomatis mendeteksi komponen font dan warna sehingga desainer dapat menambahkannya ke styleguide dengan mudah.
6. Dapat merangkum semua warna, stylefont, komponen, hingga transparansi piksel yang digunakan di aplikasi ke libraries.

Desainer di Codex semuanya menggunakan Sketch sebagai aplikasi integrasi. Namun setelah itu, mereka mengunggah hasil pekerjaan mereka ke Zeplin, sehingga seluruh developer frontend dapat menggunakannya untuk tugas dan tujuan yang berbeda. Berkat Zeplin, kolaborasi antara tim developer dan desain di Codex bisa berjalan dengan baik.

Zeplin

Lingo

Lingo adalah sistem manajemen desain. Dengan mengintegrasikan aplikasi Sketch, kamu bisa langsung mengunggah desain ke kit Lingo. Setiap kali mengunggah file, maka aset Sketch (baik yang berupa teks, layer, simbol, maupun warna) dapat di-review dan dikirim ke Lingo.

Setelah itu, aset bisa disusun dan disajikan dalam format yang rapi dan interaktif.

Para anggota tim pun dapat berbagi konten visual dan mencari gabungan koleksi mereka.

Tampilan mockup desain kit di Lingo by CODEX design team

Kelebihan menggunakan Lingo

1. Kamu hanya perlu mengunggah satu simbol komponen per aset, dan secara otomatis komponen tersebut akan dikonversi menjadi beberapa jenis file (png, svg, jpg).
2. Menampilkan detail info simbol, catatan, dan tag untuk setiap aset.
3. Mudah untuk memindahkan banyak aset dari satu grup ke grup lain.
4. Integerasi plugin dengan Sketch sebagai libraries.
5. Kits (libraries) tidak memiliki batas unggahan.

Kit di Lingo juga dapat di-drag ke file Sketch yang baru, membuat berbagi aset dengan anggota tim lain menjadi sangat mudah.

Lingo - The visual home for your brand

Marvel

Marvel adalah prototyping tools berbasis browser yang memberikan alur proses dari awal hingga tujuan akhir dibuatnya sebuah desain.

Marvel merupakan platform desain dan kolaborasi tim yang bisa memudahkan pembuatan prototipe hingga pembuatan kode, sehingga developer bisa mengetahui alur desain secara akurat.

Tampilan mockup Marvel, di mana (kiri) adalah layout layer desain di marvel app dan (kanan) flow untuk prototyping desain UI.

Kelebihan menggunakan Marvel

1. Memiliki plugin di Sketch yang memungkinkan import ke Marvel.
2. Menyediakan template ukuran, komponen, warna, dan ikon yang dapat digunakan pada setiap prototipe.
3. Fitur layer untuk menambahkan elemen di atas layar, seperti sidebar, model, dan halaman.
4. Pembuatan desain prototipe dapat dilakukan di semua platform seperti, PC, smartphone, iPad.
5. Pengeditan prototipe dapat dilakukan dengan tautan yang sama saat dibagikan ke pengguna.
6. Manajemen prototipe lebih mudah, karena bisa dibuat folder khusus untuk setiap proyek.

Kamu bisa dengan mudah meng-upload/drag gambar ke Marvel, lalu menambahkan gerakan dan transisi. Platform ini mendukung fitur import untuk jenis gambar tertentu, seperti JPG, GIF, dan PSD, selain dari layanan pihak ketiga berbasis cloud, seperti Dropbox, Sketsa, dan Google Drive.

Marvel - The design platform for digital products

Kira-kira seperti itu gambaran apa saja aplikasi desain yang digunakan oleh tim desainer CODEX. Namun pemilihan aplikasi yang akan digunakan sebenarnya kembali pada selera para desainer masing-masing, karena cara kerja setiap orang pasti berbeda!

Mengolah Data Riset Kualitatif, Enaknya Pakai Tools Apa?

Di kesempatan selanjutnya, saya akan membahas tutorial design dan prototyping menggunakan aplikasi-aplikasi di atas. Terima kasih untuk waktunya guys! See you again in my next article! ;)