Design: Can You Be My Hero...Image?

Design

Can You Be My Hero...Image?

By Barry October 2, 2014 • 3 minutes to read

In the past few years, there has been a major shift to a more bold, flat, mobile first and depth filled web. Many of today's websites are using new methods to keep user interest through many trends that hopefully will stay around for a while. One of these new methods is a large image filling most of the home page to showcase information to a user, replacing the slider on a website. This image is called a Hero, and its definitely one of the newest love affairs that developers are using on their newly created websites.

There have been many websites that have embraced the Hero Image on their homepage. One of the most prolific companies to use this technique is Apple. Apple uses large product imagery on their home page with minimal text to highlight products. It creates a strikingly beautiful and clean showcase of what the company currently has on offer. This type of user experience is fantastic but this is currently limited to a static image. What can a developer do with a Hero Image to make it a more interactive and captivating experience?

Screen Shot 2014-10-01 at 3.24.43 PM
Apple.com Home Page with Hero Image

As a web developer, there are many new technologies that are at your disposal to create some great "magic" for a client. Since the dawn of HTML5, web developers have been given access to features that were never available before. One of these is access to a mobile device's accelerometer and gyroscope. These two features give us access to how the user is viewing the content and at what angle they are holding their device. Since web developers can now access this type of information, how can we use it to enhance a website? That answer is simple.

Since we can determine the way the user is holding their phone and at the angle they are viewing the content, can't we add an extra dimension to a website and add visual trickery to create a more immersive experience? We have three items that we can play with. There is a Hero Image and the angle and view of the user. The next step is to add depth to make it a more engaging experience.

By breaking the Hero Image into various individual items, such as background, buttons, text and imager, we can add visual depth and layer these items on top of each other. Using some clever mathematics, we can then shift these layers based on the information we receive from the Gyroscope and Accelerometer to give the user the perception that their content has shifted in perspective and that can give our Hero Image some real interactive effects. This could lead to some very interesting developments into how we create some really great content and be ahead of our game.

I cant wait to try this out on a client website.

New Call-to-action

Similar Articles

Inbound

The difference between inbound and outbound marketing
February 19, 2018 • 3 min read

Inbound

How long does Inbound Marketing take to work?
February 17, 2018 • 1 min read

Inbound

5 Inbound Marketing basics your start-up needs to know
February 16, 2018 • 3 min read

Inbound

5 Big Advantages of Making Your Website Inbound
February 15, 2018 • 2 min read