Hero Images

A hero image is a very important feature of a responsive website. Find out how 3D Box Shot Pro can help you make them.

The importance of hero images and responsive web design.


There is a growing trend in responsive web design at the moment. Responsive web design is a survival requirement for any web based business these days. Google now penalise websites than are not responsive. So what is responsive anyway? A responsive site renders well on any device that can display it. That means mobile devices, tablets, phablets, PC and MAC, Smart TV’s and any of the other million and one devices capable of displaying a web page. If your website isn’t responsive then it will perform less well in the search results. This effectively means that you need a responsive website to remain competitive.

Responsive sites require a different approach to graphics compared to conventional web design. For example, if you are marketing an downloadable application, you need a method of showing off the software on a page and making it look desirable. A good example of this is the macaw website. Macaw is a responsive web editor that’s worth checking out:

Screenshot of of Macaw.co website

The above the fold front page features about 35 words of text and a massive perspective screenshot, which scales seamlessly on all sorts of devices. This image is known in design circles as a “Hero Image” (https://en.wikipedia.org/wiki/Hero_image) . The Hero Image succinctly explains what the product is and does in a very visual way. It’s a very good landing page with a clear set of call to action “Buy It” and “Start Trial” buttons. Significantly, the Buy It button is highlighted by default (presumably this converts better). It also clearly indicates that Macaw works on Windows and Mac.

You can easily generate perspective screenshots like this in 3D Box Shot Pro. Here a quick example of a “Hero” screenshot generated in 3D Box Shot Pro inspired by the design of the Macaw page:

Example of a perspective hero image rendered in 3D Box Shot Pro

However, 3D Box Shot Pro can do better than this. Given that the tag line we used includes the expression “learning curve” perhaps a curved screenshot would add something to the page? Also as we’re trying to showcase a 3D Application including a 3D render from 3D Box Shot Pro would help:

Screenshot of a mockup website with a Hero Image Generated in 3D Box Shot Pro

This helps to create a far more eye catching image. Using this design technique, it would of course be possible to create a compelling “Hero Image” for any sort of software application or digital download. Simply create a perspective screenshot of the application in 3D Box Shot Pro and render a box shot or eBook cover to place on top of the perspective image. Simples.

Example of a Hero Image Generated in 3D Box Shot Pro featuring a Software Box

Andrew Gibson

CEO of Jellypie Software.