Ideal Design Workflow Process untuk UI/UX Designer

Halo semuanya, welcome back to Toffee #SharingMonday. Di setiap hari Senin, kita akan sharing insight seputar digital marketing, web development, dan juga design. Kali ini bersama saya Deka, saya sebagai designer di ToffeeDev akan membahas mengenai “Ideal Design Workflow untuk UI/UX Designer“.

Yang pertama adalah Initial Communication & Research. Komunikasi menjadi tahap awal bagi seorang designer untuk memahami apa yang harus dibuat. Kita harus bisa memahami dan mendapatkan informasi mengenai apa yang dibutuhkan dari klien. Dimulai menuliskan kebutuhan yang diinginkan oleh klien, dibuat dalam bentuk list kebutuhan tersebut atau langsung dimuat dalam bentuk sketsa/coretan. Kemudian kita mulai menganalisis atau research seluruh informasi yang diberikan oleh klien. Ini mencakup detail pemasaran, penelitian mereka sendiri tentang industri dan tujuan bisnis. Tentu saja mencakup pesaing dan juga target audiensnya.

Setelah mendapatkan berbagai informasi dari klien dan mendapatkan hasil researchnya, sekarang kita saatnya menerjemahkannya ke dalam bentuk wireframe. Wireframe ini berupa gambaran layout yang akan dijadikan sebuah website/apps. Tools yang biasa digunakan adalah Wireframe.cc atau bisa juga dengan Balsamic. Membuat wireframe cukup penting, karena kalau misalkan terjadi perubahan maka effort yang dihasilkan engga terlalu besar dibandingkan kalau kita misalnya udah dalam bentuk mockup design.

Nah, kalau misalkan tahap wireframe sudah mendapatkan approval, sekarang kita lanjut ke bagian mockup design. Mockup design yang dibuat berdasarkan wirefame akan memudahkan seorang UI Designer menerjemahkan bentuk layout menjadi mockup design yang sudah diberi warna, gambar, font, hingga ornamen sehingga design menjadi sebuah mockup yang nantinya akan dibuat ke dalam bentuk tampilan website/apps. Nah, sedangkan untuk tools yang digunakannya untuk membuat mockup design ini, sekarang ini cukup banyak banget. Yang paling sering digunakan yaitu Framer, ada juga Figma, terus ada juga Adobe XD. Sebenernya kita bisa juga pakai Photoshop. Cuma menurut saya sih, untuk di keadaan sekarang ini agak kurang ideal menggunakan photoshop karena banyak tools lainnya yang jauh lebih powerful untuk mendesain website/apps atau mungkin kalau misalkan kalian yang menggunakan MacOS, beruntunglah kalian karena kalian bisa menggunakan Sketch ataupun Principle. Karena sejauh ini Sketch adalah tools UI/UX Design yang paling populer dan banyak digunakan di perusahan-perusahaan besar.

Tahap selanjutnya adalah prototyping. Mungkin tahap ini adalah opsional. Tapi ada baiknya kita juga membuat prototype dari design mockup yang sudah kita buat supaya klien bisa mendapatkan “feel” yang diinginkan. Seperti adanya animasi dan interaksi pada website/apps tersebut. Untuk prototyping, kita bisa menggunakan Marvel Apps. Tapi kalau pengen yang lebih powerfull lagi ada InvisionApp, lalu ada juga Protopie, terus fitur-fitur di Adobe XD dan Sketch juga bisa kita manfaatkan untuk membuat sebuah prototype.

Kemudian Design Handoff adalah saat di mana kita berkolaborasi dengan developer. Itu artinya kita harus memberikan semua sumber dan aset kepada mereka sehingga mereka dapat mulai menerjemahkan desain menjadi sebuah produk yang berfungsi atau dalam hal ini adalah tampilan website/apps yang sesungguhnya. Di sini komunikasi juga sangat penting untuk developer memahami desain yang kita buat. Beberapa tools yang cukup berguna untuk proses Design Handoff ini contohnya adalah Zeplin. Dengan tools ini developer cukup dipermudah dalam mengumpulkan aset, seperti gambar, font, ukuran element, bahkan tampilan desain sudah diterjemakan secara otomatis ke dalam bentuk HTML dan CSS. Tapi bagi kalian yang menggunakan Adobe XD dan Framer, kalian bisa menggunakan fitur yang ada di dalamnya untuk proses Design Handoff karena secara keseluruhan hampir memiliki fitur yang sama dengan Zeplin. Sekadar catatan, seorang UI Designer juga ada baiknya memahami coding Front End minimal HTML dan CSS. Sehingga nantinya kita bisa memahami batasan-batasan dalam desain yang dapat diterjemahkan ke dalam bentuk coding.

Setelah product development, langkah terakhir yang harus dilakukan adalah user testing. Hal ini dilakukan untuk mendapatkan feedback dari pengguna yang nyata dan membantu kita untuk memahami fungsionalitas atau fitur yang perlu ditingkatkan lagi.

Oke jadi itulah beberapa tahapan atau workflow yang ideal untuk seorang UI/UX Designer. Semoga informasi ini bermanfaat, kalau misalkan kalian ada pertanyaan silakan kita diskusi di kolom komentar. Sekian insight dari saya kali ini, sampai ketemu lagi di #SharingMonday minggu depan.

Share this post :

Scroll to Top