7-Fundamental of UI Design
7-Fundamental of UI Design
7-Fundamental of UI Design
UI Designs
UI/UX Design for Beginner
Outline materi
2 UI Design Fundamental
3 Pro-Tips
💱 ↔ 🎨 🏛 📲
X-height
Anatomy of
Leading /
Typography
Line height
Baseline
Letter spacing*
Inter Regular; letter-spacing: 0; Inter Regular; letter-spacing: 0,2; line-
line-height: 44; (default) height: 54 (size*1,5);(customized)
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed elementum laoreet leo, eu adipiscing elit. Sed elementum laoreet leo, eu
gravida lectus. Ut nec neque eu ante porttitor
gravida lectus. Ut nec neque eu ante porttitor
viverra varius sed nisl. Morbi nec scelerisque
lectus. Vestibulum quis elit congue purus viverra varius sed nisl. Morbi nec scelerisque
imperdiet hendrerit. Donec lobortis urna eu lectus. Vestibulum quis elit congue purus
quam efficitur ultricies. Etiam non mi eu dolor imperdiet hendrerit. Donec lobortis urna eu
mattis ultricies. Mauris luctus efficitur risus,
quam efficitur ultricies. Etiam non mi eu dolor
sed tincidunt ex pharetra ac. Sed vel est ac
nisi condimentum elementum a vel neque. mattis ultricies. Mauris luctus efficitur risus,
Integer vel augue vitae magna laoreet sed tincidunt ex pharetra ac. Sed vel est ac
rhoncus. nisi condimentum elementum a vel neque.
Integer vel augue vitae magna laoreet
rhoncus.
Typeface didalam UI Design
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
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
🖥 📱
Header
Section
Content area
Navigation bar
Pro-Tips
Yang dilakukan sebelum mendesain