Workflow Desain UI dan UX? Simak Penjelasannya!

Share Artikel

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Daftar Isi

Agar dapat menciptakan produk yang berkualitas maka UI dan UX harus selaras dan berkesinambungan dalam proses pembuatan produk atau workflow desain.

Bagaimana sih workflow desain Ui dan Ux? Berikut kami uraikan urutannya >>>

1. Riset UX 

Workflow desain UI dan Ux pertama adalah Riset UX. Riset yang tentunya harus memahami secara keseluruhan apa yang diinginkan dan dibutuhkan oleh pengguna.

Sederhanya aja saat pembuatan toko online maka yang harus dicari tahu adalah kebiasaan orang-orang belanja online, pembayaran yang digemari, dan sebagainya.

2. Membuat Information Architecture

Langkah kedua dalam workflow desain UI dan UX adalah membuat Information Architecture (IA) produk. Yaitu proses dalam menyusun struktur bagian-bagian pada website dan aplikasi. Tujuannya agar dapat memudahkan tim dalam memahami konsep sebuah produk.

3. Membuat Wireframe 

Langkah ketiga adalah proses wireframing. Sederhananya memberikan sketsa visual dari sebuah produk. Sketsa inilah yang kemudian menunjukan alur informasi bagi user untuk dapat mengoperasikan sebuah produk. Di sinilah letak peran dari UX Designer dalam merancang desain. 

workflow desain

Sketsa desain biasanya dibuat dulu dengan Low Fidelity Wireframe (LFW) baru setelah itu dibuat yang versi High Fidelity Wireframe (HFW). Beberapa tools yang bisa digunakan dalam proses wireframing, seperti Adobe XD, Figma, dan lain sebagainya. 

4. Mengatur UX flows 

Langkah keempat adalah mengatur flow bagaimana sebuah produk digunakan oleh pengguna. Flow biasanya dibuat dengan pendekatan UX agar kedepannya pengguna dapat merasa nyaman dalam menggunakan produk Anda. 

5. Membuat Prototype Desain UX 

workflow desain

Langkah kelima adalah membuat prototipe desain sesuai dengan desain wireframe dan flow yang telah dibuat. Beberapa taplikasi yang bisa digunakan dalam membuat prototipe desain seperti Invision, MockPlus, Adobe XD, dan lain-lain. 

6. Membuat Design System

Langkah keenam adalah pembuata design system agar dapat menyimpan segala komponen-komponen desain seperti icon, font, colour palette, dan lain-lain dalam sebuah library. 

Dalam tahap inilah dibutuhkan kolaborasi antara desainer UI dan developer. Desainer UI mulai membuat elemen desain, sementara developer membuat komponen library menggunakan HTML, CSS, Javascript, dan lain-lain. 

7. Mendesain User Interface

Langkah ketujuh tugas seorang UI Designer agar bisa mendesain tampilan produk yang menarik. UI Designer wajib untuk memberikan visual menarik pada sketsa dengan paduan warna, tipografi, dan transisi antar halaman dengan elemen-elemen yang telah dibuat di tahap sebelumnya.

workflow desain

Dalam tahap ini, Desainer bisa menggunakan beberapa tools seperti Adobe Illustrator, Adobe Photoshop, Sketch App dan aplikasi desain lainnya. 

8. Pengembangan produk oleh Developer

Dalam tahap ini, desain UI Desainer yang telah lolos uji mulai didevelop oleh para developer. Penting untuk developer bisa tetap berkolaborasi dan berkomunikasi dengan tim desainer agar dapat mengatasi permasalahan bersama, jika ditemukan sebuah kendala dalam tahap ini. 

9. Design Usability Test 

Sebelum produk benar-benar diluncurkan ke banyak orang, maka produk tersebut perlu melakukan proses uji coba dan dilakukan dengan memberikan skor pada setiap fitur desain.  Agar desain tersebut dapat mendapatkan saran dan masukan dari pengguna.

Share Artikel

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram