These are layout and visual mistakes, the kind you can see in a screenshot. Process mistakes, such as skipping user testing or designing desktop first, are covered in our companion piece on UI design mistakes that quietly cost you users.
1. Unaligned elements and inconsistent spacing
A heading that starts a few pixels left of the paragraph under it. Icons sitting at slightly different heights. Cards of almost the same width. Thirty pixels of space above one section and fifty above the next. Each one is too small to notice on its own, but together they make a site feel cheap and unfinished, and visitors read that as a less careful business.
Inconsistent design usually comes from decisions made page by page: a designer or developer picks a value that looks right on the screen in front of them, and nobody checks it against the rest. The fix is to make those decisions once:
- Set a column grid (12 columns on desktop, 4 on mobile is common) and align every block to it.
- Use a spacing scale, such as 4, 8, 16, 24, 32, 48 and 64 pixels, and nothing in between.
- Limit type to a few sizes and weights, defined as styles in Figma and as CSS variables in code.
- Turn on layout guides before every review, in Figma and in the browser's developer tools.
2. Tap targets that are too small
A text link in a footer, a close icon on a pop-up, two buttons placed side by side with no gap. On a phone, small targets get mis-tapped, and users experience a mis-tap as the site being broken. It is one of the most common reasons people abandon a form or a menu on mobile.
The guidelines are clear. Apple recommends hit targets of at least 44 by 44 points, Google's Material Design recommends 48 by 48 dp, and WCAG 2.2 sets 24 by 24 CSS pixels as the minimum at Level AA, with spacing allowed to make up the difference. Aim for the Apple or Google size on anything people tap often.
The fix is to enlarge the tappable area, not the text. A small link or icon can sit inside a larger invisible box using padding, so the design looks the same and the target becomes easy to hit. Leave at least 8 pixels between neighbouring targets.
3. No clear button hierarchy
Every button the same solid colour, so "Buy now", "Learn more" and "Cancel" all shout at the same volume. Visitors cannot tell which action matters, so they hesitate, or pick the wrong one.
Fix it with three styles and clear rules for each:
| Style | Looks like | Use for |
|---|---|---|
| Primary | Solid fill in the brand accent colour | The one main action on the screen: Get a quote, Add to cart |
| Secondary | Outline or light fill | Alternatives: View pricing, Download brochure |
| Tertiary | Text only, sometimes with an arrow | Minor actions: Cancel, Skip, Read more |
A screen should rarely have more than one primary button. Label buttons with what happens next ("Get my quote") rather than a generic "Submit", and keep destructive actions such as Delete visually distinct from the primary style.
4. Generic stock photos
The handshake, the laptop on a white desk, the smiling woman in a headset. Visitors recognise these instantly, and they make a page feel like a template. They also say nothing about what you actually do.
Real photos of your team, your office, your products and your finished work do more, even when they are not perfect. Product screenshots and well-made illustration are good alternatives. Our company page uses photos of the actual team for this reason. If you must use stock, choose specific images that match the content (a construction site for a construction firm), crop them deliberately, and avoid the first page of results everyone else uses.
5. Copying design trends without testing them
Glassmorphism, neumorphism, giant custom cursors, scroll-jacking, full-screen background video. Trends look great in a portfolio shot and often cost usability on a real site. Neumorphic buttons tend to have poor contrast, scroll effects fight the way people expect a page to move, and heavy video slows a page down on mobile data.
Adopt a trend only when it solves a problem for your users, and test it on a mid-range Android phone over mobile data before it ships. If the page still works with the effect turned off, keep it; if the effect is the only thing holding the design together, drop it. Our look at web design trends worth following sorts the durable ideas from the disposable ones.
How to check your own site for these mistakes
You can run this audit in under an hour with a phone, a laptop and your browser's developer tools.
| Mistake | How to check | Target |
|---|---|---|
| Alignment and spacing | Overlay a grid with a browser extension or in Figma; inspect margins on a few sections | Every block on the grid, spacing from one scale |
| Tap targets | Inspect buttons and links in the browser's mobile view | 44 to 48 pixels for frequent targets, never under 24 |
| Button hierarchy | Count solid-filled buttons on each key screen | One primary per screen |
| Stock photos | Run a reverse image search on your hero image | No obvious stock matches on key pages |
| Trends | Load the site on a mid-range Android over mobile data | Readable, fast and usable without the effects |
Smaller layout fixes worth making
Once the big five are fixed, these small changes make a noticeable difference:
- Line length: keep body text to roughly 45 to 75 characters per line. Very wide paragraphs on desktop are tiring to read.
- Back-to-top button: worth adding on long pages such as guides and product listings, placed bottom-right, small and out of the way of other controls. On short pages it is clutter.
- Sticky headers: keep them short on mobile, or hide them on scroll down and show them on scroll up, so they do not eat a third of the screen.
- Form labels: keep a visible label above each field rather than relying on placeholder text that disappears when the user starts typing.
Sources
- Apple Human Interface Guidelines: Accessibility, minimum 44 x 44 pt hit target (developer.apple.com)
- Material Design: Accessibility, touch targets of at least 48 x 48 dp (m3.material.io)
- W3C: WCAG 2.2, success criterion 2.5.8 Target Size (Minimum), 24 x 24 CSS pixels at Level AA (w3.org)
- Robert Bringhurst, The Elements of Typographic Style: 45 to 75 characters as a comfortable line length
Common questions
- What is the minimum tap target size?
- Apple recommends at least 44 by 44 points and Google's Material Design 48 by 48 dp. WCAG 2.2 sets 24 by 24 CSS pixels as the minimum at Level AA. Use the larger sizes for buttons and links people tap often.
- Are stock photos always bad for a website?
- Not always, but generic ones are. A specific, well-chosen image that matches the content can work. A cliched business scene tells visitors the company has nothing real to show.
- How many button styles should a website have?
- Three is enough: primary, secondary and text-only. Fewer styles make the main action obvious and keep the interface easier to maintain.
- How do I fix inconsistent design across a website?
- Write the rules down once: a grid, a spacing scale, a few type sizes and three button styles. Then audit each page against them and fix the exceptions. Inconsistency nearly always comes from decisions made page by page instead of once.
- Should a website have a back-to-top button?
- On long pages, such as guides, documentation and product listings, yes: it saves a lot of scrolling on mobile. Keep it small, in the bottom-right corner, and make sure it does not cover other buttons. Short pages do not need one.
- What is the most common UI design mistake?
- In our reviews it is inconsistency: spacing, alignment and button styles that change from section to section. It is also one of the cheapest to fix once a grid and a spacing scale are agreed.
