Visitors to your website make a judgement about it in 50 milliseconds. That’s not a metaphor it’s the result of eye-tracking research from the University of Carleton, later validated by Google. Before they’ve read your headline, before they’ve seen your services, before they’ve had a single conscious thought about your business, they’ve already decided how they feel about it.
That decision is almost entirely based on design.
Research consistently puts the figure at 94% – first impressions of websites are design-led, not content-led. And 75% of people say a company’s credibility is directly tied to how its website looks. [CXL – First Impressions Matter]
This is the psychology of website design: understanding how people actually process what they see, and building something that works with that not against it.
Colour - the silent salesperson
Colour communicates before words do. By the time a visitor reads your headline, your colour choices have already told them something about your brand whether you’re trustworthy, premium, approachable, or worth their time.
85% of consumers cite colour as the primary reason they decide to buy from a brand. [Colorlib – Color Psychology] That’s not a small signal to get wrong.
Different colours carry consistent psychological associations – not universal laws, but strong tendencies worth understanding:
- Blue – trust, reliability, calm. Used by around 40% of Fortune 500 companies, and dominant in finance, professional services, and technology for exactly this reason
- Red – urgency, energy, action. HubSpot’s A/B testing found red CTAs outperformed green ones by 21% – useful data, though context matters more than colour alone
- Green – health, growth, permission. The brain’s association with “go” makes it effective for confirmation states and secondary actions
- Yellow – optimism, warmth, attention. Works best as an accent; sustained yellow backgrounds fatigue the eye quickly
- Black – authority, sophistication, premium positioning. Used well, it signals quality; overused, it becomes heavy
Cultural context matters too. White carries mourning associations in several East Asian cultures; red signals good fortune in China. If your B2B audience crosses borders, these associations are worth checking
How Many Colours
Effective websites typically work with two to three primary colours, with varying shades of each. Complementary colours, opposite on the colour wheel, create contrast and draw the eye. Analogous colours, adjacent on the wheel, feel more unified and calm. More than four distinct colours and the site starts to feel unplanned.
Colour and Action
Your call-to-action button needs to be the most visually distinct element on the page. If it blends in, it gets ignored. Consistent colour coding across a site trains visitor behaviour over time, the brain learns which colour means “clickable.”
Accessibility
Approximately 8% of men and 0.5% of women experience some form of colour vision deficiency. [Colorlib – Color Psychology] WCAG guidelines set a minimum contrast ratio of 4.5:1 for normal text. Relying on colour alone to convey meaning – red for error, green for success, without any supporting text or icon – excludes a meaningful portion of your audience and creates a compliance risk.
Typography - your words need to work
Font choice communicates something before the words themselves do. A serif typeface suggests authority and tradition. Sans-serif reads as modern and clean. Scripts feel personal but demand restraint, they’re difficult to read at small sizes and rarely appropriate for body copy. The selection sets an expectation before a single sentence lands.
But beyond brand personality, typography has a more immediate job: legibility. And most websites get at least one thing wrong.
Small font sizes and low contrast are the single most common complaint from web users about reading online. [CXL – How Typography Affects Conversions and UX] The fix is straightforward: body text should be a minimum of 16px. Line spacing should sit at around 1.5 times the font size – tight enough to feel connected, loose enough to breathe. Line length should stay between 60 and 80 characters; longer than that and the eye struggles to find the start of the next line.
85% of websites now use sans-serif fonts for body copy. [CXL – How Typography Affects Conversions and UX] Studies show no significant readability difference between serif and sans-serif on screen – the preference for sans-serif comes from rendering quality on lower-resolution displays, a factor that matters less now than it did a decade ago. The more important variable is contrast: light grey text on a white background might look refined, but it fails a significant portion of your audience and fails WCAG accessibility standards.
What Typography Actually Controls
Visitors don’t read websites, they scan them. Typography is what makes scanning work. Strong typographic hierarchy – a clear difference in size and weight between headings, subheadings, and body text – lets a visitor grasp the shape of a page in seconds and decide where to start. Remove that hierarchy and everything competes for attention equally, which means nothing gets it.
Font size, line height, line length, and contrast aren’t aesthetic decisions. They’re the reason visitors stay on the page long enough to read what you’ve written.
For a deeper look at how typography decisions affect user experience specifically, see The Impact of Typography on Website User Experience.
Layout — Where People Look
Visitors don’t read websites the way they read documents. They scan. And the pattern that scanning follows tells you a lot about where your content needs to be.
Nielsen Norman Group’s landmark eye-tracking research – conducted across hundreds of users and thousands of web pages – identified two dominant scanning patterns. [F-Shaped Pattern For Reading Web Content]
The F-pattern emerges on text-heavy pages: a full horizontal sweep across the top, a shorter sweep slightly lower, then a vertical scan down the left edge. The shape of an F. Most of the right side of the page goes unread.
The Z-pattern appears on pages with less text and more visual structure – homepages, landing pages, campaign pages. The eye moves left to right across the top, drops diagonally through the centre, then sweeps left to right again at the bottom, where the primary call to action typically sits.
Nielsen Norman Group’s own follow-up research found the F-pattern is less a design principle and more a failure state. It emerges when pages lack structure – when headings are weak, paragraphs are dense, and there’s no visual hierarchy to anchor the eye. A well-structured page with clear headings, short paragraphs, and logical flow disrupts the F-pattern because readers don’t need to hunt for information. They find it.
Visual Hierarchy
Hierarchy is the difference between a page a visitor can navigate instinctively and one they have to think about. Size, weight, colour, and spacing signal importance. The largest, boldest element on the page draws the eye first – which is why that position belongs to the most important thing you want a visitor to see, not the most decorative.
Eye-tracking data shows visitors spend around 6.5 seconds focused on a site’s main navigation before moving on. [CXL – First Impressions Matter] That’s not long. Navigation that buries key pages, uses unclear labels, or makes visitors guess creates friction at the point where attention is highest.
Put the most important content where eyes go first. Structure the rest so the path through it is obvious.
Simplicity — The Less You Ask, The More You Get
Every element on a page asks something of the visitor. Read this. Click here. Look at this image. Process this menu. The brain handles each of these as a micro-decision, and that processing has a cost. Add enough of them and the cost becomes friction. Friction becomes exits.
This is Hick’s Law, a principle from psychology that states the time taken to make a decision increases with the number of options available. It was established in the 1950s and has been validated repeatedly in digital design since. More choices, more hesitation. More hesitation, fewer conversions.
The practical implication for website design is straightforward: every page should have one primary thing it wants a visitor to do. Not five. Not three. One. A clear page with a single action will outperform a cluttered page with competing priorities almost every time, because it removes the decision entirely.
Cluttered layouts signal something else too. Research on first impressions shows that visual complexity is processed immediately and unconsciously. A busy page reads as difficult before a visitor has consciously registered why. The brain makes that call in the same 50-millisecond window as every other first impression.
What Simplicity Isn't
Simplicity doesn’t mean sparse or minimal. It means every element earns its place. A page can carry a lot of content and still feel clear if that content is organised well, grouped logically, and given room to breathe. Whitespace isn’t empty, it’s what stops everything from competing at once.
The question to ask about every section of every page: if this weren’t here, would the visitor miss it? If the answer is no, it probably shouldn’t be there.
Trust - Earning It Before Contact
A visitor arriving at your website has no prior experience of working with you. They’re making a judgement based entirely on what they can see. Trust signals are the elements that tell them – before any conversation happens – that you’re legitimate, credible, and worth their time.
92% of B2B buyers say they require trustworthy reviews before making a purchasing decision. [Genesys Growth – Social Proof Impact on Conversions] 93% of consumers say online reviews directly influence whether they buy. These aren’t marginal signals, they’re often the difference between an enquiry and an exit.
The trust signals that carry the most weight on a B2B website:
Testimonials and case studies. Specific is better than general. A testimonial that names the client, describes the problem, and quantifies the result does more work than a five-star quote with a first name. Where you can, use case studies that show the before and after – not just what you did, but what changed because of it.
Recognisable credentials. Industry memberships, accreditations, press mentions, and client logos all serve the same function: third-party validation. You saying you’re good at something carries less weight than someone else saying it.
Contact information. A physical address, a direct phone number, a named person behind the email. These seem minor but they signal permanence – that there’s a real business behind the website, not just a landing page.
SSL certificate. The padlock in the address bar is a baseline expectation now. A site without HTTPS triggers a browser warning before a visitor has read anything. It’s a trust signal in the same way that a clean, well-maintained office is – you notice its absence more than its presence.
Professional email. A contact address at your own domain rather than a Gmail or Hotmail account costs almost nothing and signals that you take the business seriously.
Trust is cumulative. No single signal closes the gap on its own, but the absence of several of them adds up quickly.
Emotional Connection - Making People Feel Something
Logic brings visitors to a website. Emotion decides what they do when they get there.
Neuroscientist Antonio Damasio’s research on decision-making found that people with damage to the emotional centres of the brain – while retaining full rational capacity – became almost unable to make decisions. Emotion isn’t the opposite of rational thinking. It’s what makes rational thinking actionable. Visitors to your website are processing both simultaneously, and the emotional read often lands first.
A website that feels cold, generic, or indistinct gives visitors nothing to hold onto. They leave not because something was wrong, but because nothing was memorable. A website that communicates personality – through photography, through the way it’s written, through small details in the design – gives people a reason to stay and a reason to come back.
Photography
Stock photography is immediately recognisable and does quiet damage to credibility. Images of suited people shaking hands, laptops on desks, or skylines at dusk signal that no one has made a specific choice about this website – and if no specific choice was made about the images, visitors reasonably wonder what else was left to defaults.
Authentic photography – real people, real environments, real work – is more persuasive precisely because it’s specific. It tells visitors something true about the business, which is what trust is built on.
Voice
The way a website is written is as much a design decision as the layout. A site that sounds like every other site in its sector gives visitors no reason to remember it. A site with a distinct, consistent voice – one that reflects how the business actually thinks and communicates – stands apart without trying to.
This doesn’t mean informal or casual. It means considered. A professional services business can be authoritative without being stiff. A creative agency can be personable without being unprofessional. The question is whether the writing sounds like a real business or like a template.
Specificity
Generic claims — “we deliver results,” “client-focused approach,” “passionate about what we do” – are invisible. They appear on too many websites to register. Specific claims – a number, a named client, a described outcome – do the work that generics can’t. Specificity signals confidence. It says: we know what we’ve done, and we’re willing to be precise about it.
Measuring What Works
Every design decision made before launch is a hypothesis. You’ve applied psychology, followed evidence, made considered choices – but you haven’t yet put the site in front of your actual audience and watched what happens. That’s where the real information comes from.
Post-launch data reveals things that pre-launch planning can’t. Visitors behave in ways that are specific to your audience, your industry, and the particular combination of content and design on your site. What works for a competitor’s audience may not work for yours. The only way to know is to measure.
What to Measure
Bounce rate – the percentage of visitors who leave without taking any action. A high bounce rate on a page that’s meant to drive enquiries is a signal that something isn’t landing, whether that’s the design, the content, the load time, or the match between what brought the visitor there and what they found.
Scroll depth – how far down the page visitors actually get. If most people stop at 40%, everything below that line is being written for nobody. Either the content above needs to work harder to earn the scroll, or the important content needs to move up.
Click maps and heatmaps – tools like Hotjar or Microsoft Clarity show exactly where visitors click, where they hover, and where they stop. They regularly surface surprises: elements visitors treat as clickable that aren’t, CTAs being ignored in favour of something else, navigation paths nobody anticipated.
Conversion rate – the percentage of visitors who complete the action the page is designed to drive. This is the number everything else feeds into.
Testing
A/B testing – showing different versions of a page to different visitors and comparing results – removes opinion from design decisions. Analysis of over 8,500 A/B tests found that even small changes to headlines, button copy, and layout produce measurable differences in conversion rates. [Genesys Growth – Social Proof Impact on Conversions] The version that feels right in a design meeting is not always the version that performs.
The websites that improve over time aren’t the ones that got everything right at launch. They’re the ones that kept looking at the data after it.
What to Do Next
The psychology covered here isn’t a checklist to work through once. It’s a lens for every decision made about a website – at the build stage, at the refresh stage, and at every point in between.
If your current website isn’t doing any of this, or you’re not sure whether it is, getting in touch is a good place to start. We’ll look at what’s working, what isn’t, and what a site built around your actual customers would look like.
