Do's and Don'ts of Website Design

Originally published 2010. Updated March 2026.

Web design principles are more contested than they have ever been. Tools change constantly. Frameworks multiply. AI is generating layout suggestions, writing copy and reviewing accessibility automatically. And yet the core tension in web design remains what it always was: your attention versus your visitor’s patience.

The original version of this post was written in 2010. Some of the advice still stands. Most of the technical specifics are completely outdated. This version has been rebuilt for 2026 — same format, updated thinking.

---

Layout and Structure

DO: Design mobile-first

In 2026, mobile accounts for the majority of web traffic. Designing for desktop and scaling down is the wrong approach. Design for the smallest, most constrained screen first. If the content hierarchy works at 375px, it will work at 1440px. The reverse is rarely true.

DON’T: Assume your visitor is using a large screen

Most of your visitors are not sitting at a desktop monitor. They are on a phone, possibly in partial attention, likely with one hand occupied. Every layout decision should be made with that person in mind first.

DO: Use a grid system

A grid is not a constraint — it is a foundation. CSS Grid and Flexbox have made proper grid layouts accessible to every project, at every budget. Consistent spacing, alignment and proportion reduce cognitive load. Visitors scan structured layouts faster and retain information more reliably.

DON’T: Place elements arbitrarily

Misaligned boxes, inconsistent padding, content that floats without relation to anything else — these are not stylistic choices, they are communication failures. If elements do not have a clear spatial relationship to each other, the visitor has to work out where to look. They will not bother.

---

Hierarchy and Focus

DO: Make the primary purpose obvious

Every website exists to do something. A product page should showcase the product. A service page should communicate the service and its value. A portfolio should show the work. Whatever the primary purpose is, it should be visible above the fold without scrolling, on any screen size.

DON’T: Bury the lead

If a visitor has to scroll past three sections of brand storytelling before they understand what you actually offer, you have already lost most of them. Front-load the value. The details can come later.

DO: Use visual hierarchy deliberately

Size, weight, colour and position all communicate importance. The most important element on the page should be the most visually dominant. H1, H2, H3 tags are not just SEO signals — they are navigational tools. Use them as a map.

DON’T: Treat all content as equal

When everything is emphasised, nothing is. If you bold every sentence, italicise every phrase and underline every link, the page becomes visual noise. Hierarchy requires restraint. Use emphasis sparingly so it means something when it appears.

---

Colour

DO: Choose a colour palette with intention

Colour communicates before content does. A well-considered palette reinforces the brand, guides the eye and establishes emotional tone. Three to five colours is a reasonable working limit — a primary, a secondary, an accent, a background and a text colour.

Consider dark mode. In 2026, a significant portion of users browse with OS-level dark mode enabled. A design that only works on white looks incomplete to those users, and some platforms now penalise sites that do not offer a dark-mode experience.

DON’T: Use colour arbitrarily

Colour that serves no communicative purpose adds visual weight without adding information. More critically: colour contrast between text and background must meet WCAG AA accessibility standards (minimum contrast ratio of 4.5:1 for normal text). Low-contrast text is not a stylistic choice — it is a barrier for a significant portion of your audience.

---

Performance

DO: Optimise for speed

Google’s Core Web Vitals make site performance a direct ranking factor. More importantly, visitors are impatient — they always were, and mobile connections on the move are less reliable than broadband. Target a Largest Contentful Paint under 2.5 seconds and a Cumulative Layout Shift below 0.1.

Compress images. Use modern formats (WebP, AVIF). Lazy-load images below the fold. Minimise render-blocking resources. Defer non-critical JavaScript.

DON’T: Prioritise aesthetics over load time

A full-viewport video background that takes eight seconds to load is not an experience — it is a bounce rate. Large background images, heavy web fonts, and unoptimised third-party scripts all add to load time. Measure with Lighthouse or PageSpeed Insights, not by feel.

DON’T: Make everything an image

Text on a website should be text. Not a .jpg of text. Not a .png of a headline. Actual, indexable, selectable, scalable text. Image-based text cannot be resized by users who need it larger, cannot be read by screen readers, and cannot be indexed by search engines. This was poor practice in 2010 and remains so now.

---

Typography

DO: Choose typefaces that serve the content

Typography is not decoration. The typefaces you choose communicate personality before the words are read. One typeface for body text, one for headings — that constraint forces you to use weight, size and spacing to create hierarchy rather than relying on variety. If you need a third, use it with intention.

Body text at 16–18px on desktop, 15–17px on mobile, with line height around 1.5–1.6, is a solid baseline. Variable fonts give you enormous flexibility within a single file. System font stacks load faster than web fonts and are often more legible on smaller screens.

DON’T: Use typefaces as visual noise

Five typefaces in ten sizes is not expressive — it is incoherent. Comic Sans in navigation, Times New Roman in body text, Impact in headings: this is not 2002 and it should not look like it was.

---

Accessibility

DO: Design for access, not for averages

An estimated 15–20% of people live with some form of disability that affects how they use the web — visual, motor, cognitive, auditory. Designing accessibly is not a compliance checkbox: it is designing for real people who are using your site right now.

WCAG 2.1 Level AA is the practical standard. Key requirements: sufficient colour contrast, keyboard navigability, proper heading structure, alt text on meaningful images, focus indicators visible on interactive elements, and forms with clear labels. All of these improve the experience for everyone, not just users with disabilities.

DON’T: Ignore keyboard navigation

Every interactive element on your page should be reachable and operable with a keyboard alone. If you have removed focus outlines for aesthetic reasons without providing an alternative, keyboard users — and that includes power users, not just people with motor disabilities — cannot use your site effectively.

---

Navigation

DO: Make navigation obvious and consistent

Navigation should be in the same place on every page. It should be clearly distinct from content. The most important destinations should be reachable in one click from anywhere in the site. Labels should describe what the user will find, not what the brand wants to call it.

On mobile, test the tap targets. A touch target below 44x44px is difficult for many users to activate accurately. Crowded mobile navigation is a very common and very fixable problem.

DON’T: Make visitors search for things

A contact page that requires three clicks to find is a contact page visitors will not use. A sign-up form buried in a footer is a sign-up form that will not convert. The things your visitors need most should be the easiest to reach. For everything else, a working search box is a reasonable backup — not a substitute for clear structure.

---

Content

DO: Write for scanners

People do not read web pages linearly. They scan. They look for headings that confirm relevance, then settle into the content that matches what they were looking for. Write headings that communicate the content of the section below them. Keep paragraphs short. Use bullet lists when you have genuinely list-like information.

DON’T: Stuff pages with keywords

Search engines in 2026 are sophisticated enough to penalise keyword stuffing and reward genuine helpfulness. More importantly, content that reads like an SEO exercise also reads badly to humans. Write for people. Use your keywords where they fit naturally. That is all that is required.

DO: Invest in copywriting

The words on your site do as much work as the design. Navigation labels, button copy, headings, error messages, microcopy — every word is a design decision. “Submit” is a weaker button label than “Get your free quote”. “Learn more” tells the visitor nothing; “See our course options” tells them exactly where they are going.

---

Visual Design

DO: Earn the first impression

The first thing a visitor sees is the design. They form a judgement — trustworthy or not, professional or not, worth staying for or not — within milliseconds. That judgement is not based on careful analysis of your colour theory. It is a gut response to the overall impression. Make sure the overall impression is the one you intend.

Whitespace is not empty space — it is breathing room. A design that gives content space to exist is more readable and more trustworthy than one that packs every pixel.

DON’T: Confuse decoration with design

Animations that serve no navigational or communicative purpose, transitions that slow down every interaction, gratuitous parallax effects, autoplay video with audio — these are not enhancements, they are friction. The question to ask of every visual element is: what job is this doing? If the honest answer is “none”, remove it.

---

A Final Word

Good website design in 2026 is not fundamentally different from good website design in 2010. It is still about understanding your audience, making information accessible, and earning attention through clarity and quality.

What has changed is the bar. Visitors expect sites to be fast, accessible on any device, readable in dark mode, and navigable without a mouse. These are not nice-to-haves. They are the baseline.

At TGDS, web design is taught as a discipline that sits at the intersection of graphic design, communication and technology. Understanding the principles here makes you a better designer across all of them.

Want to develop your web design skills? Explore our graphic design courses — we cover layout, typography, user experience and front-end design fundamentals.

Related reading: Focus: Graphic Design Studio Websites — what the best studio websites do. European Websites — a curated look at design-led European web work.