{"id":9756,"date":"2015-11-10T05:15:42","date_gmt":"2015-11-10T05:15:42","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=9756"},"modified":"2026-05-08T01:09:17","modified_gmt":"2026-05-08T08:09:17","slug":"web-design-trends-analyzed-hero-headers-letterboxes","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/web-design-trends-analyzed-hero-headers-letterboxes\/","title":{"rendered":"Web Design Trends Analyzed: Hero Headers & Letterboxes"},"content":{"rendered":"

Full-width above the scroll images are one of the most popular trends in website design. Whether the image is still or a motion-based video, use of a hero header is definitely a popular option.<\/p>\n

And that makes perfect sense. 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. In this post, we’ll show you how to use hero headers or a letterbox style to dazzle your users and catch their attention. But first, let’s examine the differences between the two. <\/p>\n

Hero Header<\/h2>\n

\"Screenshot<\/p>\n

Photo credit: <\/i>Pierre’s Ice Cream Company<\/i><\/a><\/p>\n

A hero header is an oversized display with a visual, text and navigation elements above the scroll in your design framework. 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 <\/a>above.<\/p>\n

Hero headers can be built using existing images from your collection. Or you can create new imagery that boldly stands out. Or you could use a kit to mix-and-match pieces for a semi-custom look. <\/p>\n

One thing that you’ll want to keep in mind is your use of images. You want something that’s distinct and stands out. Think about Apple<\/a> \u2014 who are the masters of the hero header. In the example below, you’re immediately drawn into the copy by the cascading iPhones. <\/p>\n

\"Screenshot<\/p>\n

Photo Credit: Apple<\/a><\/p>\n

Images can make or break a hero header. Choose the wrong image and visitors to your site will bounce out faster than a speeding bullet. Pick the right one and they’ll be drawn into your site, sticking around to see more of what you have to offer. <\/p>\n

Letterboxing<\/h2>\n

\"Letterboxed<\/p>\n

Photo credit: <\/i>Playstation<\/i><\/a><\/p>\n

The letterbox style adds some additional styling and color to hero headers. When you visit a site that uses letterboxing, you’ll notice that a border frames the main image \u2014 like when you watch a movie on your TV. Below the image you’ll notice design elements such as navigation, search or branding. <\/p>\n

Letterboxing allows the image to have more room and makes the page less cluttered. The image still remains the dominant on the screen. 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. This is a definite bonus for brands looking to maintain a consistent visual across different channels.<\/p>\n

Once again, be choosy when it comes to photo selection. You’ll want to be just as bold as with the typical hero header. <\/p>\n

Now that we understand the slight difference between letterboxing and hero headers, let’s dive into how you can use them in your work. <\/p>\n

Universal Appeal<\/h2>\n

The reason hero headers and letterbox style designs have become so popular is because they have an almost universal appeal. They work for a variety of content types and play particularly well with photos, video and animation. <\/p>\n

All you really need to make the most of this trend is one great visual \u2014 are you sensing a theme yet?<\/p>\n

\"Screenshot<\/p>\n

Photo credit: <\/i>PayPal<\/i><\/a><\/p>\n

Hero headers are the perfect container for one bit of information. PayPal <\/a>does this exceptionally well. Throughout the site, you’ll find a collection of hero images and messages that make the user stop and examine the site each time they visit.Text and button elements work seamlessly with each image so the user is drawn in to see if the content pertains to them. <\/p>\n

\"Screenshot<\/p>\n

Photo credit: <\/i>Ride for the Child<\/i><\/a><\/p>\n

Video works in much the same way as images when it comes to the hero-style design. It takes a strong video clip and well-written copy to draw users in. Ride for the Child<\/a> accomplishes this with a fast-speed set of video clips to hold interest along with bold, oversized typography to really get users to click around. Platforms like Sendspark<\/a> have also pioneered the use of personalized video content in digital marketing, showing how hero-style designs work exceptionally well when combined with dynamic video experiences that capture user attention.<\/p>\n

\"Screenshot<\/p>\n

Photo credit: <\/i>Species in Pieces<\/i><\/a><\/p>\n

Make the most of your illustrations or cool animations with a dominant design element. You can actually design an entire site around some of these cool elements, such as Species in Pieces<\/a>. The interactive nature of the design combined with the hero-style image for a trendy look, but really keeps users with cool HTML interactions. <\/p>\n

10 Design Tips For Better Hero Headers and Letterboxing<\/h2>\n

While the image will steal the show in this type of design, you still need to include essential elements, such as branding and a calls to action. It’s important to match these elements to the image; you might have to go a little bolder than you expect so that the visual weight of text and other elements works well with oversized visuals.<\/p>\n

Here are 10 ways to do just that:<\/b><\/p>\n