Key Website Design Principles
Website design can definitely be overwhelming especially if it is not your zone of genius so I want to share some key website design principles that you should follow when creating your website.
Watch the YouTube video here
01. Navigation
First, let's start out with your website navigation. We only have a few moments to capture your visitor's attention, and we want to make it super clear and easy for them to navigate through our website and get to where they want to go.
I've seen that sometimes people really wanna get super cutesy when it comes to some of the headlines and titles that their putting in the navigation but this is not going to help for SEO and tt's going to cause confusion for your visitor so when it comes to the navigation, make sure that you are being super clear with where that link is going to lead them.
Let's walk through a scenario here.
Let's say that you are a coach and you offer five different self-paced courses that someone can purchase from you, but you also offer three different one-on-one services. You might be thinking, how can I set this up in my navigation so that it is not super overwhelming.
So this part is going to depend on the way that your website is designed. So this might be a little bit different depending on the functionality of your website but let's just say in your navigation, you are going to be super clear and you are gonna put self-paced courses. And when someone hovers over self-paced courses, it's now going to have a drop down and show them the five different self-paced courses that you have that they can learn more.
Now let's say you are going to have your other three one-on-one services. Again, we want this to be super clear. So in the navigation we're gonna put one-on-one coaching. This is the part where it depends on how your website is set up, if you only have one page with all of your one-on-one services listed together, then you're just gonna leave that one-on-one coaching as it is, and that's gonna link them then to that services page where they can learn more about each. But, if you're somebody who has each service individually mapped out on different pages on your website, that's when that drop down's gonna come into play, and you are then gonna direct them to those three different offers.
Let's strategically think of this in the eyes of our visitor, of our ideal client, right? Somebody comes to your website and they want to learn about the DIY courses, self-paced courses it's right there. Somebody wants to work with you one-on-one again, you either have them all listed there or you're directing them directly to that page to learn more. It's super clear. They don't have to guess. They don't have to search. it, it's easy, and that's what we want.
Here is an example of what that drop down can look like - when you hover over design services in our navigation this is what you will see.
02. Above the fold and type hierarchy
Next we're gonna talk about above the full design and type hierarchy. Above the fold means as soon as your visitor comes to your website this is what they see before they have to scroll, before they have to do anything. This is immediately what they see when they come to your website. So they're gonna see that navigation that we already covered, right?
But now they're going to see that first statement piece and we want this to be super clear and super easy to understand because again, we only have a couple seconds to grab that visitor's attention.
We want them to know that they are in the right place when they come to our website. This might be different depending on the industry that you are in, but I work with a lot of service-based business owners, so this is kind of directed more towards my service-based people. But if you're in a different industry, it might look a little bit different, but these key principles are something that you should keep in mind for any industry.
I'm gonna use my client's old website as an example. You can see her above the fold.
You can see that it's not very clear what it is that she does and how she's gonna help me. I can see that she's a doctor. Okay, amazing. But how do I know I'm in the right place? I don't know that until I start reading a little bit more in depth. Our visitors want instant gratification. So if they have to search and and read long paragraphs in order to find out if they're even in the right place or not, they're going to leave.
When we approached this website redesign, we wanted to make sure that we were using her type hierarchy and bold, clear statements that were going to let people know that they were in the right space when they landed on her website. We really wanted that above the fold section to shine.
So it's grabbing my attention, right? It's letting me know, yes, this is what I need. This is what I'm here for. I want to learn more. I want to stay here. I want to scroll and see what else I can uncover.
03. Color
Lastly, let's talk about color. Color has a way of making us feel something. There's a such thing as color psychology, so if you're working with a brand designer, they should know about color psychology and they should be choosing colors that are the right fit for your brand. The way that we're using our colors plays a huge role in the way that our website looks.
Colors have a way of making people take a specific action. So if you're not using your colors correctly, then you're doing your website a disservice. Typically when I create my clients' brand color palette, I'm keeping in mind that I want something bold that will stand out this color that I'm going to use to grab people's attention when it comes to call to actions,
Not only do I want to make sure that the colors within the website are within the pallete and on brand but I you also want to make sure that the brand photography is on point as well. So when it comes to using your colors, make sure that you are using colors that have contrast throughout your design. Use an overlay on a picture if you, if you need to, if you're using that as a banner image, make sure that your call to actions are grabbing people's attention, whether that be with a bright color, a bold color, something that's going to stand out and make me want to take.
If you're thinking, well, damn, I have a lot of updates that I need to do on my website. Fear not,
I just launched some Squarespace website templates and they are the bomb.com. I have three different templates to choose from , one for service providers, one for photographers and creatives, and one for my small shop owners.
And these are $199. So if you do not want to go do all this work on your own, if you want something that's already strategically designed for you, then these templates are gonna be for you.