An exploration of 42 of the most common website design mistakes you’re likely to come across on the internet, including comments on typography, layout, images, usability, and more.
42 common website design mistakes
We’re often asked to audit websites for performance, conversion, and design issues. This article highlights some of the most frequent design mistakes we come across. There are likely dozens more problems that we missed, and you may quibble with our choices.
Some issues are more important than others, and some may not seem terribly significant at all. But if you’re building a new website — or re-designing an old one — all are worth examining. They’re presented here in no particular order.
Important: I should mention that this article definitely falls under the “do as I say, not as I do” category. This website is loaded with design flaws. I’m working on it.
Try to avoid these widespread design blunders:
01. Lack of a clear hierarchy
If you visit a website and can’t find what you’re looking for — or figure out how it’s organized — you’re not likely to stay long. And you probably won’t come back. A clear hierarchy of topics and navigation items helps visitors locate and read your content, and understand the purpose of your website.
This principle applies not only to your website as a whole, but to each page as well. Visitors need to be able to tell at a glance what each page is about, and how they’re all related. Consider adding a user-friendly visitor index or site map to your website. Google will appreciate it too.
02. Poor primary navigation structure
Primary navigation is the principal internal link interface on your website. It links to your most important web pages and typically appears prominently at the top of all pages. Vague, overly cute, incomplete, or nonsensical primary navigation elements can bring website exploration to a halt.
Examples of acceptable primary navigation links:
- About
- Services
- Contact
- News
- Support
- Work
These are not acceptable:
- My Journey
- Getting Real
- Experience Me
- Believing
- Up Level
- Happy Places
- Secret Sauce
- Learnings
Don’t be too clever. People won’t use your website if they can’t find their way around it or they have to guess what every link means.
03. Overwhelming sub-navigation
Often referred to as “mega menus,” these are the oversized dropdown panels that can appear under primary navigation links on some websites. I have no idea why some designers (or clients) insist on including dozens of pages in these menus.
Crowded sub-navigation menus are a pain to design, revise, and scale for effective use on mobile devices. Also, if not implemented correctly, they can be an accessibility issue for people with visual impairments. If you find yourself trying to cram too much into your menus, you could have a fundamental site architecture problem.
04. The logo that ate Rhode Island
“Looks great, but can you make the logo bigger?”
— Most clients
In all of designdom, no question annoys a graphic artist more. There are entire websites dedicated to belittling clients who request that their logo be made “bigger.”
Too-big logos are nasty, but even worse are poorly-conceived logos that are so cluttered that they’ll never scale to mobile-friendly sizes. I suspect the blame for this can be split in two: Half to the client for wanting to cram too much into an itty-bitty space, and half to the designer for not pushing back.
Clients: You really need to get past this whole logo thing. Nobody cares. Your website isn’t about you. It’s about helping your customers.
Designers: Get over it. It’s not worth arguing over. Make the damn logo bigger (then make it smaller a few weeks later). In the meantime, sharpen your logo design skills.
05. Obnoxious colors
In web design there’s a color principle called the 60-30-10 Rule. In short, this rule suggests using only three colors in a way that creates a balanced, visually appealing color scheme.
This principle is based on the idea that one color should dominate (60%), a second color should support (30%), and a third color should be used as an accent (10%).
The idea behind this rule is that using too many colors on a web page is distracting and leads to confusion over which elements are most important. This sounds simple enough, but in practice you’ll probably need a lot more than three colors — Especially shades of your primary colors and a collection of grays.
A proper discussion of color theory is way beyond the scope of this article. Just keep in mind that there are no hard and fast rules when it comes to creating harmonious color schemes. Also, it’s always a good idea to explore different combinations with the help of a color palette generator.
Color palette generator: Coolors
Design vs Development
Some of what we claim to be “design” mistakes may seem better categorized as “development” or engineering issues. Depending on your work philososphy and environment, that may be true.
Although they’re typically distinct disciplines, design and development frequently overlap. In fact, our preferred website building process demands that design and development — and content — work together to create the most effective online presence.
06. Dinky text
If folks can’t read your content, they won’t understand your purpose or your value proposition, and they’ll leave your website. There are few things worse than tiny unreadable text. Depending on the font you’re using, your body text should be at least 18 pixels in size.
07. Low contrast text
Light gray text on a white background (or red on black) may look elegant to you, but for someone searching for a solution to a problem it’s a major annoyance. It’s also a pain for the millions of people in the world with visual impairments.
Learn more: WebAIM Contrast Checker
08. Too many fonts
Unless you’re a professional typographer — I’m not, and you’re probably not either — your website design should stick with 2–3 fonts at the most. More than that, and your content can become distracting or unreadable.
Try to choose a couple fonts that work well together and then add one special (display) font for limited use in places like headlines. There are dozens of fun “font pairing” websites that can help you choose suitable complementary fonts. We’ve included one below.
Learn more: Google Font Pairings
09. Too many text styles
The use of text styles like italic, bold, uppercase, or color is fine for occasional emphasis, but in large doses it gets really distracting — and can make your content difficult to read.
Also, keep in mind that visitors with visual impairments may be using a screen reader to access your content. If so, styles like bold and italic have specific semantic meanings which may cause confusion if overused.
10. Using all capital letters
It’s hard to read text that’s all caps if it’s more than just a few words. While uppercase text can help visitors scan your website by highlighting headlines and titles, it should be used sparingly. If a headline is going to be more than 5–7 words long, consider making it lowercase.
11. Lousy web accessibility
Over a billion people in the world (15%) experience some form of disability. A disability is defined as any condition of the body or the mind that makes it difficult to perform certain activities.
In the context of the internet, accessibility means that websites and digital tools should be designed and developed in a way that people with disabilities can use them without any hindrance.
Accessibility compliance is a complicated topic — Guidelines and requirements are still being debated by government agencies. But still, there’s plenty a designer can do to make a website easier to use and understand.
Learn more: Web Content Accessibility Guidelines
12. Disregard for common design standards
Your visitors expect your website to follow a few common design conventions. This includes stuff like logo position, navigation, scroll direction, cursor behavior, link affordance, and more.
Think about it — If we didn’t assume some standard design and behavior characteristics, we’d have to relearn web browsing every time we got online.
Some common design conventions:
Time out: To clarify, we’re not suggesting that every website you build should be identical — but they do need to be useful and usable (there’s a difference). Just try to include as many accepted design norms as possible. And try not to move the brake pedal or light switches.
Font vs Typeface
Under most circumstances, the terms “font” and “typeface” are interchangeable. Use either one and people will get what you’re talking about. To get technical, a typeface is a design of letters, numbers, and symbols that make up a set of one or more fonts. A font is a specific size, weight, and style of a typeface.
13. Too many paragraphs
It’s real trendy these days to make every sentence a paragraph — Especially in email and digital ads. I think this is related to the idea that people “skim” web pages instead of actually reading them.
Supposedly, the extra white space (see below) above and below paragraphs helps with comprehension. I get that, but not all sentences should be paragraphs. The purpose of a paragraph is to contain a discrete theme, not create excess white space.
14. Not enough white space
White space (sometimes called “negative space”) is the empty space around and between elements on a web page. It helps give pages a clean and uncluttered look, making it easier for users to find, read, and understand your content.
We should point out that this concept can be abused, resulting in tiny islands of text and detached images floating in a vast sea of nothing. Too much white space should be avoided as well, and usually indicates that the designer was either an amateur, or in a big hurry.
15. Disconnected headlines
Proximity is one of the most powerful design fundamentals. Grouping elements that are closely related creates a sense of unity and organization.
If the margins above and below a headline are identical, it’s hard to tell what block of text your headline belongs to (and it’s always the block of text below it).
To improve proximity, try providing some visual separation above a headline, or reducing the margin below it. This will make your content more easily scannable and increase comprehension.
16. Line length too wide
This is related to white space and is one of the most common — and easily fixed — design mistakes you’ll see on websites. Even professionals who should know better continue to violate this principle.
Reading long lines of text causes fatigue. The reader must move his head at the end of each line and search for the beginning of the next line. If the line is too short it breaks up words and phrases that are generally read as a unit.
A line length of 45–75 characters (including spaces and punctuation) is generally regarded as optimal. Sometimes you can reliably broaden that range to 45–85 characters per line, but do so with caution.
Learn more: Balancing Line Length and Font Size
17. Sloppy grammar
We all struggle with grammar occasionally (more than occasionally for some of us). Most people will forgive a few mistakes, but when it becomes a habit, it can erode a visitor’s confidence in your credibility and authority. Even worse, it can cost you leads and sales.
Is this really a “design” issue? Yeah it is. As a designer it’s your responsibility to make sure that all content you add to a website is up to snuff. Maybe not regarding content accuracy, but you should always be checking the spelling and grammar for errors.
Note: I tend to use the term “grammar” loosely. I’m not suggesting that you change your writing style or pattern to fit some perfect definition of good grammar. In fact, developing your own writing style will become even more valuable when AI-driven writing tools (such as OpenAI’s ChatGPT) become more prevalent.
18. Poor kerning, tracking, and leading
Kerning, tracking, and leading all refer to the distance between typographical elements:
If any of these typographic elements is extreme — too much or too little — they can make your text unreadable and impossible to understand. Some designers actually use these spacing techniques as design elements themselves in headlines and such. Be careful if you attempt this; headlines need to be understood too.
What is a website audit?
A website audit is a process of evaluating and analyzing a website’s performance, functionality, and structure. It typically involves reviewing various aspects of the site, including design, content, navigation, security, and technical configuration. The ultimate purpose of an audit is to identify any problems that may be affecting user experience or search engine ranking.
Learn more: Website usability review
19. Center-aligned text
Left-aligned text is easier to read than centered text. This is because when you center your text, the starting place of each line changes. This forces your website visitors to work harder to find where each line begins to continue reading.
Without a straight left edge, there is no consistent place where readers can move their eyes to when they complete each line. Please, no center-aligned text unless absolutely necessary.
20. Justified text
Justified text is spaced so the left and right sides of the text block both have clean edges. The usual alternative to justified text is left-aligned text, which has a straight left edge and an uneven right edge. Compared to left-aligned text, justification can give text a cleaner, more formal look.
However, those “jagged” text block edges that justification eliminates actually make the text easier to read. Besides the obvious reason that big gaps between words interrupt the reading flow, it’s easier for readers to find the next line if the lines are of uneven length. Use justification sparingly. When applied to shorter line lengths on web pages it often looks messy.
21. Not mobile responsive
Your website should be as usable on a smartphone as it is on a desktop computer. A mobile responsive website adjusts its layout and content to fit the screen size of the device it is being viewed on, providing a better user experience. This technology has been around for over 10 years, and should be a standard feature of any new website.
22. Slow loading times
Your visitors are less likely to stay on your website if it takes too long to load. You may need to optimize the size and number of images and other media on your website — as well as the code — to reduce loading times.
Check your website: Google PageSpeed Insights
If your site racks up scores in the 40s or 50s on mobile, you’ve got a problem that needs fixing. Page load speed is all about perception — If it seems slow, it is slow.
23. Cluttered user interface
Clients often get overly enthusiastic about all the different stuff they want to include on their website. And designers — wanting to please them — forget to make clarity a priority.
The result? A cluttered user interface (UI) with too many elements, which leads to confused and overwhelmed customers. And a confused mind always says “no.”
A well-designed website lets users navigate intuitively and quickly, without having to think too much. To create a clear and simple browsing experience try to avoid an overload of tables, images, buttons, and video elements competing for attention.
24. Missing trust indicators
When users arrive on your website, they need to feel confident that you are who you say you are and that your business is trustworthy. It’s especially important for new businesses to establish credibility in their industry.
If users don’t trust your website, they’ll be reluctant to interact and are more likely to leave. That means fewer leads, higher bounce rates, less traffic, poor SEO rankings, and lower conversion rates.
To create a trustworthy website, avoid the following red flags:
Learn more: Google quality rater guidelines (EEAT)
Steve Jobs
“Design is a really loaded word. I don’t know what it means. So we don’t talk a lot about design around here, we just talk about how things work. Most people think it’s about how they look, but it’s about how they work.”
25. Hidden contact information
You shouldn’t have to search through a website to find contact information. It should be obvious and easy to find. Preferably, you should have a link to your Contact page in the primary navigation of every page.
Contact information should include:
- Official business name
- Address
- Phone
- Contact form
- Business hours
- Location map
26. Intrusive pop-ups and ads
Nothing’s more irritating than unpredictable sign-up boxes and ads that pop up into your face. Or persistent chat boxes, or Google review banners that can’t be dismissed. Or, everyone’s favorite, the mostly-unneeded cookie notice.
We understand that sometimes this stuff might be necessary (or demanded by the client), but try to use them sparingly and in a way that doesn’t ruin the user experience. Keep in mind that Google may impose a ranking penalty if you abuse pop-up techniques on mobile devices.
27. Lack of a clear call-to-action
A call-to-action (CTA) is a button or link that prompts your website visitors to take a specific action, such as:
- Get more information
- Sign up for a newsletter
- Use a contact form
- Schedule an appointment
- Make a purchase
Without a clear CTA, potential customers may not know what to do next on your website.
28. Too many buttons
Another recent trend (thanks again Donald Miller) is stuffing too many call-to-action buttons on web pages. We think CTA buttons are necessary (see above), but not so critical that you need to include them after every sentence.
It’s not uncommon to see websites with 5–10 CTA buttons on one short page. There’s no need to treat your site visitors like they’re 6-year-olds. If your CTA buttons are properly designed and positioned — and if you have a decent offer — your users will find them.
29. Bloated footers
I don’t dislike all big footers, in fact I have a great fondness for well-designed ones. What I object to are the lengthy lists of page links that accumulate down there — Links that are better suited to a secondary navigation menu or separate visitor site map.
The trend in massive footers seems to coincide with the explosion of the StoryBrand marketing method, codified in a bestselling book by Donald Miller in 2017. In his books and videos, Mr. Miller instructs his disciples to move everything except the CTA buttons (Mr. Miller calls these “cash registers”) to the footer (he calls this the “junk drawer”).
“Many websites feature too many navigational options at the top of the page. Instead, relocate these options to the bottom of the website in what I fondly call ‘The Junk Drawer.’ It might include links to Contact, FAQ, About, Employment options, etc. Those areas are easy to find for those who are looking, but they don’t clutter up the top section and confuse potential customers.”
— Donald Miller
Yeah, Heaven forbid, you wouldn’t want to clog up your main navigation with links to your About or Contact pages. Let’s move them to the footer so it’s harder for folks to find them.
Well, Mr. Miller’s junk drawer is now just that. It’s filled with junk; logos, mission statements, search boxes, subscription forms, contact information, and — if you’re a home service business — dozens of city locations within your service area.
Seriously? Google is already punishing sites with all this redundant crap at the bottom of every page by simply not indexing pages. You’d think that designers would get a clue, but I’ve seen no signs of that yet.
30. Overuse of categories and tags
Due to the growing popularity of content management systems, a lot of websites use categories and tags (taxonomies) to create logical collections of information. Users can simply click on a category or tag label to see the related posts. Sounds helpful.
Unfortunately, some designers (and clients) go overboard and apply way too many labels to each post. This often creates topic overlap and makes it almost impossible to find relevant and related material.
Try to follow these taxonomy best practices:
- Design your taxonomies to help visitors, not SEO.
- Establish 3–5 main categories.
- Categories should be capitalized, tags should be lowercase.
- Never use the same name for a category and a tag.
- Use only one category per post.
- Use only 3–5 tags per post (and never more than 10).
- Use consistent naming.
- When in doubt about creating a new tag, don’t.
- Document your internal process for creating categories and tags.
What about links?
What about them? Do you mean underlines versus no underlines? Hover states and focus boxes? The link styling debate has been beaten to death. The web is loaded with advice (both good and bad) on how to format and style hyperlinks. Aside from that, my recommendation would be to follow the WCAG guidelines on accessible links.
Learn more: Link contrast checker
31. Missing favicon
If you don’t know what a favicon is, you aren’t alone. It’s that dinky symbol that appears in a browser tab to identify the website you’re visiting. If it’s missing, you’ll get a generic browser icon.
Your favicon should be a simple piece of your brand design (logo or logo device) with good contrast. Favicons are typically PNG images that are 16×16 pixels square.
Create a favicon: Favicon Generator
32. Crummy images
Big beautiful images can make or break a website. It’s almost cheating. But if they’re too big your site will slow to a crawl. And if you “borrowed” the images from someplace else, you could wind up in hot water. Just make sure that you properly optimize your legally-obtained images and you’ll be fine.
Important: When using stock photos you have to be careful not to use the same stuff that everyone else in your industry has on their site. Instead of using the first image you like, always dig a little deeper and find something that truly enhances your brand.
33. Unhelpful error page
Nothing screams “amateur designer” louder than a standard 404 (file not found) error page. At the very least, this page should clarify why you’re looking at it, and have a link to your home page.
A generic 404 page isn’t the worst thing in the world, but it can be a lot more helpful if it’s strategically designed. The better error pages have a search box; some even include a site map.
Example (copy and paste): ernberck.com/error
34. Unfriendly forms
Interactive forms are the lifeblood of the internet. As the first type of website user interactivity, they provide the backbone of all social media, transactions, ecommerce, comments, and structured communication. Your website probably has at least one — A contact form.
Unfortunately, as evidenced by all the ugly forms out there, they can be a nightmare to style properly. But a nicely formatted and styled form can reduce friction, increase engagement, and generate more leads and sales.
Friendly form: Ern Berck contact form
35. Horizontal scrolling
As its name suggests, horizontal scrolling is a web page scrolling behavior that occurs horizontally (side to side), rather than vertically (up and down). It’s sometimes used on websites that have a lot of content that is wider than the viewable area of the browser window.
More frequently though, designers use it as a purely visual effect in an attempt to create an immersive experience for the user. It can sometimes be effective when used in combination with other design elements, such as parallax scrolling or full-screen images.
However, there are a few nasty drawbacks to using horizontal scrolling:
- It can be unclear how to use, leading to a poor user experience.
- It can be a challenge to use on mobile devices.
- It’s often confusing for people with visual impairments.
- If the content is not organized in a logical way, it can be difficult to make sense of.
Use horizontal scrolling sparingly and only when it’s necessary to achieve a specific goal. In most cases, it’s best to stick with vertical scrolling — It’s more natural and easier for users to understand.
36. Endless web pages
I’m not referring to “infinite” or “continuous” scrolling pages — although those are also annoying — I’m referring to single pages that seem to go on forever. Before you jump on the mega-page bandwagon, consider the following disadvantages to extremely long web pages:
You should always consider the length of a web page and ensure that it’s appropriate for the content being presented. It may be necessary to break up long pages into a bunch of shorter ones in order to improve the user experience.
Dude: Isn’t this web page too long? Yeah, it probably is. It’s got roughly 4,900 words — that’s pretty hefty. It’s well-organized which takes some of the sting out of it (or not). But in any case, this page is a perfect example of how page length can get away from you, especially when you’re making any kind of detailed list.
Design sells
According to modern research, we justify our emotional signals to buy with logical reasons. However, when most of us seek to persuade, we sell almost exclusively to the rational, conscious mind.
When done properly, typography, layout, color, and space can generate a lot of emotion. That’s something to think about when you’re doing your next sales presentation. Or re-designing your website.
Learn more: The power of emotion
37. Annoying sliders
Sliders (also called carousels) are marching blocks of text or pictures that automatically move across your screen so quickly or unpredictably that you couldn’t possibly read or engage with them. This is especially true on mobile devices where screens are small and patience is short.
They’re commonly used for testimonials, products, locations, and pictures of anonymous people shaking hands. They only exist because clients like them and designers refuse to say “no.” Sliders can be real annoying and don’t convert well, so please try to resist the temptation.
38. Poorly implemented video backgrounds
Video backgrounds are large — sometimes full-screen — videos that sit behind other elements on a web page. Typically, video backgrounds are used on home pages in place of image banners, and act as the first visual a user encounters on a website.
Background videos rarely contain relevant content and they end up serving as more of a distraction than anything else. They can also present serious accessibility issues for people who use assistive browser technologies, and can be a nightmare to scale effectively on mobile devices.
39. Pointless animations
Web animation typically refers to the use of keyframes, tweening, morphing, and Lottie files to create motion and other visual effects on websites. If you’re not familiar with some of these terms don’t fret, most aren’t worth knowing.
Used sparingly and strategically, animations can be an effective way to capture a visitor’s attention and direct them to take specific actions. Used poorly — or too often — they can turn your site into a distracting mess.
40. Cursor hijacking
Cursor hijacking (also called cursor trapping) is a technique used to change, restrict, or “enhance” the behavior of your mouse cursor. This can be done through the use of JavaScript or other web technologies.
It’s generally considered to be poor design practice to use cursor hijacking in a way that is deceptive or that negatively impacts the user experience. Please don’t do this.
41. Scroll hijacking
Scroll hijacking (or scrolljacking) is a technique used to take control of the normal scrolling behavior of a website, and make it do something unexpected. Like cursor hijacking (see above), this can be accomplished through the use of JavaScript or other web technologies.
A few examples of scroll hijacking:
- Making the site scroll at a different speed than usual
- Triggering animations on scroll
- Forcing horizontal scrolling
- Moving to another page in a one-page website
- Initiate parallax effects
Website visitors get seriously annoyed whenever you change the default behavior patterns of common functions or tools. Again, please don’t do this.
42. Cheap and lazy
This is the biggest design mistake of all. Good design, like any other professional service can be expensive. And you tend to get what you pay for. But you don’t need to pay a small fortune to get good design. You can do it yourself — But you need to work at it.
You can be cheap or lazy, not both.
Postscript
Does good design really matter? A lot of digital marketers, web developers, and ad agencies — all of whom should know better — think it doesn’t. They claim that clients only care about leads and sales, and that customers don’t care about anything but price.
I disagree. I think that to the majority of people, design means a lot — Even if they don’t realize it. Remember, design isn’t just about how something looks, it’s about how it works.
