Cheat Sheet UI/UX – Saat desain yang dirancang oleh UI/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, karena UI/UX designer tidak hanya tentang memudahkan user atau pengguna tapi juga memudahkan rekan kerja seperti developer.
Namun sayangnya, proses design handoff tidak semudah yang dibayangkan. Tidak jarang, baik designer maupun developer kurang saling memahami, beda persepsi, dan salah interpretasi. Hal ini dikarenakan designer tidak begitu paham dengan coding, sebagaimana developer juga tidak banyak tahu mengenai proses desain.
Akibatnya, waktu banyak terbuang dan kerjaan jadi semakin ruwet. Untuk mempermudah proses handoff UI/UX designer wajib mengetahui apa saja yang dipersiapkan jika ingin menyerahkan design-nya kepada developer.
Berikut 5 hal yang harus diketahui oleh UI/UX Designer dalam proses handover sebagai berikut:
Siapkan Design Responsive
Di zaman digital seperti sekarang ini membuat kebutuhan akan penggunaan website semakin meningkat. Ini sesuai dengan perkembangan gadget yang semakin canggih. Untuk itu responsive web design menjadi salah satu solusi yang perlu dipikirkan dengan baik oleh pemilih website agar dapat kompatibel di semua perangkat.
Design responsive pun pastinya memiliki ukurannya masing-masing, pernah mendengar pertanyaan seperti di bawah ini?
- “Untuk bagian layoutnya akan seperti apa ya kalau di hp?”
- “Nanti di layar iPad bentuknya kayak gimana ya?”
- “Ukuran titlenya jadi berapa px ya kalo di tampilan mobile?”
Keseharian para developer itu sudah kompleks, mereka harus memikirkan logic dan segala hal teknis. Mari ringankan pekerjaan mereka dengan selalu membuat design responsive agar mereka bisa coding tanpa kebingungan, ukuran layar yang perlu disiapkan oleh UI/UX designer yaitu ukuran 1440 px (desktop), 1024 px, 768 px, dan 360 px.
Assets Dibuat Exportable
Icon, graphic atau image adalah sebuah assets penting di dalam design yang bisa dibuat exportable. Jadi ketika tim developer men-select elemen tersebut opsi download nya sudah tersedia. Saat proses menyiapkan file untuk handover tanyakan kebutuhan mereka ketika export assets. Tetapi biasanya untuk mempermudah dalam proses develop developer meminta assets dalam bentuk WEBP dan PNG 1x hal ini digunakan developer agar ketika user mengakses website tidak terlalu berat.
Gunakan Grid System
Dalam mendesain agar terlihat konsisten dibutuhkan garis-garis bantu. Hal ini agar desain yang dihasilkan akan lebih rapi, dan dengan menggunakan grid akan memudahkan proses development karena susunan layout nya menjadi terstruktur.
Siapkan grid system untuk tiap ukuran layar dengan ukuran sebagai berikut:
Konsistensi Dalam Design
Sebagai seorang yang mendalami bidang UI/UX design seringkali mendengar istilah design system. Intinya adalah sebuah kumpulan komponen design yang dapat digunakan kembali dan memiliki aturan yang jelas sehingga dapat disusun menjadi sebuah produk.
Dengan adanya design system akan membuat sebuah desain menjadi terlihat konsisten dan akan sangat membantu dan menghemat waktu rekan developer. Hal ini karena Anda bisa setup dari awal segala komponen baik font, warna, buttons, card, dan komponen lainnya.
Gunakan Small Notes
Dalam kolaborasi dan iterasi antara tim desain dan developer terkadang tidak luput dari kesalahan, design yang dimaksud A justru pada eksekusinya B. Agar tidak adanya kesalahpahaman UI/UX designer harus memberikan notes atau penjelasan informasi tentang desain yang dibuat.
Tempatkan small notes disamping design yang akan dikembangkan yang berisikan penjelasan singkat tentang desainnya yang kira-kira perlu penjelasan lebih. Tim desainer bisa gunakan small notes tersebut untuk menjelaskan Interactions Behavior atau State yang tidak terlihat di mockup.
Anyway, untuk mempermudah proses handover kepada developer, UI/UX designer bisa menggunakan bantuan tools seperti zeplin dan figma. Kelebihan menggunakan zeplin sebagai berikut:
-
Untuk tools integrasi mockup ke bentuk CMS & HTML yang akurat dengan ukuran aslinya.
-
Dapat merangkum semua warna, style font, komponen, hingga transparansi piksel yang digunakan di aplikasi ke libraries.
-
Style Guide yang dibuat dapat langsung sesuai dengan desain mockup.
Hal yang perlu diingat walaupun designer sudah melakukan proses handover kepada developer melalui link figma, zeplin atau yang lain nya bukan berarti proses pembuatan produk atau website nya telah selesai di sisi designer.
UI/UX designer tetap harus berkomunikasi dengan developer, bertanya apakah ada kesusahan, bertanya apakah ada assets yang kurang dan yang paling penting adalah memastikan proses konversi design menjadi kode nya berjalan lancar.
Dengan mendokumentasikan assets seperti icon dan gambar, membuat desain secara responsive, membuat grid pada desain yang dibuat, dan memberikan komentar pada setiap desain. Maka akan mempermudah programmer dalam proses development sebuah website dan mempersingkat waktu pengerjaan. Harapannya dengan adanya artikel ini tim desainer dimanapun berada bisa respect terhadap tim developer dengan memudahkan pengerjaannya.
Semoga dengan dibuatnya artikel ini, Anda dapat lebih memperhatikan beberapa hal penting terkait cheat sheet UI/UX designer jika ingin handover ke tim developer. Tertarik untuk mempelajari lebih dalam mengenai UI/UX? AMD Academy hadir untuk membantu Anda dalam dunia UI/UX. Untuk informasi lanjut dapat mengunjungi website kami di amd academy dan instagram kami @amdacademy.
