Do you remember when your website was all new and shiny? The feeling of “anything can happen”? Then you start designing your website banner and it all goes downhill from there.
We know it like SUPER important that one website banner says so many things for you. The only problem is how do you make sure it doesn’t come out looking like a #nailedit meme from Pinterest?
We have some super awesome design tips from our resident web design expert… Kristen Estes. Check out the video below, or read the handy transcript below with step by step info!
Website Banner Tutorial Webinar Transcript
If you are new here at weeknight website, we host a weekly webinar every Friday at 12:00 PM CST. We love to be here for you. We can give you feedback even on things like your brand, your brand direction, website, and design.
This tends to be what can make or break a website. When people first land on your website, you really want them to feel impacted by your website banner. You want to capture them when they first get there because they’re making a snap decision whether going to stay on your website or whether they are going to bounce. We want them to stay, so here are our tips to help them make that decision.
1. Use Prebuilt Hero Rows
So what do I mean by this? Well, I want you guys to keep it simple. Remember you’re only trying to get them to do one thing per section. You really just need a headline, a sub-headline, in each section as your website visitor is scrolling. In Weeknight Website, we actually have prebuilt rows created for you. So, if you use Weeknight Website you can follow the directions below to create a website banner easily using our prebuilt rows.
Keep in mind that the hardest part is sometimes making the decision of what is my image going to look like and how to size it correctly. With Prebuilt rows, that is all done for you. All you have to do is choose what you want, your fonts and your buttons and your background to be.
2. Font Choice is Key
Thankfully, Weeknight Website comes with Google fonts pre-installed. This makes it easy to pick popular and easily use them on your site without having to install fonts. If you need help choosing fonts, colors and branding, we have a guide that you can access here to get more information on that. One of our favorite tools is called Font Joy. It can show you the best font pairings and help you decide which ones you need to use.
3. Make sure you have great photos for your website banner
A quick tip: Photo backgrounds, especially ones with people in them are going to be the most impactful on the Internet. If you have professionally done photos of yourself or photos of people in your space or enjoying your art or music or whatever it is that you do, those are probably going to be the best photos to the header.
However, I will say quality matters a lot. You really want to make sure that these are professional and large enough to be used in a space like this.
Next, You want to make sure that your photos are landscape oriented, which means that they are wider than they are tall. You don’t want portraits. When you use a photo that portrait oriented you don’t have as much control over what will show in the banner. You can absolutely use this photo elsewhere on your site, but I would recommend finding another photo on the Internet that is going to match a little bit better.
If you do not have professional photos or you need some that you can use for free, we recommend Unsplash. They have a huge variety of photos that have been put there for you to use by professional photographers and artists. Simply go there and search for what you need and then download the photos for use on your website.
Pro Tip: use an image compressor because the smaller your images are, the faster that your site loads. this helps with search engine ranking and also with user experience.
Thank you so much for reading and we’ll catch you next time!