What makes a great Home Page?

The quality of the homepage, the first pillar of your website by its centrality, has a decisive impact on the performance of your business, a reflection of your brand image or the efficiency of navigation. Build, arrange, structure, designer and optimize the main page requires a methodical approach combining the penalty and the complexity of the background work as form. What should visitors arriving on your main page? How clearly present what you do? How direct incoming traffic to landing pages keys? To answer these questions, basics, intuitive, and indispensable to visitors, are now clearly recognized but the right construction of a homepage also leaves room for creativity and testing.

Prerequisites before of creating your homepage

The homepage, a reflection of your value proposition

important factor in the conversion rate, the value proposition is the essence of content of the homepage of your website. Unlike a slogan, this formulation shows your visitors the problem you're trying to solve or need that you want to fill and reveals why you are better than your competitors. What makes a good-value proposition? Two main steps are required to write a USP ( 'Unique Selling Point') relevant on its home page:

Identification : Find value proposition is based on substantive work related determining the needs of your target, the confrontation with the offer you make and the highlight of differentiating elements relative to what your competition offers.
  • The formulation : Taking on a sentence, the value proposition must be clear, understandable in 5-10 seconds in the eyes of your target and easy to remember for your visitors. Find the key twist is essential but can be complex.
    • Get to the point : this 'headline' often contains the final and immediate benefits to be offered to the user. Simplicity is often the key.
    • Highlight : a visual or video can be combined and detailed explanations are to be inserted in the 'subtitles'.
    • Test your formula : a proposal should be tested. In parallel with the A / B testing, a first simple qualitative test may be to announce your value proposition to people for your target to analyze their responses, ask them a few minutes after you do, to highlight the highlights. Moreover, a historical listing the messages that convert and those which have not converted may be advantageous. On his blog, Neil Patel has aninfographic that summarizes all the issues and best practices for writing a value proposition.

More broadly, the homepage should be a reflection of your business strategy and, as business, translate visually:

Your marketing positioning: the homepage reflects the main areas of differentiation on which you press the visitor must be able to distinguish (VS low-cost luxury, modern traditional VS, etc).

Your brand: the homepage is to 'mark' the visitor with the graphics it contains (color code, logo, global design, etc). The graphics of the homepage is also essential to establish a clear brand image, consistent with the positioning and reflect your value proposition.

The homepage, the top of the pyramid

1. The hub for the majority of your visitors

At the heart of the tree of your website, the homepage is usually a point of entry, passage or benchmark for all your sources of traffic: visitors from the direct or from brand campaigns, those that content interested and want to dig up lost users on the site. The navigation of your website should be thought and planned from this central page so that it meets all of these needs and is tailored to the behavior of your target.

  • Draw navigation scenarios : build upstream personae reflecting the experience of your different types of visitors is essential for your homepage mark a good direction for each target. Upon arrival at his old homepage, HubSpot asked - or forced - these new visitors to make a choice between the two main declared personae of business owners and marketing professionals buyers to redirect them to the appropriate landing pages.
  • Choose navigation modes : the reflected navigation, your homepage will then highlight the appropriate navigation modes such as menu with mega menu to effectively guide your visitors to the side of the site, an internal search engine to simplify the course of your prospects directly to a specific content or visual push page heart to take him directly to deeper pages.

2. The heart of your SEO strategy

For the SEO part, the homepage is again at the top of the pyramid but must follow a different perspective of improvement, more user-centric experience. The Homepage SEO 'can usually be turned logic' focus keyword research 'is optimizing your homepage to Google through a specific keyword. However, its SEO value is undeniable and must be worked. The choice of the pages to which it points is paramount to effectively transmit the strong receiving traffic from inbound links from the homepage to deeper pages. So remember not to clutter your home page too many links but rather make strategic choices. The title tag should also be focused on your brand or your main product. Also, make sure that your meta description is completed and contains your value proposition. Insert OpenGraph Facebook and Twitter to promote Cards shares from the homepage. The choice of tags and content are so fundamental as this page will appear in branded generic SEO SEO as if the driven semantic work is good.

The ergonomic design of your homepage

The fundamental aspects of e-commerce homepage

A classic homepage e-commerce must contain a series of standard elements that have now become 'must-have' being highlighted by the literature, rich on the subject, empirically verified by numerous tests and truly anchored in visitors browsing experience.

Essentials header

  • navigation menu and mega navigation

Remember to accompany your main horizontal menu of a mega-navigation menu, very convenient for complex sites with many sections, will significantly improve usability. The mega menu can be in relative size to fit the content, text or graphics including product images, open or transparent background for a more attractive design. Its opening may be by rollover or click. Badly implemented, for example, placed on the path other navigation objects, the 'mega drop down menu', however, can produce friction on your homepage and potentially increase your bounce rate.

  • Search engine

Placed in the header, the internal search engine can then be constantly available to visitors. Beyond positioning, design and formulation are also essential. You can view call-to action differentiating or present standard icons as the microscope and test engaging keywords like 'search' or 'find'. 

  • Shopping cart and client connection account

Even empty, access to the basket must always be visible from the header. Placed in proximity, the customer account connect button is also an important landmark. Avoid moving its e-commerce functionality but group them immutably top right to track the surfing habits of your users - think amazon.com  ! - Rather than seeking differentiation on this point, a possible source of tension for purchase.


Essentials in heart page and footer

  • competitive advantages and value proposition

It is preferable that the wording of your value proposition appears at the top of your homepage, deepening in the heart of the exhibition page with your competitive advantages is equally fundamental.

Highlighting many benefits such as loyalty card, the free delivery and especially the ubiquity of cheap-and make that as to measure it scrolls the homepage, the user becomes really convinced Cdiscount is the first french e-retailer.

  • commercial animation elements 

There are not that new visits. Beyond the first session, your homepage is also the main return path for your repeat visitors. His animation is paramount. No visible change from the homepage, your visitors will think logically it is none of your entire site, the possibilities to convert move away and the bounce rate of the home page as risk of increase. To live the home, hold two categories of shares in connection with the merchant news: promotions and new products. Difficult to reconcile without overloading the homepage, you may need to, again, make strategic tradeoffs depending on your brand image, the expectations of your targets and structuring the content on your home page. Another tip editorialise your animations in a good rotational frequency in order to familiarize the user while reconciling respect for your trading calendar and seasonal dressing. 

  • Elements of reassurance

At the base of any conversion, confidence should come out from your homepage. For the leaders of e-commerce as e-retailer in the launch phase, the reassurance elements are now code to create a favorable environment for purchase for e-shoppers. Leave commitments 'money back', present a secure URL (https), put forward a payment security label (type McAfee Secure or Versign), view customer testimonials, or to give the numbers and availability of your service are all elements available to reassure your users. Always remember to test the items you want to present and their location because the effects of reassurance elements can sometimes have the opposite effect and create doubt in your visitors.

Design its models, macro-zoning in wireframe

Construction of the homepage is a milestone that place more frequently in the creation of the layout of your website. Observe these steps can avoid errors of important structures and difficult to change later.

The macro-zoning: cutting your homepage

The zoning allows to list and begin to prioritize content present on the homepage to release a summary vision of his organization. 

The wireframe: the precise structuring of the content of your homepage

Also centered on the bottom, the wireframe to define more precisely the location of the different elements of your page. This structure then leads to a homepage prototype that offers the opportunity to work on a functional model "to scale" with real clickable links for more details. You can couple this mockup prototype and test your user if the script is good, or if the graphic should before development.

Online media face a complex challenge: how to make the arrangement of efficient information from the homepage? Besides being attractive to the eye as a real one 'newspaper, the Slate home page display combines many news without giving the impression of being overloaded. To achieve such performance, the site first mask its vertical drop down to not let it appear that click on the associated icon. All included in an insert and associated with an illustration, the various active topics vary only of importance depending on the size of the image. Further down the homepage, essential complementary items are present: 'In Brief' brings together the brief, 'Sharing' includes the most viral products, 'Folders' contains large formats, 'Data' concentrates the key figures time and data-Vizualisation site. Less fundamental, some more confusing or redundant components lose some users like the category 'Magazine. notoriety sources, the number of subscribers is present on the homepage at key locations such as heart homepage, and sharing articles are visible on hover the mouse pointer. However, Slate displays '0 precursors on Google+' which tends, in addition to having no interest, to dehumanize and discredit the enhancement of the community from the site.


Paramount to your business, real brand, considerable input from traffic and central guide to the ergonomics of your website, the homepage must be the result of a complex balance. In a word, consider follow standard navigation and intuitive elements to reduce friction but always leave room for tests and creativity to differentiate yourself.