10 Bad Web Design Examples & Common Errors of Web Designers
Updated: Mar 19, 2019
Here are some examples of some bad website designs and similar sites that have a great design.
How important is it to have a great website?
97% of people will search for a business online before making a purchase of any kind. (Source: Hubspot)
User’s first impressions are connected to website design in 94% of viewers.
After a single bad experience, a user is 88% less likely to return to that website. (Source: Gomez)
IT IS VERY IMPORTANT TO HAVE A GREAT WEBSITE!
Web design can be broken down into the two following category:
· Visual design
· Website functionality
Your website is the face of your business and the vast majority of people will see it at some point or another. If you have a website with bad design or usability, you are potentially losing a ton of business! Even worse, if you don’t have a website at all, YOU ARE ABSOLUTELY MISSING A TON OF BUSINESS!
The purpose of a website is, simply, to have a full-time, 24/7, live salesperson that will build your business for you. Do you have salespeople on your staff? Do you want salespeople but don’t want to spend the money? The average salesperson in any industry is paid a salary of anywhere from $20,000/year to $300,000/year. A great website, designed and built by a professional web designer, can be done for as little as $2,000-$5,000. Yes, you can easily spend $500,000 on a brand new website but even the most simple website, with great design, can be extremely effective.
But how do you build a trustworthy website?
The key point falls on the design. A good web designer will be able to research your business, your industry, and your target audience and create a design that is most effective to that market. A great web designer will take all the market research and combine art and functionality to build you a website that creates passion in your viewers.
It is a combination of understanding art and design and also having the technical expertise to bring it into reality. If you are not an expert at both then you can actually damage your business by trying to build your website yourself.
So what are some common mistakes in web design? What are things that need to be avoided at all costs? Below are some example of businesses that did it wrong and created a bad website as well as some businesses that have done it right.
Differences Between Good and Bad Web Design
Web design trends are changing all the time, so design principles on the web are really hard to define, however, there are still golden rules that stand the test of time. Out of all the websites on the internet, there are some design principles that must always be followed:
· An easy to understand navigation
· Proper use of animation
· Good color scheme
· Clean layout
· A visually appealing interface
· Choosing a design that is appropriate to the topic or theme
· Keeping design elements and content organized
The above principles are just a few rules of web design, but they all clearly indicate that good web design should be aesthetically pleasing, easy to understand, and easy to use. That is, a good website should provide an excellent user experience.
Top 10 Bad Web Design Examples
1. Arngren – Design in chaos
I don’t want to be mean but it is actually painful to look at this website. The site places the graphics, content, and links anywhere. All the elements together make the site an incomprehensible mess. Would you buy something from this business?
Why is Arngren a poorly designed website?
1) The biggest problem is that the sit doesn't use a grid.
2) Unbelievable navigational structure.
3) Poor typography makes it unreadable.
4) Random use of colors.
A grid can make everything clean and organized on your website. It keeps all your elements in their proper places, and helps you to determine their size, the size and space of the text, etc. With a grid, you can create a consistent, well-designed interface.
A good web design example of using the grid in web design - everything is organized.
2. Typesetdesign - The design lacks contrast
Color is extremely important when designing a website. A clear and powerful contrast between the elements can help users to know what is the core info of the page. It helps the user to better read and understand the info. On this site, the background color and text color are pretty much similar, leaving a very weak contrast. The poor contrast makes the text become blurry to the eye. Besides, the small font size makes the readability of the text extremely poor.
A good web design should make sure that the text and pictures are highly readable. Actually, it’s not hard to improve the readability, just make use of everything - the color, space and size to make them have high contrast. For example, good use of typography makes highlights the important information by different font sizes, and the contrast between the colors strengthens the visual effects.
A good web design with proper contrast should look like this:
3. Theweddinglens - Not-responsive design
You should always use a responsive design framework, or adopt other better solutions. Your web page needs to run on mobile smoothly as it does on the website. On this site, when loading on the mobile phone, it still shows an entire page with such a poor interface of plaintexts. It does not have a mobile version to view, so it’s unable to use on the phone. I will just give up on a website like this.
The good web design - responsive design.
4. Pacific Northwest X-Ray Inc - the unpleasant color scheme
This web design is like a mixed color palette, which contains plenty conflicting colors and text colors, and also mixed with the background color. All those make it difficult for users to read at all. Also, the navigation is quite complicated.
A good web design should use color properly to create a beautiful and concise interface and atmosphere. It should ease user’s eye and make the user operate with no effort, like this one:
5. Gatesnfences - Poor navigation and operations
The biggest feature of navigation for a website is self-evident. When a user logs onto your website, he/she should understand what they can do next and what actions to take to reach their destination. The navigation must be eye-catching and should often be at the top of the page. Do not try to design a navigation like this site. It only makes the user more confused.
In addition, the navigation content and the interactions also need to be clear, so do not use the horizontal scroll bar or other unusual animation design. If you do, you should at least give the user some hints to let them know how your site works.
A good navigation of web design should look like this：
6. Bad Link and wrong CTA settings
A mess of links and dead links are both major errors of the website. You should check your links manually or use tools such as the Website Link Checker often.
Also, you need to make sure of the functionality of the links. Especially links in the text, you should make them obvious enough and easy to click. For example, do not add a lot of text links within your text. When browsing the text on a small mobile screen, it will be difficult for users to tap on the correct link.
On this site, each moving small picture is actually a link. Leave along it’s moving all the time, the text itself is very vague, so the user does not know what information is displayed.
The CTA settings must be clear too. Do not give users too many CTA choices at the same level because it will cost the user more time to figure which one they prefer to choose. Have a look at the example:
Too many CTAs of the same level will make the user more confused. Also, you should retain only one CTA to highlight the key point. The following is a well-designed CTA.
7. Nmg-group - Unclear interface image background
The picture you use on the web page can be the front door of your website. A good-looking picture makes your site more beautiful and comfortable. Some designer even uses the entire picture as a background image.
On this site, the design is very good actually, but when looking closely you will find out the text and background images are too overwhelmed. The website's background image is covered by other elements, so the whole interface is actually broken.
Using transparent buttons would be a better choice here. That is, when designing buttons in the web page, you should abandon complex colors, styles, and textures. Instead, just outline the wireframe and use text only indicating the function. Here is a better one.
8. Wateronwheels - Inconsistent style
If you want to keep the page smooth and concise, then do not use too much element of different styles. On this site, the text area uses contrasting colors and different font sizes to highlight the info. But the text on the second level also uses a highlight blue color, which in fact breaks the unity and balanced hierarchical interface.
Unity is crucial to the overall beauty and fluency of the web interface, see it below:
9. Greatdreams - Not have any white space
The whole website looks colorful, contrasting and prominent, and also it appropriate to the topic of children's juice drink. But a lot of too bright colors are too mixed and there is no space at all. It looks more like a colorful painting than an online business website. Besides, the combination of exaggerated colors makes the readability of the texts became very poor. Moreover, the site did not have any navigation, leaving you to scroll to the bottom to find relevant information.
A good web design with white space is simple and clean:
Above are some lists of bad websites. But other web design mistakes also exist:
1. Automatically playing music (without notifying the user).
2. Long page load times. The more time it takes to load, the more likely the user will leave your site.
3. The web page is too long. How many users do you think are interested in going all the way down to the bottom of your page? Do not try to test the patience of the user.
3. Expired information. Information that is not updated will mislead the user and make your site look unprofessional.
5. Isolated page. The user does not know how to return to the homepage. This offers a bad experience.
6. Missing interactive content. If you are unable to provide a way for users to express emotions and ideas, your website may become a slowly die.
To sum up
A website needs to represent a mix of art, design, and functionality. A great website has all three. If you want to see masterful work, take a look at Apples website. Though their website’s cost is in the hundreds of thousands of dollars, there are many websites out there that can be created that have the perfect blend of design and function.
Try to stay away from following the examples of the sites listed above and stick to the basic fundamentals of great design.
If you are looking for web design or a free consultation, give us a shout any time at www.apexmediafirm.com