Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pembelajaran
- Menjelaskan perbedaan konsep UI (User Interface) dan UX (User Experience)
- Mengidentifikasi prinsip dasar desain pengalaman pengguna
- Mengenali antarmuka serta alur kerja dasar Figma
- Membuat desain pertama berupa frame dan elemen visual sederhana
Capaian Pembelajaran
Mahasiswa memahami peran UI dan UX dalam pengembangan produk digital, mampu menjelaskan mengapa keduanya penting bagi keberhasilan aplikasi, serta terbiasa menggunakan Figma sebagai perangkat utama menggambar antarmuka selama satu semester.
Konsep UI dan UX
User Interface (UI) adalah semua hal yang terlihat dan dapat disentuh pengguna pada layar: tombol, ikon, gambar, warna, tipografi, dan tata letak. UI adalah wajah dari sebuah produk digital. Sementara itu, User Experience (UX) adalah keseluruhan pengalaman pengguna ketika memakai produk, mulai dari rasa mudah saat menyelesaikan tugas, kecepatan respons, kenyamanan navigasi, hingga kepuasan secara menyeluruh. Sederhananya, UI adalah tampilan luar produk, sedangkan UX adalah perasaan yang dirasakan ketika menggunakannya.
Hubungan keduanya saling melengkapi dan tidak bisa dipisahkan. Desain yang sangat indah namun membingungkan tetap saja gagal karena pengguna tidak mampu menemukan apa yang mereka butuhkan. Sebaliknya, alur yang sangat logis tanpa tampilan yang menyenangkan akan dinilai murahan atau tidak profesional. Produk digital yang baik selalu menyeimbangkan keindahan UI dengan kemudahan yang dijaga oleh UX, sehingga pengguna dapat mencapai tujuan dengan sedikit hambatan dan menikmati prosesnya.
Penting untuk dipahami bahwa desainer UI/UX bekerja untuk pengguna, bukan untuk diri sendiri atau klien semata. Keputusan desain harus didasarkan pada kebutuhan dan perilaku pengguna nyata. Hal inilah yang kelak mendorong perlunya riset pengguna: mengetahui siapa pengguna, apa masalah mereka, dan bagaimana mereka bekerja. Riset pengguna, pembuatan persona, dan peta perjalanan pengguna adalah alat yang akan membantu membuat keputusan desain yang lebih baik, meski pada tahap ini diperkenalkan secara ringkas sebagai wawasan.
Elemen Dasar Desain Visual
Desainer UI bekerja dengan seperangkat elemen yang menjadi bahasa visual: warna digunakan sebagai penanda identitas merek dan pembangkit emosi; tipografi menentukan keterbacaan dan karakter teks; spasi serta ruang kosong menciptakan hierarki dan keseimbangan; bentuk dan ikon menyampaikan makna secara cepat tanpa kata; dan ukuran layar menentukan bagaimana seluruh elemen disusun sesuai perangkat target. Konsistensi dalam penggunaan elemen ini menciptakan kesan profesional dan membantu pengguna memprediksi perilaku antarmuka.
Selain elemen, ada prinsip yang menuntun penyusunannya. Hierarki visual menjaga informasi paling penting tampil paling menonjol, misalnya tombol utama yang lebih besar dan berwarna kuat. Kontras membedakan elemen satu dengan lainnya. Keselarasan atau alignment memastikan semua elemen tersusun rapi di jalur yang sama. Kedekatan atau proximity mengelompokkan elemen yang berkaitan agar mudah dibaca sebagai satu kesatuan. Pemahaman terhadap prinsip ini menjadi dasar penilaian kualitas sebuah desain.
Mengenal Figma
Figma adalah aplikasi desain antarmuka berbasis cloud yang berjalan di browser maupun sebagai aplikasi desktop. Keunggulan utamanya adalah kolaborasi real-time: banyak desainer dapat mengerjakan file yang sama secara bersamaan, meninggalkan komentar langsung pada desain, dan membagikan tautan untuk dipresentasikan kepada klien. Figma juga menyediakan mode prototype untuk mensimulasikan alur aplikasi tanpa menulis satu baris kode pun.
Bagian utama antarmuka Figma terdiri dari toolbar di bagian atas yang memuat alat seleksi, frame, shape, dan teks; panel Layers di kiri yang menampilkan struktur hierarki elemen; kanvas kerja di tengah sebagai tempat menggambar; serta panel desain di kanan untuk mengatur properti elemen yang sedang dipilih. Konsep penting yang harus dikuasai adalah Frame, yaitu wadah yang merepresentasikan ukuran layar perangkat. Misalnya frame berukuran 1440×1024 mewakili desktop dan 390×844 mewakili ponsel modern.
Langkah Praktik Pertama
- Buka Figma dan masuk dengan akun, lalu buat file baru melalui menu New File.
- Pilih alat Frame (tombol pintas F) dan buat frame berukuran Desktop 1440×1024.
- Tambahkan Rectangle untuk membentuk latar, Text untuk judul, dan komponen dasar untuk tombol.
- Latih pemilihan elemen, pengubahan warna pada panel Properties, dan pengelompokan dengan Ctrl+G.
- Kebiasaan baik sejak awal adalah memberi nama layer yang jelas sesuai isinya.
Penutup dan Tugas Mandiri
Sebagai konteks pengembangan profesional, desain yang baik selalu berangkat dari pemahaman pengguna. Pendekatan riset pengguna, persona, jouney map, dan information architecture akan sangat membantu ketika merancang alur yang lebih besar. Untuk pertemuan ini, mahasiswa diminta mengeksplorasi seluruh alat yang tersedia di Figma lalu membuat frame desktop yang berisi latar, judul, dan satu tombol sebagai latihan pengenalan alat.
Setiap mahasiswa sebaiknya juga akrab dengan istilah inti yang akan dipakai sepanjang semester: frame, layer, component, auto layout, prototype, dan desain responsif. Penguasaan istilah ini memudahkan komunikasi dengan rekan kerja dan ke depannya dengan developer yang akan menerjemahkan desain menjadi kode.