Hannah Green is the founder of Do Good Stuff, a web and graphic design business specialised in helping outdoor, adventure and eco companies look great online. By working specifically with outdoor-inspired brands, Hannah hopes to inspire more people to get outside, appreciate our planet, and live more mindfully. In this interview, Hannah shares her top tips on how to design an effective website for your outdoor business.
What are the main elements that need to be considered before even starting the web design process?
The first thing to do is to identify your website’s end goals. Website goals could include selling products or services, generating leads on an email list, giving away a freebie, or even just providing information so that you don’t have to constantly be on the phone answering the same questions over and over again. It’s important to determine what the purpose of your website is because it will influence the choice of software and also the design of the website itself.
The next element to consider is your audience. You need to be clear on who you are trying to attract to your website so that you can create a design that appeals to them.
Then, you need to get super clear on what your business is, what you’re offering, and what your motivation behind your business is. If you’re not clear on this yourself, it will be difficult to make it obvious to your website visitors.
Finally, it’s good to know what keywords you want your website to rank for, so you can incorporate the keywords into your copywriting.
What website design software would you recommend?
My personal preference is WordPress, mainly due to its versatility. But there a number of factors to take into account when your choosing which platform to go with.
If you want to be completely self-sufficient without the help of a web designer and if you want your website to be easy to maintain, then an all-in-one platform like Wix or Squarespace could be a good option. If you want more functionality and more versatile design options then WordPress might be better suited.
Can you give an overview of the main steps involved in building a website using WordPress?
First of all, you need to purchase a domain name and hosting. I use a hosting company called Kualo. It’s powered entirely off green energy, and they also offer free hosting for charities.
Once you’ve got your hosting set up, you need to install WordPress – most hosting companies provide a one-click install of this, and then you’ll be emailed your WordPress log in details. After logging in to the backend of your WordPress website you’ll then be able to pick a “theme”, which is basically a collection of templates that will determine what your website will look like. I generally use a premium theme called Divi. It’s very versatile and if you’re new to web design there are loads of Divi tutorials on YouTube to help you get started.
Once you’ve installed your theme you can upload plugins to add specific functionalities and design features to your site. So for example if you want to sell products on your website, you would install an online shop plugin like WooCommerce.
To make this all a bit easier to understand, I like to use a house analogy. If you compare your website to a house, your domain would be the address, your hosting would be the plot of land that your house is built on, the WordPress software would be your building bricks and the theme would be the interior decoration. Uploading plugins would be like installing an oven in your kitchen so you can cook.
If you decided to use an all-in-one platform like Squarespace, you would just create an account with them, choose the package that best suits your needs, and then buy a domain through them. Your hosting, domain, web building software and themes would all be taken care of, but it would give you slightly less functionality than with WordPress. All-in-one platforms like Squarespace are generally slightly more expensive, but it can be a simpler option for DIYers.
What are some of the most important characteristics of an effective website design?
First of all, it needs to be super easy for visitors to understand what your website is all about and what you’re offering. If people have to hunt for that information, they’ll just leave. A simple trick is to include a bold statement, that makes it clear what you do, above the fold of the website homepage (the “fold” is the space that is visible before you have to scroll).
I would also recommend including compelling, obvious call-to-action buttons that will guide your website visitors where you want to direct them to. So for example if your website’s goal is to sell more products, then your call-to-action buttons would direct visitors straight to your online shop.
Another important element to consider is load speed. Because if your website is too slow, people won’t stick around for long.
Your website also needs to be responsive, which means it should look good when viewed from a desktop, from a tablet or from a mobile. I don’t think there’s anything more annoying than viewing a website on a mobile that’s not mobile responsive and having to zoom in and out and scroll around to find the information you’re looking for.
And finally, your design needs to be pleasing to look at, on-brand and appealing to your target audience, using a combination of imagery and engaging copy. Your design needs to make it easy for your website visitors to find the information they’re looking for. It’s always better to leave plenty of space between the design elements rather than trying to cram a lot of information into each space, cluttered websites are so confusing.
Speaking of being “on-brand” – do you have any tips when it comes to choosing brand colors and typography?
Go minimal would be my biggest tip.
For fonts I usually say no more than three: a logo font, a header font and a body font. They all need to be easy to read. I would never recommend using a script font for your body copy—no one will read it. You also need to make sure your choice of fonts fits your brand and the style you want to convey.
For colours I recommend choosing no more than five. That includes the black and white (or alternatives) for the main background and text, leaving two to three colours used for links, buttons, and for highlighting important statements in your copy.
When it comes to the choice of colours and colour combinations, I like to draw inspiration from nature. This blog post gives more detail on how I use nature to design my website colour palettes.
You mentioned earlier that a faster load speed can help keep visitors on the website for longer. What are some simple techniques to improve website speed?
A big one, especially if you’re using a lot of photography, is to reduce the image size. I use Photoshop to do that. It has a feature that allows you to export images for web and reduce the pixel size. If you don’t have Photoshop there are many other online tools to do that. I usually aim for about 500Kb max for header images and 150-200Kb for product photography and head shots.
I would also recommend using a caching plugin like for example WP Rocket or WP Supercache. A caching plugin cuts out the number of steps a website needs to take to load a page, which can really improve your website speed.
Another easy thing to do to improve website speed is to embed YouTube videos rather them uploading them directly onto your website.
And finally, make sure you keep your design software, theme and plugins up-to-date.
What is SEO, why is it important and how can it be improved?
SEO stands for “Search Engine Optimisation” and it refers to different technics that can be applied to help the pages of your website to rank higher on search engine results pages. It’s a really important aspect to consider for your site because you can have the most beautiful website in the world, but if your SEO is bad you may not get any visitors.
I always recommend using a plugin to help with this, when using WordPress. I use Rankmath, which really simplifies SEO and makes good suggestions on how to improve it. It’s completely free too which is awesome. With Squarespace, there are SEO controls already built-in.
Each page of your website should be optimised for a specific keyword (a word or phrase that your website visitors are likely to enter into search engines). One of your keywords should be your business name, usually for the homepage. It’s amazing how many people forget to rank for their actual business name, imagine googling your business and not coming up in the search results for several pages. Nightmare!