How to design the best homepage layout for your website

Web Design | Web Design Layout | Homepage Design | Web Design Inspiration | Squarespace

We’ve all visited websites where the moment we landed we weren’t sure as what the purpose of the site is, or it’s layout was confusing and left much to be desired. When you’re DIYing your website, coming up with a layout that works with your business will include a lot of trial and error.

Meaning, you will mess it up the first time. As you learn you’ll find what works for you, what doesn’t, and as your business grows, you’ll find the perfect layout that makes your website do the selling for you. To get you started here are some tried and true layouts that other online bad asses are utilizing.

 

Essential Homepage Elements:

BEFORE YOU GET AMPED UP:

Hold up boo. Before you get amped up, you should have these materials at your disposal ready to go. This makes for an easy and quick build.

  1. Logo

  2. Color Palette

  3. Stock image(s) or brand photography

  4. Icons or other graphics

  5. Font Choices

  6. Sitemap


THE BUILD:

Homepage for Erin Flynn @ erinflynn.com

Be a Hero:

The featured image or the hero image is a great first focus when someone lands on your website. The vibe and the message of this image should match your branding as much as possible. Using a stock photo is fine (I do!) but look for stock photos that jell well with your brand and it’s voice.

If you’re creating a website that is more image based (selling products or photography for example) you should 100% make this section a slideshow instead of a static image. These images can showcase your new arrivals, newest photoshoots, best selling products, newest collections, and more.

If you’re using Squarespace, the Brine template gives you this feature when you add a gallery collection to the first page of your index.

MAJOR KEY:

Key Sales Statement:

You can overlay your key sales statement over your featured image (better for those that have one featured image and not rotating images). Your key sales statement should be short and sweet and it’s exactly what it is that you do and who you do it for.

Try to keep it down to one sentence. Erin Flynn(website pictured to the right) does this by overlaying her sales message over hero image. 

SAY HELLO:

Welcome Message

Your welcome message is can be added underneath the image or a bit lower on the page. It expands on more of what you do, what you offer, and who you do it for. This message is usually about one paragraph long and can include a call to action to learn more.

This call to action can lead them to your services page, your rates, design process page, or about page to name a few.


THE DOORS:

I talk about doorways in depth in my post about designing your homepage, and it’s a element that can work for any industry or business.

Check out the image above and take a look at Erin's doorways. These doorways lead her visitors to take direct action on her goals for her business.

Think of your top three actions or goals that you want for your website to achieve, and use these doorways to lead them down the paths that benefit your goals.

These doorways are psychologically based: meaning they should each touch on a pain point that your ideal client is frustrated with.

The easiest way to create this is to think of a question that your ideal client may ask you, or questions you’ve heard your target audience ask, and then turn that into a statement.

For example, here are some possible doorways for a brand designer:

ONE //  I’m not sure what branding is or why it’s important.

This statement comes from the question: “What the hell is branding?” or “Isn’t branding just a logo?”. This doorway could lead to a series of blog posts about the foundation of branding for beginners. This doorway leads your visitors down a path that leads to your expertise shining through.

TWO //  I’m not sure what goes working with a brand designer.

This statement comes from the question: “What makes a brand designer different from a graphic designer?” or “What is it like working with you?”.This doorway can lead to your processes page, or maybe a case studies page. I LOVE the second question because it gives you the opportunity to show how your client experience is different and how you’re separate from your competition. IT’S YO TIME TO SHINE!

THREE //  I’m not connected to my branding.

This statement comes from the question: “What can I do about my branding that I’m not personally connected to anymore?” or the statement “I DIYed my branding and I want to move in a new direction”. If you offer a re-branding package, this page can lead to your services or a specific page that you dedicated to the ins and outs of going through a rebrand with you.

* I am no brand designer, so these suggestions are probably pretty rough, but I think you get the picture.

 

Overall, each doorway leads them down down a path that ends in 1 specific goal: them trusting you and wanting to hire you.

Each statement should have a button or something clickable that takes them to those specific pages.

Write the best content for the most important pages of your website in a few hours with this FREE content planner!

Write the best content for the most important pages of your website in a few hours with this FREE content planner!

Plus gain access to a members only EXCLUSIVE resource library to help you and your website kick ass. Boom.

* indicates required
What do you need help with?

Call to action

Each page should have a call to action. There’s a lot of research and science that goes into what words should be used in call to action buttons and what colors they should be, and the damn good people over at CoSchedule wrote a great article about it.

But here’s the gist of call to actions buttons:

Make sure their color contrasts with the background color of your website. Also, if you have a color in your color palette that is brighter or a little different than the others, I would save this button to be the color of all of your buttons. The buttons need to be very easy to see and should stick out from everything else on the page.

Definitely give that CoSchedule link a read when you’re thinking of what your call to action buttons should say. They give some great tips on what to avoid and how to write each button for different situations. It’s legit.


Put a spotlight on it

This section is for you to highlight your best content and to show your visitors what you’re capable of. For photographers, this can be your most popular shoots, shoots your most proud of, shoots you’ve won any awards from, etc.

For shop owners, this is where you can either showcase your most recent/popular product or products.

For bloggers, this is where you can put your most popular posts or your post recent posts. 

These spotlights are here to help you build trust in the visitors that are completely new to you and your brand. Most people that land on your website aren't ready to buy or invest in services like yours just yet, so showing that you're knowledgeable about topics in your niche (for bloggers) or are doing current work (for photographers) will help build trust. 

Same goes for the shop owners that blog (all of you should be blogging BTW). Whether you blog about your products, behind the scenes of creating your products, or background on anything in your industry, this is the space to show off what you know. 


Social Proof:

Every website can benefit from some social proof. Now don’t get into a funk if you’re new and don’t have any testimonials yet, they will come in time so you can skip this. But for the rest of you, adding a testimonial to your homepage not only gives you points in the trust department because other people have worked with you, it also shows that you have experience and people love you and your work.

Social Proof is so great because it does a nice chunk of your work for you and before you even talk to potential clients.

Don’t be scared to send your past clients a testimonial request or survey, you’ll be surprised as to what they have to say!


Footer & Sidebar:

Your footer is where you can do some showing off! Place logos of places that you’ve been featured and awards that you’ve won. If you’re promoting a new workshop for example, your sidebar is a great place to put a nice image and a sign up/learn more link. This is also where you should place a sign-up form for your newsletter as well. Remember, keep your footer and your sidebar clean and uncluttered.

MOST IMPORTANTLY: please, please, PLEASE put your contact information in your footer. I'm talking an email address or another link to your contact form at the very least. Please don't make potential clients or collaborators work to try to get in contact with you! 


DIYing your website for the first time can be a bit overwhelming, but adding the above elements to your homepage is a great foundation. Your homepage is one of the many faces of your business, so you gotta keep it clean, updated, and on point. You got this. 

Write the best content for the most important pages of your website in a few hours with this FREE content planner!

Write the best content for the most important pages of your website in a few hours with this FREE content planner!

Plus gain access to a members only EXCLUSIVE resource library to help you and your website kick ass. Boom.

* indicates required
What do you need help with?
 

Website Design | Website Planner | DIY Web Design | Web Design | Web Design Ideas | Web Design Inspiration