Fundamental of

UI Designs
UI/UX Design for Beginner
Outline materi

1 Intro User Interface

2 UI Design Fundamental

3 Pro-Tips

Credit to Pablo Stanley

Intro User Interface
User Interface
Adalah desain antarmuka untuk
mesin atau software, seperti
peralatan rumah tangga,
handphone, atau yang lain, yang
memaksimalkan usability dan user
experience.
Figma Sketch Adobe Xd
Figma Sketch Adobe Xd
Pros Cons
✅ ❗
Ringan dioperasikan Connection issue
✅ ❗
Online cloud Server maintenance
✅
Open-sourced plugin
✅
Prototyping
✅
Multi-platform
✅
Handover ke developer
UI Design Fundamental
 Yang perlu dikuasai

💱 ↔ 🎨 🏛 📲

Typography Spacing Coloring UX Law Responsive

Design
 💱
Typography
Anatomy of
Typography
Cap height

X-height
Anatomy of
Leading /

Typography
Line height

Baseline

Letter spacing*
Inter Regular; letter-spacing: 0;
line-height: 44; (default)
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed elementum laoreet leo, eu
gravida lectus. Ut nec neque eu ante porttitor
viverra varius sed nisl. Morbi nec scelerisque
lectus. Vestibulum quis elit congue purus
imperdiet hendrerit. Donec lobortis urna eu
quam efficitur ultricies. Etiam non mi eu dolor
mattis ultricies. Mauris luctus efficitur risus,
sed tincidunt ex pharetra ac. Sed vel est ac
nisi condimentum elementum a vel neque.
Integer vel augue vitae magna laoreet
rhoncus.
Inter Regular; letter-spacing: 0,2; line-
height: 54 (size*1,5);(customized)
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed elementum laoreet leo, eu
gravida lectus. Ut nec neque eu ante porttitor
viverra varius sed nisl. Morbi nec scelerisque
lectus. Vestibulum quis elit congue purus
imperdiet hendrerit. Donec lobortis urna eu
quam efficitur ultricies. Etiam non mi eu dolor
mattis ultricies. Mauris luctus efficitur risus,
sed tincidunt ex pharetra ac. Sed vel est ac
nisi condimentum elementum a vel neque.
Integer vel augue vitae magna laoreet
rhoncus.
 Typeface didalam UI Design

Sans Serif Serif

Saya lihat foto Hamengkubuwono XV Saya lihat foto Hamengkubuwono XV

bersama enam zebra purba cantik yang bersama enam zebra purba cantik
jatuh dari Alquranmu yang jatuh dari Alquranmu
 Pemilihan typeface (font) itu penting & tidak bisa sembarangan.
Karena setiap typeface memiliki karakter dan sifat yang berbeda-beda.
Sans Serif Serif
✅
Sans Serif Serif OH MY GOD!
Hierarki ukuran
typeface
Title 1 Inter-Medium; 24pt; letter-space: 0,25

Title 2 Inter-Medium; 20pt; letter-space: 0,5

Title 3 Inter-Medium; 18pt; letter-space: 0,5

Headline Inter-Semibold; 18pt; letter-space: 0,5

Subheadline Inter-Semibold; 16pt; letter-space: 0,3

Body Copy Inter-Regular; 14pt; letter-space: 0,3

Caption 1 Inter-Regular; 12pt; letter-space: 0,2

Caption 2 Inter-Regular; 11pt; letter-space: 0,2

Text Field Inter-Regular; 18pt; letter-space: 0,5

Button Inter-Semibold; 16pt; letter-space: 0,5

 Roboto

the quick brown fox

Inter jumps over the lazy dog SF Pro

the quick brown fox the quick brown fox

jumps over the lazy jumps over the lazy dog
dog Helvetica

the quick brown fox

jumps over the lazy dog

Open Sans
Museo Circular Std
the quick brown fox
the quick brown fox the quick brown fox
jumps over the lazy
jumps over the lazy dog jumps over the lazy dog
dog
 Untuk membuat UI Design
cukup gunakan 1 sampai 2 typeface
↔
Spacing
Spacing (Jarak) sangat penting
dalam membuat desain UI
Jarak dapat bermanfaat dalam membuat desain
UI lebih cantik & clean
Hierarki ukuran
spacing (jarak)
 🎨
Coloring
Semua desain UI yang
cantik berawal dari
pilihan warna yang apik!
 Rectangle
Complementary Analogous Triad (Tetradic)

Warna yang Warna turunan yang Kombinasi warna yang Kombinasi warna yang
berseberangan dari diambil bersebelahan membentuk segitiga mengambil 2 warna
color wheel sehingga dari color wheel untuk menghasilkan yang saling
warna yang dihasilkan warna yang lebih berseberangan &
sangat kontras vibrant membentuk persegi
empat
Struktur Warna dalam UI Design
 Website Color Pallete

coolors.co colorhunt.co happyhues.co colors.eva.design

 👁
Accessible Color
UI terbaik adalah desain yang dapat
digunakan untuk semua user
(Buta warna parsial / buta warna total)
Website untuk Cek Kontras Warna

colorable.jxnblk.com whocanuse.com
🏛
UX Law
1-Law of Proximity
Objek atau komponen yang sejenis
harus dikelompokan secara
bersamaan
2-Law of Common Region
Objek atau komponen yang sejenis
harus dikelompokan dengan
pemisah yang jelas
3-Fitts’s Law
Hukum yang menyatakan berapa
waktu yang dibutuhkan untuk
mencapai target
(dari sisi ukuran, warna, & jarak)
4-Miller’s Law
Hukum yang menyatakan bahwa
manusia hanya dapat mengingat 5-7
item dalam short-term memory
 📲
Responsive Design
UI Design akan semakin bersahabat
jika dapat diimplementasikan di
semua ukuran device
 🖥 📱

Desktop Tablet Mobile

Hal yang diperhatikan dalam
UI Responsive Design

1 Perhatikan perbedaan jarak antara

Desktop & Mobile

2 Perhatikan perbedaan ukuran font

antara Desktop & Mobile

3 Kuasai basic pengetahuan coding

4 Manfaatkan column yang digunakan

 Status bar

Header

Section

Content area

Navigation bar
Pro-Tips
Yang dilakukan sebelum mendesain

1 Buat wireframe terlebih dahulu

2 Cari inspirasi product serupa

3 Cari inspirasi desain

4 Buat pallete warna

5 Buat/cari icon style yang akan digunakan

 Mulailah mendesain dari screen
yang minim kompleksitas/informasi
 Website untuk Mencari Inspirasi Desain

Dribbble Pinterest Behance Mobbin

dribbble.com pinterest.com behance.net mobbin.design
Ingat, setiap UI Design ada aturannya
Pro-tips dalam membuat UI Design

1 Selalu buat Symbol/Component untuk

objek yang digunakan di banyak
screen

2 Selalu buat & gunakan text style agar

konsisten

3 Perhatikan Responsive Design

4 Follow the trend