01202 237370
In a previous article (found here), I looked into how useful slider graphics / carousels are on your homepage. We found out that they do nothing in terms of driving traffic past the homepage, so I now want to look at a few different alternatives that can be used instead.
The first of these alternatives is the Hero Image – A large background image that completely fills the screen above the fold. It can be accompanied by a title bar at the top of the page, and if you want to include anything else on the homepage it should appear below the fold (Category grid / Footer etc…). The purpose of a Hero Image is simple – to convey your brand image instantly to the user and the sheer size of the image means that the user can’t not see it. Basically, it’s a simple and effective branding technique!
The Hero Image can be used in a variety of different ways – you could insert a large title / caption with call to action (Email capture, Sign Up etc…) in the centre of the image to create a focal point for your home page. You could even use the Hero Image to show the latest promotion on your site with a small amount of text and a link to the promotion, and now for a twist…the Hero Image does not have to be an image at all, you could use this space to show a short looping video that represents your brand image (please note that this video should not contain any dialogue, sounds or music as it will distract the user from the page). Overall, the key to an effective Hero Image is to keep it simple!
A great example of a well used Hero Image can be found on Catscarf. It represents the brand image, it is clean and simple, and it uses a link to a promotion on the site.
So a Hero Image is one option you could use to replace your uneffective carousel, another alternative is to fill this space with a large Category Grid! We already know that in most cases the highest engagement on a home page comes from the category options so why not use this space to really highlight the categories you offer? A Category Grid instantly gives your customers the options of the items you stock and should really help push customers in the right direction resulting in an increase of home page engagement. You could even include Hover State effects on the categories so when the user’s mouse hovers over them the image state will change to something different. This could be as simple as introducing text over the top of the image, or as complex as changing the static image to a GIF. In a nutshell, using a Category Grid gives you a simple and effective way to play to your strengths on your home page.
A fantastic use of a Category Grid can be found on Faebric. The grid is clean and simple, has a lovely balance of text and images, and uses a very subtle hover state effect where the picture colour will slightly lighten as the mouse is hovered over the top of it. I love this effect!
The final alternative on my list is a more experimental design feature to use on your homepage. It is called a Cinemagraph. If you are interested in the future of web design trends you may have already read about / seen Cinemagraphs as they have been dubbed as one of the main trends to be used for 2017. If you are not as much of a design geek as me, let me explain to you exactly what a Cinemagraph is. Imagine taking the concept of a Hero image but making the tiniest part of the image slightly move. It is not a video, it is not a static image, it is a bit of both! To explain a bit more let me describe an example to you – imagine a photo of a lady wearing a long dress, standing in an open doorway, everything is still in the photo apart from a tiny piece of fabric at the bottom of her dress which is moving ever so slightly in the wind. This is a Cinemagraph. The idea is to take the emotions you get from a photograph and adding a very subtle element of interest to part of the photo. You are using the same branding techniques you would use with a Hero Image but are adding emphasis to a specific part of the brand message. If you are thinking about having a large Cinemagraph on your homepage please remember the golden rule – Less Is More! If you go crazy with multiple moving aspects it will be messy, confusing, and over the top fail which will only annoy site visitors.
If you are interested in seeing some great examples of well created Cinemagraph’s check out Fixel where you can view multiple galleries of them.
So there you have it, a few ideas you can think about next time you are wondering what to have on your homepage instead of another boring, non-engaging, generic slider graphic! If you are interested in applying any of these homepage alternatives to your site please feel free to contact us on [email protected] and we can start making your ideas a reality!