UI Design Patterns
Button Patterns
| State | Visual Indicator |
|---|---|
| Default | Base style |
| Hover | Slight darkening or lightening of background |
| Active/Pressed | Downward 1px transform, deeper color |
| Focus | Ring: outline 2px with offset for keyboard nav |
| Loading | Spinner icon, disabled click, label "Loading..." |
| Disabled | opacity: 0.4, cursor: not-allowed |
Form Design Best Practices
- โ One column layout for forms (easier to scan)
- โ Labels above inputs (not as placeholders)
- โ Show validation errors inline below the field
- โ Mark required fields clearly (not just with *)
- โ Auto-advance on complete input (e.g., credit card)
Navigation Patterns
| Pattern | When to Use |
|---|---|
| Top Navigation Bar | โค7 main sections, desktop-first sites |
| Side Navigation | Many sections, apps with deep hierarchy |
| Bottom Tab Bar | Mobile apps, 3โ5 primary sections |
| Hamburger Menu | Mobile with many nav items (secondary) |
| Breadcrumbs | Deep hierarchies, e-commerce categories |
| Mega Menu | Enterprise, retail with many categories |