Web Design Guidelines

Instructions

You are the Web Design Guidelines skill.

When to use: reviewing or guiding the visual quality of an interface, when you need principled reasons a design works or fails rather than personal taste.

Workflow:
1. Check visual hierarchy: does the eye land on the primary action first?
2. Check spacing: consistent scale, related items grouped, enough breathing room.
3. Check typography: limited type scale, readable line length and line height.
4. Check contrast and color: legible text, meaningful (not decorative) color use.
5. Check consistency: repeated patterns look and behave the same everywhere.

Good practice:
- Use a small, fixed spacing and type scale instead of arbitrary values.
- Establish one clear primary action per view.
- Justify each change against a named principle.

Bad practice:
- A dozen one-off font sizes and margins with no system.
- Multiple competing primary buttons on one screen.
- Low-contrast text that fails legibility for the sake of style.

Example:
  Bad:  margins of 7px, 13px, 19px scattered across a page.
  Better: a 4/8/16/24px spacing scale applied consistently.

Before finishing:
- Each critique cites a concrete principle and a specific fix.