Design & UX
How sites look, read and guide people: layout, type, navigation and conversion.
A/B testing
A/B testing shows two versions of a page to different visitors at random and measures which one gets more of a chosen action.
Above the fold
Above the fold is the part of a page visible without scrolling; it has to state what the site is and invite the next step.
Breadcrumbs
Breadcrumbs are a small trail of links, like Home › Guides › Hosting, that shows where a page sits in the site and lets visitors step back up.
Call to action
A call to action is the button or link that asks the visitor to take the page's main next step, such as Book now, Get a quote or Buy.
Colour palette
A colour palette is the fixed set of colours a site uses, typically a background, text colours, one accent for actions and a few states such as success and error.
Conversion rate optimisation
Conversion rate optimisation is the practice of improving the share of visitors who take a desired action, by testing changes to copy, design, speed and flow.
Dark mode
Dark mode is a colour theme with light text on a dark background, offered as an alternative to a light theme or matched to the visitor's system setting.
Dark patterns
Dark patterns are design tricks that push people into choices they did not intend, like hidden fees, fake countdowns, confusing opt-outs or hard-to-cancel subscriptions.
Design system
A design system is a shared library of reusable components, tokens and rules that keeps every page of a product consistent and faster to build.
Figma
Figma is a browser-based design tool where teams create wireframes, mockups, prototypes and design systems together in real time.
Font pairing
Font pairing is choosing two or more typefaces that work together, often a distinctive one for headings and a neutral one for body text.
Footer
The footer is the bottom section of every page, holding secondary links, contact details, legal pages and often a newsletter sign-up.
Grid layout
A layout grid is the invisible system of columns and gutters that aligns everything on a page, giving a design order and rhythm.
Hamburger menu
A hamburger menu is the icon of three stacked lines that opens a hidden navigation menu, mostly used on phones.
Hero section
The hero section is the large opening area at the top of a page, usually a headline, a short promise, a call to action and a visual.
Information architecture
Information architecture is how a site's content is organised, grouped and labelled so people can find things and understand where they are.
Mobile-first
Mobile-first is designing and building for the smallest screen first, then adding layout for larger screens, so the core experience works on phones.
Mockup
A mockup is a static, full-detail picture of a page as it will look, with real type, colour and imagery, but no working interactions.
Navigation menu
The navigation menu is the set of links, usually across the top of a site, that lets visitors move between its main sections.
Prototype
A prototype is a clickable simulation of a website or app used to test flows and interactions with real people before building the real thing.
Social proof
Social proof is evidence that other people use and trust a product, such as reviews, client logos, case studies and counts, used to reduce a visitor's doubt.
Style guide
A style guide documents a brand's visual and written rules, such as logo use, colours, fonts and tone of voice, so everything published looks and sounds like one brand.
Typography
Typography is the choice and arrangement of type, meaning fonts, sizes, weights, line length and spacing, to make text readable and give a site its voice.
UI
UI, or user interface, is the visible, clickable surface of a website: buttons, type, colour, spacing, icons and the states each element shows.
Usability testing
Usability testing is watching real people try to complete tasks on a site to find where they get stuck, confused or lost.
User flow
A user flow is the path a visitor takes to complete a task, such as landing, comparing, choosing and paying, mapped step by step.
UX
UX, or user experience, is how it feels to use a website: whether people can find what they came for, understand it and finish what they started without friction.
Visual hierarchy
Visual hierarchy is arranging elements by size, colour, contrast and position so visitors see the most important thing first and the rest in order.
White space
White space is the empty space around and between elements; it separates ideas, guides the eye and makes a page feel calm and premium.
Wireframe
A wireframe is a simple, low-detail layout of a page, boxes and labels without colour or imagery, used to agree on structure before visual design begins.