How to Make Front Page Design More Effective, 3 Easy Tips
Having trouble deciding what to put on your website’s front page? If you’re a blogger you might be tempted to set your front page to your blog posts and be done with it. Making this mistake could cost you traffic, leads or affiliate clicks.
Whether you’re working on a DIY website or if you will be working with a designer you should understand the function and features of your sites front page design to get the best possible benefits from this business asset.
We have three things that must be part of your front page design to maximize its effectiveness. There are specific cues that help users understand what you’re site is all about and if they’re going to scroll further down the page. We are all very particular about how we spend our time online, without these cues, the first instinct is to bounce.
This is what we’re going to Discuss
- The impact of Business Goals on website front page design
- Identifiers
- The Importance of correct Imagery above the fold
- Tag Lines and Logo
- Calls to Action
- Single Calls to Action
- Segmented Calls to Action
The Impact of Business Goals on Website Front Page Design
There are a lot of things to consider when designing the front page but first and foremost you need to have clear goals. The whole point of having a website is not to dump a bunch of information but rather to get the people that come to your site to stay and take action.
Make it clear from the start who you are, who you serve, what you do. If your local business, where you do it. That person on your website, the user, needs to know what it is you want them to do. What action they should take, where to start. Get clear on these things before you get into identifying the sections in the sequence that needs to go into your front page design.
There are a few things that should be a part of every website so here we’ll talk about the essential “above the fold” (the first part of your website before a user starts scrolling) content. After that, you can use your goals to decide what sequence is best for your business and what priority you want to give each one of these items.
The features we’ll discuss here are the bare minimum you should consider for your front page design.
First Impressions and Visual Branding
The first impression a user has when they land on a website are things like color, typography, and layout. These elements are the aesthetic branding of your business. These are all consistent across every element of your business. From your physical brand to other areas of your online presence.
How First Impressions and User Experience Helps Your brand (or Hurts It)
Your site can be a filter for people that are not a good fit for your business or a deterrent to potential customers. Which would you prefer?
One of two things happen the moment a person lands on your front page, they either stay or they leave.
If they stay, what was it that made them decide to stay? Perhaps they were unsure and wanted to dig a little deeper out of curiosity but the odds of this are slim. The more likely reason is that your message undoubtedly helped them identify themselves as someone who wants or needs your products and services.
If a user leaves your site, what was it that made them leave? It could be that your services and products are not for them. In which case, you are filtering them out and that will save a lot of time for you and them. Another option is they didn’t understand what you offer and didn’t want to take the time to figure it out, ouch.
People are busy and therefore, impatient. Website users will make snap decisions, you can’t waste your chance to grab their attention.
The aesthetic portion of a first impression is something that is intangible. Your user will either like what they see or they won’t. If you’ve done enough studying of your target market, the odds are they will find your website aesthetically pleasing. Visual branding is only the first part. This type of branding is something that’s almost subconscious. People don’t think about aesthetics as much as you might think. Users will like it or they won’t. Your next task is to help them identify themselves with your message.
Identifiers – Front Page Design Essentials
Identifiers are the things you use to communicate who you are, what you do, who you serve and the benefit to that user. If this message resonates, the user will click or keep scrolling. Your identifiers require a lot of thought about your primary audience and what they need.
Imagery
The imagery used on your front page design should serve to emphasize what you do. Pay very special attention to the photos and graphics that you use here. All of these things send clear signals about the type of business that you own. Do not use ambiguous, abstract imagery if you can help it.
Showing Off Your Products
An ice cream shop should have images of ice cream to cue users. A clothing store should have imagery involving clothing or a storefront. Even if it’s stock imagery, the people that come to your website should understand that you sell clothing or ice cream. Likewise, a shoe store would have shoe related photos. If possible, feature your products or services to further emphasis who you are.
Showing Off Your Service or Process
If your business provides a service or product that is a little more abstract like an artist or a writer, think about using props. Things you use in your craft like cameras, paint palettes, a typewriter and other tools. Another option would be to use a photo of you doing your work. This type of imagery would help the user learn a little bit more about you. They’re able to see you in your environment and perhaps build a certain level of trust in you.
The tagline identifier is the first thing that a new user becomes consciously aware. This point is where they make the first decision. That is, should they move further down your webpage.
Taglines
This statement is where you identify your business, what you do, who you do it for and how it benefits them. All of this will go into one headline and maybe a subheading but the shorter, the better.
In front page design using the tagline in a strategic and specific way is essential. This is not a place for cute funny wording. This message needs to be extremely clear. No hidden messages, play of words or an attempt to be witty. There’s no time for that here. The tagline identifier should read something to the tune of:
“I help ___________ do blank.” “I sell __________ to _________ it benefits them by ______________.”
I admit these examples are very simplistic but hopefully, you get the point.
These are the questions you need to answer in your logo and tagline:
- Who you are
- What you do
- Who you service or sell to
- Why your service or product benefit them
A user of your website should be able to read this and say “Yes, I need this kind of service or product” and “Yes, I am this kind of person.” In essence, self-qualifying themselves as potential users of your product or service to go further on your website.
This self-qualifier serves two purposes. The first is to qualify people who are interested in your products and services so that they know they’re not wasting time on your site. The second is to disqualify people who landed on your site by accident and are not a good fit for your product or service. Again, so you are not wasting their time.
Getting all of this information in a few words seems like a lot of information, but doable.
Calls To Action
The primary call to action
Your homepage should have only one primary call to action. You typically see this under the qualifier once a person has established that this site is for them then a call to action should follow right after.
With your goals, you have already defined what it is that you want the people that go to your site to do. Here are a few examples:
- Do you want them to learn more about you?
- Do you want them to read the blog?
- If you sell low-cost items, do you want them to go to the shop?
- It’s possible that the most strategic option for your business is to offer an opt-in right away
The primary focus of the CTA or call to action is to encourage users to take action without scaring them away.
Segmentation
Segmentation is an option for a home page a lot of people use to segment people into an unofficial funnel. Unofficial because they’re not on a list and they haven’t told you where they’re at in their buyer’s journey.
However, if you have multiple personas that you cater to or a single persona at different levels in their business this might be a good option. Segmenting users with different interests or levels of experience will give them more targeted information. In turn, this increases user experience and brings them closer to a buying decision with your company. Segmenting also helps you articulate what your site is all about.
What segmentation looks like in Front Page Design
This type of segmented navigation could be as simple as two or three calls to action buttons that lead to blog categories. You might even track the traffic to the landing pages for these buttons to gather more insight on people who visit your site. Here are a few examples.
- You could use CTA buttons that go to different shop categories.
- A CTA that goes directly to your shop and another CTA for people who want to know more that leads to your blog or about page.
- A separate CTA for beginners, intermediate and advanced.
Of course, you wouldn’t word it in this way. These are all very general examples.
It’s important to note that segmented navigation should still only have one CTA. For example, segmenting shop categories OR segmenting blog topics. If you want to send people to either the shop or the blog, you need to make the primary call to action clear with a more prominent color, make the button more prominent or have the secondary CTA as a text link. Experiment with different CTA structures to see how each affects your traffic flow.
Primary or Segmentation CTA buttons
If you want to keep it as simple as possible on your site, use one button that leads to the primary reason you want people to visit your website. Think about your buyer’s journey when you make this decision. You may want them to buy or get on your list. However, if they’re not ready for that, it’s not going to happen. Even if you give them no other options, they need some trust signal either by getting to know you or having been referred to you by another website or business.
Your main priority might be to make visitors comfortable. You want them to trust you enough to give you their email address, eventually. In this case, you can start by sending them to the blog to read more about what you do or to the about page to learn more about you and your company. All of this will depend on your business goals and your buyer’s journey.
Here are a few questions to consider when deciding on calls to action buttons for your home page.
- Is there a better way for your users to use your website?
- Do you have beginner intermediate and advanced topics, products and services?
- Do you have defined categories of topics, products or services within the scope of your offerings?
If you can find a targeted way for your users to use your website, that’s great. Think of adding this type of navigation segmentation to your homepage. The ability to have a semi-custom search experience will help save them time. In this way, they’re getting what they need right away.
Segmenting your CTA’s also helps you identify what people are looking for on your site so that you can plan your content more strategically as well. You can monitor the flow of traffic on your site with Google analytics. If you want to get more sophisticated, you can implement heat maps with Sumome or go even further and start recording sessions with a tool like Hotjar.
Dealing With Conflicting Goals in Your Calls to Action
On a front page, people can only take one call to action at a time. There are trade-offs for having multiple CTA’s in your front page design. You’re giving visitors more choices and in turn, making them think more. You don’t want people to have to think too much. In this scenario, they might take the less desired action, or they might click away.
If your goals consist of creating a list and also building followers on social media, choose only one for your front page design. Putting both of those calls to action on your front page will give you one of two outcomes. The user will choose to join your list, or they will decide to follow your Facebook page. Having more than one call to action is just too much work unless the user is crazy about your brand and wants to follow you everywhere.
If you don’t want to take the chance, get clear on your primary call to action. Understand that low commitment CTA’s tend to get more reciprocation. Opting-in to your email list may seem to be the best approach, and it may be your primary call to action, but if that’s not working on your homepage, then you might want to back up a bit.
Take the relationship even slower and perhaps start with “read the blog” or “visit the about page” so that they get a good understanding of who you are and what you’re all about before they commit to becoming part of your list.
CTA’s & Social Media
Although building your social media following may be a primary goal as it may be your primary source of traffic to your website it is not the best CTA for your front page design. Social media is a means to get people to your site. If they are already on your site, you should not invite them to leave again. Instead, omit the “follow” CTA until they get to the welcome email.
Put some social icons at the bottom of the homepage or in your footer. Show a social badge or some social proof from your social media accounts very low on your page but try not to invite your readers away from your site once you have them there.
To get even more specific on social media, it’s almost a given that you will have your social icons displayed somewhere on your website. Try not to put them front and center above the fold or anywhere that will distract from your primary call to action.
If you’re focusing on more than one social media account, don’t make them compete on your homepage with large widgets. It’s important to choose one, don’t give users too many choices and use widgets and buttons that allow users to like and follow without leaving your website.
What’s Next?
We love talking about branding and web design but I’m also a designer and a business owner. I design graphics freebies and business planners for the users of this blog too! Don’t forget to check out all the free downloadable resources available throughout the blog. Download away! Some of our top “no strings” downloads include the Instagram Planner, PowerPoint Moodboards, and the Blog Post Planner.
In the PrettyWebz shop, you can get freebies like rose gold headers, sequin social media icons and themed digital papers and many other free and premium graphics. Visit the PrettyWebz shop to check them out.
Get more free graphics by signing up for the PrettyWebz newsletter and never miss out on a freebie again!
Every resource we offer on the blog and in the shop is put together in a convenient package for you and deliver to your inbox every single month!
If you liked this post, I would love it if you pin this image!
