Post Image

3 Powerful Ways to Design HD Website Backgrounds

Jerry Cao
By Jerry Cao on 14th September, 2015

The days of 72 pixels per inch being enough are coming to an end.

With the dominance of Apple’s retina displays, and the technology war that ignited with the competition, before long high-definition visuals won’t be so much of a special bonus as a basic requirement.

This article aims to close some of that gap and show you how to use the benefits of HD backgrounds while minimizing their drawbacks.

An Introduction to HD Backgrounds

With the increasing popularity of HD devices, detailed and visually rich backgrounds are stepping forward to take center stage.

These stunning backgrounds rely on a layering effect to simultaneously impress users while not drawing too much attention from the more practical foreground elements. This layering effect is crucial to the proper HD backgrounds. The site’s visual hierarchy must remain intact, and that requires the background not overshadowing the foreground.

As we explained in Web UI Design for the Human Eye, the separation of background and foreground is a natural function of human sight.

Screen Shot 2015-09-14 at 5.16.12 PM

Source: Booking.com

In the above example for Booking.com’s New Year’s Eve promotional event, clearly the most fascinating visual is the high-definition picture of the temple in Kyoto. You want your HD background to make an impression on the user without dominating the screen. In this example, the user can still easily see the text and title, smartly placed at the center over a vacant background section.

At the bottom of the page, notice how the navigation also stands out thanks to the white contrasted background.

While this separation of background and foreground can be done through artful layout choices, there is a shortcut: fading, shading, or blurring an otherwise overstimulating background will quickly distinguish it from the promoted material.

image03

Source: How Santa Are You

With the bright red and white, combined with the absurd content, this background picture could easily drown out the foreground – especially since the color white is a primary element in the foreground and background. By darkening the background image, the user can easily discern the text and calls-to-action, without the weakening the impact of the image.

In general, there are three main types of HD backgrounds:

 

  • Still Images
  • Videos
  • Animation

Below, we’ll discuss which one will work best for your site, and the best practices for incorporating them.

Still Images

Backgrounds of full-screen images aren’t new, however the popularity of HD is changing the rules.

HD displays allow users to see levels of details that were previously unavailable. Photos and still images never looked so breathtaking, and these types of backgrounds have the power to draw the user into the site, almost as if by trance.

image06

Source: Barrage

The asset management firm Barrage uses the still image background wisely. This awe-inspiring HD photo of nature suggests the firm’s reliability and the peace of mind, qualities which are accented by the high quality.

If you’d like to use an HD still image background, try following these tips:

  • Choose the right photo – The content of your photo will determine the background’s success. Make sure the tone and subject matter – as well as the colors – match the style you’re going for.
  • Use effects – As we mentioned above, blurring, shading, or filtering an image can help optimize it for your site, especially if it’s too distracting on its own.
  • Keep size in mind – The photo will be displayed on screens with different dimensional ratios than the camera, especially in responsive design. Err on the side of too much over too little.

The photo itself holds all the power with a still image background. First and foremost, start with a great image.

Subtle Videos

The HD video background trend seems to be gaining steam lately, and for good reason. As explained in Web Design Trends 2015 & 2016, this background embodies the best HD has to offer: remarkable video capable of expressing the same emotions as film.

image04
Photo credit: http://www.lifeofpimovie.com/

For example, the site for the movie Life of Pi found a creative use for video background as a way to display the trailer, whereas AirBnB chose a different approach.

Screen Shot 2015-09-14 at 5.14.59 PM

Source: Air BnB

AirBnB shows individual, everyday moments one might experience when traveling with their site – such as sharing a meal with the host, or going for a picnic. This strategy is highly effective in promoting their brand, as it gets the user excited about the possibilities. The “arthouse” style of the film appeals to the user on an emotional level, forming connections that encourage and even propel new business. While still images could accomplish similar emotional connections, the video takes it further.

Aside from applying the basic principles of cinematography, keep these considerations in mind:

  • Pay attention to loading – A stellar video won’t matter if your users get bored and leave while it loads.
  • Default as the sound off – Many users are sensitive about where and when they browse, and a sudden burst of sound is unwelcome. Keep the default as off, with an obvious option to turn it on.
  • Shorter is better – The ideal length of clips is between 10 and 30 seconds. Shorter may seem too erratic, while longer might lose your user’s attention.

When done right, HD video backgrounds create the immersive experience other sites strive for. However, getting to that point requires sidestepping a few of the drawbacks. Use cautiously.

Brilliant Animation

HD animated backgrounds allow any degree of motion you’re comfortable with, whether full-on cinematic videos, or single hard-to-notice elements that move periodically (like eye-blinking). Animations in general add a sense of fun and awe to a site, but in HD this excitement is magnified.

Animations are most common as loading entertainment. But with the rise in HD mobile devices, animated content that remains on the screen is becoming more popular.

image05

Photo credit: http://www.acnplwgl.com/

The site for ACNPL and WGL uses animation well for their background, as you can see in the example above. The circular logo is always spinning, however it changes speed and direction. The result is a stimulating interface that holds your attention.

The most important concern with animated backgrounds is that they are smooth and seamless: any looping should not be noticeable. Users are more forgiving of this in video, since it’s somewhat expected, but for animation these will create a jarring effect that destroys the “magical” feeling.

Beyond that, we offer the following advice:

  • Use vectors – If you’re designing specifically for HD, design in a format like SVG. This allows not only a better quality to the image, but proper resizing during zooms.
  • Choose the appropriate style – Animation styles varies, from childish and cartoony, to minimal and professional. Apply the right type for your site.
  • Implement animations as interface signals – For example, if text starts moving when hovered over, it suggests that it’s a clickable link. In this way, animation can be as practical as it is fun.
  • Apply the same principles as video – Heed the same advice we gave for video, especially using cinematic techniques and be careful of loading times.

Animation does not live in a vacuum. Try combining it with other backgrounds like a still image, or implementing it on only specific interactive elements like links or buttons.

Conclusion

HD web design may be new, but it doesn’t have to be scary.

It’s been around for long enough that designers can now recommend best practices, as well as what to avoid. Just keep in mind that HD design does have it’s own particular set of rules. For every advantage it offers, there’s a disadvantage to try to avoid. Don’t ignore loading times or the visually distracting aspects of HD, and take to heart the guidelines we listed above.

For more advice on HD web design and 9 other web design trends, check out the free e-book Web Design Trends 2015 & 2016. You’ll learn from the best with analysis of 166 examples from companies like Google, Apple, Reebok, BMW, Intercom, Adidas, Dropbox, and many more.

blog-book

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you