The Art of Designing A Home Page

HEADS UP: THIS PAGE IS CURRENTLY A WORK IN PROGRESS. CHECK BACK SOON FOR MORE UPDATE. ONCE COMPLETE, THIS LITTLE ‘HEADS UP’ BANNER WILL DISAPPEAR. THANK YOU 🤙

Whenever I talk to prospective clients about their website, everyone only wants to discuss the Home Page. Why is this? It is, arguably, the most important part of your website. It’s where customers first land and understand who you are, what you do, how you help them, and decide whether they should devote any more attention to you.

Did you know that the average user will leave you site in less than 15 seconds if they don’t like the first impression?

15 seconds.

That’s all of the time you have to get someone to like you enough to move forward into your process and work on potentially turning that website visitor into a customer. 

Below, I will break down the elements of a Home Page and what each sections purpose is so you can work on giving your website the best first impression possible to drive the most conversions.

Before we begin, I’ll get the sales stuff out of the way. Did you know I’m a freelance web designer and developer? I f**king love building websites, so if you would like me to work with your company, shoot me an email or text.

Okay, on with the show. 

The Sections

Home Pages typically fall into these basic sections:

  • Top Navigation
  • Hero Element
  • Secondary Element
  • Third Element
  • The Footer

Each section serves a purpose to help your visitor understand you, learn why what you’re offering helps them, and drives the particular action you are wanting visitors to take (ie, Download an eBook, Sign Up For A Mailing List, Purchase an Item). 

I’ll break these sections down and discuss their purpose and what are some times for each section that you can implement to enhance your website today.

Top Navigation & Hero Element

To me, this is the section that matters most. This is where the majority of visitors will first lay eyes on your site/brand/company and therefore, this is where you have to put your best foot forward.

I mean, there’s a reason they call it the HERO element after all – this is the hero of your journey that helps drive your audience home. 

This section requires clean imagery (high-resolution), a clear value proposition, a specific call-to-action, and a super clean and intuitive navigation menu. 

When designing websites, I like to keep the users in mind first and foremost. What is the path of least resistance to our website visitor to the next logical location that can drive them down my funnel? Okay, I’ll just say it in layman’s terms: Keep your website at idiot proof as possible.

Keep things clear, direct, and eliminate the possibility of friction wherever possible.

Top Navigation

In your Top Navigation, use common words that are intuitive to anyone. Words like: Home, About Us, Contact, Careers, Shop, etc.

You can try and be artsy with it if you want (like using the word “Fabrics” instead of “Shop”), but I recommend avoiding confusion or making someone have to think wherever possible. 

When creating what your navigation words should be, also consider your audience. I think the majority of people out there know intuitively that if you click the logo in the navigation, it brings you to the home page, but those that are older or aren’t “super-techy” might not get that instinctively. So in that case, adding a “Home” button to your navigation is a solid move.

Always keep who your target audience is in mind when designing and writing copy. 

One last note on Top Navigation: on desktop, I think it’s better to have a horizontal navigation and only use a hamburger menu with dropdown on mobile devices. 

Hero Element

With the Hero Element, the image you choose, the value proposition, and the call-to-action are everything. 

For images, I suggest that you use clear, high quality graphics that relate and represent your company.

When it comes to your copy, keep it simple and under 14 words. When you write it out, think of a simple mission statement that let’s people know exactly who you are.

Underneath the headline, you can put a sub-heading, if needed, to dive a little more in-depth and educate the site visitor.

With your Call-To-Action, make it stand out and guide your site visitor to where you want them to go.

Here are a few examples of my favorite Hero Elements: 






The Secondary Section