Web design do’s and don’ts: use clear hierarchy, fast pages, accessible UI; avoid clutter, slow assets, and vague copy.
Good pages feel effortless. The layout tells you where to look, text is easy to read on any screen, buttons react the way you expect, and nothing drags. This playbook lays out practical do’s and don’ts you can ship today. It blends interface heuristics, accessibility standards, and speed habits that lift conversions without gimmicks.
Web Design Do’s And Don’ts Checklist (At A Glance)
Skim this table, then jump to the sections that match your needs. Each line pairs a clear action with a common pitfall.
| Area | Do | Don’t |
|---|---|---|
| Navigation | Keep top-level items under 7; use clear labels | Bury pages in deep menus or use clever names |
| Layout | Build on a predictable grid with consistent spacing | Mix random paddings, margins, and misaligned blocks |
| Typography | Body 16–18px with 1.5–1.8 line height; tight heading scale | Cramped text, long line length, or low contrast |
| Color | Meet contrast ratios and stick to a small palette | Use low-contrast text or too many accent colors |
| Images & Video | Compress, lazy-load, set width/height, and use modern formats | Ship giant media files that shift layouts while loading |
| Buttons & Links | Make targets large with clear states and verb-led text | Small tap areas, vague labels, or no hover/focus feedback |
| Forms | One column, clear labels, inline help, and friendly errors | Stack fields in multiple columns with cryptic messages |
| CTAs | Place near related content; keep primary action obvious | Hide CTAs below clutter or style them like secondary links |
| Copy | Lead with value, short sentences, concrete nouns/verbs | Fluff, buzzwords, or claims without proof |
| Accessibility | Keyboard-friendly, alt text, labeled controls, and focus order | Click-only paths or images that carry meaning without text |
| Performance | Budget JS/CSS, defer non-critical assets, cache well | Block rendering with big bundles and unused libraries |
| Mobile | Thumb-reach layout, responsive type, device testing | Desktop-first tweaks that break on small screens |
| Error States | Clear copy, recovery links, and persistent context | Dead-end pages with blamey language |
Start With Structure And Visual Order
Use A Clear Grid
Pick a grid and stick to it. A 4- or 8-point system keeps spacing consistent and makes pages feel calm. Define container width, column count, and gutters. Repeat those choices across templates so sections line up when you scroll. Consistency lowers reading effort and speeds scanning.
Make Hierarchy Obvious
Readers ask two things: “Where am I?” and “What can I do next?” Answer with size, weight, and placement. Headlines should stand out but not scream. Subheads group related ideas. Lists break dense text into scannable bites. Pair each section with a single primary action so there’s no doubt about the next step.
Set Type For Reading
Pick two families at most: one for headings, one for body. Keep body size generous and line length around 45–85 characters. Use real text, not image text, and avoid fancy weights that blur at small sizes. Good typography is invisible; it lets the message carry the load.
Speed And Stability Win Trust
People bounce when pages stall or jump. Treat speed as a feature. Keep image files small, ship only the scripts you need, and split bundles so first views render fast. Define image width and height to prevent layout shifts. Measure user experience with field data and fix regressions before they pile up.
For metric targets and tuning help, see Core Web Vitals on Google’s developer site. It explains loading, interactivity, and stability metrics with practical ways to improve each one.
Practical Speed Habits
- Use modern formats (AVIF/WebP) and responsive images (srcset, sizes).
- Preload the main font; limit weights and subsets.
- Inline tiny critical CSS; defer the rest; avoid render-blocking.
- Remove dead JS, ship modules, and prefer native browser features.
- Cache static assets aggressively; set long max-age with safe versioning.
Make Every Interaction Easy
Button And Link Targets
Interactive parts need room. Targets around 44×44px help on touch screens. Place the primary action near the related content. Put destructive actions away from primary paths and add a confirm step. This reduces accidental taps and gives people more confidence.
States And Feedback
Every control needs visible states: default, hover, focus, active, disabled. Show progress for long tasks. Use toasts or inline notices for success and failure. People can forgive a slow action when the page explains what’s happening.
Forms That Don’t Fight Back
Short forms convert. Ask only for what’s needed. Use one column, top-aligned labels, and helpful placeholder or hint text. Group related fields. On errors, keep the user’s input, flag the field, and explain the fix in plain language next to it. Offer passkey or password managers and avoid strict rules that block safe long phrases.
Accessible By Default
Build for everyone. That means keyboard access, clear focus order, and text alternatives for visuals. Avoid color-only cues; pair color with icons or text so color-blind users don’t miss meaning. Form elements need labels that match their visible text, and components should announce changes to assistive tech.
For criteria and success levels, read WCAG 2.2 from W3C’s Web Accessibility Initiative. Meeting those checkpoints lifts usability for all users, not just a subset.
Keyboard And Focus
- All actions reachable without a mouse; Tab order matches reading order.
- Visible focus rings that meet contrast ratios.
- Skip links to bypass repeated nav on large pages.
Text And Contrast
- Use readable sizes and strong contrast for body and interactive text.
- Avoid long blocks in all caps; screen readers can mispronounce them.
- Provide transcripts or captions for audio and video.
Content That Guides Decisions
Lead With The Point
Start sections with the payoff. Tell readers what they’ll get, then back it up with proof, screens, or steps. Keep sentences short and verbs active. Replace general claims with specifics: numbers, time saved, or a short example that shows the change.
Clear Labels Beat Cleverness
Menu labels, tabs, and buttons work best when they say exactly what they do. “Get Pricing,” “Start Free Trial,” and “Compare Plans” beat vague language. Don’t hide answers behind tooltips if a plain phrase in the UI can carry it.
Microcopy That Helps
Anticipate questions and answer them where they arise. Explain why you ask for data, how long a step takes, or what happens next. Keep tone friendly and neutral. People don’t need jokes to finish a task—they need clarity.
Common Mistakes To Avoid
- Giant hero blocks that push value and CTAs below the fold.
- Auto-playing media with sound or motion that can’t be paused.
- Walls of text with no subheads, lists, or white space.
- Modal traps that capture focus and block the page.
- Heavy third-party scripts that slow first paint.
- Color-only feedback for errors or success.
- Inconsistent styles that change from page to page.
Design For Mobile First, Then Grow
Most traffic arrives on phones. Start with a single column, generous spacing, and tap-ready targets. Place primary actions near the natural thumb zone. Scale up to tablet and desktop without changing patterns so users don’t relearn the page at each breakpoint.
Write And Place CTAs With Care
Use one primary CTA per view. The label should start with a verb—“Buy,” “Book,” “Download,” “Contact.” Pair the button with nearby proof: a short line, a rating, or a trust mark that passes real checks. Avoid stacking multiple bright buttons with competing goals in the same spot.
Error Pages That Recover The Visit
Things break. A helpful 404 or empty state keeps people moving. Offer a short apology, a search box, top links, and a way home. Keep the header and footer so the page still feels like your site. Track these hits in analytics to fix broken paths.
Content And SEO That Don’t Fight UX
Search-friendly pages can still read smoothly. Use a single H1, logical subheads, and descriptive alt text. Name images and set meaningful titles and meta descriptions. Avoid thin, repetitive copy. Pages should answer the task early and give enough depth that a reader doesn’t need a second tab.
Launch Checklist And Targets
Use this table during QA. Numbers reference common web standards and public guidance from the sources linked earlier.
| Area | Target | Quick Check |
|---|---|---|
| Loading | Fast first render and responsive input | Field data shows steady speed on mobile |
| Stability | No content shift during load | Set image/video dimensions; avoid layout jumps |
| Images | Modern formats, responsive sizes, lazy-loaded | Check srcset, sizes, and compression |
| Fonts | 2 families; limited weights; swap fallback | Preload primary; test FOIT/FOUT behavior |
| JS & CSS | Only what’s needed above the fold | Bundle split; defer non-critical; remove dead code |
| Accessibility | Keyboard paths, labels, alt text, clear focus | Tab through the page; run screen reader smoke test |
| Forms | Inline errors and saved input on failed submits | Trigger a known error and review messages |
| Copy | Plain language and action-led CTAs | Read aloud; remove buzzwords and filler |
| Mobile | Comfortable tap targets and reach | One-hand test on a small phone |
| Analytics | Events for key actions and errors | Verify tags and consent behavior |
Design Process That Scales
Start With Content
Draft the message first. Outline the page in plain text: headline, subheads, bullets, CTA. Drop this into a wireframe and check that each block has a single job. Then style. This order keeps polish from hiding weak messaging.
Set A Component Library
Create a small set of reusable parts: headers, footers, cards, modals, alerts, buttons, inputs. Define states and spacing tokens once. Ship those pieces across pages so users learn them once and glide through new sections.
Measure, Tweak, Repeat
Watch field data, not just lab scores. Compare time on task, scroll depth, and form drop-off before and after changes. Keep a short change log that pairs a tweak with a metric so teams know what moved the needle.
Pattern Examples That Work
Hero Sections
Keep the promise sharp: one line, one CTA, one support line. Add a real image or product shot that loads fast and keeps its space. Skip sliders and auto-rotating banners.
Pricing Pages
Three or four plans, left-aligned features, and a clear “Most popular” tag if you need one. Annual vs. monthly toggles should update prices instantly without reloads. Show the CTA for each plan and a soft secondary action like “Talk to sales.”
Article Templates
Readable width, strong subheads, and real image alt text. Keep the first screen light on decoration so the hook lands right away. Place any inline table early if it helps a reader act faster, and a second one later for reference.
Micro-Level Details That Add Up
- Use real focus styles, not removed outlines.
- Keep iconography consistent; pair meaning with text labels.
- Prefer system cursors and native controls where possible.
- Avoid infinite scroll on pages where users need a footer.
- Don’t hijack scroll or back-button behavior.
How This Was Built
This piece distills long-standing usability heuristics, public guidance on real-world experience metrics, and current accessibility standards. The linked sources provide the formal references. The rest comes from repeat layout audits, speed budgets, and hands-on UI work across devices and network types.
Wrap-Up Actions You Can Take Today
- Pick a spacing scale and apply it across your templates.
- Set body text size and line height for reading, then lock line length.
- Compress images, add width/height, and lazy-load below-the-fold media.
- Audit keyboard paths, labels, and focus styles on your main flows.
- Rewrite CTAs and top nav labels with clear verbs and nouns.
- Ship a small component library with states and tokens.
- Track a handful of UX metrics over time and pair changes with outcomes.