UI Design Patterns
Source: https://github.com/dirnbauer/webconsulting-skills
Practical guidelines for creating polished, professional user interfaces without relying on graphic design talent. These patterns work for any web project, including TYPO3 frontend development.
Acknowledgements
These patterns are adapted from two excellent resources:
- Refactoring UI by Adam Wathan & Steve Schoger — The definitive guide to practical UI design for developers
- Practical UI (2nd Edition) by Adham Dannaway — Quick and practical UI design guidelines for intuitive, accessible, and beautiful interfaces
We highly recommend both works for deepening your UI design knowledge.
0. Core Principles (from Practical UI)
Before diving into specific patterns, internalize these foundational principles:
Minimize Usability Risks
Base design decisions on risk assessment—the risk that someone could have difficulty using an interface:
- Light grey text may look sleek but risks readability issues
- Icons without labels risk confusion about meaning
- Colored heading text risks being mistaken for links
Always consider: people with poor eyesight, low computer literacy, reduced dexterity, and cognitive differences.
Have a Logical Reason for Every Design Detail
Every UI element should have a rationale. "That looks nice" is not constructive feedback. Be able to articulate why each design decision was made.
| Element | Logical Reason | |---------|----------------| | Left-aligned text | Creates neat edge, improves readability | | Descriptive headings | Scannable, works with screen readers | | Blue underlined links | Indicates interactivity, accessible for color blind | | Grouped spacing | Related items closer together reduce cognitive load |
Minimize Interaction Cost
Interaction cost = physical + mental effort to complete a task. Reduce it by:
- Keep related actions close (Fitts's Law—closer/larger targets are faster to click)
- Reduce distractions (avoid attention-grabbing elements that pull focus)
- Use progressive disclosure (reveal complexity only when needed)
Minimize Cognitive Load
Cognitive load is the mental effort required to use an interface. Reduce it by:
- Breaking information into smaller, digestible chunks
- Using familiar patterns people already understand
- Removing unnecessary elements and decisions
- Grouping related items visually
Design System First
Create a system of reusable guidelines before designing:
- Color palette with usage rules
- Typography scale
- Spacing system
- Component patterns
- Interaction states
This ensures consistency and speeds up decision-making.
Accessibility is Non-Negotiable
Meet WCAG 2.1 Level AA at minimum:
| Requirement | Minimum Ratio | |-------------|---------------| | Small text (below large-text threshold) | 4.5:1 contrast | | Large text (24px+/18pt regular or 18.66px+/14pt bold) | 3:1 contrast | | UI elements (borders, icons) | 3:1 contrast |
Never rely on color alone—always pair with icons, patterns, or text for color blind users.
Use Common Design Patterns
Per Jakob's Law, stick with patterns people already know:
- Conventional form fields (not custom/unfamiliar styles)
- Standard navigation patterns
- Expected icon meanings
- Familiar button behaviors
Save creativity for your product's unique value proposition, not basic UI conventions.
The 80/20 Rule
Roughly 80% of users use 20% of features. Prioritize the common paths:
- Optimize for frequent tasks, not edge cases
- Focus design effort where it has the largest impact
- Don't over-engineer rarely-used features
1. Starting from Scratch
Start with a Feature, Not a Layout
Don't begin by designing the shell (navigation, sidebar, footer). Start with actual functionality.
Wrong approach:
- "Should it have a top nav or sidebar?"
- "Where should the logo go?"
Right approach:
- Design the core feature first (search form, product card, user profile)
- The navigation will reveal itself as you design features
Detail Comes Later
In early stages, ignore typefaces, shadows, and icons. Use thick markers or low-fidelity wireframes to explore layouts quickly.
Hold the Color
Design in grayscale first. This forces you to use spacing, contrast, and size to create hierarchy. Color comes later as enhancement.
Work in Cycles
- Design a simple version of the next feature
- Build it
- Iterate on the working design
- Move to the next feature
Be a Pessimist
Design the smallest useful version first. Don't design features you can't build yet—ship what works.
2. Hierarchy is Everything
Not All Elements Are Equal
Visual hierarchy makes interfaces feel "designed". When everything competes for attention, nothing stands out.
The key: Deliberately de-emphasize secondary and tertiary information while highlighting what matters most.
Size Isn't Everything
Don't rely solely on font size for hierarchy. Use:
| Technique | Effect | |-----------|--------| | Font weight | 600-700 for emphasis, 400-500 for normal | | Color contrast | Dark for primary, grey for secondary, light grey for tertiary | | Spacing | More space around important elements |
Color guidelines for text:
- Primary content: Dark color (e.g.,
slate-900) - Secondary content: Medium grey (e.g.,
slate-600) - Tertiary content: Light grey (e.g.,
slate-400)
Don't Use Grey Text on Colored Backgrounds
Grey text on colored backgrounds looks washed out. Instead, pick a color with the same hue as the background, adjusting saturation and lightness.
/* Bad: Grey on blue background */
background: hsl(220, 80%, 50%);
color: #888888; /* Looks dull */
/* Good: Tinted text matching background hue */
background: hsl(220, 80%, 50%);
color: hsl(220, 60%, 85%); /* Harmonious and readable */
Emphasize by De-emphasizing
If a primary element doesn't stand out, don't make it louder—make competing elements quieter.
/* Instead of making active nav item bolder... */
/* ...make inactive items softer */
.nav-item { color: var(--slate-400); }
.nav-item.active { color: var(--slate-900); }
Labels Are a Last Resort
Context often eliminates the need for labels:
| Instead of | Use | |------------|-----| | "Email: john@example.com" | john@example.com (format is obvious) | | "In stock: 12" | "12 left in stock" | | "Bedrooms: 3" | "3 bedrooms" |
When labels are necessary, de-emphasize them—the data is what matters.
Balance Weight and Contrast
Heavy elements (icons, bold text) can be de-emphasized with softer colors. Light elements (thin borders) can be emphasized with increased weight.
/* Icon feels too heavy? Reduce contrast */
.icon { color: var(--slate-400); } /* Instead of slate-900 */
/* Border too subtle? Increase width */
border: 2px solid hsl(210, 23%, 95%); /* Instead of 1px darker */
Button Hierarchy
Design buttons based on hierarchy, not just semantics:
| Type | Style | Use for | |------|-------|---------| | Primary | Solid, high contrast | Main action on page | | Secondary | Outline or lower contrast | Less important actions | | Tertiary | Link style | Seldom-used actions |
Destructive actions aren't automatically red and bold. If "Delete" isn't the primary action, style it as secondary or tertiary, then use bold red styling in the confirmation modal.
3. Layout and Spacing
Start with Too Much White Space
Begin with excessive space, then remove until satisfied. This ensures elements breathe properly.
Establish a Spacing System
Use a constrained scale with meaningful jumps (~25% between values):
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
Base on 16px (default browser font size, divides nicely).
You Don't Have to Fill the Screen
If content only needs 600px, don't stretch it to 1200px. Extra space around edges never hurts.
Shrink the Canvas
Designing for mobile first often reveals better solutions. Start with ~400px width, then expand.
Grids Are Overrated
Not all elements should be fluid. Sidebars, icons, and avatars often work better with fixed sizes while main content flexes.
/* Better than percentage-based sidebar */
.sidebar { width: 280px; flex-shrink: 0; }
.main { flex: 1; min-width: 0; }
Relative Sizing Doesn't Scale
Headlines shouldn't stay proportional to body text across screen sizes. Large elements should shrink faster than small ones on mobile.
/* Desktop: 45px headline, 18px body (2.5x ratio) */
/* Mobile: 24px headline, 14px body (1.7x ratio) */
Avoid Ambiguous Spacing
When elements are grouped without visible separators, the spacing between groups must be greater than spacing within groups.
/* Form labels should be closer to their inputs than to previous inputs */
.form-group { margin-bottom: 24px; }
.form-label { margin-bottom: 8px; }
Detailed Reference
Read the full guide when the task needs detailed examples, long templates, troubleshooting matrices, appendices, or sections not included above. Keep this file unloaded for narrow tasks so the skill follows progressive disclosure.