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 Pasting an old, ugly logo onto a new website is like wearing an expensive suit without paying any attention to personal hygiene. 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. Big companies aren’t immune to making terrible mistakes when it comes to branding. Small businesses also suffer from logo problems, especially when owners design the logo themselves. But smaller businesses have the advantage of being able to rebrand faster, at lower cost. 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: Google’s new logo, without serifs, has a more modern look. 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 Business owners often get carried away with adding way too much information to the top navigation bar. 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: The photo on this website is out of focus, low resolution, and unimpressive. This leads to the feeling that the carpentry work itself is unimpressive (even though it might be quite good)! Professional photography makes all the difference in our subconscious decision making about a business. We view this business as more high-end, in part because the website photography was handled professionally. 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 Establish a sense of visual hierarchy by varying the size, colour, contrast, and alignment of website text. Source Image: Visme.co. 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 Establish a sense of visual hierarchy by varying the size, colour, contrast, and alignment of website text. Source Image: Visme.co. 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 Too many options at once can be overwhelming. 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
