01
Clarity before decoration
A visitor should quickly understand what the business offers, who it helps and what to do next. Large type, animation and unusual layouts can support that message, but should not compete with it.
Start with the content hierarchy before choosing effects. A clear H1, short introduction and meaningful calls to action create the structure.
- Use one primary message per section
- Keep button labels specific
- Use whitespace to separate ideas
- Avoid decorative text that looks interactive
02
Accessibility is part of the design system
Colour, type size, focus states and target size affect whether people can use the interface. WCAG 2.2 provides testable guidance, including contrast and minimum target-size considerations.
Test keyboard navigation, zoom and reduced-motion preferences. An accessible design is not visually plain; it is deliberate about how information and controls behave.
- Check text contrast
- Keep visible keyboard focus
- Provide text alternatives for meaningful images
- Do not rely on colour alone
03
Responsive design is a content decision
Responsive work is more than shrinking a desktop layout. Decide what should stack, what can wrap and what must remain visible. Use the same core content and metadata across screen sizes.
Test at narrow widths, landscape mobile, common laptops and large displays. Watch for clipped headings, horizontal scrolling and floating controls that cover content.
- Use flexible grids and type
- Reserve space for media
- Keep forms simple on mobile
- Test real content, not placeholder text
04
Choose motion with a purpose
Motion can explain hierarchy, confirm an action or make a transition feel connected. It should not delay access to the page or make reading difficult.
Provide a reduced-motion path and ensure a loader cannot trap the visitor. Performance and usability remain part of the visual result.
- Animate transform and opacity where practical
- Keep entrances short
- Avoid moving essential controls
- Verify the page without JavaScript where possible
Sources
Primary references
Technical and regulatory points were checked against the following primary or official references.
This guide was prepared with AI-assisted research and drafting, then checked against the cited sources and reviewed for unsupported claims before publication.