Web design has been changing rapidly in the last years. Minimalist design, clear structures, and stunning visuals have become the norm, while text is kept to a minimum and illustrates the visuals on a given site. The background of a website has gained new importance and often times becomes the main point of the user’s focus.
While earlier websites did not really have a significant background because the content itself was considered to be the most important element of a site, this has changed in times of minimalist design.
The background has become prominent.
That’s why we decided to take an in-depth look at the different techniques of website backgrounds and design. I hope you enjoy the tour!
In times of growing possibilities for shooting HD video, backgrounds with videos are highly popular. They instantly capture one’s attention and explain situations without using text. For these reasons, we are using a video background on our own website. Other great examples for video backgrounds are www.gopro.com and www.foodbloggerpro.com, the latter of which achieved a 138% increase in conversions after switching from a static image to a video background.
When using video in backgrounds, there are a number of things to pay attention to:
- The video should be in stark contrast to the text and other elements you want your users to notice. For darker videos, a lighter text color should be used, and vice versa. Color-intensive videos might distract users too much from the elements on the page.
- Sound in videos is a no-go. You might have great creative ideas for how to use sound to capture the user’s attention, but in reality, they will almost always be annoying and disturb the user experience, especially since many users listen to music while surfing the web.
- The topic of browser compatibility in terms of videos can be a bit tricky. Many videos will require plugins to run in certain browsers. A great resource is caniuse.com which gives an overview of different browsers and the file types they support without needing plugins.
- Another tricky subject is the video resolution and the related file size. A 30-second video in 1080p can easily take up more than 20 MB of precious server space. What’s worse, large files can lead to slow loading times, which could completely destroy the purpose of having a captivating and fluid design on your website. A good way to lower file sizes is to keep the resolution below 720p and frame rates under 25 per second.
Another popular design is animated backgrounds. These can range from fully-animated to otherwise static pages with animated elements. These elements can include links that show animations when the user hovers above them or aesthetic elements that create dynamic designs.
Hover animations are some of the most popular elements in websites today. They come in a variety of different effects, some of which are shown in this fantastic overview from GitHub.
Other examples for animations are GIFs. These simple animations are low in file size and can be used for many creative ideas. The use of GIFs has exploded in the last few years. According to The New York Times, over 23 million GIFs are posted on Tumblr every day, and over 5 million get posted on Facebook. Great examples of how to use GIFs for web design include Typeform’s careers page and the website of InVision.
Including animated effects can bring websites to life and greatly improve the user experience. Here are some noteworthy examples of websites that use animations to create a unique user experience:
Do you know any other examples of great use of animations in web design? Let us know in the comments!
Hero image backgrounds
Besides videos and animations, images can be used to create great backgrounds for websites. Over the last few years, the use of large photographs as header banners or for the entire background has become increasingly popular. These so called hero images can introduce users to the content at first glance and immediately set the tone of the user experience. In web design, a picture really does say more than a thousand words.
Choosing the right photograph is crucial for creating an effective hero image. It should be high quality so users on large screens don’t wind up looking at a pixy or blurry image. The picture should also be kept simple and be able to send a powerful message without distracting the user by containing too many elements. As with videos, brightly colorful images should be avoided, especially if you’re planning on using text on the image. And last but not least, the image should be completely responsive so it doesn’t create problems on mobile devices.
Here are some examples of how hero images can be used to create stunning backgrounds for websites. As always, please feel free to share any other examples you can think of in the comments.
Wrapping it up
Like most other aspects of web design, backgrounds for websites have experienced a major development over the last few years. These days, any well-designed website will use videos, animations and/or pictures to create an exciting and captivating user experience.
At times, the background seemingly takes over the entire website and is the main focus of attention within the first few seconds. This effect is deliberate and introduces users to your site. Much more than text, visuals are able to establish an emotional connection and create not just a visual, but an emotional experience.
Choosing the right format depends largely on your user base and should be done with care and planning. With backgrounds becoming more prominent parts of websites, their importance increases as well and so does the potential for making mistakes. In order to create backgrounds that enhance the user experience and lead to higher conversion rates, a good design strategy is needed together with high-quality images or videos.
12 web development trends for 2016
This article is brought to you by Usersnap, a bug tracker and feedback tool that helps you to communicate visually. Get a 15-day free trial here. We have just entered year 2016 and it’s already a couple of days old. Just before New Year’s Eve, I showed you our take on the year 2015 in…
13 Best Programming Languages to Learn in 2017
The new year motivated us to think about learning a new programming language. Inspired by Alexander Falks’ post “Learn a new programming language this summer” we are opening the learning season 2017: “What programming languages should I learn in 2017?” “What programming languages should I learn” is one of the most popular questions these days. It’s…
12 Greatest Firefox Add-ons For Developers & Designers
With the latest Firefox browser update – Firefox Quantum – Mozilla made a leap forward in the browser game. The new Firefox browser is not only super-speedy and sleek. It caused an uproar as the new version only supports Firefox add-ons using the WebExtensions API. We researched, reviewed, and hand-picked 12 of the best Firefox…
15 inspirational podcasts for everyone working in web development
Since there are many resources out there for getting started in web development, having some truly inspiring web development podcasts in your bookmarks is a great way to learn. It’s the most portable way to consume content and to learn something new in web development. In this post, we’ve collected a list of the most…