First impressions matter, obviously. Your business’s website should be a prime example of that. In many cases, it’s the face of your business, and who wants to look at a twisted, “Hunchback of Notre Dame” looking website when they’re just trying to order some new brakes for their car online?
The problem is that a website’s first impression can be a lot more nuanced than simply being hidious. Avoiding big, flashing, red and yellow buttons that say “Congratulations you’ve won!” isn’t the only thing to avoid anymore. So, without further ado, let’s go through it.
1. Navigation
Even in 2023, your average online user is not a tech savvy wizard. An issue I’ve experienced a few too many times to count, is when a page is either buried beneath 3 layers of nonsensical categories, doesn’t exist in the navigation menu, or is only accessible via a buggy internal search of the website.
How do we avoid these issues? Assume not every user is familiar with the specific terminology your business uses when categorising products, use simple labels, and make sure to add an easily accessible link to the important pages somewhere in your navigation menu.
2. Colours & Fonts
I’m sure we’re all familiar with the term “Corporate Identity”. For those who aren’t, it’s the set of rules and guidelines, usually put together by a graphic designer, fully detailing how the branding of the company should look. Having a CI on hand helps tremendously when designing a website, as you should know at a glance, what colours and fonts to use and avoid. Sometimes however, we don’t have a CI. That’s okay too, it gives us a chance to determine our own, just for the website.
Let’s start with colours, and determine what the main colour of the site should be. This isn’t usually your page background colour, but rather the colour of elements such as buttons, borders and other “flairs” throughout the site. From there, let’s establish two more light and dark colours, that can be used for things like hover effects on links and backgrounds of minor elements. I sometimes like to use a light and dark version of the main website colour itself. Finally, we should have a couple of neutral colours, like some variation of black, grey or white. These can be used for fonts, headings and page backgrounds. All in all, we should consider a maximum of around 4 or 5 colours on the site, with a strict sense of where each of them will be used. Obviously this is just one way of approaching colours, and many websites have a different approach, but I do think it’s a good place to start, if you’re not sure.
In terms of fonts, the same principles can be used. We should figure out what sort of font the majority of our “reading material” will be using, and stick to that. I’d recommend something easily legible, not too curly, bold or thin. In this case, boring and predictable isn’t necessarily a bad thing. In a lot of cases, you’ll use this same font for your navigation and buttons too. Next will be your headings. We can go a bit fancier with these, but I do recommend still keeping it legible. Can you read it at a normal size, without squinting? All in all, I’d recommend using a maximum of 2 or 3 different fonts on the website.
3. Loading Speed
This one is a little trickier. Basically, you want to avoid your website taking ages to load. If you’re using WordPress, there are a bunch of plugins that you can use to improve the speed of your site. However, even if you’re not, you can focus on a few things. Make sure your images are compressed, using tools such as tinyPNG or Imagify. Make sure your CSS and Javascript is compressed, using a tool such as minifier.org. There are a bunch of smaller things like server choice, expiration times and preloading assets, which I recommend doing some further research on too, but you should be off to a good start compressing those images and scripts. When it comes to loading times, smaller files are always better.
4. Mobile Responsiveness
In 2023, the majority of web users are on their phones. Designing a website that looks good on mobile devices used to be an afterthought, but today it should be one of the main things you focus on. You need to make sure that all the important elements on your site, contact forms, headings and text are visible and legible on mobile devices. Make sure the spacing between elements is standardised, that buttons can be clicked on, and the mobile menu works as expected. The “hamburger menu” is a fairly common way to present your navigation to mobile users these days, and most people know what it does now, I’d recommend sticking to that for your mobile navigation.
It’s also important to remember that some elements that look cool on desktop may not necessarily translate to mobile automatically. Autoplaying videos, horizontally tabbed elements and fancy parallaxes don’t always work on phones, so you should consider whether they’re essential, and how you can present that information in an equally useful way to mobile users.
5. Image Quality
This is an easy one to avoid. Never stretch your images. Make sure they’re a good resolution, that they don’t look blurry, and that they accurately portray the content they’re representing. If you’re creating columns of content next to each other, each containing an image, try make sure the images are all the same aspect ratio. This will help avoid having columns of different heights next to each other, which can sometimes look messy.
Conclusion
All in all, there are thousands of things you could do to avoid making a bad first impression with your website, however this list should hopefully set you on the right path. If you’re not sure about anything, or would rather hire a website designer in South Africa, please do feel free to give us a shout!
