A few weeks ago, I offered free website evaluations to members of a Facebook group that I am in. I noticed that most of the websites looked good, but they were missing some essential design elements. A good website design should guide your visitors to the right place. It should be clear what the goal is from quickly looking at your website. A lot of business owners think their website looks good, but is it designed well for it’s users? This post is going to cover a few common design mistakes and also show some good and bad examples of each.
No Contrasting Colors
Are you using the same colors all throughout your website? Are you only using black and white or shades of gray? Keep in mind to feature a bright or different color that makes buttons and headlines stand out more. It’s best to use multiple colors for this, however you can use one color, as long as it has contrasting elements. Our website is a great example of this. We use different shades of teals but use darker or lighter areas to grab the user’s attention. Add a different color or more contrast to the calls-of-actions, such as links, buttons and other areas you want to make people click on. Only pick a few elements to stand out and not the entire website. The design should guide the user’s eye. If there aren’t any areas that pop out to them, the user won’t know where exactly to focus or get overwhelmed trying to look at everything.
Bad Example – Peter’s Portfolio: This all grey homepage looks modern and classy, but nothing stands out. An all black button or more bold headline could be added to make the purpose more clear.
Good Example – Pill Pack: The bright blue elements (buttons, headlines and icons) stand out since the rest is white and gray.
Once someone reaches your web page, do they know what to do next? Every website has a purpose and users need to be reminded of and lead directly to a goal no matter where they are on your website. That means multiple calls to action, at the top and bottom of each page, and on all pages. Also, make sure they are tailored to your customer. The wording of your call-to-action (or CTA) has to be in their favor and benefit them (instead of “Learn More” or “Contact Us”). CTAs are very important to drive in more business and also help your website serve a purpose besides just having an online presence.
Bad Example – Talking Headz: Great colors, but what’s the call-to-action? Their “Book” link is a normal link in their menu when it should be larger, made into a button, or also added to the main banner copy.
Not Designed Well on Mobile
Sure, your website works fine on cell phones, but does it look good? Are the CTAs still showing up where they should be? Is the contact information still visible? If certain elements get hidden or are hard to click, you might want to re-design the mobile version of your website. It should be just as easy (if not easier) to use than the desktop version of your website. Measure how much traffic you get through mobile using a tool such as Google Analytics to learn how much you should prioritize the looks of your mobile website. No matter what, it should still look good and be easy to navigate and use.
Bad Example – Y-Axis: They have a mobile website, but it hasn’t been adjusted at all from the template. The phone number and email are not clickable and the “Learn More” button is microscopic.
Good Example – Urban Air: The menu, “Buy Tickets” and “Book a Party” buttons are clear and large. It also helps to show their hours up front, which is helps answer a common question.
Don’t overwhelm your visitors with too much content. As stated above, your website should have a clear goal and too much copy, image or different sections on one page can confuse your users. Keep the homepage simple and leave the inside pages for explaining the details. If people want more information, they should be able to find it easily and not have to dig through a lot of content on your homepage. Also, don’t be afraid to have the right amount of content. If you don’t have enough copy or images, your visitors will be confused, too, since they won’t know what you do and how you can help them. Make sure to keep things clear and concise while having just the right amount of content.
Good Example – Signature Plumbing: This is only a section of their website, but well organized and summarizes their services very nicely. It’s not too much content and users can learn more if they want to.
No Real Images of Your Product
Only use stock photos for decoration or if they are not the main focus of your page. Don’t use filler photos that look great, but don’t represent your business at all. Also, people can tell when they are not your photos, so it’s best to use authentic photos of your product or your products being used. This helps show exactly what your product is and helps build trust by showing real people using it. It will give a humanly touch to your website and help customers know that your business is legit.
Bad Example – Clean Galaxy: This is a cleaning company located in Delaware. There’s no way their main banner photo is from that area. It’d be much better to use a photo of what they’ve done before in a real location.
Good Example – Katie Dean: Instead of just isolated product photos, there’s photos of someone wearing the product, which makes it more relatable.
I hope you’ve enjoyed these often overlooked design mistakes when it comes to websites. Make sure to keep your website goal-oriented and easy-to-use. Your customers and the success of your business will thank you.
Need help with your website? I offer free website evaluations to give you a few tips and pointers. Contact me with your website link and I’ll be happy to help you out.