Minggu Ke-2
UI FUNDAMENTALS
Dasar-dasar UI
1 Desain Dasar 2 Elemen 3 Pattern
Prinsip-prinsip desain Polanya membantu
Elemen-elemen seperti
termasuk keseimbangan, menciptakan pengalaman
tombol, ikon, dan bidang teks
tatanan, proporsi, dan kontras pengguna yang konsisten dan
memainkan peran kunci
untuk menciptakan tampilan mudah dipahami di seluruh
dalam penyusunan
visual yang menarik dan platform produk digital.
antarmuka pengguna yang
mudah dipahami. Cth:
efektif.
https://ui-patterns.com/patterns
Poin Penting dalam desain UI
Visual Hierarki
1. Ukuran dan Skala
Poin Penting dalam desain UI
Visual Hierarki
2. Warna dan Kontras
3. Tipografi
4. Ruang putih (White Space)
5. Kedekatan (Proximity)
6. Rule Of Third (Komposisi Gambar)
Poin Penting dalam desain UI
Warna
Pemilihan warna yang tepat dapat memengaruhi suasana hati,
persepsi, dan keterbacaan antarmuka pengguna
Kategori Warna
1. Warna Primer (Primary Colors)
2. Warna Sekunder (Secondary Colors)
3. Warna Tersier
4. Warna Text (Text Colors)
5. Warna Aksen (Accent Colors)
6. Warna Latar Belakang (Background Colors)
7. Warna Pilihan (Selection Colors)
8. Warna Umpan Balik (Feedback Colors)
9. Warna Tautan (Link Colors)
10. Warna Status (Status Colors)
11. Mode Gelap dan Mode Terang (Dark Mode and Light Mode Colors)
Poin Penting dalam desain UI
Color Scheme
Skema warna dibagi menjadi beberapa kategori:
1. Monokrom
2. Analog
3. Complementary
4. Triadic
https://color.adobe.com/create/color-wheel
Poin Penting dalam desain UI
Warna Antarmuka Pengguna(UI Colors)
1 Konsistensi
Warna yang dipilih konsisten di seluruh antarmuka
2 Branding
Elemen kunci dalam membangun kesan merek yang konsisten
dan mengingatkan pengguna tentang produk atau layanan tertentu
3 Kontras
Warna kontras membantu pengguna memahami
dan menavigasi antarmuka dengan lebih mudah
4 Aksesibilitas
Pertimbangkan keberlanjutan antarmuka untuk semua pengguna,
termasuk mereka dengan gangguan penglihatan
5 Psikologi Warna
Warna dapat merangsang emosi atau memberikan kesan tertentu
Poin Penting dalam desain UI
Warna Antarmuka Pengguna(UI Colors)
6 Hierarki
Gunakan warna untuk menunjukkan tingkatan dan hierarki informasi
7 Mode Gelap dan Mode Terang
Memberi pengguna fleksibilitas dan meningkatkan kenyamanan
visual tergantung pada preferensi mereka dan kondisi pencahayaan
8 Palet Warna
Pilih palet warna yang harmonis dan seimbang.
Rule: 60%(dominan)-30%(sekunder)-10%(Aksen)
9 Feedback Visual
Gunakan warna sebagai bentuk umpan balik visual. Cth:
perubahan warna tombol saat suatu tindakan berhasil atau gagal
dapat membantu pengguna memahami respons antarmuka
10 Uji dan Iterasi
Uji pilihan warna Anda dengan pengguna potensial dan perbarui
sesuai dengan umpan balik yang diterima
Poin Penting dalam desain UI
Typography
Pemilihan jenis huruf yang tepat, ukuran, dan penataan teks
mempengaruhi kejelasan pesan dan kepuasan pengguna.
Elemen Typography
1. Font Size
2. Font Weight
3. Line Height
4. Letter Spacing
5. Line Length
6. Allignment
Poin Penting dalam desain UI
Font Size Font Weight
Poin Penting dalam desain UI
Line Length
Allignment
Poin Penting dalam desain UI
Icon
Membantu pengguna memahami dan berinteraksi dengan
antarmuka pengguna dengan cara yang lebih visual dan intuitif.
Berikut aspek penggunaan icon:
1 Ketajaman dan Kejelasan
Harus dirancang dengan resolusi yang cukup tinggi agar
terlihat baik pada berbagai perangkat
2 Konsistensi
Konsistensi icon di seluruh antarmuka pengguna
3 Makna Universal
Membantu pengguna memahami arti icon tanpa harus
membaca teks cth: Icon Keranjang
4 Warna dan Kontras
Memperkuat informasi yang disampaikan
Poin Penting dalam desain UI
aspek penggunaan icon (lanjutan):
5 Skalabilitas
Harus dapat diubah ukurannya tanpa kehilangan
kejelasan atau rincian
6 Respon Interaktif
Perubahan warna atau animasi ketika dihover oleh
kursor atau ketika ditekan/klik
Poin Penting dalam desain UI
Ilustrasi dan Animasi
Gambar visual yang diciptakan untuk melengkapi dan
memperkaya desain interface. tujuan utama illustrasi itu
adalah untuk membantu user untuk memahami atau
membayangkan sesuatu yang baik
UI animation adalah implementasi motion atau gerakan untuk
meningkatkan interaktivitas sebuah produk
Terdapat lima tipe utama animasi yang sering digunakan untuk
membuat desain yang interaktif. Kelima tipe animasi tersebut
yaitu loading and progress, state changes, navigation,
microinteractions, dan delighters
Poin Penting dalam desain UI
Ilustrasi dan Animasi
