Konsep Dasar

UI/UX
Muhammad Abdul Muin, M.Kom
Apa Itu UI/UX ?

2
 User Experience

“
"Sebuah pengalaman seseorang dalam
menggunakan atau berinteraksi dengan
sebuah produk ataupun jasa."

3
 User Interface

“
"Bagian visual dari sebuah produk aplikasi
digital yang menyangkut pada bagaimana
sebuah informasi dapat ditampilkan"

4
UI/UX
Sebuah proses membuat desain
visual dari sebuah produk digital
yang dapat memberikan sebuah
pengalaman pada penggunanya.

5
 APA
PERBEDANNYA?

UX berfokus pada arsitektur,

konten, dan elemen dari sebuah
informasi.

UI berfokus pada visual, bagian

kreatif dari sebuah informasi

6
UX adalah “apa yang seharusnya”, sedangkan
“UI” adalah “seperti apa seharusnya?”.
7
APA YANG
ANDA
PIKIRKAN?

8
APA YANG
ANDA
PIKIRKAN?

9
Good UX vs Bad UX

10
11
12
Awal Membuat
Desain UI/UX?

13
14
WIRE FRAME

Kerangka dasar dari sebuah

produk digital yang
menampilkan arsitektur dan
elemen elemen informasi
berdasarkan konsep yang ada.

15
Manfaat Wireframe

MEMBERIKAN KEJELASAN
LEBIH FOKUS
MENGHEMAT WAKTU

16
Dasar Visual Desain
UI/UX?

17
18
Layout

MUDAH DITEBAK
KONSISTEN
RESPONSIF

19
Color

20
21
FONT

22
ICON

23
Kenapa UI Design menjadi
Sesuatu Hal Yang Penting ?

24
UI Design Fokus Kepada Bagaimana Elemen Visual Ditata dan
Bagaimana Produk akan Terlihat
UI Design akan mempengaruhi Hubungan Emosional antara
Pengguna, baik negative maupun positif
UI Design yang baik akan meningkatkan kepuasan User dalam
menggunakan produk yang diciptakan

25
Apa Yang Membuat User
Interface Menjadi baik ?

26
Clarity (Kejelasan)

Hindari membuat sesuatu yang ambigu dan buatlah segala hal

menjadi jelas baik melalui bahasa ataupun melalui visual

27
Familiarity (Keakraban)

Pengguna suka melihat fitur atau produk yang familiar seperti

simbol,ikon atau warna

28
Familiarity (Keakraban)

Pengguna suka melihat fitur atau produk yang familiar seperti

simbol,ikon atau warna

29
Responsiveness

Respon dari aplikasi , aplikasi harus memberikan respon umpan

balik dan memberi tahu user apa yang sedang terjadi

30
Consistency (Konsisten)

Buat Antarmuka tetap konsisten di seluruh aplikasi agar user

lebih mudah mengenali pola penggunaan

31
Aesthetics (Estetika)

Buatlah sesuatu yang menarik agar menggunakan aplikasi tidak

membosankan

32
Tools apa Saja yang digunakan Untuk
Membuat User Interface ?

33
34
Apa Yang Membuat User Experience
Menjadi baik ?

• Menguntungkan Pengguna
• Memberikan value bagi pengguna

35
Proses Menciptakan Sebuah User
Experience yang baik untuk pengguna

36
 Catatan
1. User Experience berkaitan dengan pengalaman yang dirasakan
oleh user saat berinteraksi dengan produk dan rasa yang tertinggal
dalam ingatan setelahnya.
2. User Experience Design adalah proses membangun User
Experience.
3. User Experience Design bukan menciptakan experience karena
experience ada dalam setiap produk. UXD membuat experience
yang baik.
4. UI berbeda dengan UX. UI adalah bagian dari UX dalam
membangun pengalaman yang baik bagi user.
5. Usability adalah bagian dari keseluruhan User Experience

37
THANKS!
Any questions?

38