Daftar Isi:
Banyak pemula membayangkan desainer UI/UX sebagai orang yang membuat tampilan aplikasi cantik di Figma. Itu hanya sebagian kecil. Desainer yang baik lebih banyak menghabiskan waktu memahami orang, mencari tahu mengapa pengguna bingung, lalu merancang cara agar mereka tidak bingung lagi.
Artikel ini menyusun roadmap UI/UX designer untuk pemula: memahami perbedaan UI, UX, dan product design, belajar prinsip visual dan Figma, melakukan riset sederhana, membuat prototipe dan mengujinya, lalu menyusun studi kasus yang menjadi inti portofolio. Anda tidak perlu jago menggambar untuk memulai.
UI, UX, dan Product Design
Ketiga istilah ini sering tercampur. Di perusahaan kecil, satu orang bisa mengerjakan semuanya, sedangkan di perusahaan besar pembagiannya lebih tegas. Nama jabatan juga berbeda antar perusahaan, jadi baca uraian tugas tiap lowongan.
| Peran | Fokus | Hasil kerja khas |
|---|---|---|
| UX designer atau UX researcher | Memahami pengguna, masalah, dan alur penggunaan | Temuan riset, alur pengguna, dan kerangka halaman |
| UI designer | Tampilan visual dan konsistensi antarmuka | Desain layar, komponen, dan panduan gaya |
| Product designer | Menggabungkan riset, desain, dan tujuan bisnis dari awal sampai akhir | Solusi utuh untuk satu produk atau fitur |
Prinsip Visual yang Dikuasai Pertama
Sebelum membuka alat apa pun, kenali dulu prinsip yang membuat sebuah tampilan terasa jelas.
Hierarki
Mata pengguna harus tahu apa yang dilihat lebih dulu. Ukuran, ketebalan, dan posisi menentukan urutan penting sebuah elemen.
Kontras dan keterbacaan
Teks harus mudah dibaca. Pedoman aksesibilitas web (WCAG) menyarankan rasio kontras minimal 4,5 banding 1 untuk teks biasa, dan ada banyak alat pemeriksa kontras yang bisa dipakai.
Spasi dan tata letak
Ruang kosong bukan pemborosan. Jarak yang konsisten membuat elemen terkelompok dengan jelas dan layar terasa lega.
Tipografi
Pilih sedikit jenis huruf dan terapkan aturan ukuran yang konsisten untuk judul, isi, dan keterangan.
Konsistensi dan aksesibilitas
Elemen yang sama harus terlihat dan berperilaku sama di mana pun. Perhatikan juga ukuran target ketuk di layar sentuh dan kebutuhan pengguna dengan keterbatasan penglihatan.
Jalur Belajar dalam 5 Tahap
Perkiraan waktu mengasumsikan belajar rutin sekitar 10 sampai 15 jam per minggu. Pakai sebagai patokan kasar, karena kecepatan tiap orang berbeda.
Baca Juga:
- Prinsip desain dasar (sekitar 3 sampai 4 minggu). Pelajari lima prinsip di atas dengan menganalisis aplikasi yang Anda pakai sehari-hari. Tanda siap: Anda bisa menjelaskan mengapa satu layar terasa jelas dan layar lain membingungkan.
- Menguasai Figma (sekitar 3 sampai 5 minggu). Pelajari bingkai, tata letak otomatis, komponen, dan varian. Figma menyediakan paket gratis, tetapi periksa ketentuan terbaru di situs resminya. Tanda siap: Anda bisa membuat komponen tombol dengan beberapa kondisi tanpa mengulang pekerjaan.
- Riset dan alur pengguna (sekitar 3 sampai 5 minggu). Wawancarai sekitar lima orang yang punya masalah yang ingin Anda selesaikan, rangkum temuannya, dan gambarkan alur yang mereka tempuh. Tanda siap: Anda bisa menyebutkan masalah utama pengguna berdasarkan ucapan mereka, bukan tebakan.
- Wireframe, prototipe, dan uji (sekitar 4 sampai 6 minggu). Mulai dari sketsa kasar, lanjut ke prototipe yang bisa diklik, lalu minta tiga sampai lima orang mencobanya sambil Anda mengamati tanpa membantu. Tanda siap: Anda punya daftar temuan dari pengujian dan perbaikan yang Anda lakukan karenanya.
- Studi kasus dan design system dasar (sekitar 4 sampai 8 minggu). Tulis proses Anda dari awal sampai akhir, dan susun kumpulan warna, tipografi, dan komponen yang konsisten. Tanda siap: orang lain bisa memahami keputusan Anda hanya dengan membaca studi kasusnya.
Studi Kasus: Inti Portofolio
Banyak pemula mengunggah gambar layar yang cantik, tetapi perekrut ingin melihat cara berpikir di baliknya. Studi kasus yang baik menjawab pertanyaan: mengapa Anda membuat keputusan ini, dan bagaimana Anda tahu itu berhasil?
| Bagian | Yang ditulis |
|---|---|
| Masalah dan konteks | Siapa penggunanya, apa masalahnya, dan mengapa penting |
| Peran dan batasan | Apa tugas Anda, durasi, dan keterbatasan yang ada |
| Riset | Cara Anda mengumpulkan informasi dan temuan utamanya |
| Keputusan desain | Pilihan yang Anda ambil beserta alasannya, termasuk opsi yang ditolak |
| Hasil pengujian | Apa yang ditemukan saat pengguna mencoba dan perubahan yang dilakukan |
| Refleksi | Yang berhasil, yang belum, dan yang akan diubah jika punya waktu lebih |
Etika portofolio:
- Jika memakai redesain latihan dari aplikasi yang sudah ada, tulis jelas bahwa itu latihan dan bukan proyek resmi.
- Jangan menyalin desain orang lain lalu mengakuinya sebagai karya sendiri.
- Jangan mengklaim dampak bisnis tanpa data. Lebih jujur menulis apa yang Anda pelajari dari pengujian.
Proyek Portofolio yang Layak Ditunjukkan
| Proyek | Isi | Yang dibuktikan |
|---|---|---|
| Redesain satu alur yang membingungkan | Pilih alur seperti pendaftaran atau pembayaran, jelaskan masalahnya, rancang ulang, dan uji | Kemampuan menganalisis dan memperbaiki |
| Aplikasi kecil untuk masalah nyata di sekitar | Misalnya pencatat iuran lingkungan atau jadwal kegiatan, lengkap dengan riset kepada pengguna sebenarnya | Proses riset sampai prototipe yang utuh |
| Design system mini | Warna, tipografi, komponen, dan dokumentasi pemakaiannya | Konsistensi dan cara berpikir sistematis |
Tentang Alat AI dalam Desain
Alat AI bisa mempercepat eksplorasi tampilan dan pembuatan draf teks antarmuka. Namun riset kepada pengguna, keputusan desain, dan pertanggungjawaban atas hasilnya tetap tugas Anda. Portofolio yang seluruhnya dihasilkan alat tanpa proses berpikir yang bisa Anda jelaskan akan sulit dipertahankan di wawancara.
Bekerja dengan Developer
Desain yang tidak bisa dibangun atau terlalu rumit untuk dikerjakan akan berhenti di atas kertas. Desainer yang memahami dasar HTML, CSS, dan cara kerja komponen biasanya lebih mudah diajak bekerja sama. Jika Anda penasaran sisi pengembangannya, lihat web developer tanpa kuliah IT.
Cara Melamar Posisi Pertama
Kata kunci yang bisa dicoba antara lain junior UI/UX designer, product design intern, UX researcher intern, atau web designer. Banyak perusahaan memberi tugas studi kasus singkat atau meminta Anda mempresentasikan portofolio, jadi latih menjelaskan proses Anda dengan runtut. Taruh tautan portofolio di bagian paling atas CV, dan panduan penyusunannya ada di cara membuat CV fresh graduate. Untuk membandingkan dengan jalur lain, lihat roadmap 15 jalur karir IT.
Kesalahan yang Sering Terjadi
- Langsung mendesain layar tanpa memahami pengguna dan masalah yang ingin diselesaikan.
- Mengunggah gambar tampilan saja tanpa menjelaskan proses dan alasan keputusan.
- Menyalin tren tampilan tanpa memikirkan apakah cocok untuk penggunanya.
- Menguji prototipe hanya pada teman yang pasti memuji, atau membantu saat mereka kebingungan.
- Mengabaikan keterbacaan dan aksesibilitas demi tampilan yang dianggap estetis.
FAQ
Apakah harus pandai menggambar?
Tidak. Kemampuan menggambar membantu, tetapi desain antarmuka lebih bergantung pada pemahaman pengguna, tata letak, dan konsistensi. Sketsa kasar sudah cukup untuk tahap awal.
Apakah UI/UX designer harus bisa coding?
Tidak wajib, tetapi memahami dasar HTML dan CSS membantu Anda merancang hal yang realistis dan berkomunikasi dengan developer.
Apakah bisa menjadi UI/UX designer tanpa gelar desain?
Bisa. Perekrut biasanya menilai dari studi kasus dan cara berpikir. Namun sebagian lowongan, terutama di instansi tertentu, mensyaratkan jurusan atau ijazah tertentu, jadi baca persyaratannya.
Berapa banyak proyek yang perlu ada di portofolio?
Dua sampai tiga studi kasus yang mendalam biasanya lebih meyakinkan daripada sepuluh gambar tanpa penjelasan.
Berapa lama dari nol sampai siap melamar?
Bagi banyak orang yang belajar rutin, kisarannya sekitar enam bulan sampai satu tahun lebih, tergantung latar belakang dan jam belajar. Angka ini hanya gambaran kasar, bukan target.
Baca Juga:
Kesimpulan
Desain antarmuka yang baik jarang terlihat mencolok, karena penggunanya tidak perlu berpikir saat memakainya. Itu sebabnya kemampuan yang paling berharga bukan menguasai banyak fitur Figma, melainkan memahami orang, mengambil keputusan yang bisa dijelaskan, dan berani mengubah rancangan setelah melihat pengguna kesulitan. Perekrut yang berpengalaman biasanya lebih tertarik membaca bagian refleksi, misalnya apa yang ternyata salah dan bagaimana Anda memperbaikinya, daripada melihat gambar layar yang paling rapi. Mulailah minggu ini dengan memilih satu alur di aplikasi yang sering membuat Anda bingung, lalu tanyakan kepada tiga orang di sekitar Anda apa yang membuat mereka kesulitan saat menggunakannya.
