50 Bad Web Design Examples: Bad Website Design 2022
Below are 50 bad web design examples of bad websites you want to make sure your website design is not copying!
With all the easy-to-use web design tools out today, anyone can make a website.
This is great for spreading information and connecting with others, but not so great when it results in a bad website user experience.
My name is Alyaman and I’m a professional web designer with 10+years of experience.
Want to learn exactly what bad websites look like so you can steer clear? Check out my list of 50 bad web design examples:
50 Bad Web Design Examples:
The Worst Website Nominees:
Arngren
This web page checks a ton of the boxes for bad website design.
Arngren is a bad website. It’ss outdated, confusing, and cluttered.
The mobile site looks just as bad.
It’s a monster I want to run away from 😨🏃♂️
- ✔ Bad Navigation
- ✔ Outdated
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Bad Colors
- ✔ No White Space
- ✔ Confusing
- ✔ Bad Visuals
URL:https://arngren.net/
Yale University School of Art
One of many bad websites on this list.
Just an awful experience as a user, with horrible typography that hurts to read and looks abysmal.
The poor design is obviously done by purpose and at this point, it looks like it was the right move as the school is notorious for this site.
- ✔ Bad Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Bad Visuals
- ✔ Un-clickable Buttons
URL:www.art.yale.edu
Penny Juice
A cruel bad website design to pick on and honestly I don’t see why it’s so popularly used as an example of bad web design because it’s nowhere near as bad as the first two.
But then again that may be why it’s a perfect example to be at the top of the list as it is closer to something people may actually end up creating on their own.
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Bad Visuals
URL:pennyjuice.com
Suzanne Collins Books (Redesigned)
This bad website design is another more realistic example of mistakes that a lot more people might have on their own sites.
But to have looked like this during 2019 as a website for an author with books that have been turned into a movie series this site definitely classifies as bad web design.
- ✔ Bad Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ No White Space
- ✔ Confusing
- ✔ Bad Visuals
- ✔ Un-clickable Buttons
- ✔ Broken Links
URL:suzannecollinsbooks.com
Blinkee
Blinkee.com is really not that bad of a site compared to the other bad websites we’ve seen so far.
But the tacky visuals with all the colors do make it a sad *sight* to see.
(I hope you can appreciate that pun.)
- ✔ Slow Website Speed
- ✔ Bad Fonts/Typography
- ✔ Bad Visuals
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Confusing
URL:blinkee.com
Ling’s Cars
Oh my lord! 😵 Visiting this bad website is a roller coaster with animations, colors, cars, and confusion.
It’s actually so bad you can’t tell if it’s a real web page or not but then you scroll and it looks more legitimate.
I will say that the one GIF of Ling on the motorcycle is actually pretty cool 🏍 well done there but in terms of website design it’s definitely confusing!
You can’t have 80% of the first screen of the home page be you on a motorcycle when you’re called lingscars.com with cars being only 5 % of it.
- ✔ Bad Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ No White Space
- ✔ Confusing
- ✔ Bad Visuals
URL:lingscars.com
Gatesnfences
Not as outlandish as the last one but gatesnfences.com definitely suffers from being a bad website. This is one of the more realistic website designs here.
Everything is hard to read with low color contrast between tiny text and backgrounds on it’s web pages, especially on the mobile site.
- ✔ Bad Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ No White Space
- ✔ Confusing
URL:gatesnfences.com
Craigslist
A bad website design that has stood the test of time in terms of traffic.
The website design is closer to being minimal rather than outdated but I’ve been around when a lot more sites looked like this because of design limitations not choice.
But the simplicity doesn’t excuse it’s other mistakes like the fact that you have no idea what the website is for when you look at the homepage.
- ✔ Outdated
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Confusing
- ✔ Bad Visuals
URL:craigslist.com
Pacific Northwest X-Ray Inc
- ✔ No Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
- ✔ Un-clickable Buttons
URL:pnwx.com
The World’s Worst Websitе
Read that line again ^ enough said. All jokes aside this can absolutely take the title of worst website in the world.
They made a bad website design but failed to make this web page slow to load.
Talk about crazy website designs 🤪
- ✔ Bad Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
- ✔ Un-clickable Buttons
URL:theworldsworstwebsiteever.com
Toronto Cupcakes
With this site we’re back to reality, showing us how even when you try to keep a site simple you can still make it a bad website.
This site is suffering from many small things rather than obvious big mistakes.
The full-width layout, the low quality and repeated images, small black font on pink backgrounds, off-center text, different text alignments, and the tiny burger menu.
On their own some of these are not even bad web design practices.
But the particular combination of all of them here does make this a bad website.
- ✔ Navigation is Bad
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
- ✔ Un-clickable Buttons
URL:torontocupcakes.com
Patimex
I don’t need to speak Polish to see this is a terrible website design. But to be fair, I translated this page to review it.
Similar to the last one it’s simple but actually too simple, it’s empty and barren of any obvious information as to what it’s for.
So just another one of the bad websites on this list.
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ No Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Lacking Visuals
URL:patimex.com
007 Museum
Right at the top of the site is a video with no context about what it is.
Underneath is a nice graphic but the text underneath is jarring both with the size and red color.
The lack of headings causes confusion as to what each section of the site is about as you scroll.
- ✔ Navigation is Bad
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Spacing Issues
- ✔ Confusing
URL:007museum.com
Berkshire Hathaway
Considering the fact that this is a holding company that owns companies like GEICO and Dairy Queen it is crazy how this site has remained in this horrible state.
One of the biggest problems with this site, besides the tiny font, is that you can’t navigate back to the homepage whenever you click a link.
- ✔ No Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ No Mobile Responsiveness
- ✔ Confusing
- ✔ No Visuals
URL:berkshirehathaway.com
Tag Team Signs (Redesigned)
Honestly other than not being mobile responsive I don’t see much wrong with this website(even before its redesign).
I’m actually confused about why the other top bad web design examples lists on Google include it.
- ✔ No Mobile Responsive Design
URL:tagteamsigns.com
Great Dreams
Really just an ugly website. The purple background just makes it hard to use in any way.
Combine the background with the different colors and shadows on the fonts and you have a horrible user experience. Especially the blue font on the purple. No Contrast 😭
This site really shows other bad websites how to get worse.
- ✔ No Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Bad Visuals
URL:greatdreams.com
Industrial Painter
Small blue fonts on a black background hurt your eyes on this website.
Too many neon blue borders and the outdated design on this website are some of it’s other big flaws.
The navigation on the sidebar and loading time for the website are both too long.
- ✔ Poor Navigation
- ✔ Outdated
- ✔ Small Fonts
- ✔ Slow Website Speed
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Small Visuals
URL:industrialpainter.com
University of Advancing Technology (Redesigned)
So I had to look this up on waybackarchive.org to see the original design and HOLY that site speed was SLOW. I couldn’t even get it to ever fully load with all the images and animation going on.
Visuals are not the main issue here, it is more about the awful site speed and the lack of mobile responsiveness. But when page speed gets so slow no other web design problems even matter so make sure your site isn’t like this one was.
- ✔ Slow Website Speed
- ✔ No Mobile Responsive Design
URL:uat.edu
irishwrecksonline.net
Considering how old this website is I can appreciate the attempts at web design here. Especially how the buttons say PRESS for the table 😥
Having those water backgrounds on the table probably seemed like a good idea but the blue font on blue water never was nor will it ever be easy to read.
In general, this website just has an outdated design with too many colors, textures, and fonts going on.
- ✔ Confusing Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ No Mobile Responsive Design
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Bad Visuals
- ✔ Buttons That Say PRESS
URL:irishwrecksonline.net
Hacker News
This news website a list with a menu bar at the top. You can’t get much more minimal.
Unfortunately, this website is minimal to the point where I had no idea what the site was about.
- ✔ Navigation is Poor
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ Spacing Issues
- ✔ Confusing
- ✔ No Visuals
URL:news.ycombinator.com
Serene Naturist
Oh yeah, baby! Animations are all over the place. Butterflies, gradients, lights, flowers, and birds, this site has them all.
You’ll want to be prepared for the visual journey in bad website design before you visit this site.
Blue fonts on blue backgrounds in addition to yellow and white flashing borders make this site a disaster.
A leader among bad websites and insane website designs 😅
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ No Mobile Responsive Design
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
URL:serene-naturist.com
Electrifying Times (Redesigned)
Shady. This site is blocked by adblockers and has a popup just to enter.
And what lies behind the entrance is definitely not worth it. Outdated and busy with too many ugly colors and images that look like ads.
I was only able to find a picture of this website on other lists of bad websites.
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Bad Visuals
URL:electrifyingtimes.com
The Big Ugly Website
As you can tell by the name, this site is BIG and UGLY. This website was made for the bad website design list so we had to include it.
Right off the bat, you can see images that are no longer available and harsh contrast with the colors of fonts and highlights.
- ✔ No Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Bad Visuals
URL:thebiguglywebsite.com
3D Mailbox (Redesigned)
Here we can get nitpicky because this site is a great example of a good design with a few mistakes that make it bad web design.
The huge LAX level 2 text for example draws the most attention while the button for the site’s product is off to the right being outshined. This is especially confusing as that makes it seem like the site is about airports, not email.
Other than that to be honest, the font & typography being too small and close together, is the only other objective issue I can see.
- ✔ Outdated
- ✔ Bad Font Spacing
- ✔ No Mobile Responsive Design
- ✔ Confusing
URL:3dmailbox.com
Headhunter Hairstyling (Redesigned)
Honestly, the only bad web design here is the slow loading speed which is presumably caused by the full-screen video.
Congrats on the clean fast redesign. You’re almost a good web design example!
- ✔ Slow Website Speed
- ✔ No Mobile Responsive Design
URL:headhunterhairstyling.com
CyberDsignClan
Wow 😨 The rainbow colors, repeating background, and crazy fonts (shout out to WordArt) really let you know the design was intentional but that doesn’t make it any less bad.
My eyes hurt enough that I didn’t even scroll down, definitely don’t make your site like this one.
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Bad Visuals
URL:www.cyberdsignclan.com
MGBD Parts & Services
Horrible bold fonts and harsh contrasting backgrounds are a staple of this website.
Bad web design here makes the site illegible and straining for anyone to use.
Low-quality images and a horrible navigation bar don’t help make the site any better.
- ✔ Poor Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
URL:roverp6parts.com
Lipton
S…..L…..O…….W
This site took more than a few seconds to load. It’s also poorly designed for mobile where it’s even slower.
This is proof of how even one of the biggest companies in the world can still suffer from bad website design despite having spent tons of money in branding by simply failing at speed.
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Mobile Design
- ✔ Blurry Visuals
URL:lipton.com
Internet Archaeology
One super blurry bad quality gif image combined with tiny fonts and broken links makes for a bad website design.
- ✔ Poor Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Bad Mobile Responsiveness
- ✔ Bad Visuals
- ✔ Broken Links
URL:internetarchaeology.org
Budgets Are Sexy
The cluttered navigation for this site has too many buttons. Colored backgrounds make it hard to read a lot of the text on the page.
- ✔ Poor Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ No White Space
URL:budgetsaresexy.com
Illuminati Exposers
Conspiracy Central ‼ (Took forever to fully load and definitely bad website design)
Low-quality images, text glow, too many different fonts and colors all make this a poorly designed website.
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
URL:nwokillers.weebly.com
The Room – Official Movie Site
Official really is a stretch here as this site feels shady and spammy because of how bad the web design is.
The black background shows how badly cropped a lot of the images are. The font sizes with ALL CAPS looks horrible all over, especially with misspellings.
This is just one of the many weird website designs on this list. Onward 👇
- ✔ Navigation is Poor
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
URL:theroommovie.com
Bella De Soto
This is another one of those websites that seem to be going for the title of WORST website design.
Animated text, images, overlaid boxes, horrible inconsistent navigation. The mistakes are endless.
- ✔ Navigation is Poor
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
URL:bellads.info
MIT Center for Advanced Visual Studies Special Collection
Another prestigious school attempting to make a bad website? No, at least not the way I see it.
Really the only objective flaws may be some legibility with the brighter color fonts slanted on a black background and a slower loading speed.
Honestly, MIT seems to have put more effort into creativity and this website seems intentionally designed to be more of a weird art piece than a bad website design.
- ✔ No Navigation
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Spacing Issues
- ✔ Confusing
URL:act.mit.edu/cavs
Cloud9 Walkers
Looks too specific to be fake but also too bad to be real? I hope it isn’t real but sadly wouldn’t be surprised if it was.
Please do NOT use comic sans for your website, it takes away any legitimacy you could have potentially had.
Combine that with no navigation, a lack of organization, and horrible layouts and you have this site.
- ✔ No Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
URL:cloud9walkers.com
Rudgwick Steam Show (Server Not Found)
URL:rudgwicksteamshow.co.uk
Mednat.org
The site itself is missing all content except for the following:
The moral of the story is: you need a website to have things if you want it to not be bad.
URL:mednat.org
Where2Eat (Redirect)
Don’t visit this site, it redirects to another site now.
URL:Where2Eat.com
Vortex Technology
I’m so confused. What is this site about? The website design is awful but that’s not the only problem.
It says what they are not at the top, then provides links to a Twitter account, weather, and a forum.
If you can’t be bothered to learn visual design principles at the very least don’t confuse people with text.
- ✔ No Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ No Visuals
URL:vortex.com
Historian Of The Future
Bad web design but in a way we can all enjoy it 🙂 Who doesn’t like space?
But the space background does make the whole site including navigation and content really hard to read with their poor color choices.
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ No Mobile Responsive Design
- ✔ Bad Color Scheme
- ✔ Confusing
- ✔ Bad Visuals
URL:historianofthefuturex.com
Homebridge
This mortgage website has inconsistent fonts with different sizing and some bad color choices make text hard to read.
There are poorly designed elements like the chat box, buttons, and shapes being out of position blocking text.
Generic call-to-action text on buttons and stock images make the site feel plain and don’t attract attention.
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
- ✔ Confusing
- ✔ Bad Visuals
URL:homebridge.com
NJ Lenders
This mortgage website is so close to being good but some minor flaws make it just bad enough to not feel premium.
The glow behind the title at the top only shows enough to look like something is clipping or going wrong rather than helping its legibility.
Spacing issues like in the navigation bar puts words too close together. The gray font on a blue background in the footer is hard to read.
All these issues together keep the website design from being good.
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Bad Mobile Responsiveness
- ✔ Confusing
URL:njlenders.com
Bond Street Mortgage
This website suffers from a website design that is lacking but also from a lack of content.
A dark grey font on a greyed-out background for the home page looks bad.
A very inconsistent overall design really makes other website pages here feel like they’re parts of different websites.
- ✔ Navigation is Poor
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Confusing
- ✔ Bad Visuals
URL:bondstreetmortgage.com
EXIT Realty East Coast
For a top realtor company, this web design is very poor.
Bad font color choices with drop shadows, stretched images, and poor quality videos, all add up to make bad websites.
- ✔ Poor Navigation
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ No Mobile Responsive Design
- ✔ Bad Color Scheme
- ✔ Spacing Issues
- ✔ Confusing
- ✔ Bad Visuals
- ✔ Un-clickable Buttons
URL:exitrealtyeastcoast.com
Blue Sky Capital Advisors
This well designed website actually has a lot of good things going for it but a couple of small things that are holding it back.
Spelling issues, animations for overlays not working, generic images, and not highlighting important elements all waste the potential of this otherwise good site.
This is besides some weird mobile issues like the black font that becomes totally illegible as you can see below.
- ✔ Slow Website Speed
- ✔ Bad Mobile Responsiveness
- ✔ Bad Visuals
URL:blueskycapitaladvisors.com
Daniel Effenberger
This is a personal brand website showcasing a more realistic example of where website design can go wrong.
This site looks relatively fine on desktop with some inconsistencies with all CAPS titles versus Capitalized ones, weird cropping, and a lack of spacing in paragraph text.
But try to access the site on mobile and you’ll see a lot more issues pop up, including a slow load time.
- ✔ Navigation is Poor
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ No Mobile Responsive Design
- ✔ Spacing Issues
URL:danieleffenberger.com
Lackawanna County
Lackawanna County has got its resident’s eyes hurting looking at this site that suffers from some of the worst website design mistakes.
That logo plus the 4 different colored buttons along with the pictures make the whole site look very spammy.
Many of the pictures on the site are low quality and have text on them making them look like ads.
- ✔ Outdated
- ✔ Bad Fonts/Typography
- ✔ Slow Website Speed
- ✔ Cluttered
- ✔ Bad Mobile Responsiveness
- ✔ Bad Color Scheme
- ✔ No White Space
- ✔ Confusing
- ✔ Bad Visuals
URL:lackawannacounty.org
We didn’t have a lot of time to dive into depth with each of these with so many examples
If you want to learn more about good and bad web design, keep reading to learn about the differences below.
Differences Between Good and Bad Web Design
Good web design has:
- Navigation that’s easy to understand
- Good color use
- Clean organized layouts
- Visual appeal
- Design relevant to the website’s topic
Navigation that is easy to understand helps make good web design because it allows users to find the information they are looking for quickly and easily.
Good color use also contributes to good web design by creating a visually appealing website that is easy on the eyes.
Clean, organized layouts help keep a website looking professional and organized, making it more likely that visitors will stay on the site and return in the future.
A study found that nearly half of all consumers assess the credibility of sites based on the appeal of the overall visual design of the site.
Make your site visually appealing!
Finally, a design that is relevant to the website’s topic helps ensure that visitors are getting the information they came for.
Relevancy makes sure they are not turned off by a website that looks like it’s not related at all to what they wanted.
Keep reading for more bad website examples and to learn the most common problems all terrible websites share.
Common Problems With Bad Sites
1. Bad Use of White Space
White space can be scary to amateur web designers. Most people fill all the space they can.
And some people use so much white space that there’s basically nothing on their site; which is not only a waste of space, but it’s also a waste of money.
Why pay for the website if you’re not going to use it?
The best way to fix this is to pool space around the main elements to highlight what you actually want your viewer to look at.
Bad web design examples:
Example (too much space): https://ok2bu.com/
Example (too little space): https://www.emol.com/
2. No Focal Point
When someone visits a website, the graphic designer usually tells them where to look first by integrating a focal point in their design.
But plenty of websites have too much information or too many graphics competing for the front spot, and the result is a confused viewer that doesn’t know where to look.
This can be prevented by choosing a focal point for your design.
Make sure you prioritize what you want to be seen first. Maybe you can’t decide between a visual and the heading, but instead of making these design elements fight, they can work together.
Experiment with different layout ideas, and if you find yourself unsure where to look, pick one and make it either bigger or higher than the other elements. Whatever’s on the top will be noticed first.
3. Too Cluttered
This one speaks for itself. If there’s too much information shoved into one page, the website visitor will feel crowded and overwhelmed.
There might be a lot of content to share on your website, but no one will want to read all of it if they feel like they’re being attacked by it.
The best way to fix this is to use space between design elements. Everything shouldn’t be shoved into every single corner.
When it comes to web design (and graphic design), less is more, unless you want more badly designed websites.
Example: https://www.arngren.net/
4. Too Many Colors
This is similar to having a cluttered website. Too many colors can be overwhelming and can assault your eyes. You don’t want to overwhelm your viewers–you want to invite them to stay for a while.
This is especially important and true on the home page where you make your first impression. You want to make sure your homepage showcases your website as best as it can to get visitors to engage.
The solution here is easy. Pick a theme with three to four main colors–and that’s it. Less is more.
Picking a few colors helps unify your website under a common visual theme without letting things get out of hand. Please, just leave the rainbows to Skittles.
You should also avoid using too many extremely bright or oversaturated colors because these can make it hard on your viewer’s eyes.
5. Lack of Contrast
So you picked three main colors for your site.
That’s great–but you have to make sure the colors contrast each other. Otherwise, you could end up with a site that has three light colors, with light text on a light background.
Your site won’t have any impact if no one can read it.
6. Too Many Fonts
Fonts are like spices. Sprinkle in one or two, and you’re cooking good food. But if you add in too many, your dish will drown in a bunch of powerful flavors.
Two. That’s how many fonts you need. Just two–and in some cases, you can feasibly get away with one.
Only use three fonts if you really need to, but in most cases, you won’t. Two fonts are the best standard–a decorative one for the headers, and a second one for the body text (usually sans serif).
Good Example: https://paula-miller.com/
7. Body Text is Too Small
This one is pretty self-explanatory. If the font is too small, the visitor can’t read anything. And when they’re confronted with a huge block of small text, they’d rather read literally anything else.
What website would you rather visit: one with short blurbs that tell you everything you need to know, or long badly designed websites with pages and pages of text?
Unless you’re a history professor, you’d probably pick the first one.
Make sure the text is a good size on mobile and desktop. You don’t want to make viewers zoom in and out on different devices!
Example: https://www.battlefields.org/learn/biographies/sacagawea
8. Awkward Font and Typography Effects
When you were a kid, you probably spent hours messing around with the different font effects in Microsoft Word.
You could highlight, stroke, make it all caps, and more.
They can work on a few websites. But these effects probably won’t look good on your website.
and when used improperly (or at all), they can make your website look immature.
In addition, using all caps makes the reader FEEL LIKE THEY’RE BEING YELLED AT. It’s actually harder to read blocks of capitalized text too, so you’re not doing anyone any favors.
Highlighting text makes a blocky border and pulls the eye right to the words. And stroking can make pretty fonts look blocky and awkward. Do yourself a favor and avoid these as much as possible.
Example: https://irishwrecksonline.net/
9. No Unity
There’s nothing quite like a Frankenstein website–or, in other words, a website that looks like it’s been hacksawed together with pieces of other dead websites.
Good web design means good unity. The website and all of its parts need to look like they belong together. Think of old DVD menus (back when we still used discs for movies).
The menu had a bunch of different sections (Language Options, Bonus Features, etc.) but they all still were themed to match the movie’s design.
Take a similar approach to your site. You can still have different creative ideas for each section, but if they don’t all connect under an overarching theme, then you might be taking it a bit too far.
10. Lack of Organization & Navigation
The organization is the backbone of the site. No matter how pretty it looks on the outside, if the design isn’t organized, then no one will know how to navigate your site.
If no one can navigate your site, it’s essentially unusable and ineffective as a website.
11. Confusing Layout
This ties into the lack of organization. The lack of organization discusses the backstage side of things–but the layout is what your visitors see.
Maybe the website is organized logically, but if the layout is confusing, then no one will ever want to use your site. They won’t even know how to use it.
Imagine if everything about Google was the exact same–except the front page had a bunch of random stats and the search bar was at the very bottom, so you had to scroll way, way down to find it.
It’s confusing, it’s not helpful, and Google would likely lose out to Bing (which no one wants).
12. Poor Image Quality
We love images, and we really love pretty images. But websites with blurry, awkward, or warped images can make the viewer sad, disappointed, or annoyed.
Those are not emotions you want your website’s viewers to be feeling.
The best solution for this is to pay for high-quality (HD) images that you have permission to use on your site.
It costs more than stealing something decent from Google, but that’s illegal. One site that has high-quality, professional photos is called Unsplash.
It has free-to-use photos for commercial and non-commercial purposes. As long as you don’t sell the photos or use them to make your own stock photo website, you can use them all you want.
Example: https://www.wateronwheels.com/
13. No Variety
While some websites are too cluttered, sometimes designers take the opposite route and don’t do anything creative at all.
And while you don’t want your website to be too crazy with design elements, you don’t want it to look as blank and boring as an empty house.
Put some thought and effort into your design! Maybe it might look a little wonky at first, but you can workshop that and eventually create something better. Having an obnoxious website is better than having a bland website with no personality at all. And you can always look at our other tips to make sure you don’t take your website’s personality too far.
Example: https://nwga.craigslist.org/
14. Obnoxious Background
Backgrounds make or break your site. Do yourself and your visitors a favor and pick something simple. Try a solid color, usually white. White backgrounds are great because they’re simple, and they don’t distract from your main message.
Picking a photo or graphic with a ton of different colors like the example above or (heaven forbid) something with repeating images is the easiest way to drive your audience away, losing traffic and sales.
Example: https://toastytech.com/evil/
15. Reusing a Common Template
Common web design companies like Wix or Weebly offer website templates to make it easier to jumpstart your site. They already made the design, and all you have to do is put in your information. The only problem is, that thousands of other people will use those templates for their websites as well.
It’s important to be aware of the fact that your website might look exactly like hundreds of others. If you like the template, go ahead and keep it. But if you want to have a unique design, try using a website design program that lets you make your own templates, like Squarespace.
16. Inappropriate Theme
There’s nothing like designing a new website.
It’s great to mess around with the layout and colors–but before you know it, you’ve got a red and black gothic theme going on for your pet adoption site. And unless you’re selling vampire bats, your audience might be a little bit confused when they visit your site.
Obviously, you can choose whatever design you want. But you should be aware that your design and theme should match your website’s message.
The best way to prevent this problem is to outline your website on paper in advance.
Good graphic designers know that the design should be brainstormed in their minds and on paper before they ever get near the computer. Workshop it with others, and hopefully, you won’t end up with a Halloween-themed site that was supposed to be for your charity.
17. Obnoxious Animations
Who likes to open a site, only to find a billion flashing animations lighting up the screen? No one. The answer is no one.
Let’s be honest here; when we open these websites, our first thought isn’t: “Wow, that’s fun!” Our first thought is: “Crap, I’m going to accidentally download a virus.”
The best solution is to avoid animations. Kick ’em to the curb. The only ones you might get away with using are interactive animations. Those can be cool. But everything else should be kicked out entirely.
Example: https://www.lingscars.com/
18. Broken Links
Nothing says “unprofessional” like a website full of links that don’t work.
Even if you find a website with good design choices, that means nothing if the website itself doesn’t work.
It’s like having a cake with beautiful, shimmering, golden icing that makes it look like the most appetizing thing on the planet. But it’s hollow.
It’s a pointless cake–and a pointless website. Make sure to check your links so that your website visitors will know they can trust you.
19. Doesn’t Adapt to Phone or Tablet
Nothing sucks more than accessing a website on your phone–and then having to turn it sideways or scroll in a weird way in order to even read the content.
Make sure your website is friendly to smartphones by checking out this guide by Hostgator.
20. Grammar & Spelling
This might seem like a no-brainer, but you’d be surprised how many people fail to spellcheck their websites. We’re all human, so we’re all going to make these mistakes sometimes.
That’s why it’s so important to read through your web pages before publication.
Any website that uses bad grammar or spelling will immediately be seen as unprofessional–no matter how good the content or web design is.
The best way to fix this is to get your friend to read through the page, or you can download the extension Grammarly.
It’s not perfect, but it’ll help point out mistakes that you might’ve glossed over.
Other Sources
If you want to learn more about good web design (and good graphic design in general), check out this book called “White Space is Not Your Enemy.”
Leave A Comment
You must be logged in to post a comment.