You approve the design in a conference room, on a big monitor, with good lighting and a fast connection. It looks great. Then a week after launch you pull the site up on your phone in a parking lot, on one bar of signal, and the headline is cut off and the button won't respond.
That gap, between how a site looks when it's presented and how it works when it's used, is what most website design best practices are really about. Good design isn't decoration. It's making it easy for the right person to understand you, trust you and take the next step, in the messy conditions real people actually browse in.
This article covers the principles we apply on every build, in plain language. It's the wide view. For the specifics of your front page, see our homepage design tips, and for a scorecard you can run on your existing site, see what makes a good website. Here we're focused on the thinking behind the decisions.
Start with the job, not the look
Every page on a good site has a job. The homepage orients. A service page convinces. A contact page removes friction. A blog post earns trust and points somewhere useful.
Before anyone opens a design tool, write down three things:
- Who is this for? One specific kind of visitor, not "everyone."
- What do they need to know? The questions in their head, in the order they ask them.
- What should they do next? One primary action per page.
Designs that skip this step tend to get judged on taste ("I don't like the blue"), which is a miserable way to decide anything. When the job is clear, you can ask a better question: does this help the visitor do the thing? That's also why research comes first on our projects. If you haven't done that thinking yet, do it first.
Make the hierarchy obvious
Visitors don't read a page, they scan it, and design is how you tell them where to look first. That's hierarchy: the order in which the eye moves.
You create it with a few simple tools:
- Size. The most important thing is the biggest thing. Usually that's the headline.
- Contrast. Your main button should be the most visually distinct element on the screen.
- Space. White space isn't wasted room. It separates ideas and gives important content room to breathe.
- Position. People expect the logo top left, navigation across the top, and the main message near the top.
- Repetition. If every section is laid out the same way, visitors learn the pattern in seconds and stop having to think.
A useful trick is the squint test. Squint at your page until the text blurs. What still stands out? If it isn't the thing you most want people to see, the hierarchy is working against you.
Keep navigation boring
Navigation is the one place where clever is a mistake. Visitors have used thousands of websites, and they have expectations: a menu across the top, a logo that links home, labels that mean what they say.
Use plain names like Services, Work, About and Contact. Keep the top-level menu short, and put detail pages one level down. Every important page should be reachable within a couple of clicks from the homepage, and visitors should always be able to tell where they are.
Then watch someone use it. Give a friend your phone number and ask them to find a specific service page without any help. Where they hesitate is where your navigation fails. It's a ten minute test that regularly surprises owners.
Speed is part of the design
A beautiful page that loads slowly isn't a beautiful page. Visitors leave, and Google measures page experience through a set of metrics called Core Web Vitals. They look at how fast the main content appears, how quickly the page responds when someone taps, and whether the layout jumps around while loading. Google publishes the targets on web.dev, and they're worth knowing because you can test against them.
The causes of slow sites are usually the same few things:
- Images that are far larger than they need to be
- Page builders and plugins that load code the page never uses
- Third-party scripts for chat, tracking and widgets stacked on top of each other
- Hosting that can't keep up
The fixes are as consistent as the causes. Size and compress images, load only what each page needs, be selective about third-party scripts, and choose decent hosting. None of this is glamorous. All of it shows up in your results.
One honest caveat: speed scores are a means, not a goal. A site that scores well and says nothing useful is still a bad site. Treat the numbers as a floor, then spend your energy on what the page says and does.
Design for phones first
Google indexes the mobile version of your pages, and most people will meet your business on a phone. So design that version deliberately, not as a shrunk-down afterthought. This is the idea behind mobile-first design, and it's also the best discipline in the business. When you have a small screen, you're forced to decide what really matters.
Check the basics on a real phone:
- Text is readable without pinching or zooming.
- Buttons and links are large enough to tap accurately, with space between them.
- Forms are short, with the right keyboard appearing for each field.
- Menus open, close and scroll properly.
- Phone numbers are tap-to-call.
Responsive layouts that adapt to any screen size are the standard now, not a feature. If a quote still says "mobile version" as an extra, ask what you're being sold.
Build accessibility and security in from the start
Accessible design means people with visual, hearing, motor or cognitive differences can use your site. It also means anyone on a phone in bright sun, or in a noisy room, or with a temporary injury, can. Web accessibility isn't a niche concern. It's quality.
The fundamentals aren't complicated:
- Contrast. Regular text should meet at least a 4.5 to 1 contrast ratio against its background, which is the common WCAG AA standard.
- Real text. Don't put important words inside images.
- Alt text. Describe meaningful images in a few words. Skip decorative ones.
- Headings. Use them in order, so screen reader users can jump through the page.
- Keyboard access. Every link, button and form field should work without a mouse, with a visible focus outline.
- Labels. Every form field gets a visible label, not just placeholder text.
- Captions. Add them to video, and transcripts for audio.
It's cheaper to do this while designing than to retrofit it later. And, to be clear, we can't promise that any site meets every accessibility standard and every legal requirement. Ask your designer how they test, and ask for specifics.
Treat security as a design requirement
If your site collects names, emails or payments, security belongs in the design conversation. Use HTTPS everywhere, keep the platform, themes and plugins updated, limit who has admin access, use strong passwords with two-factor sign-in, and keep backups you've actually tested restoring.
This is ongoing maintenance, not a one-time setup. That's one reason many owners choose a partner who handles updates and monitoring instead of leaving it to chance. A site that gets hacked costs far more in trust than it ever cost to build.
Stay consistent, and be a little distinctive
Consistency is what makes a website feel professional. Same fonts, same spacing, same button style, same tone of voice on every page. People recognize patterns and relax. Inconsistency reads as carelessness, even when they can't say why.
Keep the system small:
- Two typefaces at most, one for headings and one for body text
- A palette with a main color, a few neutrals and one accent used for key actions
- A consistent set of button styles, spacing and image treatments
The system comes from your brand. If you don't have clear brand guidelines, that's worth fixing before the website, and our branding work covers it. If you'd like to think through color choices honestly, we wrote about color psychology in web design and what the research does and doesn't support.
Consistency shouldn't mean sameness, though. If your site looks like every competitor's, you've lost your one chance to be remembered. That's where the choice between a template and a custom design matters, and we've been straightforward about when each one is right in custom website vs template.
Make calls to action honest and specific
Every page should point somewhere. A call to action is just the next step, and good ones share three traits:
- They match the visitor's mindset. Someone reading an article isn't ready to buy. Offer a related page, a checklist or a way to ask a question. Someone on a service page is closer, so make it easy to request a quote or book a call.
- They say what happens. "Request a Quote" beats "Submit." "Book a 30 Minute Call" beats "Get Started."
- They're limited. One primary action per page, visually obvious, with quieter secondary options.
Then add proof near the action. A short quote from a real client, a rating, a recognizable result. People hesitate right before they act, and a nearby reason to trust you helps.
Let the words do design work
Copy is part of the design, not something you pour in afterward. A page with a sharp headline and four honest sentences will beat a gorgeous layout wrapped around mush.
Write the headline and the main button text before the layout is final. If the message needs three lines to explain, the design has to make room for three lines, and it's much cheaper to learn that on paper than in the browser. Use real content in every mockup. Placeholder text makes every design look good, because lorem ipsum never wraps awkwardly, never runs long and never says anything confusing.
Keep the reading level plain. Short paragraphs, specific claims and words your customers use will do more for conversions than any visual flourish. If you'd like a sense of how this plays out on the page that matters most, our homepage design tips go through it section by section.
Test, measure and keep improving
No design is finished at launch. Real visitors will do things you didn't expect, and the data tells you what.
At minimum, track the actions that matter, like form submissions, calls and bookings, and look at how people reach them. Watch where visitors drop off. Make one change at a time so you know what caused the effect. A/B testing is useful once you have enough traffic to make the results meaningful, and until then, careful observation and common sense do most of the work.
Be skeptical of any best practice stated as an absolute, including the ones in this article. "Always put the button here" and "never use more than three colors" are rules of thumb, not laws. Your audience, your offer and your industry decide. The test is whether the changes improve your numbers.
Website design best practices: where to start
You don't need to fix everything at once. Pick the one practice that's furthest from where your site is today and work on that first. For most owners it's one of three things: a vague headline, a slow mobile experience, or a call to action nobody can find. Fix that, look at the numbers for a month, then pick the next one. Steady, boring improvement beats a big redesign more often than people expect, and it keeps what's already earning you business.
If you'd like a team that handles design, development and search together, we're glad to help. Book a discovery call and we'll look at your site with you, honestly, including the parts that are already working.