Make first impressions count with bold hero images

You only get one chance to make an excellent first impression and in terms of web design that begins with a great looking header.  The image you choose on your home page will have an immediate impact on your visitors, for better or worse, it can also be a deciding factor in whether they opt to stay and browse, or click onwards.


That’s a lot to ask when we’re talking about one image, but the key to making it work is designing a hero image that attracts viewers and holds their interest.  Contrasting each element in use, from scale, to colour and size is technique used by many successful brands.  Here are a few ways to make it work on your website:


Crop with care

Don’t get too caught up in thinking the image has to precisely fill an entire screen on each device.  Instead, size it to fit in with the rest of the content a page contains.  Make sure the various other elements are clear and easy to find, by leaving room for them.  Depending on how your page is laid out, you might consider scaling up the image to be larger than the screen, or cropping it to a smaller size than the window it’s opened in.


Users enjoy animation

Even a small touch of movement can capture the imagination; it doesn’t have to be a Disney-style full-blown animation.  Try little areas of interest which are easy to spot, but don’t threaten to overwhelm the most important aspects of the page.  This is a more subtle, and unexpected alternative, to the brighter, showier video headers which are present on many home pages.


Try daring typography

The typography which adorns a hero image should make the user sit up and take notice. Go for a memorable composition that’s eye catching and direct.   You can use a combination of font and words to achieve the desired effect.  Forget the timid ‘Hello’ favoured by some sites; your message should be engaging, readable and intriguing, even for people with the shortest attention span.


Never forget the Call to Action!

After they’ve looked at your fantastic hero image, your users should complete some kind of action.  How do they know what that action is?  Simple – you tell them.  From scrolling down to see more, clicking a link to your products and services, or completing a form, make it clear and easy to differentiate from the rest of the page.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 − = one

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>