Thursday, July 9, 2015

Web design trends: Unique hero graphics

Hero graphics—those large banner images typically accompanied by a minimal amount of text on a homepage—continue to be a popular web design trend, and for good reason: Implementing a hero section on your homepage is an effective way to add visual interest to your website and to reinforce your message.

In this post we’re going to dive deeper into this trend by taking a look at some websites that have taken a unique approach to the hero graphic.



Typically, a homepage hero section will consist of a large photo and some text. However, each example below has implemented more creative hero elements, from subtle animations to interactive design elements. By taking a unique approach, these websites stand out from the crowd and make a greater impact on users.

Connector - Illustrations with subtle animation


This hero section uses subtle animation on the background images to add depth and capture user attention. View live

Mambo Mambo - Overlapping graphics with scroll effect


This website uses overlapping graphics and scroll effects to make the hero section more interactive. This helps to show off the creativity of the company. View live

Pauline Osmont - Unique navigation


On this homepage, the navigation is featured as a design element of the hero section, and then moves into regular position once scrolling. This is a good way to call attention to the important sections of the website. View live

Anton & Irene - Photos with hover effects

The hero photo on this website changes as you scroll over it, creating an interactive experience for users. This helps to showcase the personality of the company. View live

TrustNet Financial - Interactive background elements

TrustNet Financial has a hero section with subtle animations and interactive background elements which draws users into the site. Taking this unique approach helps to enforce the idea of innovation the company wants to portray. View live

GB - Animated Twitter feed

GB features an animated bubble with their latest tweet in the hero section of the website to promote social media engagement. View live

Hell'o Baby - Illustrations and hover effects

This website uses animated graphics and interactive icons in its hero section to engage users. The animated illustrations are carried out throughout the rest of the website as well to reinforce the brand. View live

Black Diamond Ventures - Interactive video

Black Diamond Ventures incorporates looping videos and interactive graphics to make its hero section more impactful. The website uses video to convey its overall message and make a connection with visitors. View live

Does your website make an impact?

TBH Creative can help maximize the effectiveness of your website design with our variety of web design services. To learn more about how we can help, contact us.
Kayleigh

About the author | Kayleigh Circle

Kayleigh is a web developer at TBH Creative, specializing in front-end development and responsive design. She likes to blog about a variety of web design topics, including design tips, the latest trends in the industry, and how to make your website more successful.

View more posts by Kayleigh
 

Subscribe to this blog