When users land on a website, the content isn't the first thing they see. The design is!
Everything from the color palette and images down to the tiniest details that make the difference between scrolling down and reading to the end or closing the tab and never looking back.
Sometimes it's good to learn from bad examples to learn from their mistakes and avoid them. Today, we’ll give you a list of 11 poorly designed websites that get in the way of their users, instead of helping them achieve their goals.
I hope you don't open this website on your smartphone because the responsive layout is a disaster. Yale is a big name out there, and for a "school of art," the website makes visitors doubt they’re on the right website!
You see lots of colors, different text fonts, and sizes; some are bold, underlined, or italicized. The designers went for distracting users.
Do you want to get confused or perhaps get a headache? Arngren’s website is designed to do just that!
There's no structure for you to navigate around. You can't know what the website is exactly about, and the typography is so small and colorful that you just get dizzy.
The images are overlapping, and it's really difficult to tell the price for each item.
The design is simple, maybe too simple! If it weren’t for the name, you’d have no idea what this website is about. You don't see any logos, pictures, or banners, only a long list of locations, brand names, and generic words.
Once you click on one of the “categories,” you see an endless list of boxes with two buttons, a date that looks like a button, and a generic icon that serves no purpose.
Are you a fan of Hunger Games? Then you might have visited the author's website. Well, the design isn’t as exciting as the books. Even the author's picture in the corner is unclear.
If you click on the eye-catching image of the book in the middle, you’ll be disappointed to see that nothing happens. What a waste of a great opportunity to sell the book!
When you click to see the author's works, you find a few paragraphs of praise for each book but no purchase links again! The website is certainly not designed to promote the author or her works.
Hacker News covers cyber security news and related information. The design is very simple, but there are more than a few readability issues.
The text fonts are small, and some might need to zoom in to read the content. The color scheme isn't very satisfying, either. You can sort the news according to their time or comments, but the lack of white space and the color make these options difficult to spot.
You’d expect a news website to be much easier on the eyes since readers will be spending a lot of time browsing through articles.
What's the relationship between butterflies and a message? We should ask the designer.
When you open the website, you might think you're looking at a 7-year-old’s art project.
The color scheme and the typography confuse the user and give them a headache. Plus, the picture of naked bodies doesn't send the right message to potential customers.
The first thing you might feel when you open this website is confusion. You don't know what to do next, and the navigation is so poorly designed that you get lost. Plus, the menu items are a pain to read. The color scheme is also terrible, and the animation design makes things worse.
One of the world's most visited websites is famous for its bad design. You don't see any pictures whatsoever, so no visual clues.
When users open the website, they see a three-column layout. It takes a lot of time to find the information you need. Plus, the website isn't responsive, which means when you resize the page or open it on your smartphone, you miss some information.
Craigslist hasn't updated its design since 1995, but maybe that's their key to success.
Are you a big fan of James Bond? If so, you're probably not going to like this website. It’s a collection of pictures and YouTube videos about the fictional character. But the images aren’t properly sized and there’s lots of text.
You can't find any navigation. The user can keep looking and scrolling down but won't find anything useful. So they might have to use "Ctrl + F" to see what they're looking for. If you do manage to get to the bottom, you’ll probably feel so dizzy you need to rest your eyes for a bit!
When you design a website, don't forget the reason in the first place. When you open this website, you can't say What it's about.
All you see are beautiful pictures, probably their projects, but no text at all. If you're lucky, you’ll spot the index option on the left. When you click on it, you can see the navigation menu.
The designers tried to play a trick on the users by mirroring part of menu items, but they just made it utterly confusing. It's like a riddle, but not everyone is interested in solving them.
This bad website design is a little bit weird. It has GIFs, colorful pictures, music, and patterns that make it difficult to take the website (and the business) seriously. You might think it's the work of a child. However, Ling's Cars is a serious and quite popular business.
The color scheme is too bright, making it difficult to stay on the website for too long. It has good navigation, but there are so many weird options that seem unnecessary, like karaoke, games and even a live chat with the store's staff.
How to Avoid Creating a Bad Website Design
Many factors go into a good website design, most of which depend on your business type. However, some universal principles apply to any website design that can make a difference between high bounce rates and return visitors. Here are the main ones:
Keep Business Goals in Mind
Your website’s design should be an extension of your business, allowing the customers to feel what you do.
A blurb or a button linking to the “About Us” page on the homepage will let visitors know about your business. In addition, you should help your clients get what they need easily. Apart from creating standard pages for businesses, make sure your products are at the center of attention, with lots of call-to-action buttons. If you’re not an online business, provide easy-to-access contact information, including your physical address and phone numbers.
Include White Space
You want to give your visitors as much information as possible, but you don't want to tire them with blocks of text filling the whole page. Make sure to leave some areas of the page with blank spaces between text, images, or graphics. This way, you’ll give your website a simple but elegant design that flows smoothly by organizing different elements.
Provide Easy Navigation
Navigation refers to the visitors’ ability to find what they want hassle-free. Poor navigation design will lead to higher bounce rates because it makes browsing your website difficult for visitors. Make sure to organize all the pages and elements of your website in an intuitive way so that visitors can directly go to the part they’re looking for.
Offer Responsive Design
These days people access websites on different devices. So, you want to make sure your visitors’ experience remains the same across these devices. Make your website mobile-friendly by using responsive elements that scale down to mobile screens without distorting pictures or banners.
