UI/UX Game: HUD, Status, Feedback, Typography, Color, Accessibility
Menerapkan prinsip UI/UX game ke website agar interface jelas, nyaman, dan mudah digunakan.
Tujuan Pembelajaran
HUD Design
Status
HP, score, timer, level, gold.
Action
Tombol utama harus jelas dan mudah dikenali.
Feedback
Hover, active state, error, success, dan progress.
Color Palette
Pilih palette yang cocok untuk genre game dan tetap punya contrast yang cukup.
Typography untuk Game UI
Readable
Font harus mudah dibaca, terutama untuk instruksi dan status.
Hierarchy
Judul, subjudul, body, dan label harus punya ukuran yang jelas.
Consistency
Gunakan sistem ukuran yang konsisten antar halaman.
Accessibility
- Pastikan contrast warna cukup.
- Gunakan font yang readable.
- Tambahkan alt text pada gambar penting.
- Jangan mengandalkan warna saja untuk status.
- Buat tombol dan link mudah dikenali.
Game UI Design Guideline
Color System
Base, primary, success, warning, danger.
Typography System
Title, heading, body, label, status.
Component Rules
Button, card, HUD, status badge, feedback.
Mini Challenge
Buat guideline UI untuk game website kalian: palette warna, typography, HUD/status, dan aturan accessibility minimal.
Mini Quiz
Hal yang membantu accessibility untuk gambar penting adalah...