Design Mistakes Making Your Business Website Look Amateur

Too many cooks in the kitchen? Have better tools caused websites to lose brand identity?

Content management tools can now handle more than content. Non-technical editors have more access to the design components of the site. And so what you find is, is that you’ve got the more hands that you have participating in the website. The more editors you have, the more ideas you have about how the site looks. Those ideas become part of the website and become part of the design.

On every page is everybody’s take on what the website should look like. That’s how you start to lose some of your brand identity. The site gets less and less consistent. Visitors begin having trouble understanding your pages. Now you have performance issues on the website.

Unclear Brand Creates Performance Issues

What a website design should be doing is teaching the visitors of your website how to do business with you.

You can use the components of your design to build on the credibility of your brand. They help move people through the website and make it easier for people for people to use.

Web users are becoming more and more sophisticated. They they’re on websites not only on their desktop, but on phones. They have certain sites that they like and they use them over and over again. Users have a strong opinions on what they like and what’s useful and and what works. When there are issues with the design, visitors may not know exactly why a website doesn’t work. They know they don’t like to use that website.

Lack of consistency in design causes users to turn away. Content Management Systems, like WordPress, were originally built to maintain consistency. The purpose of a CMS was to make it so people could add content and it would always get added the same way. But the tools have kind of evolved beyond that. Now there are all kinds of new buttons to play with. And so now we have this situation where we’re getting farther and farther away from the design.

3 Biggest Design Mistakes – Font, Color and White space

The biggest mistakes are with the use of fonts or typefaces, the use of color and the use of white space.

These mistakes actually manifest itself by creating websites that are hard to read. Websites that are hard to read come off as hard to use. They start to lose some of their credibility. The results in are conversion issues. So you start having a website where you’re not getting as many sales leads as you used to off the website.

Avoiding these design mistakes will prevent creating a website that is harder to use.

Use of Fonts or Typefaces

Best Practices for the Web

Use one font for Headings, Titles and Navigation.
Every business should have a standard font. The style of text that you use in your business communications. Everybody should have one of these to start with. Best practice for websites is to use one font your headlines, titles, and navigation. Using the one font associated with your brand, like you use in your logo, will give the website text an extra polish. An easy customization that helps take text from standard template to professional.
Use a second font for body text – where the heavy reading takes place.
Pick a second font, one that is complementary to your primary font and use it for the body text. Look for something simple that will scale to different sizes. Use this font for parts of you pages where folks need to do heavy reading.
Best text color combo – black text on a white background.
Black text on a white background provides the highest contrast on a screen. High contrast will make text easier to ready. People learn to read with black text on a on white, which is always going to make it easier for users.
More Images = Simple Fonts.
If you do want to use a lot of images in your site, take advantage of the color and contrast they can add to your pages. Use the images to draw people through the site. You don’t want your text font to compete with good images. Keep your font simpler, keep your text color simpler, and let your images do the talking.

Here are some more best practices on typography for web design.

Common Mistakes

Too many type variations.
Just because you picked two fonts doesn’t solve the problem. Using two, there are endless combinations of how to use them. Different sizes, different weights and variations like italics or bold. Two many variations can look as chaotic as many fonts. Create a set of combinations for the types of content you have and stick to the small set.
Tiny text.
You may think that making text smaller for a smaller screen is a good idea. Actually the opposite is true. Tiny text makes web pages harder to read and harder to use. The recommended text size for mobile compatibility is 16px. Work on transition your text to this format.
Bigger Text to Draw Attention.
You want to make sure that people see that important item when they first come to your website. You decide to make sure everyone notices your content by making it bigger. At some point you decide everything is important so you make it big and orange and capitalize it. It’s like the website is almost shouting at you. But what you have done is styled everything the same and now nothing is important.

Use of Color

Good use of color can actually improve the conversions on your website. Color used strategically can move users through a webpage. Meaning it can help you get more leads and get more sales off your website.

Best Practices

Pick a color palette and stick to it.
Have a good color set for your for your business and you stick with that. Use only those colors make them consistent throughout the site. That alone would make your site more professional.
High contrast between text and background.
As I said before, people learn to read on a white background with dark text. Black backgrounds are not natural for people to read against. When you use bold, heavy colors in the background, your webpages get hard to read.
Link color needs to be unique – don’t use it other places.
If you make no other color changes to your website, make this one change. Internal links between pages of your website are becoming very, very big in in the mobile world. Pick a link color for text links and stick to it. Have that color be unique to all other text and don’t use it other places.
Call-to-Action brightest item on the page.
Color is used to catch people’s eye and direct them through a website. Make the call to action buttons the biggest, boldest things on the screen. That way no one will miss them.

Use of White Space

The human eye needs a blank space to land, and that’s how the human eye organizes information. White space gives your brain a chance to process what it has seen. Website visitors come to your site to learn about your company. Help them focus on key points with your design. More white space can do that.

Best Practices

Bigger the Type, Bigger the Space.
When you use bigger text sizes in your titles and navigation, increase the amount of space around the text. As type size increases you will want to increase space so lines of text don’t run into each other.
Use white space to organize your content.
Extra space between sections of your webpages make it easy to see where things begin and end. The user will feel like the page is more scan-able because sections and new topics are easy to point out.
Use More Space to focus attention on smaller screen.
Less space means less stuff on the screen at one time. Use the up and down scroll to focus their attention on one item at a time. More control over what content users see in what order. Take this as a design advantage.

How do you prevent these mistakes?

Use your content management system. These issues are exactly why things like WordPress exist. Consistency of design across all pages. If you have many people contributing content to the site, assign someone to make final design decisions. Work with your web developer to set up default styles that can be re-used when new content is posted. Look at the different user roles and decide who should have access to design tools.

To learn more about design standards and see more examples, check out our webinar. “Design Details that Impact Website Performance.”