Do you know why it is so important to nail your home page header section?
Because it can make or break your visitors’ first impressions.
Yes; your home page header is a 10-second opportunity to prove to your visitors what value the site will give to them. And, you should use this enough space cleverly to deliver a to-the-point message that tells your visitors all they need to know.
So, if you’re attempting to figure out how to begin your site with bang, perhaps you’ll get some inspiration in the following header design trends of 2017. Take a look:
- 1) Large “Oversized” Hero Images
- 2) Sliding Images
- 3) Parallax Scrolling Imagery
- 4) Video Background
- 5) Brand Mascots
- 6) Typography
- 7) Content First
- 8) Product First
- 9) CTA First-and-Center
- Watch DSIM Trainees Celebrating Last Day of Batch
1) Large “Oversized” Hero Images
There are huge number of websites getting populated by the full-width hero images these days; catching eyes above- the- fold. An “oversized” image enables your website appear much larger than a typical design and works as a great method to draw visitors further into the content.
Above is an example of Cleverbird Creative website; it has used a full-screen singular and striking background image overlaid with simple text to welcome visitors. It symbolizes a different approach of using large images and tells that there is a lot more to found lower in the page; making a visitor feel curious to scroll down and continue reading.
The trend of large attractive headers can be better understood with this example of Andrew Elsass’s homepage. Here a large full screen background image with a self-photo has been used which gives a quick personal touch and appears completely engaging.
2) Sliding Images
Sliders and carousels were a hot design trend a few years back, but then something changed and many of us started questing this as a reasonable design element.
However, the trend is still many of the great designers’ favorite as aiding a lot of images/content to exist within a single page; reducing clutter, giving point of view, grabbing attention and being multi-purpose.
‘A header design by SAVILLE’S’
An example of Pierre’s Ice Cream Company website header design; the sliding images ask you take control of your flavorful journey, seeing different images within one space.
An example of SweetBasil: Here are the beautiful high-resolution sliding images that automatically scroll from one to the next and keep you seized around to see more of what has been offered.
3) Parallax Scrolling Imagery
Parallax Scrolling is being seen hugely and commonly in present day web design.
We would know first what it means?
It’s a kind of visual illusion produced by moving different elements of an image at different speeds.
It gives the illusion of movement and depth, which, matched with a generally static and long scrolling site, includes interest and excitement; ideal for when you wish to grab your visitor’s attention and is absolute fun to browse.
In circumstances where resources to create a video are unavailable, or you don’t have images to show off in a slide deck, the parallax effect might be the ideal approach to wow your visitors.
Look at the above header the Australian UX design agency August has made; the parallax scroll has been offered a transformative edge, most likely surprising visitors with the unpredicted result of the scroll.
Creative studio La Moulade’s parallax scrolling technique:
4) Video Background
The Video Background trend is growing quickly in popularity and when used as a keen set up integrated with careful attention to detail, ends up being an enormous benefit to the overall design and website branding.
So, this is one of the recent trends with a large following.
BUILD FILMS: The Video Production Company has brought its entire story in an imaginative and beautiful way; in short a creative ambiance brilliantly offered.
5) Brand Mascots
For sites using Brand Mascots, it’s the better way.
The header is the place where you can introduce your visitors to the characters they will be going to meet all through the way. It stands out and is super memorable, giving visitors a chance to get used to your brand and to recognize you even after decades later.
Here is an example from Fork, an open source CMS:
Typography as one of the core web design principles can really make it or break it. When a design features excellent typography imaginatively, this may bring about inspiring and visually pleasing experiences.
Here, while looking at the Slack example above, you’ll find the elements making its typography the engaging one. The size of the font is perfect; the typography is clean and clear and it’s been combined with the size of the main messages. Together it stands stirring and utterly eye-catching.
Be Visionare: A well-balanced use of typography and illustrations!
7) Content First
Content first header designs work exceptionally for websites with premier focus on delivering droves of content to visitors. Most of the news sites or blogs can be found following the approach.
Here, you serve your primary purpose i.e. enabling people to clearly read your content instead of bogging them down through extra reading. There is not any need to mince your words
See the example by Glamour and get on how to do it right:
8) Product First
A well thought-out and perfectly designed eCommerce website goes mostly with the approach as helping visitors to get into those they have come to the site for. Yes; their top-selling products/newest launch/upcoming range to allure visitors ahead.
It’s of no importance for these product retailers to invest their time on using the header to write a catchy headline or provide a video explainer about the company.
See how Apple does it:
9) CTA First-and-Center
You can use your header space highlighting special call-to-action. This proves to be a great method to let your visitors see you have something truly special to offer; enticing them to make a decision to buy it or download it.
An example of ‘The Everywhereist’: The blogger here does a wonderful job using CTA ‘BUY IT NOW’ as telling visitors that here is something they can download or buy for.
The trends mentioned above will be in demand for more years as owing credit to its assortment of uses. Now, get enough inspiration and make your project with a great sense of style and creativity.