Key elements when designing a website
(Featured Image Credit: Domenico Lioa, Unsplash)
When designing a website, there are certain aspects that can make or break it, and I’m sure you’ve come here with a few questions when it comes to how to actually design your website. Here are a few pointers to ensure you’re well on your way to a great website design:
- Make your offering obvious
It needs to be obvious what you’re about, what you do/sell – don’t make people hunt for that info or you’ll lose them straight away. A bold statement at the top of the page, that grabs your visitors attention, lets them know what you’re about, and keeps them on page, is vital! Also remember, that the homepage might not be the first page that your website visitor lands on, so it’s important to make the area above the fold (the bit of the web page that’s visible before needing to scroll) grabs and holds the attention of your ideal client on every page of your website.
- Bold call to actions
Guide your website visitors through your website using bold call to actions. It needs to be obvious what you want your visitors to do, where you want them to click next. For example, if you’re a shop, direct them straight to your newest/best selling products, if you want to grow an email list, your sign up form needs to be obvious and compelling. Don’t make your visitors return to the main menu every time they want to view a new page, this is like making them hunt for what they want. Use strategically placed call to actions (buttons or links) to guide your visitors towards your website goals – give them options, your primary goal may be to buy the product, but the secondary goal may be to grow your email list with warm leads.
- Clean navigation and contact
- Load speed
If your website is slow, people will go. Simple.
There are several ways you can increase your load speed. Use a caching plugin like WP Rocket or WP Supercache if using WordPress (.org). Optimise your images for the web – you can do this using Adobe Photoshop or online software like TinyPNG. For full width headers, try and get your image less than 500Kb, and for product/smaller images 100-200Kb. If you’re using video on your website, upload it to Youtube as an unlisted video, and then embed it onto your site as this saves a huge amount of space, and therefore load speed on your website. Also make sure you keep the software, themes and plugins on your website up-to-date.
- Optimise for mobile and tablet
Did you know that most people use a mobile to view websites, which is crazy, and quite annoying if we’re honest, given that most websites are designed on a laptop. So you need to be clever with your design, and ensure it is responsive – meaning the layout changes to look good on mobile and tablet. There’s nothing more annoying than viewing a website on mobile and having to scroll around like a maniac and zoom in and out to read things. Both Squarespace and Divi (the theme I use to build WordPress websites) are easy to make your website mobile responsive. You can click a button to view your website as if it were on tablet or mobile, and then make the necessary adjustments to ensure your design looks good on all devices. I’d recommend doing this as you go, as going back through your site and doing it after is time consuming, and it’s easy to miss things, or end up compromising the design of your site when it’s viewed on a desktop. By doing it as you go, you can keep up with it, and figure out what works and doesn’t work as you go, thus saving time, and ending up with a better design across all devices.
- SEO – Search Engine Optimisation
SEO is what helps search engines like Google and Bing, rank your website when someone uses a search term. Each page on your website should be optimised for a specific search term, for example, if you’re an eco clothing company, one such search term could be “environmentally friendly clothing”. Do some research to discover search terms that your ideal client would use on Google, and then incorporate those terms into your website copy (this blog will help you learn about keyword research). It’s particularly handy to have them in your headings. You don’t need to go crazy, stuffing your keywords into your page left right and centre and this is actually bad for SEO, but ensure your keyword appears a few times on the page. When you upload images to your website, add the keyword to the image name, and ensure the image name is relevant to the picture, not just random numbers that your phone or camera generate. Where there’s space to add alt text to your images, I’d recommend doing this too – make it relevant to what is in the image, and perhaps include your keyword in the description. This helps Google use your image in the search results, and can get you website traffic that way. Don’t get too overwhelmed with optimising your site for Google, as it can appear like it’s written for robots and not for humans. My best tip is to write about your keywords, for your ideal client. This way you’ll get a good balance of keywords in your copy, but it will be engaging reading for your client.
Add meta descriptions to your pages too. This is the information that appears when your page appears in a Google Search. You can edit the title and the description – and this is essentially your “pitch” to encourage Google searchers to click on your site, over the others that appear in the list! Incorporate your keywords here too!
- Layout, Imagery and Copy
This is important, it needs to be pleasing to look at. Nice photography, copy and plenty of white space. By white space, I mean space between the elements on your website. It’s not like a magazine or newspaper and you don’t need to cram as much info in the page. Cluttered websites are a massive turn-off, so space things out and add unique design elements. When choosing imagery, keep your target market in mind and choose imagery that will appeal to them. Images capture attention first, so it’s important that these are relevant. When writing your copy, write as if you’re talking to your ideal client and write in your brand voice. Try to avoid large blocks of text, as these are difficult to read – break things up into paragraphs, bullets or lists, use headings wisely and imagery to break things up.
- Colour and Typography
Using your brand elements in your website design helps keep a cohesive look across all your marketing materials and touch-points between your business and your target market. This builds brand recognition, and creates trust. For colours, you’ll probably use black and white, for text and the main background, although some people prefer to use navy/grey and off-white, it depends on what look you’re trying to achieve. Additional colours should be kept to a minimum, and I usually recommend no more than 3. Try and choose colours that compliment each other well, or colours that are total contrasts for a striking look. This blog details how I use nature to inspire my colour palettes. I usually try to pick a bolder colour for buttons/call to actions, and a softer colour to use as backgrounds, borders and small accents. For fonts, minimal is also better. A logo font, header font (this could be the same as your logo font) and body font is sufficient. You can even just use one font if you’d prefer and then play with size and weight for headings. Whatever the case, do not choose a script font as your body font, as it’s too hard to read and will lead to you losing website visitors.
So there you have it, this is a simple guide to some of the key things to bear in mind when designing a website and I hope it’s helped you. My biggest tip is simplicity – trying to cram more and more design features into your website will ruin it!
My final point – enjoy the design process!
Read this blog for a guide on things you need to consider before you start designing!