How do I design and layout my website’s homepage?

“What should my website look like and what should go where?”

Designing your own website can be tricky if you’re not from a design background or have creativity readily available at your fingertips. Luckily, there are some common design guidelines you can follow.

Designing your own website

It’s up to you, of course, what your website looks like. After all, that’s why you’ve decided to build your own website right? It can feel very daunting though, staring at that blank screen, wondering where to start. Hopefully, this article can nudge you in the right direction. Towards the coffee 🙂

Where to start

The number one rule that I personally like to go by is this:

Less is more. Or KISS.

Not the band. And I’m to trying to make a move here. I’m talking about the acronym Keep it simple, sweetheart. (I’m totally up for the last S to be changed to Supercoolhuman)

We tend to see similar frameworks around the web nowadays. You might think everyone’s gone all boring, not creating moving, flashing websites with music that starts playing automatically when you land on it anymore. (Don’t you miss them??)

The truth is, yes maybe we’ve all gone a bit boring. But the world wide web has grown to such humungous proportions, and we, the supercoolhumans, are being stuffed with information like a jalapeno pepper at a BBQ.

We are time poor. We are attention span poor. Everything has to be fast, and it has to be easy.

It makes sense to have your website stick to the standard, because if you try to be clever and change up the layout, {what if the menu is at the bottom?} Barbara and Stephen are going to take a 3 second look at it and when they can’t find the menu, throw their hands in the air and move on.

It also makes sense since your website will not look the same on mobile devices. That is not what responsive means. Responsive means your website resizes and fits everything to any size screen. It means that your website on a mobile will most certainly not look like your website on a desktop, and it means that none of the functionality is lost when everything is resized.

Homepage design 101

The standard framework looks something like this:

1. Logo and navigation. Logo top left and menu/navigation top right OR Logo centered and menu/navigation either above or below the logo.
2. Some kind of image or illustration with a headline (what you do or are about) and a call to action (for example a button to lead somewhere, a newsletter signup etc)
3. Introductory text, this is where the fold is, so depending on the size of the above, this could end up above or below the fold.
4. Under the fold: The How. How are you going to solve the visitor’s problem? Explain the benefits of your product or service.
5. The What. What are the features of your product or service? You can show some portfolio items here if you’re a creative business.
6. The Why. This is where you build trust. Show testimonials, a collection of logos you’ve worked with or where the business has been featured. The row of logos is sometimes moved to the top (above the fold) under the image.
7. Blog Posts/Articles to build your authority and show that you know what you’re talking about.
8. Footer: This is visible on all pages (unless you choose to hide it for a sales page for example) and can expand on useful links that might not fit in the top navigation such as terms and conditions and similar. These are things that are not so useful at first glance for your visitor who is just making up his mind about your site. Links to articles, a newsletter signup, news and contact details are other things that often go here.
9. Bottom bar: The copyright notice normally lives here, along with any legal terms and conditions.

 

What to include on your homepage

Breakdown of homepage sections

1. Logo and navigation

There are a few different styles out there and it’s really about your preferences. As long as the navigation is at the top of the page and not hidden away you’re set.

2. Above the fold area

This is what your reader will see when they first land on your site. The header is important here as well, because the layout and size of the header and navigation will affect the amount of space you have for your most important message.

You need to clearly convey what it is this website is about. In a few short words, try to explain what your business does. You can then expand on this with a subtitle which explains what problem you are able to solve for your reader.

You can also include a call to action (CTA) in this section to lead your reader to where you want them to go next.

Some examples:

 3. Introductory text

Optional. A longer text introducing your reader to what your business does. This can be incorporated into the Above the fold content if suitable, or underneath.

4. The How

Your awesomely crafted message in the Above the fold area will have separated the wheat from the chaff, the reader that scrolls down to this area has decided that this is a good match for them and they want to know more.

Now you need to educate your reader about the benefits of your services. Exactly how are you going to help them with their problem? How are you different, what makes you stand out from other businesses offering the same thing?

An example of homepage layout:

5. The What

Explain the features of your product or service. What will the reader actually get from you? You can list portfolio items here, or show products you sell.

6. The Why

It’s very uncommon for someone to randomly land on your site, see something they like and sign up/buy it/register unless there has been some kind of trust established beforehand. Your reader wants to see reviews by real people, testimonials, social proof, media articles and anything else that proves you and your business are real, that your products or services have worked for other people, and that they are in safe hands.

If you have articles in known publications, post their logos in this section. If you have testimonials, plonk some here. If you don’t

have testimonials, reach out to some previous customers and offer them a discount code or some kind of incentive that fits your business, and ask for a testimonial in return. If you’re just getting started, you can ask a friend who knows you and your business well to write down a few lines why people should work with you or buy your products.

An example of homepage layout:

7. Blog posts / Articles

You will often see some articles or blog posts on front pages. They tell the visitor that you know what you’re talking about, at least to the point of going to the trouble to write a few lines about it.

Don’t just write posts for the sake of having some content though. The interwebs are getting more clogged by the day by dravel parading as blog posts b

ecause the writer read somewhere that you should have blog posts on your site to drive traffic. Here’s the newsflash; if it’s not bringing value to anyone, nobody’s going to bother reading it.

If you do your research, write to help and support your reader and put thought and dedication into every article you write, you will see results. And you won’t have to write as often. Win-win!

8. Footer

What you decide to put in the footer depends on the kind of site you have. If you have an e-store, you might have links to FAQ’s, shipping information, returns and refunds information, the physical address of the store, contact details, a map etc.

You could have a list of your latest blog posts, links to terms and conditions, a sign-up form with a reminder of your special offer, pricing information and other nitty-gritty information that you want your reader to easily find, but not have in the main navigation.

9. Bottom bar

This is normally home to the copyright notice and little else.

An example of homepage layout:

optional: Social media feeds

I also like to include an Instagram feed to show the visitor that I’m a real person! This website is current and valid! If the website owner is actually active on Instagram that is. Otherwise, it would say the opposite 🙂 If you’re active on Twitter or Facebook, or some other platform, you could add them instead.

Note: Some people/sales funnel gurus think that having links to your social channels is bad for business, that you shouldn’t try to send people away from your website, you should try to keep them there. Which makes perfect sense in an evil laugh muahahaha kinda way. I’ll let you decide on that one.

I’d love to see how you went with your homepage layout! Drop a link below!