Why design matters
A first impression forms in about 50 milliseconds. Here are sixteen small details that shape it, each one live on this page, with what it does for a visitor and when to leave it out.
01 Attention
Movement is a spotlight. Something that starts to move draws the eye, so point it at the one thing you want seen and keep the rest still.
The research: movement that starts catches the eyeEach line rises into place as the heading comes into view. People take in the first line before the next arrives, so the message lands in the order you wrote it.
When not to use it. On body text, prices or anything people need to read straight away.
A good website doesn’t shout. It shows people where to look, one idea at a time, until the next step feels obvious.
The sentence fills in word by word as you scroll. It slows people down on the one message you most want remembered.
When not to use it. On long passages. Faint words are harder to read, so keep it to one short paragraph per page.
Every quote is fixed before we start, so you’ll know exactly what you’ll pay.
A still wash of colour picks out the few words that matter most, the way you’d highlight a printed page. Even people who skim pick them up.
When not to use it. On more than two or three phrases. Highlight everything and nothing stands out.
02 Trust
When people decide whether to trust a website, how it looks is what they mention most. Care in the details reads as care in the work.
The research: the look comes up mostDragging the handle lets people judge the difference for themselves. It suits renovations, styling, cleaning or any change you can photograph. Here it shows the same words before and after design.
When not to use it. When the two pictures don’t line up, or the change is too small to see at a glance.
50 msfor a first impression to form
46.1%of comments about credibility were about the look
Both figures come from the research further down.
A figure that rolls into place draws the eye to proof. Use it for one or two numbers that are true, current and easy to check.
When not to use it. For figures that change often or can’t be verified. A moving number invites a closer look.
The tools behind this site. Logos are trademarks of their owners.
A slow strip of names people recognise says who you work with, without a paragraph. It pauses when someone hovers so every name can be read.
When not to use it. When you only have two or three names, or no right to show the logos. A short list reads better.
03 Clarity
Motion can explain, but only when it’s simple enough to follow and people stay in control. Keep it slow, short and easy to stop.
The research: animation helps when people control itA short call.
We listen first, so the plan starts from what you actually need.
A clear scope.
One page that sets out what’s included and when it will be ready.
Steady progress.
Regular check-ins until it’s live and yours to keep.
Three ideas share the space of one. Choose a tab to read each stage at your own pace. The selected tab stays clearly marked.
When not to use it. For anything people need to compare side by side, like prices or detailed options. Show those together.
A line that fills as you scroll makes a process feel short and certain. People can see what happens first and what comes next.
When not to use it. For a process with branches or exceptions. A straight line promises a simplicity that isn’t there.
A calmer website for cafésclinicsstudiostrades
One sentence can speak to several audiences without turning into a list. Each phrase gets a moment on its own.
When not to use it. When a visitor might miss the one phrase that applies to them. If it’s important, list it.
04 Feedback
Every hover, tap and click deserves an answer. A response within about a tenth of a second feels instant, so the page feels like it’s listening.
The research: a tenth of a second feels instantMove your pointer across the list.
On a phone the list stays still, by design.
The colour slides in from whichever edge the pointer crossed and leaves the way it went. A plain list starts to feel responsive under the hand.
When not to use it. As the only sign that something can be clicked. Touch screens have no hover, so the list has to work perfectly without it.
Bring your pointer close to the button.
The button leans toward the pointer and springs back when it leaves. It quietly says this is the thing to press.
When not to use it. On more than one button per screen. Phones and keyboards never see it, which is fine.
Read our guides, see who we are or start a conversation.
A link changes colour when you hover or focus it. The ordinary underline stays still, so it’s clear what can be clicked before you get there.
When not to use it. As the only way to identify a link. Keep a visible underline in running text and a clear outline for keyboard focus.
05 Delight
Attractive designs are often judged easier to use, but a site that’s hard to use soon stops looking attractive. Delight is the reward for getting the basics right, not a substitute for them.
The research: beauty helps, but it has to workMove your pointer over a card.
A card that leans toward the pointer feels like something you could pick up, with a soft glare that follows the light. It suits products and offers.
When not to use it. On cards full of text, or where people need to compare options side by side.
A frosted panel stays readable while hinting at what sits behind it, so the page feels layered and calm.
When not to use it. Over busy photos where the words lose contrast. Check the text is readable at every point.
Letters shuffle and settle into words, as if something is being worked out. It suits technology and AI brands when it’s used once or twice.
When not to use it. On anything people read in a hurry. Never use it on more than a label or two.
Hover, tap or tab to a card.
A fanned hand shows there’s a collection without listing it. Bring a card forward and the others step back.
When not to use it. When people need to compare items or read them all. A simple grid does that better.
The research
Seven sources, each linked so you can read it yourself. Where a finding has been challenged, we’ve said so.
People were shown website home pages for 50 milliseconds and asked how appealing they looked. Their ratings closely matched ratings made after half a second.
Lindgaard, Fernandes, Dudek and Brown (2006). Attention web designers: You have 50 milliseconds to make a good first impression! (opens in a new tab) Behaviour & Information Technology.
In a Stanford study, 2,684 people judged the credibility of real websites and explained why. The design look was the most mentioned factor, in 46.1% of comments.
Fogg, Soohoo, Danielson, Marable, Stanford and Tauber (2003). How do users evaluate the credibility of Web sites? A study with over 2,500 participants (opens in a new tab). Proceedings of DUX 2003.
When people rated 26 cash machine screen layouts, how easy each one looked tracked how attractive it was more than how usable it really was. A later study found the effect held after people had used the system.
Kurosu and Kashimura (1995). Apparent usability vs. inherent usability (opens in a new tab). CHI ’95 Conference Companion. Also Tractinsky, Katz and Ikar (2000). What is beautiful is usable (opens in a new tab). Interacting with Computers.
In an online shop experiment, poor usability made people rate the shop as less attractive after using it, while good looks didn’t make it seem easier to use. It pushes back on the studies above, which is why it’s here too.
Tuch, Roth, Hornbæk, Opwis and Bargas-Avila (2012). Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI (opens in a new tab). Computers in Human Behavior.
Something that suddenly starts moving draws attention, even when the movement means nothing. Things that were already moving didn’t stand out.
Abrams and Christ (2003). Motion onset captures attention (opens in a new tab). Psychological Science.
Reviewing studies of animated and still graphics, the authors found animation was often too complex or too quick to follow, with little reliable advantage over a good still image. They suggested letting people control it.
Tversky, Morrison and Bétrancourt (2002). Animation: can it facilitate? (opens in a new tab) International Journal of Human-Computer Studies.
A response within about 0.1 seconds feels instant. Within about a second, people keep their train of thought.
Nielsen (1993). Response Times: The 3 Important Limits (opens in a new tab). Excerpt from Usability Engineering, Nielsen Norman Group.
How we use it
Every movement should help someone notice, understand or act. If it does none of those, it goes.
One strong moment per section. A page where everything moves gives the eye nowhere to rest.
Everything on this page reads with JavaScript off, nothing depends on a mouse and it all stays still for anyone whose device asks for reduced motion.
Small code, no outside libraries and nothing that holds up the page. The whole kit is one script and one stylesheet.
A law firm and a florist shouldn’t move the same way. Pace, colour and personality come from the brand, not from a template.
Tools we use
Every demo on this page comes from a small kit we wrote and maintain. Each effect is switched on one element at a time. The same kit runs across this site and on thomastamine.com (opens in a new tab).
Osmo is a membership library of web design resources made by creative developers Dennis Snellenberg and Ilja van Eck. It’s where we look for ideas and technique. The demos here are our own versions, written from scratch.
This page lives in GitHub, where every change is recorded. Netlify publishes it to the web. New to either? Start with What is GitHub? or What is Netlify?
Build it yourself
The Branded Screens Kit gives Codex or Claude a brand-aware design skill, so the interfaces you build carry this kind of care. Try your own logo and colours in the free studio first.
We design and build websites that feel like the business behind them. Leave your details and we’ll be in touch.