Five months into 2017 and we are seeing a prominent web design trend. Full-width above the scroll images is captivating the imagination of the web surfers. Such a design pattern can be exhibited through the use of Hero Headers and Letterboxes. Both these header designs are logical inclusions in your website design plan. They not only look great, but offer the same eye-catching feel across devices (in terms of responsive design). Whether you include a large still or video image, whether you want to highlight a single offer or many at the same time these headers can help you achieve them with ease. When re-designing a website, Hero Headers and Letterboxes can be great options to de-clutter a website! So, let us learn about these new design sensations.
Hero Headers
It is a type of over-sized header display with a mixture of visual, textual and navigation elements. Such a header is placed above the scroll in your design framework. Though the choice of elements completely depends on the tastes of the web designer, the most popular trend is the use of photo with text and one navigation button. The Hero Headers are heavily dependent on their visual appeal, so a well thought out approach is essential in the choice of images and texts. The header works on the psychology of – if they are impressed they will scroll. And this effect can be only obtained when the images are really great!
Letterboxes
This header style contains some additional styling to the Hero Headers. Websites utilizing such headers use border frames over the main image. The large image can be compared to watching a movie on TV. Below this main image, there are other design elements sprinkled in such as navigation, branding content and search boxes. The Letterbox style provides more room to the images, giving the website a de-cluttered effect. As the header is quite similar to the social media cover photos, so the design is a bonus for brands looking for a consistent visual across all channels.
Tips for better Hero Headers and Letterboxes
- Drop Colors: If you have a colorful logo, you might want to showcase its black and white variant while designing these headers. Your logo should not compete, for attention, with the colorful header image.
- Bold Typefaces: You have to design for the contrast effect. The typeface you choose, for content over the header, should be bold as well as easy to read. It should be a part of the image and not compete or hamper it.
- Depth of the Image: The success you have with these headers depends hugely on the quality of the image chosen. The image should not only be colorful and attractive, it should be clear as well. Pixilated images waste the potential of the design. While choosing the image, think hard over what you would use. Choose an image that clearly gives out the message you want to show to the visitors first visiting your website.
- Fade Effect: Using the tint or fade effect on the large image helps designers provide the desired contrast between the image and the elements such as navigation, text and other elements.
- Think of Smaller Devices: You should be ready to re-size the image so that it loads evenly for mobile and other devices. At times, you might have to swap a larger image with a smaller one so that the design looks even.
- Text on Image: When you include text on image, make sure the main area of the image goes undisturbed. At the same time, the text should be easily readable as well. So, this again will require some planning.
- Keep it Simple: Designers tend to use an image, animation or video on the header. But do not get too greedy with the scope at hand and include multiple things. If you are implementing a slider, keep the pace really slow so that the visitor might be able to read the text.
The first thing a visitor sees at your website is very important. Hero Headers and Letterboxes keep the visitors interested and inspire them to look through the website.
