Memulai belajar UI UX Design, 5 tips dan langkah praktis bagi pemula di 2021

📖

Gimana proses desain ku?

Kalau kamu pernah freelance, pasti pernah ditanya pertanyaan serupa. How’s your design process looks like?

Jawabannya bisa beragam. Selama 8 tahun berkarya, saya selalu mengikuti proses yang sama. Proses yang merangkum pekerjaan UX Research, UX Design, UI Design dan juga Interaction Design menjadi 1 urutan yang singkat.

Research — Wireframe — Design — Prototype — Handoff

Sederhana dan masuk di akal.

Kalau kamu ingin lebih rumit dan rieut ya tentu bisa aja. Setiap langkah di atas bisa dijabarkan detail sampe anak dan cucunya. Contohnya di bagian pertama Research, bisa diartikan juga Understand.

Research

Mind map by Mei Zhang, Booking.com

Saya ga ngelakuin itu semua, kenapa? Karena banyak faktor.

• Keterbatasan waktu.
• Keterbatasan dana.
• Belum dirasa valuable (dampak nya tidak langsung terasa).
• Client tidak mengaggap itu diperlukan pada tahap awal.

Tapi bukan berarti semua nya dihilangkan. Yang biasa saya lakukan, at least 2 hal, mencari tau domain knowledge dan analisis kompetitor. Dari sana uda bisa cukup banyak tahu apa yang kira2 potential costumer mau dan apa yang bisa kita unggulkan dibanding yang lain.

Wireframe

Cara membuat UI Design tidak serta merta langsung buka design tools dan mulai buat kotak dan lingkaran. Perlu proses coret2an ide kasar dulu, yaitu wireframing process.

Wireframe juga kalau dijabarkan bisa jadi banyak ya. Sederhananya terbagi jadi low-fidelity dan high-fidelity. Ketilitian rendah dan ketelitian tinggi.

Low-fi itu berupa kerangka sederhana, ada pun high-fi itu yang biasa kamu buat dan posting di dribbble, yaitu hasil akhir mockup yang bersifat detail, kental dengan aspek visual desain.

Saat kita melakukan high-fi, sejatinya kita sudah masuk ke tahapan Design, yaitu ya mendesain User Interface dengan design tools (baik figma, sketch, ataupun Adobe XD), pushing pixels, practicing all visual design principles.

Membuat low-fi bisa sesederhana coret2 di kertas skema besar alur kerja suatu aplikasi atau kerangka dasar suatu page tertentu. Gunanya ngebuat low-fi yaitu ide di dalam pikiran bisa keluar cepet2, ga pake kehambat karena kompleksitas design tools, ga pake ribet ngurus aligment atau estetik tampilannya.

Nge gambar alur kerja sederhana untuk web HomeCredit di tahun 2015. Ga banyak mikir, yang penting keluar dulu ide nya. Snippet diambil dari buku PetunjukUX.com

Walau tool digital udah banyak, terkadang coret2 untuk buat layout di kertas yang ada frame hp nya bakal ngebuat ide di otak kita cepet ngalirnya. Kalo kamu mau printable nya, DM aja kita di Instagram.

Apa manfaatnya low-fi kalau kita bisa langsung ke high-fi?

Beda kerjaan beda tujuan ya temen2. Ini tidak menggantikan satu sama lain. High-fi memang tujuan akhir kita, namun low-fi tempatnya menemukan kejelasan (clarity) dari alur kerja yang product kita ingin capai.

Di tahap low-fi ini terjadi banyak diskusi dengan stakeholder mengenai workflow, feasibility process, dan limitations (baik technical, business dan product). Disini juga ide kita diuji dari berbagai sisi, baik Accesibility dan Usability .

💡
Accesibility = Seberapa mudah desain kita diakses berbagai macam orang dalam berbagai macam kondisi.
Usability = Seberapa mudah desain kita dapat digunakan dan menyelesaikan tugas yang dibebankannya dengan lancar dan cepat.

Sehingga, saat kita masuk ke high-fi, hampir semua pertanyaan sudah terjawab. Ga perlu ada lagi feedback2 mencekam yang dadakan dangdut di akhir pekerjaan yang udah detail.

Workflow berbentuk digital bagus untuk dokumentasi resmi agar tim atau bos atau client ga bingung bacanya dan bisa dijadiin acuan berulang saat diskusi. Snippet diambil dari buku PetunjukUX.com

Di tahap wireframe didefinisikan juga gimana alur pengguna dalam menjalankan tugasnya. Jangan ampe ribet dan makan banyak waktu banyak. Ini wireframe aplikasi otomotif saat saya kerja di agency Singapore 2015.

💡 Fun facts,

Dengan low-fi diagram ini, aku masih inget, client seneng pisan karena terbukanya pikiran mereka.

Karena bukan hanya kita yang mencari kejelasan, tapi mereka pun merasa terbimbing mencari tau lebih dalam ide awal dan kejelasan masalah yang ternyata masih abstrak.

Dari sini pun terbuka tabir2 hal baru yang ga pernah terpikirkan sebelumnya.

Design

Yaitu kerja utama kita sebagai UI designer, merealisasikan ide dalam bentuk desain mockup (gambaran nyata rancangan produk). Gunakan tool yang dirimu paling nyaman menggunakannya, kalau tidak ada preferensi, pilih Figma.

Dalam mendesain usahakan selalu mentaati cara bermain (design principles) yang ada dengan cara mengikuti Guidelines yang sudah disediakan.

Guidelines ini ada yang bersifat spesifik (platform dependent; iOS, Android, Web) dan ada juga yang global. Kedua2nya bersifat seperti rambu lalu lintas, yang kalau dilanggar akan mengakibatkan disaster pada desainmu.

Kalau kamu baru pertama kali mendesain interface, ada baiknya gunakan metode ATM (Amati Tiru Modifikasi). Namun jangan asal ATM, kamu harus pilih desain mana yang harus kamu amati. Untuk memulai sangat disarankan mengamati aplikasi2 sistem yang original dari iOS maupun Android.

✅ Tips praktis

1. Cari aplikasi Mail di kedua platform iOS dan Android
2. Googling salah satu page nya (misal inbox)
3. Amati dan Tiru secara plek desain keduanya. Pahami apa yang membuat mereka terlihat rapih, pahami sistem spacing yang mereka gunakan, pahami pemilihan font dan colour yang mereka terapkan.
4. Setelah terjawab semua nya, coba modifikasi font nya, colour nya, adjust ukuran nya sedikit2 dan kemudian bandingkan.

Amati Tiru Modifikasi app official dari Android dan iOS.

Dengan mengikuti langkah di atas, kamu akan lebih cepat memahami UI Design dibanding kamu memulai canvas dari 0 dan clueless gatau mau mulai darimana.

Selain itu ada beberapa practical tips lainnya yang bisa kamu baca di buku Petunjuk Memulai UX dari NOL.

Ingat, dalam mendesain UI selalu jadikan Usability dan Accesibility sebagai sasaran utamamu. Setelah 2 hal itu terpenuhi, kamu bisa berkespresi sekreatif mungkin dalam sisi aesthetic dan pleasure/ delight.

Prototype

Orang bilang, UI designer kalo udah masuk (ngerjain) protoyping, uda jadi next level designer. Ada benernya!

Prototyping memang bukan wajib, tapi ini akan sangat membantu komunikasi dengan developer mengenai ide kamu dengan lebih komprehensif dan utuh. Prototype juga bisa kamu kasih ke stakeholder lainnya untuk alat user testing, atau presentasi ke atasan.

Orang bilang: It’s the closest design to reality that what makes prototyping valuable.

Interactive layer yang menggabungkan visual, video, dan voice UI menggunakan Framer Web. Tutorial lengkap ada di sini.

Anw, protoyping process akan kita bahas terpisah di blog post selanjutnya. Agar lebih afdol dan ga terputus. Follow akun ini untuk dapet update-an nya.

Handoff

Adapun Handoff, itu dimana kita menyerahkan hasil akhir pekerjaan kita untuk diimplementasi oleh developer/engineer atau dijadikan bahan presentasi stakeholder lain.

Handoff juga krusial bagi karir kalian. Kenapa?

Karena ini memerlukan komunikasi yang jitu dengan partner kita. Designer yang handal untuk ngobrol bareng non-designer, bisa nyambung pas ngobrolin kerjaan atau pas hang-out, pastinya bakal bernilai lebih.

Saya sendiri selalu nyaranin ke temen2 terdekat untuk coba main lebih jauh. Ga berputar2 di ui dan ux design aja, tapi juga belajar front end, back end, product, machine learning, AI, IoT atau AR/VR.

Blog post selanjutnya bakal kita bahas lebih dalam tentang Interaction Design dan bagaimana proses kita membuat Prototype, lengkap bersama Klasifikasi UX Prototyping tools 2021. Stay tuned!

Follow Medium HaloDesigners untuk dapet update2 selanjutnya.

Dan follow juga Instagram kita @halodesigners untuk belajar bersama UI Design, UX Design dan UX Research bareng temen2 yang baru memulai dan profesional lainnya. Sstt.. kita sering bagi2 tips dan mentoring desain gratis loh 🤐.

Kalo kamu lagi hunting kerjaan sebagai UI Designer, UX Designer, atau UX Researcher, 3 hari lalu ada perusahaan unicorn besar yang nge post di HaloDesigners.com untuk role yang mungkin cocok dengan profil mu. Posisi anak internship berbayar juga ada. Cek di HaloDesigners.com

Bagi pemula yang baru memulai belajar UX Design, ada media baru yang buat kamu makin mudah paham dan senyam senyum saat bacanya, Design Thinking Manga. Belajar Design Thinking melalui komik.

Kamu bisa beli atau download free pdf version langsung di website nya. That’s it. Stay curious, stay safe! 👋