Visual hierarchy is about how to control the attention of users, how to influence where they look when they come to your site. The correct visual hierarchy of elements is the basis of any design on every page, in every section of your website.
The homepage is a starting point for many users coming from your organic search, directly to your website, or through recommendations. Top part (usually it's called a hero section) is the key element of the homepage.
How well the design of this part of the page is done depends on what emotions the user will experience in the first seconds and how quickly he will switch to shopping mode.Recommendations
- If you want to get attention to a certain element, make it bigger compared with elements around it (i.e. big bold title will certainly take more attention than a small one, a big CTA-button will certainly take more attention than a text link or a subtle button)
- The more prominent element, the more attention it will get (i.e. an orange CTA-button will get much more attention on the white background compared with a grey CTA-button). Use contrasting colors for the elements that need to get users' attention. Must-have for CTA-buttons!
- The higher the elements on the page are, the more users will notice them. Place the most important things above the fold, closer to the top of the homepage, while less important elements further down the page
- Don't clutter space with many different and prominent elements, because they will compete with each other for users' attention. Use a lot of white-space near value propositions and CTA-buttons. Don't try to put everything on one screen, because it will just break the visual hierarchy. Standard structure of a well-crafted hero-section is image + title + subtitle (optional) + CTA-button (or a few CTA-buttons if it's relevant for your offer and business)
The best way to explain what is good and what is bad is to look at the real examples of good and bad visual hierarchy.