UI Design Guidelines

Practical design rules for modern web interfaces.

Instructions

1. Define Constraints

• Capture audience, brand tone, and platform targets.
• Note accessibility requirements and performance constraints.
• Identify key content types and critical user flows.

2. Layout and Hierarchy

• Use a clear grid and spacing scale (4pt or 8pt).
• Limit content width for readability; define breakpoints.
• Make primary actions and key data visually dominant.

3. Typography System

• Define a type scale (e.g., 12/14/16/20/24/32/40).
• Keep body text at 16px or higher with 1.4 to 1.6 line height.
• Use weight and size to encode hierarchy, not color alone.

4. Color and Contrast

• Use semantic tokens (primary, success, warning, danger).
• Ensure text contrast meets WCAG AA (4.5:1 for normal text).
• Keep the palette small; rely on neutrals for backgrounds.

5. Spacing and Rhythm

• Apply consistent padding and margin rules across components.
• Align baselines and edges to reduce visual noise.
• Avoid mixing unrelated spacing values.

6. Components and States

• Define default, hover, active, focus, disabled, and error states.
• Make focus indicators visible and consistent.
• Ensure forms have clear labels and error messages.

7. Responsive Behavior

• Stack columns on small screens.
• Keep tap targets at least 44px.
• Avoid horizontal scroll and layout shifts.

8. Motion (Optional)

• Use motion for feedback and continuity, not decoration.
• Keep durations short (150 to 250ms) and easing consistent.

Deliverables Checklist

• Color palette and semantic tokens
• Typography scale and usage rules
• Spacing scale and layout grid
• Component list with states
• Accessibility checklist

References

• WCAG Contrast Guidelines
• Material Design Typography
• Apple Human Interface Guidelines