Rather listen? Click the play button below to listen on Spotify.
Hey there!
Welcome again to the Intentional Branding Podcast. If this is your first episode happy you could join us. Today, we're talking about creating an outstanding well-designed website that will make your visitors go "Wow!".
This is a great episode if you are a DIY web designer for your business and you're looking for tips to clean up the design of your website. Let's dive in.
1. Keep your homepage clean and uncluttered.
First things first, let's talk about your homepage. Keep it minimalistic and free of clutter. You don't want to overwhelm your visitors with a bunch of unnecessary information. When it comes to putting copy on your website less is always more. Bullet points are your friends.
When it comes to putting in extra graphics and doodads. Make sure that every element is there for a reason. So maybe you're putting a branded graphic, like a flower, into your website design because you need to balance the design.
Get rid of elements that are there just to fill up space. This empty space is called white space in design and it's actually necessary to give your eyes a visual break while looking at a design so you're not completely overwhelmed.
2. Use visual hierarchy to guide users through your design.
Next up, visual hierarchy. This is the order in which your audience perceives and processes information.
A really simple way to use visual hierarchy is text hierarchy. The headers on your webpage should be the largest font size let's say it's 25 points. Your header should be readable at a glance and descriptive so that people can quickly scan your webpage and get the details they need without reading the subhead or supporting text. Some headlines from my website are A brand that captures the story of your passion. A Cozy, Warm, and Welcoming Website. Design Your Logo and Create Your Brand in just 5 days.
Then the subhead further explains the header in a little bit more detail and is the second largest want on the page let's say 20 point and then the copy is the descriptive paragraph that is the smallest font size on the page let's say 12 point.
Here is a full example:
The first thing someone will read is the Header: How it Works
Then they will scan the Subhead: Contract & Retainer
And if they choose to read the details they will read the Paragraph Copy: The very first thing you’ll receive is your contract and retainer invoice. Once you’ve signed and paid, you’ll fill out my custom website assessment so I know exactly what kind of website you’re looking for.
You can also use design elements like color, and layout to create a visual hierarchy that guides your audience's attention. You can highlight important information with color or bright call-to-action buttons and you can make things stick out through contrasting elements like using a solid box to place text on that's on top of a photograph.
3. Make your website content easy to read and understand.
Website content is anything you put on your website, including photos, copy, and branded graphics.
When creating copy for your website make sure that you are using bullet points when you can and that your headings and subheads are scannable and digestible. Don't forget about whitespace make sure that your content has room to breathe so it's easier to read. Give plenty of space between your images, graphics, and copy. If you choose to have text inside of a box make sure that there's the proper margin between the edge of the box and the text maybe a little less than a quarter of an inch. This makes your content look more professional and gives off a high-quality feel.
If you plan to place text on top of a photo make sure that there's proper contrast so that the text can be read. For example, you don't want to have black-colored text on top of the darkest part of the image it will be too hard to read. Either place the text on the lightest part of the image or change the text color to white. Also, make sure that the image isn't too busy and that there is an empty space in the image. So this means that maybe there is a person on the left-hand side of the image leaving empty space on the right side, place the text on the right side instead of placing it too close or on top of the person. To clarify by empty space I don't mean it's literally empty and there's no background but I mean that if it's just a field of grass or maybe the background is out of focus then that's a perfect place to put your text because there's not a lot of visual clutter that is going to muddy the text when it's laid on top of the image.
4. Make sure your website is optimized for mobile devices.
Now, let's talk about mobile-friendly design. More and more people are using their phones to browse the internet. So we have to make sure your website is optimized for mobile viewing. Use responsive design to ensure your website looks great on all devices, from desktops to smartphones. Test your website on different devices and screen sizes to ensure a seamless user experience.
Depending on what website builder you use some are really good and automatically create a functional and attractive mobile site, I would say Squarespace has good capabilities. I find that these website builders give you less room to edit the mobile site to your liking but you will save time on editing the mobile version.
For website builders that aren't as good at automatically creating a mobile site like Wix for example you will need to rebuild the mobile version. This is fine because you are able to go in there and adjust everything on your mobile site as you please since there's more flexibility for editing on their platform.
No matter what website platform you are using do make sure that you physically check the design on your phone or your iPad that way you can get the full experience. It's easy to miss details and the proper sizing of your content if you only depend on the website editor version of your mobile site.
Some quick tips that I have for a mobile-friendly site are to make sure that you are keeping a proper margin between your content and the left and right margins of your mobile site. You just don't want the text to be cut off by the sides. Or important parts of your photos, like your face, for that matter as well.
I also want you to double-check the size of your text to make sure it's not too big or too small The right font size can vary from font to font so I'm not gonna give you a specific font size to use but I think 15px is a good starting point.
Be sure to hide elements that make no sense on mobile things like extra doodads or extra graphics because you want the mobile site to be straight to the point. Note that the reason I say 'hide' is because the mobile version is based on the desktop version so if you do want to completely delete something you have to delete it from the desktop version but you are able to hide things on your mobile version so they don't show up.
5. Make sure you keep a consistent style throughout the website.
And finally, consistency is key. We have talked about branding in more detail in episode one and the importance of having a consistent brand. So let's go into detail about how to implement your brand style into your website.
Make sure to use a consistent color palette, typography, and imagery throughout your website. If you happen to have a really dark or super bold color palette then use a lighter shade of your color so that you are still using that consistent color palette and don't be afraid to keep reusing colors.
If you look at my website I use a lighter shade of my signature blue color for the sections of my backgrounds. I also use my marble texture for backgrounds to make sure I have clear sections so my whole website isn't blue and I repeat that consistently throughout my website as well.
For the colored box that I use underneath my headers, I always use my signature blue with my header font in white.
It may sound boring to keep using the same design styling over and over again and you may think that you need to spice it up but there's no need. Remember consistency is key when it comes to brand design and brand recognition.
Another tip is to make sure your website's buttons are all in the same style to create a sense of familiarity and unity. Again this does not make a website boring it makes it easier to navigate so people know what to expect from your buttons and they don't have to think twice. They know exactly where to press when they are on your website.
When it comes to adding photos to your website I like to think of photos as a cherry on top that really brings the website together and gives it the personality that you're probably craving for your brand. Make sure that your photos are within your color palette as well. So choose a photographer that matches your brand style. If you have a light and airy brand don't choose a dark and moody photographer.
You can make sure your photos are within your color palette through the clothes that you wear and then where you decide to shoot your photos. For example, I avoid certain colors in my images so it doesn't clash with my overall brand look. I avoid colors like red, orange, purple, and green. Of course, it's going to be hard to match your photo's to your color palette exactly so I do allow certain colors that are not part of the color palette, like gold for example, because it doesn't clash with my color palette as much as red would.
As long as there are no bold or striking colors then I am okay with having other colors in my images. Something that helps me decide whether a color will clash or not knowing that my color palette uses blue so I tend to stay more with the cooler colors rather than the warmer colors as I said before like red and orange.
And there you have it, folks! Our top design tips for creating an outstanding website. Here they are again: 1. Keep your homepage clean and uncluttered.
2. Use visual hierarchy to guide users through your design.
3. Make your website content easy to read and understand.
4. Make sure your website is optimized for mobile devices.
5. Make sure you keep a consistent style throughout the website.
Follow these tips and you'll be on your way to creating a website that'll make your audience fall in love with your brand. Thanks for tuning in, and we'll catch you on the next episode of the Intentional Branding Podcast.