Melissa Veronica - 160821004

Digitalize your Roadmap through UI/UX

Pembicara: Fini Charisa

Dewasa ini, hampir semua orang menggunakan smartphone atau barang-barang

digital lainnya dalam melakukan kegiatan sehari-harinya. Tentunya, berbagai jenis aplikasi
dibutuhkan sesuai keperluan masing-masing. Untuk menarik pengguna dalam menggunakan
suatu aplikasi, pertama-tama, tentunya user harus dibuat tertarik dengan tampilan aplikasi
tersebut. User interface atau yang biasa dikenal sebagai UI merupakan tampilan visual dari
suatu aplikasi sebagai media untuk menghubungkan sebuah sistem dan user demi
menciptakan interaksi yang baik dengan user. Dalam pengaplikasiannya, UI juga saling
berdampingan dengan UX yang adalah user experience. Meskipun UI dan UX saling terikat,
namun mereka mempunyai tugasnya masing-masing. User experience adalah pengalaman
pengguna dalam berinteraksi dengan suatu aplikasi atau software untuk memberikan
kemudahan bagi pengguna. Tujuan dari UX berhubungan dengan memberikan kemudahan
bagi pengguna saat menggunakan berbagai fitur pada produk digital yang ada, sedangkan
tujuan dari UI adalah agar suatu aplikasi atau software mampu memberikan tampilan dan
interaksi yang sesuai dan dapat memudahkan pengguna dalam mencari informasi maupun
tujuan dalam aplikasi tersebut.

Dalam mendesign UI, ada beberapa hal yang perlu diperhatikan. Yang pertama adalah
icon, dimana designer fokus pada style, source, kesesuaian dengan konteks, sizing, dan
bentuk sederhana. Kemudian, designer juga perlu memerhatikan grid dan jarak. Biasanya,
grid dan jarak dalam UI angka-angkanya tidak beragam sehingga akan memudahkan designer
dalam melakukan design UI. Contohnya adalah kelipatan 4, sehingga ukuran-ukuran dalam
design suatu aplikasi ada disekitar 4, 8, 12, 16, 20, dan seterusnya. Grid dan jarak pada UI
dibagi menjadi padding, spacing, gutter width, dan ukuran layar. Yang ketiga, tipografi dan
font juga termasuk dasar dalam UI design. Tipografi dan font termasuk bagian yang sangat
penting karena jika saat pengguna melihat tampilan bentuk tulisan saja sudah tidak nyaman,
pengguna tersebut juga akan malas menggunakan aplikasi. Maka dari itu, memiliki hierarki
yang jelas dan tipografi yang bersih adalah hal yang sangat penting untuk menciptakan kesan
pertama pada pengguna dan pengguna diharapkan menetap di halaman. Hierarki adalah suatu
susunan hal dimana hal-hal tersebut dikemukakan sebagai beraada di atas, bawah, atau pada
tingkat yang sama dengan lainnya. Setelah menarik perhatian pengguna, hal kedua yang akan
dilihat adalah cara penyampaian informasi dalam bentuk teks. Maka dari itu, dibutuhkan font
yang sekiranya dapat membantu penyampaian pesan, bukannya malah mengalihkan
pengguna dari tulisan. Pembicara juga merekomendasikan untuk aplikasi atau web, cukup
pakai 2 jenis font dan divariasi di weightnya. Dasar design UI yang terakhir adalah warna.
Untuk warna pada UI design, tidak perlu banyak-banyak, namun diperbanyak pada
turunannya. Ada beberapa teknik warna yang bisa dipakai untuk mencari kombinasi.

Gambar 1. Lingkaran warna

Yang pertama adalah complementary, dimana kombinasi warnanya kontras yaitu dua warna
berseberangan dalam lingkaran warna atau color wheel (Gambar 1), contohnya adalah merah
dan hijau. Yang kedua adalah split complementary, dimana kombinasi warna tidak langsung
kontras yaitu suatu warna pada lingkaran warna dengan warna lain yang berada di sebelah
dari seberang warna pertama, contohnya adalah merah dengan biru muda atau hijau muda.
Teknik kombinasi warna yang ketiga adalah analogous, dimana kombinasi warna adalah
suatu warna pada lingkaran warna dengan warna lain yang tepat di sebelahnya, seperti hijau
dengan hijau muda atau biru muda. Teknik warna yang terakhir adalah monochrome, yaitu
memiliki 1 warna utama dan sisanya adalah turunannya (Gambar 2). Namun sekarang, di
Figma atau Adobe XD, sudah mudah untuk mencari warna karena software akan membantu
untuk generate. Sehingga, user hanya perlu mencari warna dasar saja.

Gambar 2. Turunan warna

 Selain dasar-dasar dalam UI design, seorang UI designer juga harus menguasai proses
UI design yang dibagi menjadi beberapa tahap. Tahap pertama adalah understand. Jadi,
seorang UI designer harus bisa memahami. Biasanya, designer melakukan meeting dengan
client di awal untuk membahas jenis proyek, durasinya berapa lama, dan lain lain. Hal-hal
tersebut sebaiknya disepakati di awal agar tidak menimbulkan salah paham kedepannya. Di
step ini, designer juga melakukan riset apakah company ini besar atau kecil, kemudian
cakupan usernya kira-kira siapa saja, hingga ke pembayaran, apakah dibayar DP di awal, atau
langsung bayar lunas di awal. Yang terpenting, minimal harus membayar DP sekitar 30-40%
untuk meminimalisir penipuan. Kemudian, tahap yang kedua adalah research dimana
designer harus melakukan riset untuk beberapa hal seperti user persona, dimana designer
mencari siapa kira-kira yang bakal pakai aplikasi itu, perkiraan umur, kemudian hal tersebut
harus di list dan melakukan wawancara ke usernya secara langsung mengenai alasan user
membutuhkan aplikasi dan fitur apa yang perlu diubah. Selain itu, designer juga harus riset
kompetitor, jangan sampai aplikasi yang dibuat terbuang sia-sia sehingga designer perlu
melihat kekurangan apa di kompetitor yang sekiranya bisa dibuat di aplikasi yang akan dibuat
tersebut. Selain kedua hal tersebut, designer juga harus melakukan riset pada tren, namun
tidak perlu sepenuhnya diikuti karena tren biasanya tidak berlangsung lama dan tidak semua
tren mudah diimplementasikan. Untuk tahap ketiga, ada user flow dimana designer perlu
memerhatikan seperti apa aplikasi itu, mulai dari register, home page¸ dan lain lain. Biasanya,
meeting perlu dilakukan lagi setelah user flow selesai dan sebaiknya meeting dilakukan
secara berkala agar komunikasi dengan client berjalan baik dan client bisa merasa
kebutuhannya diperhatikan secara menyeluruh. Tahap yang keempat adalah wireframe,
dimana designer membuat kerangka untuk setiap halaman akan diisi apa. Setelah wireframe
meeting dilakukan lagi untuk mengecek demi mengurangi kemungkinan revisi. Setelah sudah
deal, designer bisa meminta full payment setelah tadi DP di awal baru bisa masuk ke tahap
design. Di tahap design, dimana designer melakukan set design systemnya, komponennya,
halaman-halamannya yang sudah high fidelity, yaitu bisa dilakukan interaksi secara langsung
(diklik). Jika sudah selesai, programmer dan clientnya sudah setuju, maka langsung menuju
tahap akhir yaitu implementasi. Di tahap implementasi, akan dilakukan testing terlebih
dahulu. Contonnya, di aplikasi Figma, Adobe XD, atau aplikasi khusus design UI lainnya,
bisa dilakukan preview terlebih dahulu untuk sebuah design. Testing dapat dilakukan dengan
cara melakukan preview dan mengirimkan ke 3-5 user yang sudah dilakukan riset pada tahap
dua, jika ada kekurangan, dapat direvisi dahulu. Setelah selesai, bisa langsung diexport dan
diberikan pada developer untuk diimplementasikan sehingga dibutuhkan komunikasi
menyeluruh.

Ada beberapa langkah untuk benar-benar mulai UI design dari awal. Tahap pertama
adalah recreating, yaitu mencoba untuk meniru ulang karya yang sudah ada, agar dapat lebih
mengenal tools-tools, teknik, dan segala macamnya. Yang kedua adalah YouTube Univ, yaitu
belajar melalui YouTube dengan mengetahui keyword yang akan dipelajari. Yang ketiga
adalah UI all around dimana jika ingin belajar UI design, maka kita harus memastikan UI
design ada disekitar kita. Contohnya adalah dengan cara memenuhi explore dan home
Instagram dengan posting yang berkaitan dengan UI agar walaupun lagi santai atau waktu
luang, bisa sekaligus belajar tanpa perlu menentukan waktu untuk belajar secara langsung.
Setiap kali buka website, kita juga harus bisa menilai apa yang bagus dan bisa dipelajari.
Yang keempat adalah mengikuti kursus online. Sebelumnya, jika hanya memelajari lewat
Instagram, mungkin cara pembelajarannya masih kurang terstruktur sehingga kita
memerlukan modul yang benar-benar dikhususkan untuk belajar, yaitu melalui kursus. Tahap
pembelajaran yang terakhir adalah memiliki koneksi, karena walaupun sudah bisa memiliki
skill yang sangat baik, tetapi jika tidak memiliki koneksi, akan susah untuk mencari client.
Cara untuk bisa mendapatkan koneksi adalah dengan mengikuti komunitas-komunitas design,
webinar, dan sebagainya yang bisa menjadi tempat berkomunikasi seputar UI karena pastinya
akan sangat membantu. Yang terpenting, jangan pernah berhenti mencoba dan belajar.

REFERENSI

Adani, M. R. (2020, October 27). Pengenalan User Interface: Pengertian, Manfaat, dan
Karakteristik. Retrieved September 25, 2021, from Sekawan Media:
[Link]
Adani, M. R. (2020, November 2). User Experience (UX): Pengertian, Tujuan, Metode, dan
Penerapannya. Retrieved September 25, 2021, from Sekawan Media:
[Link]
Charisa, F. (2021). Digitalize your Roadmap through UI/UX. Informatics Creative Festival.
Proofing and printing documents that include spot inks. (2018, February 20). Retrieved
September 26, 2021, from International Color Consortium:
[Link]