- UI Designer belajar kodingnya html /css

- kenapa warna merah utk danger

- kenapa harus belajar ui
- ux = apa yg membuat ui berguna
- ui = apa yg membuat interface bagus

TOOLS
1. vector = sketch, illustrator
2. prototype = origami

LIGHTS
- Lights comes from the sky, normal pake shadow & pressed button ga pake

COLOR THEORY I
- Canva.com/colors
- skema utama harus cuma pakai 3 primary color biar balance
- proporsi warna 60:30:10

COLOR THEORY II
- analogous collor pallete = pemilihan warna utama terlebih dahulu, lanjutkan warna sebelahnya
pada color wheel utk secondary color (3 warna)
- complementary color pallete = pemilihan warna utama terlebih dahulu, kemudian pilih sisi
warna yg berlawanan utk secondary color (2 warna)
- split colors = pemilihan warna utama terlebih dahulu, lanjutkan warna sebelah opposite color
pada color wheel utk secondary color (3 warna)
- triadic color pallete = harus bentuk segitiga sama sisi pada color wheel (3 warna)

WHITE SPACE
- beri breathing room, jangan semua kasih tulisan tanpa white space

TYPOGRAPHY I
- identifikasi kebutuhan (image driven/tidak)
- identifikasi user (tua/muda)

TYPOGRAPHY II
- think in blocks
- Realign if necessary
- Line spacing. Pake paragraph 1,2x font untuk paragraph pendek, pake 1,5x font utk paragraph
panjang
- Pilih 1 typeface (font) yang memiliki beberapa weights. Kalo ragu dengan weighting bisa main di
size
- Atur kerning (jarak antar huruf)
- Hypen, en dash, em dash

TEXT STYLING
- Size
- Kapitalisasi
- Color
 - Letter Spacing
- Font Weight
- Margin

Text & Images

- Text Overlay Image, pastikan image gelap. Bisa fontnya yang di overlay, atau gambarnya yg di
overlay
- Text in a box
- Blur image
- Floor fade, bikin gradient contrast pada image
- Floor blur

MENIRU UI DESIGNER
- Resource : Dribbble, behance, flatuipinboard, pttrns
- Amati, tiru, modifikasi. Tujuan menciptakan elemen baru

PSYCHOLOGY PRINCIPLE I
- Lawsofux.com
- Von Restorff Effect : Isolation effect (ada 1 objek yg berbeda dari objek lain)

- Serial Position Effect : Gampang inget pertama dan terakhir dari beberapa objek. Mengapa icon
Home dan Profile ada di ujung
- Zeigarnik Effect : Lebih mudah mengingat task yang belum selesai
- Simon and Stroop Effect : Bereaksi lebih cepat kalo pekerjaan yg dilakukan diulang terus
- Fitt’s law : Memprediksi waktu yang akan dicapai tergantung size dan jarak
- Law of Proximity : Objek yang dekat satu sama lain, akan dikategorikan sebagai satu grup

- Hick’s Law : Waktu untuk membuat suatu keputusan akan lebih lama saat kompleksitas dari
pilihan semakin banyak

GOOGLE MATERIAL DESIGN VS APPLE HUMAN INTERFACE

- Punya guideline masing2
- Navigation bar untuk ios dan android berbeda
 - Button juga berbeda

- Action

LAYOUT
- Prinsip material design yaitu Predictable, konsisten, responsive. Kalo ios adaptivity
- Pixel density

- Columns, gutters and margin

- UI Region (tampilan/safe area di desktop, tab, dan smartphone berbeda)

NAVIGATION ANDROID VS APPLE
- Android : lateral navigation, forward navigation, reverse navigation
- Apple : flat navigation, content driven navigation,
HIERARCHY NAVIGATION
MOTION & INTERACTION (Gesture)
- Gesture Android : Navigational Gesture, Action Gesture, Transform gesture
- Gesture Apple : Tab, Drag, Flick, Double tap, Pinch, Hold, rotate, shake
- Motion android : Informatif, focus, user education, character

COMPONENTS

-
-

-
-
-

-
 -

USABILTIY
- Android : Voice over dll
- IOS :

THEMING
 - Material theme tools : bisa di cek di web material.io
- IOS design Theme : developer.apple.com/design/resource

DESIGN PATTERN AND COLLOR PALLETE

- Referensi : pttrns.com, dribble, colorhunt.co

USER FLOW DIAGRAM

- Pake draw.io

WIREFRAME & MOCKUP

WIREFRAME & MOCKUP II

- Pake aplikasi Sketch

Protoyping
- Pake origami

Topic
Sesi Online Prakerja: Dasar-Dasar User Interface (UI)
Description
Harap menggunakan email yang sama dengan email yang didaftarkan pada Program Kartu Prakerja
dan Platform Kode.id. Jika anda menggunakan email yang berbeda pada saat REGISTRASI dan pada
saat BERGABUNG ke sesi online, maka sertifikat TIDAK akan dapat dikirimkan
Time
Mar 10, 2021 10:00 AM in Jakarta
 Add to calendar
Webinar ID
916 2736 5827
To Join the Webinar
Join from a PC, Mac, iPad, iPhone or Android device:

Please click this URL to join. https://zoom.us/w/91627365827?

tk=H0afKB4TPnbW822FJ59rD7o4u9e0fV29gO01VeYXZ-
U.DQIAAAAVVWqlwxZ5MklvVmR0cVFxR2c1VnNnX2JBeGVnAAAAAAAAAAAAAAAAAAAAAAAA
AAAA&pwd=ZVcwdmlpM0VNRm84NWorbzY2bGZsZz09