Navigation and structure
1. Breadcrumbs
The small trail near the top of a page (Home / Work / S-Line) showing where the page sits in the site. Helps users on deep pages and helps Google understand hierarchy. Every case study on this site has them.
2. Wizard
A multi-step flow that asks one thing per screen: checkout, onboarding, a quote form. Reduces errors and abandonment by hiding complexity until it is needed.
3. Stepper
The progress indicator on a wizard (Step 2 of 4). Tells the user how much is left, which is the difference between finishing and leaving.
Layout and spacing
4. Padding
Space inside an element, between its edge and its content. Margin is space outside. Consistent padding is most of what makes an interface look deliberate.
5. Vertical rhythm
Line heights and spacing set to multiples of one base unit (often 4px or 8px) so text and blocks align down the page. Readers feel it as calm without knowing why.
6. The 60-30-10 rule
A colour proportion guide: 60% dominant (usually background), 30% secondary, 10% accent for actions. It prevents the everything-is-orange problem. See it applied in choosing a colour scheme for web design.
7. Golden ratio
1:1.618, a proportion that turns up in classical layouts and type scales. Useful as one option for sizing steps; not a law. A 1.25 or 1.333 type scale is more common in modern web work.
Design deliverables
8. Wireframe
A low-detail layout: boxes and labels, no colour or imagery. Decides what goes where before anyone argues about fonts.
9. Mockup
The wireframe with real visual design applied: typography, colour, images. Static; looks like the finished page.
10. Prototype
A mockup you can click through. In Figma this is what we hand clients to test flows before development, as in the S-Line project.
Foundations
11. Colour wheel
The circle of hues used to pick relationships: complementary (opposite), analogous (adjacent), triadic (three evenly spaced). The starting point for any palette.
12. Accessibility
Designing so people with visual, motor or cognitive differences can use the site: sufficient contrast, keyboard navigation, readable sizes, alt text. Measured against WCAG; increasingly a legal requirement.
13. Design tokens
Named values for colour, spacing and type (accent, space-4, text-h2) shared between design files and code. The reason a colour change in Figma can reach a website in one edit.
Common questions
- What is the difference between UX and UI?
- UX (user experience) is how the whole thing works: flows, structure, whether the user gets what they came for. UI (user interface) is how it looks and responds: layout, colour, type, buttons. Good UI on a bad flow is still a bad product.
- Do clients need to know these terms?
- Not to hire a designer, but knowing wireframe, mockup and prototype makes reviews faster, because you know what stage you are commenting on.
- What is a design system?
- The full set of tokens, components and rules a product is built from, documented so designers and developers make the same decisions. Brand guidelines are the print-era version.
