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.
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?
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.
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.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.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.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.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.
For more inspiration on how to develop a homepage that follows the strategy of the Cone Principle, visit Jimdo’s newly designed website. You can also get started on creating or updating your own website. Here are a few of our favorite new templates that will help you create a successful homepage:
Content Marketing and PR at Jimdo
Melissa joined Jimdo in August 2014 to support social media, public relations, and the blog. She has experience in marketing ranging from event management to content marketing. When Melissa isn’t drafting a blog post, you can find her watching stand-up comedy, attending a concert, or rooting for the Oregon Ducks.