Visual design is where first impressions are formed — often within a fraction of a second. But good visual design is not about personal taste. Colour choices affect readability and conversions, type choices affect comprehension and speed, and layout decides what people notice and in what order. Each decision either helps users understand the page or gets in their way.
This guide covers the practical side of visual design for websites: colour, typography, layout and grids, visual hierarchy, imagery, and the design systems that keep it all consistent as a site grows. It is part of a series alongside UX design fundamentals, navigation, mobile and performance and accessibility and forms.
Color
Choosing a Color Palette for a Website
Most effective website palettes are simple: a primary brand colour, one or two accent colours for actions and highlights, and a set of neutrals (backgrounds, text, borders). A common guideline is the 60-30-10 split — 60% dominant neutral, 30% secondary, 10% accent. Choose the accent for calls to action carefully and reserve it for them, so buttons stand out wherever they appear.
Understanding Color Theory Basics: Complementary, Analogous and Triadic Schemes
- Complementary colours sit opposite each other on the colour wheel (blue and orange). High contrast — great for making an action stand out, tiring if overused.
- Analogous colours sit next to each other (blue, teal, green). Harmonious and calm — good for backgrounds and brand palettes.
- Triadic schemes use three evenly spaced colours. Vibrant and balanced, but need one dominant colour to avoid chaos.
Colour theory gives you starting points; testing for contrast and accessibility decides what actually works.
The Psychology of Color in Web Design
Colours carry associations — blue with trust and calm, green with growth or health, red with urgency or danger, black with luxury — but those meanings vary by culture and context, and evidence for universal colour psychology is weaker than marketing folklore suggests. What matters more is contrast and consistency: a button converts well because it stands out from its surroundings and clearly looks clickable, not because it is a magic colour.
Color and Design Choices That Quietly Influence Conversion Rate
Small visual decisions add up: calls to action that blend into the background, low-contrast text that strains the eyes, inconsistent button styles that make users wonder what is clickable, and busy backgrounds that compete with content. Audit key pages for these, then test changes one at a time rather than redesigning everything at once.
Using Color to Guide the Eye Toward a Call to Action
Use your accent colour sparingly so it signals "this is what to do next". Surround the primary call to action with space, keep secondary actions visually quieter (outline or text buttons), and avoid using the same colour for decorative elements. When everything is highlighted, nothing is.
Understanding Color Contrast and Why It Matters for Readability
Text needs enough contrast against its background to be read comfortably by everyone, in bright sunlight and on cheap screens. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios: 4.5:1 for normal text and 3:1 for large text and essential interface elements at level AA. Light grey text on white is one of the most common readability failures on the web.
Building an Accessible Color Palette
Build contrast into the palette from the start: define text and background pairs that pass WCAG, check every state (hover, focus, disabled, error), and never rely on colour alone to convey meaning — pair red error states with an icon and a message. Free contrast checkers make it easy to test combinations before they reach a design.
Building a Scalable Design System Color Palette
For a design system, define colours as tokens with semantic names — color-text-primary, color-action, color-error — rather than raw values scattered through code. Provide a range of tints and shades for each hue so designers can create backgrounds, borders and states consistently. Semantic tokens also make dark mode and rebrands far easier.
Dark Mode Design Considerations
Dark mode is not simply inverting colours. Use dark greys rather than pure black to reduce eye strain and allow depth, desaturate bright colours that vibrate on dark backgrounds, re-check every contrast pair, and make sure images and logos still work. Respect the user's system preference (prefers-color-scheme) and offer a toggle if your audience values it.
Typography
Choosing Web Fonts: What to Actually Look For
Prioritise readability over personality for body text: generous x-height, clear letterforms that distinguish similar characters (I, l, 1), and the weights and styles you need. Check language support, licensing for web use, and file size. System fonts are fast and familiar; a single well-chosen web font family often covers both headings and body text.
Understanding Font Pairing Basics
When pairing two typefaces, aim for contrast with harmony: a serif for headings with a sans-serif for body text (or the reverse), or two weights of one versatile family. Avoid pairing fonts that are too similar — they look like a mistake — and limit yourself to two families. Hierarchy usually comes better from size, weight and spacing than from more fonts.
Establishing a Typographic Hierarchy
Hierarchy tells readers what matters and how content is organised. Make each level clearly distinct — page title, section headings, subheadings, body text, captions — using size, weight, colour and spacing. A reader skimming the page should understand its structure from the headings alone.
Building a Type Scale System for a Design System
A type scale defines a fixed set of sizes based on a ratio (for example 1.25, the "major third"), so every size relates harmoniously to the others. It ends the "is this 17px or 18px?" debate, keeps hierarchy consistent and maps cleanly to design tokens. Define sizes, line heights and weights for each step and use only those.
Font Size Best Practices for Body Text and Headings
Body text on the web generally reads best at 16px or larger, with many sites using 17–20px for long-form reading. Headings should be clearly larger and step down consistently. Use relative units (rem) so text respects users' browser settings, and test on actual phones — what looks fine on a desktop monitor can be too small in the hand.
Line Height, Letter Spacing and Readability
Comfortable body text typically uses a line height around 1.5 (WCAG suggests at least 1.5 for body text), with a line length of roughly 50–75 characters. Headings can use tighter line height. Avoid tight letter spacing on body text; slightly increased spacing can help all-caps labels. Long lines and cramped spacing make readers lose their place.
Responsive Typography: Scaling Text Across Devices
Text should adapt to screen size: slightly smaller headings on phones so they do not dominate the screen, and comfortable line lengths on large monitors. CSS clamp() lets sizes scale fluidly between a minimum and maximum. Always keep body text readable on the smallest screens you support.
Variable Fonts and Their UX Benefits
A variable font contains a continuous range of weights (and sometimes widths or other axes) in a single file. You can use precise weights for hierarchy without loading several font files, and fine-tune text for different screen sizes. One variable file is often smaller than multiple static weights — a performance win as well as a design one.
Web Font Performance: Loading Fonts Without Hurting Speed
Fonts can delay text from appearing and cause layout shifts when they swap in. Best practices: limit families and weights, use WOFF2, subset fonts to the characters you need, preload the most important font file, use font-display: swap (or optional) so text appears immediately, and choose fallback fonts with similar metrics to minimise shifting.
Layout and Composition
Understanding the 12-Column Grid System
A 12-column grid divides the page into columns that split evenly into halves, thirds, quarters and sixths, which makes it flexible enough for most layouts. Content aligns to columns, gutters keep consistent spacing, and the grid collapses to fewer columns on smaller screens. Grids create order users feel even when they cannot see it.
Building Layouts With CSS Grid and Flexbox Concepts
Flexbox arranges items along one dimension — a row of buttons, a navigation bar, a card's content. CSS Grid controls two dimensions — rows and columns together — making page layouts and card galleries straightforward. Use Grid for overall structure and Flexbox for components within it. Both make responsive layouts far simpler than older float-based techniques.
Card-Based Layouts and When to Use Them
Cards group an image, title, summary and action into a self-contained unit, ideal for browsing collections — products, articles, team members. They scan well and adapt naturally to different screen widths. They are less suited to content people need to compare in detail (tables work better) or read in sequence.
Asymmetrical Layouts: When Breaking the Grid Works
Asymmetry creates visual interest and can direct attention to a focal point — a hero section, a feature highlight, a portfolio piece. It works when there is still an underlying structure and a clear reading path. Overused, it makes pages feel chaotic and harder to scan. Break the grid deliberately and sparingly.
Building a Modular, Component-Based Layout System
Build pages from reusable components — headers, cards, feature blocks, testimonials, calls to action — rather than designing each page from scratch. Components keep the site consistent, speed up design and development, and make site-wide improvements possible by changing one component.
Designing for Content-First Layouts
Start with the content, not a template: understand what each page needs to communicate, then design the layout around it. Lorem ipsum hides problems that real content reveals — headlines that wrap awkwardly, product names that are longer than expected, images in odd proportions. Content-first design produces layouts that work with real material.
Using Alignment to Create Visual Order
Consistent alignment makes a page feel organised and easier to scan. Align elements to shared edges and the grid, use left alignment for body text in left-to-right languages, and reserve centred text for short headings and statements. Small misalignments are noticed subconsciously as sloppiness.
Why White Space Isn't Wasted Space
White space (or negative space) separates groups of content, gives important elements room to stand out and makes pages easier to read. Cramming more onto the screen increases cognitive load. Generous spacing between sections, around calls to action and within text blocks often improves both comprehension and conversion.
The Role of Visual Hierarchy in Web Design
Visual hierarchy controls the order in which people notice things, using size, colour, contrast, position, spacing and imagery. The most important element on a page — usually the main message and primary action — should be the most visually prominent. If you squint at a page and cannot tell what matters most, the hierarchy needs work.
Above-the-Fold Design: What Still Matters and What's a Myth
The myth: everything important must be visible without scrolling. People scroll readily when the page gives them a reason to. What still matters: the top of the page should immediately confirm the visitor is in the right place, state the core value, and make the next step obvious. Do not cram; communicate.
Using Imagery and Photography Effectively on a Website
Use images that add information or credibility: real products, real people, real work. Generic stock photos are often ignored or mistrusted. Keep images consistent in style, crop them to focus on the subject, ensure text over images stays readable, and optimise them for fast loading with descriptive alt text.
Iconography: Designing and Choosing Icons That Communicate Clearly
Icons speed up recognition when they are familiar (search, menu, basket, close) but cause confusion when they are abstract or unique. Use one consistent icon style, pair less common icons with text labels, keep them large enough to recognise and tap, and give icon-only buttons accessible labels.
Design Systems
Design Systems: Why They Matter Beyond Just Consistency
A design system is a shared library of components, patterns, tokens and guidelines. Consistency is the obvious benefit, but the larger ones are speed (teams build with ready-made parts), quality (accessibility and performance built into components once), and better decisions (documented patterns end repeated debates). Start small — colours, type, spacing and core components — and grow it as patterns prove themselves.
The Bottom Line
Effective visual design serves comprehension: colours with enough contrast and a clear accent for actions, typography that is readable and hierarchical, layouts built on grids and white space, purposeful imagery and clear icons — all held together by a design system so quality survives as the site grows.
Next step: Test your pages' speed and stability — where fonts and images often cause problems — with the free SEO Audit tool.