Lets go!

APA ITU
UI DESIGN?

● UI atau User Interface adalah proses dimana menampilkan sebuah hasil dalam bentuk
tampilan yang dapat dilihat oleh pengguna (user)

● Tujuan dari User Interface sendiri adalah untuk meningkatkan fungsionalitas serta user
experience dari pengguna.

● Komponen UI yang sering digunakan seperti tombol, ikon tipografi, tema, animasi yang
ditampilkan, juga visual interaktif lainnya.
 APA ITU
UX DESIGN?

● UX atau User Experience adalah proses dimana pengguna dapat berinteraksi dengan
interface secara baik dan nyaman

● tujuan dari UX adalah untuk meningkatkan kepuasan pengguna saat mengakses sebuah
tampilan, baik dari sisi website, mobile, maupun desktop.

● Komponen UX yang sering digunakan antara lain fitur produk, navigasi penggunaan
produk, struktur desain, aspek visual desain, dan semua aspek interaksi dengan user.
 PERBEDAAN UI VS UX DESIGN

UI UX
UI berkaitan dengan tampilan visual dan interaksi antara pengguna UX berkaitan dengan pengalaman pengguna saat menggunakan
dan sistem. produk atau layanan.

Fokus utama UI adalah pada desain elemen-elemen yang terlihat Fokus utama UX adalah memahami kebutuhan, preferensi, dan
oleh pengguna, seperti tata letak, warna, ikon, tombol, dan elemen perilaku pengguna untuk menciptakan pengalaman yang memuaskan
grafis lainnya. dan efektif.

Tujuan UI adalah menciptakan antarmuka yang menarik secara Tujuan UX adalah menciptakan pengalaman yang mudah bagi user
visual, konsisten, dan mudah digunakan. saat menggunakan produk tanpa hambatan apapun.

Desainer UX bertanggung jawab untuk melakukan riset pengguna,

Desainer UI bertanggung jawab untuk membuat antarmuka yang
menganalisis kebutuhan pengguna, merancang alur kerja, mengatur
estetis dan menarik, mempertimbangkan prinsip desain visual dan
tata letak, dan memastikan bahwa keseluruhan pengalaman
penggunaan elemen-elemen grafis yang efektif.
pengguna berjalan dengan baik.
 TUGAS
UI/UX DESIGNER

● Setiap perusahaan tentunya berusaha untuk meningkatkan kualitas dari produk yang
dihasilkan, baik dari segi fungsionalitas maupun dari kualitas tampilannya.

● Dalam dunia IT, orang yang ahli dalam bidang UI UX disebut dengan UI UX designer.

● Tugas dari posisi tersebut tentunya tidak hanya sekedar ahli dalam membuat sebuah
desain maupun tampilan kasar dari aplikasi. UI UX Designer juga harus memperhatikan
mengenai fungsionalitas dan tampilan dari desain awal yang akan dibuat untuk
perangkat lunak.
SKILL YANG DIBUTUHKAN UI UX DESIGNER

Desain visual Berkomunikasi dengan

baik

Wireframing dan Bekerja dalam tim dan

prototyping berkolaborasi

Kemampuan memecahkan
Melakukan riset UX masalah

Analisa dan menarik Menguasai tools dan

kesimpulan dari data software design
 KOMPONEN DALAM UI UX

Informasi Arsitektur
Interaksi design Fungsionalitas

1 2 3

4 5
Prototype Design Visual
 1. Informasi Arsitektur

Informasi arsitektur adalah struktur dari segala bentuk informasi yang ditampilkan
kepada pengguna. Berikut metode yang dibutuhkan dalam mengorganisir Informasi
Arsitektur:

● Hierarki: Menggunakan konsep teori psikologi. Contoh: pembuatan navigasi

yang dibuat di paling atas dan berfungsi sebagai penunjuk.

● Sekuensial: Lebih menekankan pada proses break-down setiap informasi

menjadi beberapa tahapan yang nantinya akan digunakan oleh user. Contoh:
menu pada e–commerce yang memiliki produk informasi.

● Matriks: Melimpahkan tanggung jawab kepada sisi pengguna. Contoh: sorting

 2. Interaksi Design

● Interaksi pada desain dapat berupa cara mengklik, menggeser,

menekan fitur maupun tombol dalam aplikasi. Interaksi desain
sangatlah penting untuk mengetahui kebiasaan (behavior) dari
pengguna.
 3. Fungsionalitas

● Ukuran dari fungsionalitas (Usability) ini dinilai dari seberapa

mudah penggunaan dari aplikasi tersebut.

● Selain itu, ketepatan dan fitur yang mendukung bagi pengguna

merupakan hal yang penting bagi tampilan website maupun
mobile.
 4. Prototype

● Setelah menyusun ketiga komponen tadi, selanjutnya yang

perlu dilakukan adalah membuat sebuah prototype kasar
berupa Wireframe.

● Output dari prototype tersebut akan dijadikan layout. Yang

mana, nantinya akan diserahkan kepada tim pengembang
untuk proses pembuatan software.
 5. Design Visual

● Setelah hasil wireframe telah dibuat, barulah bagi seorang

visual designer untuk membuat tampilan visual dari rancangan
tersebut.

● Penambahan dan perubahan pada warna, style, font, dll.

Fungsinya supaya memberikan gambaran yang lebih jelas
mengenai desain awal dari aplikasi yang akan dibuat.

● Tools yang digunakan dalam pembuatan desain visual ini

adalah Adobe XD, Figma, dll.
 TOOLS YANG BIASA DIGUNAKAN

FIGMA ADOBE XD SKETCH WHIMSICAL

 KESIMPULAN

● UI (User Interface) adalah proses dimana menampilkan sebuah hasil dalam

bentuk tampilan yang dapat dilihat oleh pengguna (user). Sedangkan, UX (User
Experience) adalah proses dimana menampilkan sebuah hasil dalam bentuk
tampilan yang dapat dilihat oleh pengguna (user).

● Orang yang bekerja untuk membuat UI UX design disebut dengan UI UX

Designer. Posisi tersebut berperan penting dalam pembuatan desain awal dari
aplikasi baik dari tampilan website, desktop, maupun mobile.

● Terdapat lima macam komponen dalam UI UX, yaitu informasi arsitektur,

interaksi desain, fungsionalitas, prototype, dan desain visual.

● Di dalam pengembangan aplikasi, sangat diperlukan desain dari UI UX untuk

meningkatkan kualitas serta memudahkan pengguna dalam berinteraksi dengan
aplikasi.