The design of your website is massively important to how you’re perceived as a business on the internet. So it’s really, really important you get it right.
Hey everyone, I’m Kelly, and today I’m going to show you how you can improve your website design. If you implement just one of the suggestions that I make in this video, then you’re going to improve the look of your website instantly.
So if you’re ready to improve the design of your website, then keep watching. I’ve also got a free PDF workbook which I will share the link to at the end of the video, which will help you in your website redesign. Okay, let’s get started.
1. Grid
The first thing is that you should use is a grid, so if you were to look at your website and you were to scroll up and down, you should see a pattern to the layout. What you don’t want is text in this section here. And then the next section, the text is out here and then it gets smaller again, and it’s all different sizes.
Imagine if you read a paragraph of text like that on a Word document, if someone had used different widths, it would look really strange, wouldn’t it, and it’s exactly the same on a website? If you think of your website as a grid and stick to that, and keep the content size the same. That doesn’t mean you have to keep the images within that content. You could have a full-width image that goes right to the edge of the screen or some colour that goes right to the edge of the screen, and that is perfectly fine, but what you want to do is [ensure] the content within there is within a grid. As I said before, you scroll up and down and you can see it all in a grid there.
2. Large Images
I love the look of large images that fill the screen. It’s quite a modern look, and they say that a picture tells a thousand words, and a large, full-screen picture that’s really on brand and gives a good message is going to go a long way on your website design. In that vein, try not to use stock photography. I appreciate if you’ve got a brand new site, or you’re just getting started, then stock photography is cheap and it’s easy and quick to implement, but if you think that the eventual goal is to get rid of all the stock photography from your site and have real on-brand images, perhaps taken by a brand photographer, so you’re conveying your brand message all the way through.
3. Be Consistent with your Colours
With colours, if you’ve got a brand and you’ve got a style guide, which has got all your colours mapped out, that’s fabulous – make sure you use them and don’t just think, “Oh, that’s nearly right”. Make sure you use the exact colours you’ve got on your style guide and be consistent with that. If you don’t have one and you’re looking to find some for your website, then I’d say don’t use more than three and choose one that’s going to be dominant and one that’s going to be an accent, which would be a brighter colour.
Say you chose a red, or an orange, or a yellow, then that could be an accent colour. That would be great on a button but might not look so good as the background for a big chunk of text, so just think carefully. Also think about the contrast, for example, if you have a white background with black text, that’s going to be really easy to read. If you have a pink background with dark pink text, then that might be difficult, and that’s not good for accessibility, so just consider that as you go through as well.
One key tip I would give you is to avoid blacks. Most businesses can’t get away with black as a colour. I know that sounds silly because it’s a neutral and it’s just plain, but it’s so harsh. It’s great for a real luxury business, but if that is not you, say, for example, you’re a dog trainer, you’re using black and you’re not a luxury dog trainer, it won’t really work. Whereas, a dark brown or a dark green or a grey (a really dark grey) would work much better.
4. Be Consistent with your Fonts
As I said before if you’ve got a style guide, that’s so easy, just use the fonts you have been given, but if you haven’t, make sure you’re only using three fonts maximum on your website.
If you’re unsure about fonts, just choose one, one that works really well for your brand, and make sure the text is legible and large enough to see.
5. Use Video
Videos show your brand ethos and it will make people trust you more. Remember, people buy from people, so try to use videos where you can.
6. Visual Hierarchy
Now this one might sound a little complicated. It’s ‘Visual Hierarchy’, which sounds very technical, but it isn’t. It’s basically the arrangement of elements on the screen, and you arrange them in order of importance. So if something’s really important, then make it a big font. You want someone to subscribe to your newsletter, put ‘subscribe to newsletter’ in a big font. If that was a tiny little font, people might not notice it as they’re skim-reading down your site, which they inevitably will do.
The point of visual hierarchy is to establish a focal point as well. It shows the visitors where the most important information is, and you want to make it as easy as possible for your visitor.
7. Repetition
Throughout your website, if you try to repeat layouts, then it’s going to be a lot easier on the eye of the user – as they scroll down, they will be seeing things they recognise. It’s not like one page looks like this and the other page looks totally different and they don’t feel related – that doesn’t produce a cohesive website.
Doing these layouts, you could then replicate that on Facebook or on other social media platforms, and it allows visitors to easily recognize your brand.
8. Clarity and Simplicity
I think the key thing about website design is to keep it simple, especially at the moment there is a trend for lots of white space, lots of space around your elements. Keep that space symmetrical and it will give a sense of clarity and simplicity. Everything you do on all your pages should have a purpose, so anything that’s not needed, just get rid of it, keep it really, really simple.
As I mentioned before, positioning your content within a grid will make it feel more thoughtful and will make it easier for the eye of your visitor.
9. White Space
White space is super important, and if you look at all the websites you like, the reason you probably like them is the white space. White space doesn’t have to be white, it could be a background image, it could be a texture or a colour, but it’s the space around it.
When you see a quote and it’s in the middle and you’ve got all the space around it, that’s what makes it beautiful, that’s what makes it easy on the eye, that’s what draws your eye into the quote, or whatever it is you’re looking at. So by giving each of your sections white space, you’re allowing your website to breathe, and then you can draw attention to the areas you want them to look at.
10. Optimise your website for mobile
And number 10, the final one, you must make sure that your website is optimised for mobile. Over the past couple of years, mobile usage (on a tablet or a mobile phone), has just gone up and up and it’s not going to stop, so you have to ensure your website is accessible on a mobile.
I know for a fact that if I get to a website on my mobile and it’s tricky, and I’ve got to resize it, or I’m trying to find the ‘buy it’ button, I’m just going to leave. Also, search engines are now penalizing people if they don’t have a mobile-friendly website, so it’s super important that you make sure it’s mobile-friendly.
[You can achieve this by] using a tool like Elementor, a page builder, which allows you to look at the view and how your website looks for different devices (how it looks on a tablet and how it looks on a mobile), which is going to make your life so much easier, and it’s super important, so don’t underestimate it.
I know I’ve given you tons of information there and I hope it’s been useful. I’ve created another video, which is all about optimising your website for conversions, which goes hand-in-hand with this one because obviously you’ve got to look at your conversions and your design to make a successful website. I’ve also created a free PDF workbook for you, so if you’re thinking of redesigning your website, then I recommend you download that because it’s going to help you no end. Click here to access your freebie.
