Now that we understand the slight difference between letterboxing and hero headers, let’s dive into how you can use them in your work. You’ll want to be just as bold as with the typical hero header. Once again, be choosy when it comes to photo selection. This is a definite bonus for brands looking to maintain a consistent visual across different channels. This style is easy to implement because the aspect ratios are very similar to the ones you’d use for the common social media cover photos. The image still remains the dominant on the screen. Letterboxing allows the image to have more room and makes the page less cluttered. Below the image you’ll notice design elements such as navigation, search or branding. When you visit a site that uses letterboxing, you’ll notice that a border frames the main image - like when you watch a movie on your TV. The letterbox style adds some additional styling and color to hero headers. Pick the right one and they’ll be drawn into your site, sticking around to see more of what you have to offer. Choose the wrong image and visitors to your site will bounce out faster than a speeding bullet. In the example below, you’re immediately drawn into the copy by the cascading iPhones. Think about Apple - who are the masters of the hero header. You want something that’s distinct and stands out. One thing that you’ll want to keep in mind is your use of images. Or you could use a kit to mix-and-match pieces for a semi-custom look. Or you can create new imagery that boldly stands out. Hero headers can be built using existing images from your collection. The stacking and layering of the elements is completely up to the designer, but one of the most common uses is a photo with text and element overlays, such as Pierre’s Ice Cream Company above. Hero HeaderĪ hero header is an oversized display with a visual, text and navigation elements above the scroll in your design framework. But first, let’s examine the differences between the two. In this post, we’ll show you how to use hero headers or a letterbox style to dazzle your users and catch their attention. This format works great with plenty of different image types, fits into responsive design frameworks and appeals to users because of its highly-visual nature. Whether the image is still or a motion-based video, use of a hero header is definitely a popular option.Īnd that makes perfect sense. Full-width above the scroll images are one of the most popular trends in website design.
0 Comments
Leave a Reply. |