5 Tips for designing awesome website headers
When it comes to creating gorgeous websites, strategy is at the center of everything I do, and this includes designing awesome website headers! So today I am going to share with you my top 5 tips for designing your own gorgeous website header, and for fun I am tossing in a copy of tutorial videos for my WordPress and Squarespace users our there!
Tip #1. Emphasize the most important elements
It is likely that your website contains a lot of great information, but some of that information is more important. Like how to get started working with you, or what amazing services you have to offer. Making those key important elements about who you are and what you do a big part of your header is a must if you want to connect with your dream customers.
A couple of questions to help you decide what to include…
- What is the very first thing I want potential customers to do?
- What is very best way to contact me?
- Have a shop of fabulous goodies for sale?
- What is my best service offering?
These are some of the elements you want in your header!
Tip #2. Use clear, readable fonts
Fancy fonts are fun, but they have a place, and it is not in your header. Make sure the fonts you use are clear and easy to read, not just on your computer or laptop, but on your tablet and cell as well.
Want a little help finding the best fonts for you and your brand? Check out this totally FREE Branding Your Biz Masterclass, located in my free course library where I show you how to choose the perfect fonts to represent your business along with creating a color palette and logo!
Tip #3. Use transparent headers for sites with impressive images
Are you using some amazing images at the top of your website pages? Why not give them a little more emphasis by using transparent headers that lay nicely over top of those images.
A couple of things to consider when creating a transparent header…
- Make sure that the menu items are still legible when placed over top of the image
- Check all devices to ensure your menu is legible, because an image that looks great on a computer or laptop may not look great on your iPhone.
Tip #4. Choose a layout that flatters the logo
Logos come in all shapes and sizes and not all are going to look fabulous in every header layout. So choose the layout that compliments your logo, or if you are just getting started, create a logo that works well with the design you want to create.
Another tip about logos, create different variations so you always have one that works…
Tip #5. Use design elements that express your business’ personality
The personality of your and your business should shine through in every corner of your website, and this includes the header as well. If you are all about simplicity create a header that is effective yet simple. If you are all about elegance, add in design features that speak of the elegance you create.
And if you are needing a little help clarifying the personality of your business I want to again encourage you to check out the FREE Masterclass Branding your Biz!
BONUS TIP! Make it easy to connect with you!
So I just got off my Website Wednesday chat with Business Coach Nancy Ganzekaufer and thought of one thing I forgot to mention. (We all have forgetful moments, right?) This bonus tip is of course making it easy for your website visitors to connect with you. This could be by emphasizing your Contact Me link, or adding social media icons to the header. Whatever it is that works best for you is exactly what you should do.
And now for the tutorials I promised in the beginning…
Here it is the moment you’ve been waiting for… or the part you just scrolled to! The Squarespace and WordPress tutorials for designing awesome website headers!
Hey there Thrive Theme users! This video is for you. One quick note, I am focusing on the new Theme Builder options which if you don't have you are going to want to upgrade after watching this video!
Hey there WordPress users! This video is for you. One quick note, the options available to customizing your header depends on the theme you are using and your view may vary a bit from mine.
Hey there Squarespace users! This video is for you. One quick note, I am showing you how to make changes in Squarespace version 7.1. If you are using Squarespace 7.0 and need a little help, send me a message and I'll be happy to help!