From Zero to Hero: Using Oversized Images in Your Site Design

March 25, 2015In Web Design, UI/UX4 Minutes

All puns intended, a huge trend in current web design is the implementation of oversized images (often called mega images) on the main page of a site. These images, when placed and curated properly, create an instant connection to the information on the page and illuminate the content. Even static, still images that are oversized in this application have a life-like, somewhat interactive quality. A hero image is just one of the many ways to achieve this.

The hero or mega image, as the names imply, is usually the first thing that draws the eye to a web page and is most often placed in the background with text overlay. Choosing an image that is relevant to the brand or illuminates the lifestyle it creates is critical to ensuring a user connection. The use of an extra-large image stretched across the entire page is a newer trend, however, the hero header has been around for some time. A hero header is the use of a hero image along with text and navigation at the top of a page.

Screen Shot 2015-03-24 at 9.05.12 PM

The use of oversized images can be greatly beneficial, however, a few main points should be handled with care to achieve the best result.

Quality Photography

This cannot be stressed enough – using outstanding, relevant photography is a non-negotiable aspect when choosing a mega-image website design. It’s advised to avoid stock photography and work with an experienced photographer that understands the brand. Hiring a professional has many benefits, the foremost being that the photos will be specified to the brand experience. Whether taking photos of a product or the people within the organization, this creates the most tailored and authentic outcome.Well Designed Typography

A great deal of emphasis is placed on typography when using a single image. The eye is drawn to the content as the use of a single image is easier for the user to process. The typographical elements will either be placed on top of the image or in a space that is free of imagery, strategically working around the image. A simple type should be chosen to keep the main focus on the image and cognition at its highest level possible.Careful Branding

There is a level of commitment in using a large image, so it has to be chosen carefully. Alongside making sure that the image chosen is on-brand, incorporating logos and other creative assets is a fine line of integration. Choosing a simple version of a logo or brand mark in a single color has been popular, though using a true-to-color logo will create a higher level of brand awareness.Testing, Testing

If working with a redesign, it’s important to conduct testing on the old version and the mega image. Users may not be accustomed to the use of oversized images, though they are gaining traction by the day. Conducting hero image split A/B testing will give a good idea of what works for a specific audience.

Screen Shot 2015-03-24 at 9.03.34 PM

it’s clear that the use of oversized images is a trend that holds up to the hype. Refreshing, or designing a new site with imagery that stands out and is aligned with the brand it represents is a huge asset to helping a company grow and deliver an optimal user experience with a hero image.

Person at their desk on their laptop

No-Code Web Design

Advancements in technology and digital design are two-fold. One, it should be innovative and disruptive, and two, it should be efficient. It is no secret that the digital, online world is fast-moving, ever-evolving, and highly competitive, thus…

App UI Design

Proof of Concept: 4 Effective Prototyping Tools

Whether with an internal team or client, having the tools to present an idea and show the process to delivery effectively is integral in gaining stakeholder approval and, ultimately, the best end product. A creative team requires a toolbox to aid…

Why User Experience Matters

We can all agree that design is important, and it’s even better when something looks good and works well form meets the function methodology. So, then why is user experience such a hard sell for some? With regard to design, UX is just as critical…