6 Secrets to Stress-Free + Successful DIY Web Design
Does this sound familiar? You have no idea what information should go where on your website, what images to use, what pages to include. You start sifting through a sea of images on your computer, flicking through documents trying to figure it all out. Then, you get hugely frustrated with it all and start crying into your 125th cup of coffee. Ugh.
If this sounds like you - then I’m here to tell you you’re not alone in feeling like this! It’s such a common mistake that so many business owners make. And I totally get it. We have all this passion, drive, and motivation to get our websites up and running ASAP, so we can get on and serve as many people as possible and grow our business. In this blog post, we are going to talk about all the secrets you need to know so that you can DIY your website with ease to avoid overwhelm while still making your website stand out.
Map it Out
The key to beating website overwhelm (and saving you loads of time!) is planning out your pages, images, and content first. Yep, before you’ve even set foot onto Squarespace/Shopify/WordPress/Wix or whatever website platform you’re using. If you’ve been following along for a while, you may recall my map analogy to help explain my point here.
Let’s have a quick recap:
Picture the scene…
You’ve booked an amazing holiday somewhere and are planning a few day trips. You get on the plane, reach your destination, then it’s time for your day trip, yay! Now, let me ask you this. In this situation would you:
Research the destination online and Google what the best route would be to get there. Save the directions on your phone. Maybe have a quick check of prices, opening times for some of the places you want to visit and check whether you need to book ahead for anything.
Or would you…
Not do any of this, head right out the door of your hotel into a city where you’ve never been in your life before and blindly try to wing it and reach your destination.
Well, I know which one I would choose! Yeah sure, you could try and wing it, ask a few of the locals for directions, and hope they know the way. But, I’m willing to bet it would take you a whole lot more time, effort, and energy to get to your destination via option b rather than just doing a bit of pre-planning via option a.
The same goes for your website! If you take some time to plan out each page, the key information you want to include, what items you want in your main navigation, and what images you are going to use, then you’re going to make your life a whole lot easier.
I know how tempting it can be to just jump right in so you can get your site out to the world and launched as quickly as possible. In your head, the process might go a little like this:
Sign up for your website platform
Buy your domain
Pick a template
Create a website ASAP
Launch within a matter of days
Watch the customers roll in
Well, in reality, it’s probably going to look a bit more like...
Sign up for your website platform
Buy your domain
Pick a template
Stare blankly at your computer screen for hours wondering what you’re supposed to do next
Distract yourself with dog videos on Youtube
Put off creating your new site for months (maybe even years)
Eventually, launch a site that you know could look better
Spend endless hours re-doing your website every two weeks
Yell at the Internet
Unfortunately, the reality is that after you’ve picked your template, you’re faced with an empty website, wondering what the hell to do next! To help you figure out your next step, let’s move onto what you can do to make the process of DIYing your site a bit easier.
Create Website Goals
Before you start to do any form of planning for your website, the most important question you need to ask yourself is this:
“What do I want my website to do?”
Think about the answer to this question in its simplest form. I’m willing to bet you want your website to do two main things: get more leads and make more sales. Now that you’ve got clear on what you want your website to do, think about how your website visitors could become a lead or purchase from you. Ask yourself this question:
“If your dream customer landed on your site right now and could only take one action - what would you want them to do?”
Maybe it’s booking a call, purchasing a product, filling out your enquiry form, or signing up to your email list. Whatever the action is, make sure it’s something that turns your visitor into a lead or paying customer.
Now that you have got clear on what you want your website to do and how you’re going to turn your visitors into leads and customers, you can use this simple information as a guide for planning the rest of the content on your website. To create a website that converts as many visitors into leads or customers as possible, ensure all content on your site helps guide your visitor to the ultimate goal. Whatever doesn’t accelerate or move your lead forward in this process can go!
There are a few things that are non-negotiables in helping your visitors take that next step. Let’s talk about 6 different key aspects of your website that you can strategically include to help you do this!
1 | Keywords
Keywords are single words or phrases that are picked up by search engines that help rank your site when a dream client comes surfing through the waves of the internet looking for a business like yours.
You can improve your search results by asking yourself “If someone wanted to search for a business like yours online, what would they type into Google?” Do some research using Google and Pinterest and write down the key search terms you want to rank for on search engines. SEO (search engine optimisation) can seem extremely overwhelming, but if you can list out a few keywords that you think your potential customers will be typing into Google and plug them in across your website, then you’ll be giving yourself a huge head start when it comes to effortlessly attracting customers on autopilot! Use these keywords across your…
Headings
Image names
Meta tags
Page content
Blog posts
The goal is to scatter them throughout your website content in a natural way rather than making it obvious that you’re desperate to show up in search engine results. If this is already making your head spin, then worry no more! Let’s move on to the next essential element to plan for and include on your website.
2 | User Journey
You may have heard the term ‘user journey’ a fair amount of times when researching web design, and it probably sounds pretty daunting, right?! Well, I’m here to lay out the basic principles when it comes to the user journey.
When it comes down to it, it’s all about creating a smooth, seamless, and straightforward experience for all website visitors. Contrary to popular opinion, user experience doesn’t have to be super technical! You want to be intentional about the layout of your website so you can guide each visitor down the correct path to your ultimate goal. All it takes is a bit of pre-planning and consideration. Think ahead and map out their journey for them - starting with where they’re coming from (social media, search engine, etc.), what page they will land on, and what order they will look at each page in to reach your website goal.
Now, grab a pen and paper and write down these things:
What does your dream client need to know before they buy from you?
What order would they need to consume all of your content in so they meet the end goal?
What pages will they need to read through to get all the info they need before making the final decision?
Next, write down the route you want your dream customer to take:
For example, I can expect someone who lands on my website to take the following journey between my website pages... Home > About>Portfolio>Services>Contact
Pro tip - this is also a great way to decide on how to layout your navigation tabs so that you can make this journey as easy as possible for potential clients!
3 | Menu
Also known as your ‘navigation’, your menu sits at the top of each website page and acts as a roadmap to guide your visitors to the most important areas of your site. Here’s mine for reference!
I see a lot of websites with everything and the kitchen sink crammed into their main navigation. This can be problematic because it creates confusion and frustration for your ideal clients as they try to make a decision. Imagine going to a restaurant and having to look through 20 pages of choices to pick out what you want for dinner. That would be too overwhelming! In the same way, a cluttered website menu can make a visitor close the tab instead of making a choice!
When I work with my brand and web design clients, I always recommend keeping things super clear and only including between 4-6 items in your main menu. These 4-6 items should link to key pages that take your visitors on the next step in their journey. These typically include pages such as:
Services
Packages
Pricing
About
Portfolio
Shop
Contact
Book a call
I’m all for adding in a sprinkle of personality and fun to the words on your website, but your menus are not the time to do this! Choose clear over clever, always! If your dream client could take just one action on your website, what would it be? Booking a call? Purchasing a package? Make sure that action is the last item on your menu. Bonus points if you highlight it or make it a button (like the example shown above).
ACTION STEP:
Review your menu items - are there more than 7 choices? If so, re-evaluate which items help guide visitors to take that main action. Consider removing some of the other items to the footer, or linking to them on other relevant pages.
4 | Pages
Now it’s time to list out all of the pages that you’ll need on your website! This includes your main menu pages, as well as other secondary pages (also known as ‘unlinked’ pages). These secondary pages will not be listed in your menu but will be featured on other parts of your site, whether that’s in the footer, linked from other pages, or just useful standalone pages (newsletter sign-ups or social media links are great options!).
5 | Footer
Once you’ve listed out all the pages you need on your website, decide which of these items will be included in your footer. You may also wish to include some additional items in your footer such as social media links, sign up forms, business info, and search bars.
Research the laws in your country on other required parts of your website. This could mean a privacy policy, disclaimer, terms & conditions, your location, and other essential elements to keep your website legal!
You can check out an example of my website footer below (or just scroll to the bottom of this post to see it live in action!
6 | Page Content
So, you’ve listed out all the pages you need on your website. Now, it’s time to plan out the content for each of them. This may seem like a daunting task, but it’s going to make your life so much easier when you finally get to create your website. I’ll walk you through some of my top tips for breaking down the content planning process so it all feels a bit less daunting.
When it comes to planning out your page content, here are the key things to focus on:
Words
Calls to Action (CTAs)
Images & Graphics
Layout
Let’s break these down:
1. Words
Start by writing down the main goal for your page. Think about the main action you think a visitor would need to take from this page in order to reach your ultimate website goal (aka - move them closer to becoming a lead or purchasing from you). What is the key information you need to include on this page to help them do this? This can be the headline for your page.
Next, think about the key information you need to cover and break it down into sections. Now that you’ve got your headline and sections, start to write the copy for each of these sections. Always try to keep your words short, sweet, and to the point. Try adding bullet points, images, titles, or icons to help break up the content and make it easier to digest for the reader. While a website should be visually appealing, it’s ultimately the words on each page that will help them decide what to do next. Present the information in an attractive way, keep it witty and unique, but make it easy to understand so that when they’re ready to take the next step, it feels natural and easy.
2. Call to Action
It’s really important to ask your audience to take at least one action on each page of your website. This is known as a ‘call to action’ or CTA in designer lingo! These are usually displayed as a highlighted link or a button. Write down the CTA text you would like to include for each page on your website. Make sure the text is super clear and easy to understand. Don’t be afraid to use more than one button, but try to keep the messaging the same so your lead isn’t confused.
Some example of CTAs could be:
Get to know me
View the services
Book a call
View the product range
Get in touch
Here are a few CTA buttons in action on my website:
Including a call to action on each page of your site will help to strategically guide your visitors closer towards your website goal, as well as encourage them to stick around on your website for longer, which can have even more benefits than you may realise!
3. Fonts & Colours
Fonts and colours help bring your brand to life and give your business a personality! Always choose readability and ease of use over what’s trending or attractive. A site that performs well is one with a timeless design. To achieve this, go with your gut when picking fonts, but don’t compromise usability for the sake of some pretty letters. Here are some general guiding principles that can help you as you pick fonts and colours.
Pick 1-2 fonts and stick with them! (perhaps a third for an accent font but no more than that.)
Utilise your H1, H2, H3, and paragraph styles to break up text and keep things looking consistent.
If you need some inspiration, take a look at Pinterest. If you have access to Canva, they have a great font selection and colour palette feature which can be helpful.
List out the kind of mood/feeling you want your website to evoke when visitors are on your site. What colours do you think will represent that? Research colour psychology so you can understand what colours will work best for your brand.
Create a Pinterest mood board with various choices. Come back to it a day or two later and write down your first impressions or the vibe it gives off. Compare this list to the one you created in the last step. Do they align? Or do you need to refine your choices a bit more?
I love using Coolors to get some colour palette inspiration - you can upload images and pick colours directly from them which can be really effective and helpful!
Let’s Get Started!
Whew, now you’re all ready to get started! It’s a bit fun, don’t you think?! Well, if you are still on the fence about how much you’ll enjoy this whole process, then there are a few solutions I have for you!
Stand Out Squarespace Templates: Designed by yours truly, these templates aren’t exactly DIY but aren’t the same as a completely custom site. They’ll save you the headache and keep some extra cash in your bank account! Head on over to Creative Market to check them out (plus other goodies)! 👇
Custom Website Design: If you have a vision that a DIYed or templated site can’t bring to life, then consider working with a website designer or developer to build you the site of your dreams. While this is the priciest option, it means that you will save tonnes of time and be able to relax a bit more throughout the process. Check out my web design services here!
Whatever option you choose, I’m here to support you! If you’re a bit stuck on what’s the best option for you, check out my other blog post “Should I DIY my website or hire a professional?”. Always feel free to contact me with any questions you have about building a website or working with a designer.
Happy website planning!
Wait! I have something for you before you go! If you’re struggling to connect with your dream clients or unsure of what to put where on your website, I have a free anatomy of a dream client converting homepage guide that you can grab right now!
Did you like this post? Then pin it to Pinterest! 👇