How to structure your content for a better homepage

Guest Blogger

There are two ways your website makes a good first impression: a well-executed design and a thoughtful structure. The structure – basically, the order in which your website content is presented – can have a major impact on visitor retention.

Think of the way you pick out a new book. First you look at the cover. Is it eye-catching? Then you look at the tagline. Does the book sound intriguing? If the tagline reels you in, you read the summary on the back of the book. Finally, you open the book and dive into the story. You can structure your website to mimic this process as well, using something called the Cone Principle.

cone

These 2 graphs can help you conceptualize the structure of your site.

With the Cone Principle, a website’s pages are structured with high-impact visuals and minimal text at the top. The pages then gradually introduce more and more detail the further you scroll down. This approach allows visitors to quickly and easily scan your homepage to learn who you are, what you do, and how they can interact more with your site.

Note: This principle can apply to other pages on your site, but for the purpose of this post we are focusing on the structure of your homepage.

Why does the Cone Principle work?

bonjour

Left: This homepage has too much information in the top navigation and footer. Photos are haphazard and it’s difficult to know where your attention should go; Right: In this example, the navigation and text is simplified, the photos are neatly arranged and it’s easy to know what to read first.

According to a post from Hubspot, 46.1% of people say a website’s design is the number one criterion for discerning a company’s credibility and 40% of people will respond better to visual information than plain text. The Cone Principle works because it helps solve both of these criteria. It forces your website to weigh heavy on visuals while still providing the valuable information that brings someone to your website in the first place.

The examples above show how using the Cone Principle can impact the overall professionalism of your website. The homepage on the left is an example of what not to do. Too much text, poor arrangement of images, and a busy navigation make it difficult to follow. The homepage on the right, however, shows how a few simple changes can improve the page’s organization and presentation.

How to structure your website like a pro

The website of eyeglasses company Warby Parker provides a great example of the “cone” in action. I’ll break it down here to show how they did it.

1. Start with a bold image, title and logo

warby

The top of your website is like a book cover. Choose a photo that represents your business and have it cover the whole width of your page. If you’d like to include multiple or portrait images, insert the image into a column and add text or another image on the side to avoid empty space.

At the top of your site, include your logo and the most important tabs in your navigation bar. It’s best to pare these down so that they are all visible on one line. The aim on the navigation bar is to guide the visitor. The more options you provide, the harder it’s going to be for them to know where to go—making it more likely that they’ll give up and go elsewhere.

Finally, add text over your image with a quick phrase summarizing your business key offering or a sign-up link.

Warby Parker flawlessly executes this concept on their homepage. They have a clean logo, a small selection of tabs in the top navigation, striking images, and a small amount of text.

2. Highlight the main product, service or point of interest of your site

warby2b

 

The next level of your homepage is like a book’s tagline. This is your space to highlight your main strengths and let the visitor know what you have to offer. For example, Warby Parker showcases its main offering, stylish glasses. They offer only four options—glasses, sunglasses, men’s, and women’s. It’s clear what they do and where you can go next.

3. The next level of your homepage entices the visitor to take action

warby3

It is like the back cover of a book. This is the point where you reel the visitor in—whether it is listening to your band’s music, making an appointment, browsing your sales, or signing up for a service.

Remember to keep it simple. This section is the teaser into the real story. Save the details for the page you are directing the visitor to.

See how Warby Parker invites visitors to try out their product and start browsing their selection of glasses. They provide a direct action (“get started”) for users to move on to the next step.

4. Provide a summary of any other vital content on your site

warby4

The final level of your website offers greater detail, whether it be prices, contact information, or customer testimonials. It also falls above the footer, which is like a book’s table of contents.

If you have multiple main services or products, break this section up into columns for a more dynamic look. If you upload multiple image, make sure they are the same size. The same goes for text and other elements within columns.

See how Warby Parker uses this bottom section to offer more details about the company and links to all important content.

Is the Cone Principle right for your website?

The goal of your website is to get visitors to spend time reading about you or your business, learn about your services, engage with your content or make a purchase. One way to know if it’s succeeding is to look at your bounce rate. What’s that? In layman’s terms, it means the percentage of visitors who arrive to your website and leave without visiting any other pages. Basically, they come to your site and very quickly decide to go elsewhere. You can track it using Google Analytics.

Users “bounce” for many reasons, but it’s often caused by poorly organized or overly complicated websites. Users can’t immediately find what they are looking for, so they lose patience and go elsewhere. People often make this decision in the blink of an eye, which is why a well-designed and structured site can help draw them in.

What other strategies do you use when crafting a better homepage? Share them with us in the comments below!

This article was originally written for Jimdo by Melissa Myers. With a simple, intuitive interface, Jimdo enables anyone to create a unique website with a blog and online store.

The author

Guest Blogger
Guest Blogger

99designs loves to share design how-to's directly from design professionals themselves. Reach out to share your thoughts, ask questions, or thank these experts for their awe-inspiring tips!

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%