Your hero image is too big and here’s why it works

Have you ever wondered why we do the things we do? Do our processes, routines and techniques actually mean anything or are we simply following established trends?

This is a question I ask myself over and over and that question occurs frequently when I’m designing.

Recently, I had the chance to work with an amazing client; they’re smart, unintrusive and trusting but they come from an era before UX was an established science. That combination of factors makes them beautifully naive. Where most clients see limitation, they see possibility.

Intelligence + Convention = Naivety

So there I was, in California, a little jet-lagged and running on Red Bull about to present my first deliverable to this client. I couldn’t wait to ship this out. I was so confident that this design would hit the spot and I stood up and presented the work to a few of the key stakeholders. I thought it went well.

I opened up the presentation for questions — the first one out: ‘Why is the hero section taking up the majority of the screen’. My mind went blank. Have you ever been completely thrown off balance by something that someone says? It was to the point where you don’t know what to do — maybe it was the jet lag.

My first reaction was one of disdain. How could my client not know about the hero image trend but after a bit of squirming I managed to formulate some kind of bullshit answer about visual hierarchy. I was listening to the words coming out of my mouth, they were less than convincing. In truth the honest answer was; ‘I don’t know’ or ‘It’s a well established trend’ or ‘It looks cool’ but those aren’t really good enough when your client is paying thousands of dollars for marketing website.

Here's something we made for our client Renoviso. Notice how the buttons are mapped to the main user goals and how the whitespace reinforces this.

Here’s something we made for our client Renoviso. Notice how the buttons are mapped to the main user goals and how the whitespace reinforces this.

The Truth

The simple fact was that I couldn’t really articulate why I had chosen to take a particular path. If we designers don’t understand the effect of design decisions on users and business goals then we shouldn’t be doing what we do.

So, let me answer that question from the very first meeting:

Why is the hero section taking up all of my screen?

Let’s consult a different medium, the front-page newspaper for example, and liken it to a website. The title of the newspaper is the most prominent along with the front page image, and as you progress down the page, headers and images typically become less prominent. As you know newspaper editors push the main story to the top of the page and generally focus huge swathes of real estate to a single, important story in order to grab the readers attention.

User Goals

Generally, modern web trends take the same approach. The visual hierarchy and the ‘weight’ of each element on the page should be determined by our users’ goals. Generally, we assume that users will be visiting our digital products with pre-formed ideas about the subject they need help with. As a result we can then assume that users will look to immediately try to satisfy this goal. By using a large header that specifically targets users’ wants and needs, we are effectively mapping the interface to the users’ primary goal. In essence, designing to pre-empt and satisfy the user as quickly as possible.

Large Hero Images

Wherever possible, we should try to avoid displaying large hero images that call too much attention. Ultimately, if the users’ focus is on the background image then we’ve already lost. You’ll note that with a lot of my work, the images blend into the background.

What we’re trying to create here is a contrast between the most important content at the top of any given page and the rest of the content on that page. We use large backgrounds to push content further down the page into the periphery and by doing so we end up with a much stronger call to action or goal satisfaction proposition with bags of clarity.

Resolutions

Something that we definitely need to ensure we consider is resolution. Check your statistics. If the majority of visitors are using 1024 x 768 screen resolution make sure you have a plan to cater for them.

Given the sheer amount of devices and resolutions that we have to deal with building for today’s web, we have to ensure that our designs are responsive and that they are fluid enough to adapt to the myriad of possibilities when it comes to screen size.

Overall

If you take anything away from this it’s to remember to always question your design decisions because it’s so easy to fall into a formulaic trap — let’s not copy trends for the sake Dribbble likes. Make your design work mean something.

Whether you run a small business or a government agency, we’d love to hear about your project.
Let's Talk