UI/UX designer adalah perancang yang mengatur dua hal sekaligus pada website atau aplikasi: alur penggunaannya (UX, user experience) dan tampilan antarmukanya (UI, user interface). Tugasnya memastikan pengunjung bisa mencapai tujuan dengan mudah, misalnya menemukan layanan, membandingkan paket, lalu menghubungi Anda, kemudian menerjemahkan alur itu menjadi tampilan yang jelas dan konsisten.
Panduan ini ditulis untuk dua jenis pembaca: pemilik usaha yang akan bekerja dengan designer saat membuat website, dan orang yang sedang menimbang profesi ini. Kita bahas pengertian, beda UI dan UX, tugas harian, skill, alat kerja, cara belajar, dan cara bekerja sama dengan designer supaya hasilnya sesuai harapan.
Apa itu UI/UX designer
Istilah user experience dipopulerkan oleh Don Norman. Dalam artikel klasik Nielsen Norman Group tahun 1998, Norman dan Jakob Nielsen mendefinisikan user experience sebagai seluruh aspek interaksi pengguna akhir dengan perusahaan, layanannya, dan produknya. Artinya, UX bukan hanya soal layar. Kecepatan balasan WhatsApp, kejelasan harga, dan mudahnya menemukan alamat kantor juga bagian dari pengalaman pengguna.
Di artikel yang sama, keduanya menegaskan bahwa user experience perlu dibedakan dari user interface, walaupun UI jelas bagian penting dari desain. Di sinilah dua peran itu bertemu. UX menjawab "apa yang dibutuhkan pengguna dan dalam urutan apa", sedangkan UI menjawab "seperti apa tampilannya agar kebutuhan itu mudah dipenuhi". Penjelasan konsepnya lebih lengkap ada di artikel UI UX adalah. Artikel ini berfokus pada orangnya: apa yang dikerjakan seorang UI/UX designer.
Beda UI designer, UX designer, dan UI/UX designer
Di perusahaan teknologi besar, UI dan UX sering dipegang orang yang berbeda, bahkan dibagi lagi menjadi peneliti UX, penulis UX, dan designer sistem. Di tim kecil, agensi, dan proyek website usaha, satu orang biasanya memegang keduanya. Itulah yang disebut UI/UX designer.
Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.
| Aspek | UX designer | UI designer | UI/UX designer |
|---|---|---|---|
| Pertanyaan utama | Apa yang dibutuhkan pengguna? | Seperti apa tampilannya? | Keduanya, dari riset sampai tampilan akhir |
| Hasil kerja | Peta halaman, alur, wireframe, laporan uji | Desain halaman, komponen, panduan gaya | Wireframe sampai desain final dan prototipe |
| Alat ukur keberhasilan | Tugas pengguna selesai tanpa bingung | Tampilan konsisten, mudah dibaca, sesuai merek | Website mudah dipakai dan meyakinkan |
| Paling sering ditemui di | Perusahaan produk digital besar | Tim produk dan agensi kreatif | Agensi kecil, startup, proyek website usaha |
Tugas UI/UX designer dalam proyek website
Tugas designer paling mudah dipahami lewat urutan kerjanya. Urutan ini bisa lebih ringkas untuk landing page satu halaman dan lebih panjang untuk aplikasi website, tetapi tahapnya hampir selalu sama.
- Riset. Designer mempelajari siapa pengunjung website, apa yang mereka cari, dan apa tujuan bisnis Anda. Sumbernya bisa wawancara singkat dengan pelanggan, data analitik website lama, pertanyaan yang sering masuk lewat WhatsApp, dan pengamatan situs pesaing.
- Struktur. Hasil riset diterjemahkan menjadi peta halaman dan alur, lalu kerangka halaman tanpa warna yang disebut wireframe. Contoh bentuknya ada di artikel contoh wireframe website.
- Desain tampilan. Wireframe yang disetujui diberi warna, tipografi, gambar, dan komponen. Biasanya juga dibuat prototipe yang bisa diklik supaya alurnya bisa dicoba sebelum dibangun.
- Uji kegunaan. Beberapa orang diminta mencoba prototipe untuk menyelesaikan tugas tertentu, misalnya "cari harga paket lalu hubungi admin". Designer mencatat di mana mereka ragu atau tersesat, lalu memperbaikinya.
- Serah terima. Desain final diserahkan ke web developer beserta ukuran, warna, perilaku tombol, dan versi layar ponsel. Designer yang baik tetap mendampingi sampai website jadi, karena selalu ada keputusan kecil yang muncul saat membangun.
Bagi pemilik usaha, urutan ini penting karena menentukan kapan masukan paling murah diberikan. Mengubah urutan menu di tahap wireframe hanya butuh beberapa menit. Mengubahnya setelah website dibangun bisa memakan hari kerja developer.
Skill yang dibutuhkan UI/UX designer
Skill designer terbagi dua: skill keras yang bisa dilihat di hasil kerja, dan skill lunak yang menentukan apakah hasil kerja itu benar benar dipakai.
Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.
| Skill | Jenis | Contoh penerapan |
|---|---|---|
| Riset pengguna | Keras | Menyusun lima pertanyaan wawancara dan merangkum polanya |
| Arsitektur informasi | Keras | Menentukan isi menu dan urutan halaman layanan |
| Wireframe dan prototipe | Keras | Membuat kerangka halaman dan alur yang bisa diklik |
| Desain visual | Keras | Memilih tipografi, warna, jarak, dan hierarki teks |
| Dasar HTML, CSS, dan responsif | Keras | Merancang tata letak yang realistis untuk layar ponsel |
| Aksesibilitas | Keras | Menjaga kontras warna dan ukuran tombol yang mudah disentuh |
| Komunikasi dan presentasi | Lunak | Menjelaskan alasan setiap keputusan desain kepada klien |
| Menerima kritik | Lunak | Memisahkan selera pribadi dari temuan uji kegunaan |
Prinsip yang dipakai untuk menilai hasil desain dibahas di artikel desain website. Satu hal yang sering terlupa adalah kecepatan. Tampilan yang indah tetapi berat membuat pengunjung pergi sebelum halaman selesai dimuat, jadi designer perlu ikut memperhatikan ukuran gambar dan jumlah elemen. Cara mengukurnya ada di panduan cara cek kecepatan website.
Alat kerja UI/UX designer
Alat desain berubah cepat, tetapi kategorinya relatif tetap. Figma termasuk alat desain antarmuka yang banyak dipakai untuk desain sekaligus prototipe, dan program Google UX Design Certificate pun memakai Figma untuk materi desain resolusi tinggi. Alat lain dipakai untuk riset, lokakarya, dan analisis perilaku pengguna.
Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.
| Kategori | Kegunaan | Contoh hasil |
|---|---|---|
| Desain antarmuka dan prototipe | Membuat wireframe, desain final, dan prototipe klik | Berkas desain semua halaman versi desktop dan ponsel |
| Papan tulis digital | Lokakarya, pemetaan alur, kumpulan ide | Peta perjalanan pengguna dan daftar prioritas |
| Riset dan survei | Mengumpulkan jawaban dan rekaman sesi uji | Ringkasan temuan uji kegunaan |
| Analitik website | Melihat halaman yang paling sering dikunjungi dan ditinggalkan | Daftar halaman yang perlu diperbaiki |
| Dokumentasi desain | Mencatat warna, tipografi, dan komponen | Panduan gaya atau design system sederhana |
Untuk pemilik usaha, alat tidak terlalu penting. Yang penting adalah Anda bisa melihat dan memberi komentar pada desain sebelum dibangun. Hampir semua alat desain modern bisa dibagikan lewat tautan, jadi mintalah akses lihat dan komentar sejak tahap wireframe.
Cara belajar menjadi UI/UX designer
Profesi ini tidak mensyaratkan gelar tertentu. Banyak designer datang dari desain grafis, psikologi, arsitektur, bahkan pemasaran. Jalur belajar yang umum:
- Pahami dasar prinsip desain dan riset pengguna. Mulai dari tipografi, hierarki visual, dan cara mewawancarai pengguna tanpa menggiring jawaban.
- Kuasai satu alat desain. Paket gratis Figma cukup untuk latihan dan proyek pertama.
- Ikuti program terstruktur bila perlu. Salah satu yang dikenal luas adalah Google UX Design Certificate.
- Kerjakan proyek lengkap. Pilih masalah nyata, misalnya merancang ulang website usaha keluarga, lalu kerjakan dari riset sampai prototipe dan uji.
- Susun portofolio yang menunjukkan proses. Perekrut ingin melihat bagaimana Anda sampai pada keputusan, bukan hanya gambar akhirnya.
Menurut halaman resminya, program Google ini mengajarkan persona, user story, peta perjalanan pengguna, uji kegunaan, wireframe dan prototipe, serta penyusunan portofolio. Halaman Coursera menuliskan estimasi waktu sekitar 6 bulan dengan 10 jam belajar per minggu, dan bisa diikuti tanpa gelar atau pengalaman. Sertifikat membantu sebagai kerangka belajar, tetapi yang menentukan saat melamar tetap portofolio.
Kapan usaha Anda butuh UI/UX designer khusus
Tidak semua proyek website butuh designer yang dikontrak terpisah. Untuk website company profile atau landing page, jasa pembuatan website yang baik sudah memasukkan tahap struktur, wireframe, dan desain di dalam prosesnya. Designer khusus mulai masuk akal ketika:
- Anda membangun aplikasi web yang dipakai pelanggan atau karyawan setiap hari, misalnya sistem pemesanan atau portal anggota.
- Toko online Anda sudah punya banyak produk dan Anda ingin menaikkan rasio pembelian lewat perbaikan alur.
- Website lama punya trafik besar tetapi sedikit yang menghubungi, dan Anda ingin tahu penyebabnya lewat riset.
- Anda sedang menyiapkan produk digital yang akan dijual, sehingga pengalaman pengguna menjadi bagian dari produk itu sendiri.
Kalau anggaran terbatas, prioritaskan riset singkat dan wireframe yang diuji ke beberapa pelanggan. Dua tahap ini paling banyak mencegah kesalahan mahal. Gambaran komponen biaya proyek website secara umum ada di artikel biaya bikin website.
Cara bekerja sama dengan UI/UX designer
Hasil desain sangat dipengaruhi kualitas bahan dan masukan dari pemilik usaha. Siapkan hal berikut sebelum proyek dimulai:
- Tujuan yang bisa diukur. Contohnya "menambah pesan WhatsApp dari halaman layanan", bukan "website terlihat modern".
- Gambaran pelanggan utama. Siapa mereka, dari mana mereka datang, dan apa yang membuat mereka ragu.
- Pertanyaan yang paling sering diajukan pelanggan. Ini bahan berharga untuk struktur halaman dan bagian tanya jawab.
- Contoh website yang Anda suka beserta alasannya. "Suka karena harganya langsung terlihat" lebih berguna daripada "suka karena keren".
- Materi merek. Logo, warna, dan foto asli usaha bila ada.
- Satu pengambil keputusan. Revisi yang datang dari banyak orang dengan pendapat berbeda adalah penyebab paling umum proyek molor.
Saat memberi masukan, jelaskan masalahnya, bukan solusinya. "Pelanggan saya kebanyakan orang tua dan tulisannya terlalu kecil" lebih mudah ditindaklanjuti daripada "ganti huruf jadi 18 piksel". Designer bisa menemukan beberapa cara menyelesaikan masalah yang sama, dan sebagian mungkin lebih baik dari yang Anda bayangkan.
Cara menilai portofolio UI/UX designer sebelum menyewa
Portofolio adalah bukti kerja paling penting dari seorang designer. Sayangnya, banyak portofolio hanya berisi gambar akhir yang indah tanpa penjelasan. Saat menilai, cari tanda tanda berikut:
- Ada cerita masalahnya. Proyek yang baik dijelaskan dari masalah awal, siapa penggunanya, dan apa yang ingin dicapai.
- Ada proses, bukan hanya hasil. Wireframe, catatan riset, atau versi awal yang kemudian diubah menunjukkan cara designer berpikir.
- Ada alasan di balik keputusan. Misalnya kenapa tombol kontak diletakkan di posisi tertentu, atau kenapa satu halaman dipecah menjadi dua.
- Ada versi ponsel. Website usaha banyak dibuka dari ponsel, jadi portofolio yang hanya menampilkan versi laptop patut ditanyakan.
- Ada hasil yang bisa dicek. Website yang sudah tayang bisa Anda buka sendiri untuk merasakan alurnya.
Saat wawancara, minta designer menjelaskan satu proyek dari awal sampai akhir dalam sepuluh menit. Penjelasan yang runtut biasanya mencerminkan cara kerja yang runtut juga.
Kesalahan umum saat merancang website tanpa proses UI/UX
Dari website usaha yang kami tinjau, kesalahan berikut paling sering muncul ketika tahap UI/UX dilewati:
- Menu disusun menurut struktur perusahaan, bukan kebutuhan pengunjung. Pengunjung mencari "harga" dan "layanan", bukan "divisi" atau "visi misi".
- Tombol kontak tersembunyi. Pengunjung yang sudah yakin tidak menemukan cara menghubungi.
- Desain hanya diperiksa di layar laptop. Padahal banyak pengunjung datang dari ponsel.
- Terlalu banyak animasi dan gambar besar. Tampilan memukau di presentasi, tetapi lambat saat dibuka dengan koneksi biasa.
- Tidak pernah diuji ke orang luar. Pemilik dan tim sudah hafal isinya, sehingga tidak merasakan bagian yang membingungkan.
Semua kesalahan ini bisa dicegah dengan wireframe dan uji sederhana sebelum website dibangun. Kalau Anda sedang menyiapkan website baru, panduan langkah demi langkah ada di artikel cara bikin website.
Kesimpulan
UI/UX designer adalah orang yang memastikan website atau aplikasi mudah dipakai dan meyakinkan. Ia bekerja dari riset, struktur, desain tampilan, uji kegunaan, sampai serah terima ke developer. Bagi yang ingin menekuni profesi ini, kuasai dasar riset dan satu alat desain, lalu bangun portofolio yang menunjukkan proses. Bagi pemilik usaha, yang terpenting adalah memastikan tahap struktur dan wireframe tidak dilewati, memberi tujuan yang jelas, dan menunjuk satu pengambil keputusan. Dengan begitu, desain yang dihasilkan tidak hanya enak dilihat, tetapi juga membantu pengunjung menjadi pelanggan.
Sumber
- Nielsen Norman Group, The Definition of User Experience (UX) (tab baru), untuk definisi user experience dari Don Norman dan Jakob Nielsen serta pembedaan UX dan UI.
- Grow with Google, UX Design Certificate (tab baru), untuk materi program dan daftar kursus, termasuk desain resolusi tinggi di Figma.
- Coursera, Google UX Design Professional Certificate (tab baru), untuk estimasi 6 bulan dengan 10 jam per minggu dan syarat tanpa gelar atau pengalaman.
- Figma, Plans and Pricing (tab baru), untuk paket Starter gratis dengan akses terbatas dan harga paket berbayar per Oktober 2026.
