As a massive fan of education, I wanted to make a spin-off article, inspired by a recent one I did, How Do I Know When I Need a New Website? I wanted to help small business owners know tricks to avoid bad web design decisions. How to know what to look for when they are selecting someone to work with to build a website. How to know what to pay attention to. I know that design is subjective and people interpret things very differently but folks like me who are around it a lot get the chance to see the good, the bad, and the just plain ugly. Your website should be designed to be both visually appealing, and content appealing, to your target audience, first and foremost.
Your website should be suited to your clients, not to your own liking. What you like is important. But what your clients like is of greater importance. If the site design you love isn’t going to appeal to your best clients, I have to be honest about that. What I’m going to do in this article is give you links to websites that are an example of a website woe. There is zero intention to pick on them and every intention to help you learn from their mistakes. I’m going to also give you examples of great websites so you can better learn what things to avoid, and consider highly when building or rebuilding a website. Remember, my goal is to help you with avoiding bad web design.
Avoiding Bad Web Design
Let’s look at some designs and talk, simply, about their design. Not that this information is only leveraging a small part of content marketing, covering themes, colors, layouts, etc. The verbiage, blogs, and call to action are a critical step but I don’t want to focus on that as it less relevant to the intent of this article. The architecture is also important because it can make the difference with speeds, performance, mobile response, adding content, etc. For now, let’s just focus on the aesthetics of avoiding bad web design. If you really want to dig a little deeper into what all your website really should do, check out The Importance of A Good Website. Do note that these websites are eventually going to change and it may have been done by the time you’re reading this. If it doesn’t make sense with my description, it’s safe to assume the site has changed.
What To Do and What To Avoid
Aim for Clean, Avoid Clutter
My theories for designing nearly everything is KISKIC. Keep it simple, keep it clean. The average web viewer wants to find a relevant point of information from a website in approximately 4-5 seconds time. They are scanning your design and layout first and the visual points of your content second. If they feel ‘attracted’ to your site, they stay, if not, they bounce. If they stay, you need your content to compel them quickly to keep things simple and clean is the surefire way to go. Avoiding a bad website starts with throwing the junk away!
Clean
Here are some examples of some beautifully clean websites. They are so clean, they’ve won awards! Zumotobel, Hello Bert, Seedlip. These are just a few fantastic examples of how to keep your page clean while still chalking it full of relevant information. Things have a place, it’s simple, it’s easy to get your information.
Cluttered
Clutter kills your site. Here are some examples of website that are way too cluttered and have lost all their content, from an overabundance of it. Mile High Comics, Gates N Fences. This one might surprise you, Testerman’s. It’s way, way, way too cluttered even though I suspect a lot of business owners don’t see this as cluttered. There are too many options and too many details. It’s distracting.
Praise Creativity, Avoid Looking Lazy
Be Creative
Do you want to see brilliantly creative sites? Sirin Labs, 124 Spider, Type Terms. These are very creative sites that don’t skimp out on clean, and content.
Laziness
Sites that lack creativity often appear to be sloppy like they were thrown together last minute. Here are examples of websites that look like they were developed on a very lazy day. Argren, Rudgwick Steam Show are good examples of not taking the time to think about any portion of the design, and throwing details in where they fit. There are many things wrong with Jami Lin’s Passions site but laziness is where we’ll put this. Lazy because there was so little effort placed into this one.
Take Care of Colors!
Complimentary colors are best, but if you are careful you can beautifully leverage contract colors together. Know that colors aren’t just about what looks good, it’s about what message it sends to your customers. Colors have a psychological effect on people. Color patterns cause certain emotions. You want your color choices to be complementary to your target audience and what will drive them to buy. Colors are very important to focus on in avoiding bad web design.
Complimentary, or Careful Contrast
Talk about contrast. Bolden is not only creative but colorfully clever. Instead of disorienting you with the retro style 3D text, the sight playfully puts the right colors together to make it fun and playful, versus distracting. Selecting one color to ‘decode’ the message and combining them when entering the menu of the site was a smart choice. Beoplay A1 website uses colors in a beautiful and elegant way. Each ‘section’ has a unique feeling and theme but it is done without contrasting from the previous, or the next. The content is excellent in this site as well but the colors and visual effects are really doing their job here. Bundy Bundy has excellent color choices. You may wonder why white and black are so excellent but it’s because it makes the colors of the clothing, makeup, and visual effects really pop. It doesn’t take away from the point of the site. Sometimes plain and simple are perfection.
Poor Color Choices
This might surprise you but Wholesale Meats Coventry is an example of poor color choices. There are a lot of very large, strong, saturated red areas in the website as you scroll and navigate through pages. Though red creates a sense of masculinity and energy, too much creates the feeling of danger, mistrust, and aggression. There is far too much of these bold red boxes on the website. They appear in every section and remove the initial positive response that the right amount of red would have. The red, in addition to promoting the negative effects at this point, the red areas take away from the subtle attractiveness of the meats on the website. Very simple design choices could have made this a much better site. Mindi Meyer’s political campaign website should be obvious. This is an example of designing for yourself and not your audience. Note that poor color choices also falls in line with having textured backgrounds with colored text, like in The WET Group. Bright tones and text on a dark background is a no-no as well, like Fiber Optic Lighting.
To Navigate, or Not to Navigate
Avoiding bad web design is all about the navigation details as well. Your site has to make sense for your customers to get their information if your page has multiple pages or places where navigation is necessary. Buttons, fields, menu headers, pages, etc. should be easily accessible for your customers.
Navigation is Good
Apple is a prime example of everything that is right with a website, including navigation. It’s just super easy to find what you are looking for. Converse has a crazy creative site where all of the navigation is interactive. You are experiencing actual footage that was prerecorded as you interact and ‘do’ the actions the daredevils do. It’s one of the more fun sites to navigate on. Though I am a big fan of clear-cut navigation, I am a fan of ways to use the navigation to get your viewers to interact. There are cases when your business model is deserving of some clever navigation in a way that is really unorthodox. Take Lawler Ballard Van Durand, a design and advertising firm. It makes sense for you that be coerced into having fun, getting curious, and clicking around.
Stay Away from Confusing Sites
Exmouth View Hotel is confusing in many ways but none of the navigations make sense. Weston’s WannaB Inn is another navigation example for making things overly complicated. At first glance, you may not understand but find the accommodations. Now find the ones that are beach front with kitchens. If you got that far, try finding a picture of those units. Avoiding bad web design is to place more functionality. Provide more content with fewer clicks. I’m not a fan of the site overall and think it could use an overhaul all the way around, but the rooms could be a lot easier to find, price, and see.
Etcetera
Other miscellaneous things to avoid on your website are scrolling text, videos and/or audio that automatically play, screen grabbing ads, and SHOUTING. Too much of any one thing could be interpreted as a “shout” so watch the tone of the site. Avoiding bad web design requires a lot of attention to details and a lot, lot, lot of planning. Understanding who your target audience is will play a pivotal role in determining what all the details should be, regarding the design of your site.
Like with any of our pieces, I hope that this was a good tool to help you with avoiding bad web design. I also hope you had fun checking out both the well done, and the room for improvement sites here. I want to reiterate that this is not to criticize anyone’s work, but more so to help anyone who may be seeing this where improvements can be made. There’s no such thing as a perfect website, much like a piece of art. If you leave this article with a greater understanding of what to expect and want in a website, then this article has done its job. If you have a site like any of the ones I’ve used as bad examples, use this knowledge to redesign a new site! On a side note, if your site is like one of the ones used as a good example, you should buy your designer dinner. He or she would really appreciate it.
Thanks for reading!