UI Design Skill

Mode Detection

Determine mode before doing anything else:

• Write mode: User wants to CREATE or BUILD an interface, component, or screen.
• Audit mode: User wants to EVALUATE existing design against these frameworks.

WRITE MODE

Step 1: Establish requirements

Before designing anything, answer these questions:

1. What is the interface trying to help the user accomplish?
2. Who is the user? (Consider: poor eyesight, low computer literacy, reduced dexterity, cognitive impairments.)
3. What screen sizes will this be used on? Start with the smallest.
4. Are there brand colors or an existing design system?

Step 2: Start small, build up

Per Practical UI's modular design principle: start with the smallest components (buttons, inputs, avatars) and combine them into larger ones.

Read the relevant reference files for the components you are building:

• Fundamentals: references/fundamentals.md. Covers interaction cost, cognitive load, WCAG, design systems.
• Color: references/color.md. Covers palette, contrast ratios, system colors, dark mode.
• Typography: references/typography.md. Covers type scale, line height, body size, alignment.
• Layout and spacing: references/layout-spacing.md. Covers spacing scale, grouping, white space, grids.
• Forms and buttons: references/components-forms-buttons.md. Covers labels, validation, button hierarchy, target sizes.
• Navigation, cards, tables: references/components-navigation-cards-tables.md. Covers navigation patterns, card layouts, table row styles.
• Copywriting: references/copywriting.md. Covers conciseness, sentence case, front-loading, descriptive links.

Step 3: Apply key non-negotiables

These rules apply to every interface, every time:

1. WCAG 2.1 AA at minimum: 4.5:1 for text, 3:1 for UI components.
2. Never use color as the only indicator of meaning: add icons, borders, or underlines.
3. All interactive elements: at least 48pt by 48pt.
4. Single column form layout with labels on top.
5. One primary button per action group.
6. Sentence case for all interface text.
7. Minimum 18px body text. Line height at least 1.5.
8. Left-align body text. Do not center or justify long text.

AUDIT MODE

Read references/scoring.md for the numeric rubric (100 points, 6 categories).

For each failure: state what is broken, cite which rule it violates and where in the reference files it is defined, and suggest the exact fix.

Audit checklist summary

Fundamentals (20 pts)

• Every detail has a logical reason.
• WCAG 2.1 AA contrast met everywhere.
• Color is never the only indicator.
• Common design patterns followed.
• 48pt by 48pt minimum target sizes.

Typography (15 pts)

• Consistent type scale (no more than 4 to 6 sizes).
• Body text at least 18px.
• Line height at least 1.5 for body text.
• Line length 40 to 80 characters.
• Long body text left-aligned.

Color (15 pts)

• Predefined palette with consistent action color.
• Visual hierarchy communicated via saturation and contrast.
• System colors (red/amber/green) for status with icon backup.
• Text not pure black or inaccessible light grey.
• Dark mode: no pure white on pure black.

Layout and hierarchy (20 pts)

• Clear visual hierarchy (not everything equal prominence).
• Consistent spacing scale applied.
• Generous white space (passes The Squint Test).
• Elements aligned to a consistent edge or grid.
• Related elements grouped by proximity.

Components (15 pts)

• At most one primary button per group; hierarchy not color-dependent.
• Button text is verb-noun format.
• Form: single column, labels on top.
• No placeholder text replacing labels.
• Appropriate controls (radio buttons for up to 10 options, steppers for numbers).

Copywriting (15 pts)

• Concise (no filler words, sentences under 20 words).
• Sentence case throughout.
• Front-loaded text.
• Descriptive links and button labels.
• Consistent vocabulary across the interface.

Troubleshooting

User provides a screenshot only: describe what you can observe. Note where you cannot verify contrast ratios without exact color codes and ask for them if the audit depends on it.

User asks about a specific component: read the most relevant reference file. Cite specific rules, not generic advice. If the rule has a number (48pt, 4.5:1, 18px, 1.5 line height), include it.

User pushes back on a rule: explain the rationale. Every rule in these reference files has a reason behind it (usability risk, cognitive load, accessibility, interaction cost). Share that reason, do not just repeat the rule.

User wants to break a rule intentionally: acknowledge the rule, acknowledge the tradeoff, and confirm the user understands what they are giving up (e.g., "using a dropdown here with 12 options increases interaction cost but saves vertical space; confirm that is the acceptable tradeoff").

Key numbers to memorise

These are the most cited specific values across both books:

Maintained by Pesty Marketing · Browse the full skill catalog.