A few weeks ago, while on a conference call, a client started questioning the company’s policy on including a rotating hero image slideshow on home pages for microsites. She wasn’t sure that in the case of a microsite that it made much sense or gave the site visitor any benefit. Which got me thinking, has this practice become prescriptive? Are web designers just automatically following some formula? How did this become so commonplace?
It’s easy to see how this became such a common practice. A human brain will register in a fraction of a second whether it likes something or not. That isn’t much time to engage a website visitor. Since humans are such visual beings, what better way than putting up a nice big image to grab their attention? Couple that with marketing messaging and a call to action, now you’ve got a recipe for quick a conversion. Do that 4 or 5 times with a rotator? Now you are increasing the reach of your messaging.
This practice makes a lot of sense for consumer brands, eCommerce and some service-based companies. However, if every company follows the same basic layout (hero-image-rotator-with-call-outs-underneath-followed-by-text), everything starts to look the same. It puts you in a box and doesn’t give you a differentiating user experience on your site.
So what are you to do? Is there any hope to break out of the mold?
Some of the more interesting things I’m seeing used in lieu of a home page slideshow are: big backgrounds, using video, illustrative typography and immediate user interaction. In this post, let’s take a look at the first two.
Big Backgrounds
Big backgrounds aren’t something new. As bandwidth and desktop monitor sizes have increased, this technique has gained more popularity. Large background images are pleasing to the eye and when blended into the site design as a whole, they are be quite dramatic.
Case in point, The Book of Beards. This site is dedicated to highlighting and selling a non-profit book about beards. All the proceeds go towards fighting cancer. The site is anchored by a gigantic image of a bearded man and as you navigate through the site, layers of text cover it while it serves as a background image.
Victoria’s Secret does an excellent job of blending the imagery into the site. The photography shows off the merchandise in a grand way, while incorporating the types of offers you’d expect from an eCommerce site. Range Rover breaks the mold by filling the page with large imagery and using navigation dots to scroll you vertically through the experience. The parallax scrolling uncovers more detailed imagery that adds to the drama of the site.
Range Rover breaks the mold by filling the page with large imagery and using navigation dots to scroll you vertically through the experience. The parallax scrolling uncovers more detailed imagery that adds to the drama of the site.
Video
As HTML5 gains popularity, video use is becoming more prevalent on home pages. Either as a full screen background or as a smaller, informational piece of the page, video can create a richer, more immersive experience for a user.
Spotify uses the tagline “Music for every moment” prominently on the page and then loops a large video in the background of some of these moments. Swinging in a hammock, running through the forested countryside, walking down a busy city street, etc. Users can relate to the moments shown in the video and connect emotionally with the brand.
Typography
Ah, typography. One of my favorite subjects. I am and always have been enamored with typography. Masterful typography can convey tone, mood and identity through the simple use of styled words. Here are some brilliant examples of using excellent typography in place of a more traditional home page slideshow.
Poppies Flowers uses a chalkboard texture as the background and what looks like handwritten text as navigation for the site. The overall effect is very rustic. The imagery chosen fits in perfectly with the typography and lends more country charm to the page, really giving the user a concrete sense of the the company’s style and brand.
The Rule of Three site is a very dramatic, but stark, example. The large serif font laid over the dark, subtly textured background dominates the experience and focuses on the central theme, “Words.” The rotating subheads underneath complete the thought, adding more depth to the power of words. Pretty powerful stuff for a group of copywriters to express through their home page.
The Austin Eastciders home page just screams Americana to me. The slightly distressed type faces and the vintage-style illustration of the product bring you back to a simpler, less technologically driven time. This fits in so well with the brand and the product: a simple, classic carbonated apple cider.
Immediate Interactions
Another tack that it becoming more popular is taking over the traditional home page slideshow area with an immediate task the user can complete. Out of all the other examples listed in this series, this is the least passive experience for a user. Sure, some have large backgrounds or good typography, but the utilization of high-value page real estate is focused on user interaction.
Pitchbox uses a darker background to offset the lighter, interactive area on the page. In four quick steps, you complete a profile and allow Pitchbox to help you find a better job. The home page conveys simplicity, credibility and exclusivity.