Belajar UI/UX #3: Cara Kerja Desain UI dan UX
Workflow Desain UI dan UX
Meskipun UI dan UX berbeda, keduanya tetap harus bekerja secara berkesinambungan agar tercipta produk yang berkualitas. Nah di bagian ini, Anda akan mengetahui bagaimana cara kerja UI dan UX dalam pembuatan produk.
 |
| https://unsplash.com/@alvarordesign |
1. Riset UX
Riset UX merupakan langkah awal dalam membuat desain yang baik. Riset dilakukan untuk memahami apa yang dibutuhkan pengguna. Misalnya, untuk membuat website toko online, Anda harus mencari tahu bagaimana kebiasaan orang berbelanja, proses pembayaran yang paling disenangi pengguna dan lain-lain.
Seorang UX Researcher bisa melakukan riset UX melalui beberapa cara, baik melalui user interview atau online survey. Data yang dikumpulkan juga bisa melalui data kualitatif dan kuantitatif.
2. Membuat Information Architecture
Setelah melakukan riset UX, langkah selanjutnya adalah membuat Information Architecture (IA) produk. Information Architecture ini merupakan proses menyusun struktur bagian-bagian pada website dan aplikasi. IA ini akan memudahkan tim untuk memahami konsep sebuah produk.
Untuk membuat IA ini, Anda membutuhkan hasil riset UX yang telah dilakukan. Hasil riset UX didapatkan melalui metode card sorting, yaitu metode memilah dan menentukan buyers persona. Hasil riset tersebut membantu Anda untuk membuat struktur produk berdasarkan perspektif pengguna.
3. Membuat Wireframe
Selanjutnya yaitu proses wireframing. Wireframe merupakan sketsa visual dari sebuah produk. Sketsa desain ini juga menunjukan alur informasi bagi user untuk dapat mengoperasikan produk. Di sinilah peran UX Designer merancang desain.
Proses wireframing meliputi pembuatan sketsa produk yang akan dikembangkan menjadi sebuah produk. Wireframe ini juga akan membantu tim desainer, content dan developer untuk memvisualisasikan bagaimana tampilan produk.
Sketsa desain dibuat dengan Low Fidelity Wireframe (LFW) baru kemudian dibuat versi High Fidelity Wireframe (HFW). Ada banyak tools yang bisa dipakai dalam proses wireframing, seperti Figma, Adobe XD, dan lain sebagainya.
4. Mengatur UX flows
Setelah membuat wireframe, Anda perlu mengatur flow bagaimana sebuah produk digunakan oleh pengguna. Flow dibuat dengan pendekatan UX agar nantinya pengguna nyaman menggunakan produk Anda.
Flow ini kemudian didokumentasikan agar para developer mudah dalam mengembangkan produk.
5. Membuat Prototype Desain UX
Tahap berikutnya yaitu, membuat prototipe Desain sesuai dengan desain wireframe dan flow yang telah dibuat. Untuk membuat prototipe desain, Anda bisa membuatnya dengan aplikasi seperti Invision, MockPlus, Adobe XD, dan lain-lain.
Prototipe desain tersebut dapat diuji coba oleh internal tim dan langsung diperbaiki jika diperlukan. Jika prototipe desain tersebut telah lolos di internal tim, Anda bisa mengujinya ke user Anda.
6. Membuat Design System
Berikutnya adalah tahap pembuatan design system. Design system dibuat untuk menyimpan segala komponen-komponen desain, terutama komponen desain UI, seperti icon, font, colour palette, dan lain-lain dalam sebuah library.
Di tahap ini, 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.
Dengan adanya design system ini, proses pembuatan desain akan lebih cepat karena elemen desain telah tersedia. Manfaat lainnya adalah desain Anda jadi lebih konsisten dan efisien dalam pengerjaan desain produk lainnya. .
7. Mendesain User Interface
Di tahap ini, seorang UI Designer mulai bertugas mendesain tampilan produk yang menarik. Tahapan ini juga merupakan implementasi dari wireframe yang telah dibuat sebelumnya.
UI Designer akan mempercantik sketsa dengan paduan warna, tipografi, dan transisi antar halaman dengan elemen-elemen yang telah dibuat di tahap sebelumnya. Di tahap ini desainer UI juga perlu memperhatikan prinsip-prinsip desain UI yang baik.
Desainer bisa menggunakan Adobe Illustrator, Adobe Photoshop, Sketch App dan aplikasi desain lainnya.
8. Proses Pengembangan produk oleh Developer
Selanjutnya, tahap pengembangan produk oleh Developer. Di tahap ini, desain yang telah lolos uji coba dan didesain oleh desainer UI mulai didevelop oleh para developer.
Meskipun telah masuk ke tahap developing, tugas desainer UI dan UX tidak langsung berakhir. Developer bisa tetap berkolaborasi dan berkomunikasi dengan tim desainer untuk dapat mengatasi permasalahan bersama, jika ditemukan suatu kendala.
9. Design Usability Test
Setelah sebuah produk tercipta dengan tampilan yang baik, produk bisa mulai diluncurkan. Namun, sebelum benar-benar diluncurkan ke banyak orang, produk tersebut perlu melakukan proses uji coba dilakukan dengan memberikan skor pada setiap fitur desain.
Setelah diuji coba, desain tersebut akan mendapatkan saran dan masukan dari pengguna. Desain kemudian direvisi dan dites kembali sampai menjadi sebuah desain yang nyaman dan diinginkan pengguna.
Sumber : niagahoster.co.id
Hanya ini yang bisa saya bagikan, Semoga Bermanfaat, Salam SMK Bisa Hebat !
Subscribe Channel Youtube Saya dan Istri [ Jack Tersakiti ] [ Ida Piolanada Lea ]
Laporkan Link Mati di sini [ Laporin ]
Yapss Admin mohon maaf jika ada kesalahan dalam penulisan atau penguploadan, jika ada kesalahan mohon dibenarkan dengan berkomentar di bawah postingan tersebut, berikan saran yang sifatnya membimbing agar blog ini bisa bermanfaat bagi para Newbie di Indonesia tentunya, dan Jika ingin menyumbangkan Tutornya atau Modulnya silahkan kirimkan ke Email yang sudah saya sediakan, Terimakasih Guru :*
0 Response to "Belajar UI/UX #3: Cara Kerja Desain UI dan UX"
Posting Komentar
Wajib Komentar kalau sudah Berkunjung, dan Terimakasih Banyak Sobat...