Web design mistakes are easy to make. This is because we tend to act instinctively when making decisions. And while these instincts might serve us well in other areas of business, human instinct seems to lead us astray when making design decisions.

Developing a good sense of design is a gradual process of paring away these bad design impulses. Once we know what not to do, we’re more able to make better design decisions.

After reading this post, you will know how to identify 5 common web design mistakes on your website. Fixing these issues will lead to a more positive experience for your visitors, and happier visitors are more likely to convert into sales!

Here are my top 5 web design mistakes to avoid:

Rebuilding The Website Without Considering Logo and Branding

 

Logos and branding are critical for establishing trust from the very first moment a visitor arrives on your website. Your logo, colour and font choices are the hints visitors will use to guess at what your business is all about.

Out of all the judgements your visitors are making, trust is the one you want to pay closest attention to.

Does your logo and branding inspire trust? Or does it turn people off?

If you’re an online business, you need to win people over without any face-to-face interaction. Even if you have a physical space, you’re very likely to be discovered online first, and everything about your brand and that online experience needs to inspire trust.

Jeilan Devanesan, Logo Psychology: How To Design Logos that Inspire Trust

No matter how good your web designer is, she won’t be able to make your website look presentable if your logo isn’t up to par.

 

Of all the web design mistakes covered in this article, inadequate branding is one of the most difficult to overcome.

Business owners tend to be very fond of their logos. The longer a business has had a logo, the more challenging it can be to consider revisiting it. But quite often that’s exactly what’s needed.

If your logo looks out of date, potential customers will make subconscious assumptions that your business is also out of date. This is when a logo redesign is worth considering.

Don’t worry – logo redesigns are rarely drastic. The purpose of a logo redesign is to freshen up the look of your branding while retaining brand recognition.

Consider the subtle difference between Google’s old logo, and their new one:

 

Simply switching from a serif font to a sans-serif font, while keeping the tilted “e” and colour sequence, achieves a modern look without sacrificing brand recognition.

Cluttering The Top Navigation Area

 

Try to avoid the temptation of adding too much info to the top navigation bar. That top bar shouldn’t be very tall. The taller it is, the more of your content it either covers up, or pushes down the page.

Keeping that top navigation area mostly clear not only looks way better, but helps visitors find and interact with your menu links.

If your logo is too large, this top bar will have to expand to contain it. As a general guideline, the logo shouldn’t force the top navigation to expand vertically beyond 100 pixels. Any larger, and you’re using up valuable screen space, hindering the user experience.

Beyond the first impression, the logo is best tucked into the top left corner as a permanent link back to the homepage. If the logo is too big, it may cause the top navigation area to cover up too much of your website’s content.

Shoot for a logo that is about 70 pixels high. At this height, you will still have room in your top navigation bar to leave space (called “margin”) above and below your logo.

Featuring Low Quality Photos is a Common Web Design Mistake

The quality of your website’s photos plays a large role in how professional your website will appear to others.

Take a look at the two carpentry websites below, and notice how you feel about each website. What are you using to make judgements about each website? If you’re like me, you quickly notice that one website has far nicer photography than the other:

 

 

If your budget allows, hire a professional photographer to take photos for your website. If hiring a photographer is out of the question, don’t worry. Modern smartphones also make it possible for you to capture high quality photography yourself. You just need to know a few basics about taking photos.

Here are a few tips for capturing photos for your website:

1. Take Photos in Landscape Orientation

Most layouts rely upon images that are wider than they are tall – also referred to as having “landscape” orientation. Conversely, photos that are taller than they are wide have “portrait” orientation.

Whether supplying images to your web designer or adding images to your own website, everyone will be happier working with “landscape” oriented photos.

When cropping images for use on the website, it’s usually easier to start from landscape orientation than portrait.

A typical web design mistake is adding a large, portrait-orientated image to a page. This pushes the rest of the content way down the page, forcing the user to scroll to find it.

2. Consider Lighting Conditions

 

When taking pictures, professional photographers are keenly aware of lighting conditions. They know how to adjust their equipment to produce the best results based on the light available.

You and I lack this level of sophistication, and yet can still get pretty good results by doing the following:

• Take photos closer to dawn and dusk, when there is more ambient light bouncing around. Avoid taking photos in direct sunlight, the contrast is usually too intense.
• Position yourself between the light source and your subject. Taking photos with the light coming from behind your subject results in silhouettes. Under backlit lighting, the subject can lose a great deal of detail.
• Avoid the flash setting. If it’s so dark that your phone or camera needs to use the built-in flash setting, the photos will probably be pretty bad.

3. Compose Your Shots

I’ve heard photographers say, “You don’t need a longer lens, you need to get closer.”

This is so true 99% of the time anyone takes a photo. The best photos have a sense of intimacy because there’s a subject in focus, and the background is blurry.

When lining up the picture, try to create a focal point. Get close enough that the only thing in focus is the thing you want people to look at. This will produce more captivating imagery for your website.

An Unclear Hierarchy of Information is a Common Web Design Mistake

 

Have you ever arrived on a website and instantly felt overwhelmed at the massive amount of text, images, and links on the homepage?

If so, you know what it feels like to interact with a website without a clear hierarchy of information.

Establishing an “order” to how you want your website content to be discovered helps users know what to look at first. This creates clear paths through your website and makes visitors more likely to find what they came for. They will also be happier to spend longer on each page, which is helpful for SEO.

Here are a set of tips for giving more visual hierarchy to your website content:

• Use headings to break up sections of information. Large, clear titles allow users to quickly navigate to the parts of your page they’re most interested in.
• Try to limit the number of bright colours on your website, and reserve using those colours for “action” items like buttons and links.
• Use bold, underlined and italicized text sparingly.
• Limit the number of exclamation marks you use to one per page! Or avoid them entirely.
• Make sure your design features plenty of white space. Avoid the temptation of filling all visible space on the page.

Over-stuffing the Navigation Menu

 

Have you ever been to an all-you can eat buffet? If so, you know what it’s like to have every option available at the same time.

If you’re like me, you try to fit one of every item onto your plate. With such a full plate, I end up eating way more than I should. Then I feel uncomfortable.

A similar scenario unfolds when we make this mistake in web design. By overstuffing the navigation menu, we’re saying, “here’s every possible option, you decide.”

The cognitive burden of sifting through all of your website content can overwhelm your visitors.

A better approach is to curate your information for specific users. This starts with knowing what types of visitors are coming to your website. Then you figure out what information they’re looking for.

Once you have this knowledge, you can design better experiences for these specific users.

Having Too Much Text, at Too High a Reading Level

via GIPHY

The most effective website text is clear and direct. In web design, it’s typically a mistake to use language that is beyond an 8th grade reading level.

It’s not that your visitors won’t be able to understand the text. It’s that you’re making it harder for them to digest your message.

When writing copy for your website, ask yourself whether a child would understand it. If not, you can probably afford to simplify your language. People like to be able to quickly scan blocks of writing.

If your writing isn’t simple enough to understand at a glance, or if paragraphs are too long, you run the risk of visitors not bothering to read your text at all.

Conclusion

Web design mistakes are easy to make, because human instinct tends to run counter to good design. Good web design is a process of learning what not to do, and producing websites that don’t violate basic design principles.

No matter how talented a web designer is, she can’t do much to overcome ugly branding and low-quality photos. Considering a rebranding, and providing high-quality photos go a long way to making a website look professional.

Organizing your website’s information into a hierarchy helps create a satisfying sense of order. Avoid creating too many points of emphasis. Make it easy for the user to know what action to take by reserving bright colours for links and buttons.

Large paragraphs are intimidating, so break them up and use more white space.

Try not to write text that’s too technical or complex. The text on your website should be clear and simple enough for a child to understand.

Listen in Podcast Format