As you surely know by now, first impressions mean a lot. Which means that your website can’t just be informative and easy to use. It’s also got to look the part.
But getting your website to look just right isn’t easy. There are a lot of factors that come into play and many things to be considered. Unfortunately, it’s all too easy to mess up just one little thing…and turn away your visitors for good.
To make sure that doesn’t happen to you, I’ve compiled a list of the top ten web design blunders that you’ll want to avoid. Here’s what they are…
1. Unreadable Fonts
There are a lot of fonts out there. The only problem with that is that many web designers pick some cool-looking font(s) that ends up being practically unreadable.
Make your font size large enough to be easily readable (consider 14px the minimum font size for your body font). Think about the spacing between the letters. If the letters are all scrunched together, then you probably need to choose a different font. Finally, make sure that the font color is dark enough so that it’s legible.
Bottom line: If your visitor has to squint their eyes or pull out a pair of eyeglasses to read the content on your site, then chances are, the font size is too small. Get creative. But not so creative that your readability takes a hit.
AirBnB takes a no-frills approach to their font, thereby succeeding in making their entire site very easy to read:
2. Combining Text and Image
Another mistake that many web designers make is creating images with the text and image combined. In other words, the file is read as one large image file instead of image and text. What’s the problem here? If it’s just one large image, search engines won’t be able to recognize the text on that image.
Instead of having one large image, keep the text and image separate, so that the text is overlaid onto an image. That way, the website will have an H1 tag, a subheadline and keywords…in other words, it will be readable by search engines.
3. Poor Contrast
Visually appealing design has contrast. When adding images to your site or thinking about the colors you want to use, consider how everything will come together when it’s done. Does everything seem to blend together? Or is there a stark difference between the images (contrast) throughout? A successful web design will have the latter.
Look at the use of contrast on the Apple website:
The bright blue-purple color on the iPad is contrasted against the woman’s red shirt and white skin. The entire image is then contrasted against the plain white background. The visitor’s eye is therefore effectively drawn to the image on the iPad—which is exactly what Apple wants, since they are trying to promote the Apple Pencil tool.
4. No Accent Color for CTA
If there’s one thing that should be standing out on your website, it’s your CTA. If the color of your CTA is not an accent color (or a color that is used for emphasis), then your conversion rates are probably going to suffer the consequences.
Make sure that your CTA color complements the colors on the rest of the page—but still stands out from its surroundings.
I’ll let Basecamp show you how it’s done:
The large CTAs “Try it FREE” and “Start a free 30 day trial” are some of the first (if not the very first) things that draw the user’s attention. At the same time, the color is in harmony with the rest of the colors on the site (and matches the color of the links).
5. Excessive Scrolling on Mobile
Your design may be fantastic on desktop…but what about mobile? Since the screens of mobile devices are naturally much smaller than desktop screens, your visitor will have to scroll a lot more on mobile—unless, of course, you redesign your pages for mobile use.
Remember that your visitors have short attention spans; so if they need to scroll a great deal to get to the bottom of your page, then you’re probably going to lose some visitors. Think about how you can redesign the content and images on the page to minimize scrolling and provide an optimal mobile experience.
6. Too Many Colors
As the adage goes, less is more.
First of all, having many different colors on your website is unconducive to having a consistent brand identity; it makes it hard for your visitors to take your brand seriously. From a visual standpoint, it also is overwhelming and aesthetically unappealing. Instead, pick just a few colors and stick to them.
On their homepage, Slack uses more than just a few colors (10+), but they are able to get away with it for two reasons: First of all, the colors used throughout all match the colorful logo and one another. Notice how the green-blue of the man’s shirt matches the color of the paperclip on the paper he is holding and the square box on the Slack app. The man’s shoes match the color of his hair, and the color of the brunette woman’s pants match the color of the sidebar on Slack.
The other reason this works is because of the extensive use of whitespace. The graphic is adjacent to a bit of copy, all surrounded by whitespace. There is even whitespace within the graphic itself. The end result is one that is colorful, attention-grabbing and visually appealing.
7. Too Many Fonts
Just as excessive use of color can confuse and overwhelm a visitor, so too can too many fonts. Stick to three different fonts per page.
Notice how Uber uses only one font on their entire homepage.
8. Large Images and Videos
Having large images and videos on your site might be great in theory…but in reality, they will decrease your page load time, which will not only turn visitors away from your site, but will also hurt your SEO.
So just how big is too big? Large images or full-screen background images should be under 1MB. Smaller graphics on your site should be 300KB or less.
9. Cluttered and Disorganized Pages
Many businesses get so excited about their product or service that they want to share everything all at once with their website visitors. Big mistake.
You need to ease your users into things. Use your homepage to share only the most basic information about your company (like your value proposition above the fold, and a few testimonials below the fold). Remain a little mysterious, and entice your visitors to find out more with attention-grabbing CTAs, compelling copy and a beautiful design. Remember that the best designs are often the most simple.
Don’t use too many images or videos and keep your copy concise and to the point (especially on your homepage). A cluttered webpage is the quickest way to lose your visitors’ attention.
Keep your pages organized and easy to find. If your visitor can’t find what they are looking for within 10 seconds or less, then you probably need to change some things around. Where is your “Search” button and contact information? What about your CTAs?
Evernote does an excellent job at keeping their pages simple, approachable and easy to understand. Here’s what their Services page looks like:
Notice the clever use of the bright green CTA for a Business account (which is also the most expensive).
10. Use of Cheap-Looking Stock Photos
There’s nothing worse than a website with cheesy stock photos. You know the ones I’m talking about. Some businesses can get away with this more than others (think: law firms and the like), but it’s never a good look.
A much better idea is to invest in creating some high-quality custom designed images. It may cost more short-term, but is likely to be far more profitable in the long-term.
Some examples of companies that succeed at this are the aforementioned examples: Evernote, Slack and Basecamp.
Don’t Forget to Test
I’ve said it many times before and I’ll say it again: Don’t forget to test and find out what works best for your brand and what attracts your audience. Never assume that just because something worked well for another business that it will definitely work for yours too.
What are some web design mistakes that your business has been guilty of? Let me know in the comments below.
