A businesses website design can affect how visitors perceive its brand, impact user behaviour such as time on site and most importantly conversions.
On a daily basis I audit websites for potential clients and often times hold back from letting them know how I truly feel about the current state of their website.
I’m not saying I’m perfect. If you looked up my very first website you’ll probably which makes no logical sense and breaks more than just the 10 items listed in this article.
That was over 15 years ago, when Yahoo was a major search engine, before smartphones existed and you only developed websites for desktops. Yes, I’m that old.
Since then I’ve created hundreds of websites. As a developer part of your job should be adapt to trends and grow your skills. This way you can provide your clients with quality service that will allow them to gain the competitive edge.
While some of these items might seem minor, when combined they can make a significant difference in your web design’s user experience and overall online success.
1. Not touching up images
Often times I see images being used within website’s design which are WAY too big and should be scaled according to their necessary size.
For example, I’ve come across a website recently which had a favicon that was 3000 pixel-wide high resolution image. If you don’t know what a favicon is, it’s a tiny branded graphic that should be 16×16 pixels that helps users locate your website when they have multiple tabs open. Needless to say, page speed was increased from just resizing this one image.
In a perfect world, all web designers would use the highest resolution images to really make their photos stand out. Unfortunately this can also impact site performance which is why images need to be compressed or saved at a lower resolution. This can drastically reduce image file sizes by more than half without noticeably compromising the image. You can either compress the images in PhotoShop or if your website is developed in WordPress, install an image compression plugin.
Cleaning up logo backgrounds
This might seem pretty specific, but when I see logos used on white backgrounds over-top colored backgrounds this screams either lazy or unprofessional.
It doesn’t take much to remove and save the image with a transparent background or change the background to match the color you’d be placing it over. If its another companies logo you can try searching Google images to see if you can find the logo as a PNG.
Whatever way you choose to fix the issue, adding logos to a site with white backgrounds looks bad unless they are placed within a white area.
3. No favicon
As mentioned previously, favicons are 16×16 icons that represent a website which are displayed in browsers tabs to identify websites easily.
They come in handy if you’re like me and usually have 20 tabs open all the time and need to identify them.
If you have a logo or image you’d like to convert into a favicon (.ico), this can be done by visiting Favicon Generator.
Once your favicon is created and you’d like to assign it to your website you can either upload the .ico file to your /public_html or if you’re using WordPress you may be able to set it through your theme settings.
4. Too much going on, Not enough white space
Using white space within your web design is an effective way to space out elements within a page to make a design look cleaner, balance elements, make content easier to digest and improve user experience.
White space doesn’t need to be white, it can also include different textures, colors, patterns and even images.
Some clients may consider white space the same as wasted space however the numerous benefits certainly say otherwise.
As a web designer its important for you to understand the importance and how to properly apply white space to create a more pleasurable experience for visitors.
5. Poor choice of typography
It boggles my mind when I come to a companies website who is still using serif fonts like Times New Roman and a font size of 10px. This combination is a perfect formula if you’re looking to frustrate visitors and increase your bounce rate.
Fact is, when most visitors come to your website they aren’t particularly interested in graphics as much as the textual content. This is why it’s important to consider the balance of graphics and typography during the web design process.
Typography can add aesthetic value, improve communication while improving user experience. This is why the typography you choose should be a priority as it can impact a websites success.
There are several factors to consider when choosing the right font including: font family, size, kerning, tracking and line spacing.
Some research has shown that San Serif fonts are better for those reading on web especially when reading small fonts.
Font size should also be considered for the aging population and studies have shown that font size 16px is the idea size.
Choose your fonts wisely.
6. Your logo sucks
This might seem like an obvious point to some but seems to sail over the heads of many website and business owners.
There is a method to the madness behind the BBC spending $1.8 million on their logo redesign.
No you don’t need to spend an exorbitant amount of money as you can sometimes modify stock graphics from sites like Envato Elements to suit your needs if you’re starting out and don’t have much of a budget.
A logo can impact how users perceive your brand/website. Having a well-designed logo on your website can impact trust, professionalism and even whether visitors decided to use your services or make a purchase on your website.
7. CTA is not visible
A call-to-action or CTA is an piece of content which is intended to lead a visitor to a specific act. They typically include directives such as call now, buy now, subscribe or contact us.
It’s important to make sure that call-to-actions are visible but not overwhelming within a web design.
Call-to-actions are the first step within a conversion funnel which can lead your visitors to making a purchase, filling out a lead for or subscribing to a newsletter so it’s important to make sure they are visible.
Your website header is always an ideal place to include common CTA’s since they will be visible when visitors first land on a web page within your website.
CTA buttons should be large, use a contrast color that stands out on the page and can be easily spotted by visitors.
8. Too much or too little content
I hate to be cliche as we’ve all heard the overused adage that “content is king”.
Unfortunately this golden rule is often ignored while website owners are scratching their heads wondering why they aren’t ranking for target keywords or getting little traffic.
Content can be used to educate visitors, drive social media and SEO. If you’re content is thin you may want to expend on your web pages to have at least 400 words and blog!
Two driving factors for SEO are quality backlinks and content. By building quality content you not only can increase your chances to rank for new keywords but your website is also more likely to receive backlinks from websites that find your content valuable.
9. Not enough contrast
Color contrast between copy and background is important for enhancing user experience and something that is fairly simple to address. There should a sufficient contrast between text and background for those with visibility issues.
The Accessibility for Ontarian s with Disabilities Act (AODA) was created by the province of Ontario to improve accessibility for those with disabilities. This includes accommodating those with color-blindness.
Everyone sees colours differently but by ignoring color standards you could be missing on a significant portion of the population. 1 in 10 males have limited vision or colour blindness and 1 in 200 women worldwide.
To aid those with visual impairments when it comes to web design, make sure you either use a light background with dark text or dark background with light text.
If you’re unsure about the contrast levels you are using then you can use the following color contrast checker.
10. Hero image is too big
A hero image is the main photo or graphic that is used at the top of a web page. This image is used to grab visitors attention, show them what the site is about and typically include some call-to-action.
When used effectively this piece of real estate on your website can drive conversions but often times is misused in web design.
Common mistakes user make when choosing a hero image for their site include:
i) Choose the right image resolution and size. As mentioned previously it’s important to choose a lower resolution which doesn’t sacrifice quality but also doesn’t impact site performance. As mentioned earlier, the greater the resolution the larger the file size and the larger the file size the longer it takes a web page to load.
You also want to make sure that the image isn’t too much larger than the space it needs to occupy on the page. You don’t need a hero image to be 8,000 pixels wide.
ii) Choose the right photo or graphic. Images used can impact how users perceive your website so you want to make sure you’re image is appealing and relevant.
iii) Keep image above the fold. Above the fold means the portion of the website that is visible without having to scroll. Of course this can vary across different devices and resolutions. The fold area of the website is disputed and ranges from 768-1000 pixels. Be sure not have a hero image that doesn’t push your content below the fold as this can impact your websites SEO.
A study in 2006 by Jakob Nielson found that 77% of visitors who land on a website do not scroll.
By avoiding these common mistakes, you’ll likely see an improvement in user experience, search visibility which will hopefully lead to more conversions.
Have you noticed other mistakes web designers commonly make? Leave a comment below.