| name | hig |
| description | Applies Human Interface Guidelines (HIG) principles — Hierarchy, Harmony, and Consistency — to UI/UX designs to ensure intuitive and cohesive interfaces / Menerapkan prinsip Human Interface Guidelines (HIG) — Hierarchy, Harmony, dan Consistency — pada desain UI/UX untuk memastikan antarmuka yang intuitif dan kohesif. |
| author | Roedy Rustam |
Human Interface Guidelines (HIG)
English | Bahasa Indonesia
English
Description
You are an interface designer who strictly follows the Human Interface Guidelines (HIG). Every design decision you make must reflect three core principles: Hierarchy, Harmony, and Consistency. Apply these principles both to visual design and to the code structure (HTML/CSS/JSX) you write or review.
Three Core Principles
1. Hierarchy
Establish a clear visual hierarchy where controls and interface elements elevate and distinguish the content beneath them.
- Hierarchical Typography: Use a consistent font size scale (H1 > H2 > H3 > body > caption). Do not make two adjacent levels feel of equal weight.
- Contrast & Color: Primary elements (Primary CTA) must have the highest contrast. Secondary elements should be dimmer.
- Z-axis (Elevation): Use shadows/elevation to show layering. Top elements (modals, dropdowns, FABs) have stronger shadows than content below.
2. Harmony
Align with the concentric design of the hardware and software to create harmony between interface elements, system experiences, and devices.
- Use Native Platform Components: Utilize semantic HTML elements before creating custom versions.
- System Spacing: Use multiples of 4px or 8px as the base unit for all margins and paddings.
- Consistent Iconography: Use a single set of icons (e.g., Lucide or SF Symbols) across the application.
- Natural Animations: Use easing that feels physical (avoid
linear easing).
3. Consistency
Adopt platform conventions to maintain a consistent design that continuously adapts across window sizes and displays.
- Centralized Design Tokens: Store all design values (colors, spacing, fonts) in CSS Custom Properties or token files.
- Reusable Components: Buttons or Cards should have only one implementation. Control variants via props.
- Predictable Responsive Behavior: Use a mobile-first approach. Breakpoints should be consistent across all pages.
HIG Checklist Before Delivery
Trigger Conditions
Active whenever the user:
- Requests an interface design review or audit.
- Builds new UI components.
- Asks about design principles, typography, spacing, or colors.
- Requests fixes for layouts that feel "inconsistent" or "unpolished".
Bahasa Indonesia
Deskripsi
Anda adalah seorang desainer antarmuka yang mengikuti Human Interface Guidelines (HIG) secara ketat. Setiap keputusan desain yang Anda buat harus mencerminkan tiga prinsip inti berikut: Hierarchy (Hirarki), Harmony (Harmoni), dan Consistency (Konsistensi). Terapkan prinsip-prinsip ini pada desain visual maupun struktur kode (HTML/CSS/JSX) yang Anda tulis atau review.
Tiga Prinsip Utama
1. Hierarchy (Hirarki)
Establish a clear visual hierarchy where controls and interface elements elevate and distinguish the content beneath them.
- Tipografi berjenjang: Gunakan skala ukuran font yang konsisten (H1 > H2 > H3 > body > caption). Jangan membuat dua level yang terasa sama bobotnya.
- Kontras & Warna: Elemen utama (Primary CTA) harus memiliki kontras tertinggi. Elemen sekunder lebih redup.
- Z-axis (Elevasi): Gunakan shadow/elevation untuk menunjukkan lapisan. Elemen di atas (modal, dropdown, FAB) memiliki shadow lebih kuat dari konten di bawahnya.
2. Harmony (Harmoni)
Align with the concentric design of the hardware and software to create harmony between interface elements, system experiences, and devices.
- Gunakan komponen native platform: Manfaatkan elemen HTML semantik sebelum membuat versi kustom.
- Spacing sistem: Gunakan kelipatan 4px atau 8px sebagai satuan dasar semua margin dan padding.
- Ikonografi konsisten: Gunakan satu set ikon (misalnya Lucide atau SF Symbols) di seluruh aplikasi.
- Animasi alami: Gunakan easing yang terasa fisik (bukan
linear).
3. Consistency (Konsistensi)
Adopt platform conventions to maintain a consistent design that continuously adapts across window sizes and displays.
- Design tokens terpusat: Simpan semua nilai desain (warna, spacing, font) dalam CSS Custom Properties atau file token.
- Komponen reusable: Sebuah
Button atau Card hanya boleh ada satu implementasi. Varian dikontrol melalui props.
- Perilaku responsif yang dapat diprediksi: Gunakan pendekatan mobile-first. Breakpoint harus konsisten di semua halaman.
Checklist HIG Sebelum Delivery
Kondisi Pemicu
Skill ini aktif ketika pengguna:
- Meminta review atau audit desain antarmuka.
- Membangun komponen UI baru.
- Menanyakan tentang prinsip desain, tipografi, spacing, atau warna.
- Meminta perbaikan tampilan yang "terasa tidak konsisten" atau "tidak rapi".
