Binar Academy — Saat desain yang dirancang oleh UX designer secara keseluruhan sudah selesai dan prototype telah diuji, biasanya desain akan diserahkan ke Developer untuk nantinya diimplementasikan ke dalam bahasa pemrograman. Proses inilah yang sering disebut dengan design handoff.
Namun sayangnya, proses design handoff nggak semudah yang dibayangkan. Nggak jarang, baik designer maupun developer kurang saling memahami, beda persepsi, dan salah interpretasi. Hal ini tentunya dikarenakan designer nggak begitu paham dengan coding, sebagaimana developer juga nggak banyak tahu mengenai proses desain. Akibatnya, waktu banyak terbuang dan kerjaan jadi makin ruwet.
Sebagai UX designer, menyerahkan desain ke developer dengan cara yang baik dan benar dapat mengefektifkan waktu dan mencegah kemungkinan terburuk terjadi. Nah, bagaimana caranya? Berikut beberapa kiat-kiat mudah buat kamu terapkan ketika merancang design handoff!
Communication is the key!
Kolaborasi antara designer dan developer memainkan peran yang penting dalam keberlangsungan project. Persiapan handoff sebaiknya dilakukan di awal sebelum keseluruhan proses mendesain dimulai. Di sini, komunikasi adalah kuncinya. Sebelum memulai, pastikan baik itu designer dan developer sudah selaras dan seirama. Kamu bisa berdiskusi dengan developer mulai dari membicarakan hal-hal teknis terkait workflow, guidelines, tools yang akan digunakan, pengkategorisasian file, hingga penggunaan istilah pada produk dan penamaan pada screen.
Membuat Checklist
Bagian paling penting lainnya selama project berlangsung dan sebelum melakukan design handoff adalah membuat checklist! Hal ini dilakukan untuk menghindari terjadinya desain-desain yang nggak tanpa sadar terlewatkan atau kelupaan. Kalau sampai kejadian, bisa gawat! 😱
Nah, solusi untuk mencegah hal tersebut terjadi adalah designer dan developer dianjurkan untuk membuat checklist secara bersama-sama. Tujuannya adalah agar kamu dan developer sama-sama tahu apa saja yang perlu di handoff dan sejauh mana progres dari masing-masing. Ada beberapa work tools yang bisa kamu gunakan untuk membuat checklist, yaitu seperti Trello, Clickup, dan lain-lain.
Konsisten dalam penamaan
Dari berbagai aspek dan prinsip terkait design system, penamaan adalah salah satu elemen yang penting dan fundamental. Penamaan yang baik akan membantu developer dalam menavigasi file dan mencegah dari terjadinya duplikasi. Berbicara mengenai penamaan, ada beberapa hal yang perlu kamu perhatikan:
- Menyepakati pemakaian istilah/nama bersama developer dan membuat standar penamaan
- Gunakan istilah/nama produk, file, dan screen yang konsisten
- Penamaan pada setiap screen harus menjelaskan fungsinya, seperti “Home Screen.png” bukan “Home Screen new2.png”
- Pastikan bahwa kamu menggunakan text case yang juga konsisten untuk semua screen, yaitu bisa sentence case, lowercase, ataupun title case
Don’t let it just flow
Membuat flow bukan hanya sekadar menyatukan screen per screen. Buatlah flow yang seperti peta alur dari semua screen yang selogis mungkin dan saling berelasi satu dengan lainnya. Kamu harus memastikan bahwa flow yang dibuat merupakan prototype yang interaktif serta dapat dimengerti dengan jelas oleh developer.
Jika diperlukan, tambahkan juga beberapa komentar/catatan untuk developer pada beberapa screen statis — karena nggak semua screen merupakan high-fi prototype. Hal ini akan mempermudah developer untuk mengimplementasikannya ke dalam bentuk kode.
Dokumentasi UX copy
Nggak hanya desain, kamu juga harus memastikan bahwa semua copy pada desainmu juga sudah ikut didokumentasikan. Hal ini akan menghemat waktu developer untuk menyalin semua copy yang ada pada desain. Sehubung dengan hal itu, kamu dapat memindahkan semua copy ke dalam satu deck dengan menggunakan Paper by Dropbox atau Google Sheet.
Menata aset dan spesifikasi
Count ourselves lucky karena sekarang sudah banyak tools yang tersedia dan bisa kamu gunakan untuk design handoff, yaitu seperti Figma, Zeplin, Adobe XD, dan sebagainya. Tools tersebut dapat mempermudah kamu dalam design handoff. Kamu nggak perlu membuang banyak waktu untuk mengatur spesifikasi, ukuran, dan styleguide pada desainmu karena biarkan tools yang bekerja secara otomatis untukmu! 😉
Jadi, di sini kamu tinggal mengatur aset desainmu, baik itu gambar, icon, dan font dalam satu directory dengan rapi dan tertata. Adapun ketika kamu menyerahkan spesifikasi ke developer, jangan lupa untuk memberitahu mengenai grid system yang kamu gunakan pada desainmu. Lagi-lagi, hal ini juga akan membantu banget buat developer!
Real-time kolaborasi dan iterasi
Serupa lomba lari estafet, pelari harus memastikan bahwa tongkat yang ia bawa sudah betul-betul sampai ke tangan pelari berikutnya dengan selamat. Begitupun dengan design handoff, agar proses ini berjalan dengan baik dan sentosa, sinkronisasi antara UX designer dengan developer di sini sangatlah krusial.
Karenanya, penting banget nih bagi designer untuk mengikutsertakan developer selama proses desain berlangsung dari awal hingga akhir. Koordinasi nggak cuma dilakukan sekali ataupun dua kali, tapi secara terus-menerus ya! Bukan hanya supaya design handoff berjalan sukses, tapi juga agar designer dan developer makin saling mengerti satu sama lain!
Kalau kamu ingin belajar membuat handoff langsung dari para profesional, atau belajar lebih dalam terkait ilmu-ilmu seputar UI/UX, kamu bisa belajar melalui kelas UI/UX yang selalu tersedia di Binar Insight!
Tak hanya itu, apabila kamu ingin mendapatkan pelatihan lebih intensif lagi, ikuti bootcamp UI/UX Research & Design dari Binar Bootcamp yang dijamin akan membuatmu semakin jago di bidang UI/UX!
.png)
.jpg)
