InvisionApp studies show that the first impressions of website visitors are 94% design-related. Beautiful background plays an important role: this is the first thing that catches the eye of the user, even if the background is not a full-screen image, but just a picture.
Using the background, the designer completes the concept, sets the tone for the main elements. In this article, we will share with you 7 basic principles of choosing a website background.
On this page
1. Keep in touch with your target audience
The first important step is to identify the purpose and tasks that your background should perform. So, if your website is dedicated to the promotion of a brand, then it is a good idea to use the image of your product or service. This will help create a positive first impression and associate it with your offer.
For example, if you own a travel-related blog, use a background image with some picturesque landscape that was made during one of your trips. Help the visitor to imagine this place and feel like a part of the event. Make the website look more elegant and dynamising a photograph in motion or a photo with a beautiful perspective as a background.
2. Use only high-quality images
Your website background picture should have a convenient (landscape) orientation and a perfect resolution. The minimum recommended resolution is 1024 by 768 pixels, but anyway, it should be at least 2000 pixels. Using a picture with a low resolution will make your website background look like it came from the early 90s.
Also, remember that it is better to download a picture with a higher resolution – and then cut it off than trying to stretch a low-quality image. Use special online services or image editors (Illustrator, Photoshop, Paint, IrfanView) for cropping and compressing the images.
Crop a plain background and focus on the main details of the image. With high-quality photo processing, the background image will favorably influence the visitor, forming the desired impression.
Also, make sure that the picture displays correctly in different browsers.
3. Full-screen background image
Look at some examples of popular websites, and you will notice that the full-screen backgrounds are in a big trend.
A beautiful full-screen background will draw the visitor’s attention to the website: this is especially important if the first screen of your website is image-based, and there is a little amount of useful information on it.
4. Using a video as a website background
In addition to simple static images, you can use video as a background. However, it is extremely important to keep the balance between the motley beauty of the background and the opportunity for the visitor to comfortably interact with your website.
If you want to demonstrate your work, then you should try adding subtle translucent movements to your website background. Such options will certainly create a favorable impression on the design of a website and, at the same time, it won’t distract users from the main points.
5. Remember about the contrast
Contrast also applies to user perceptions of content. It is important that the website elements contrast with the background and do not merge with the elements and content. In this case, the page itself may look beautiful, but the text won’t be readable and the user will leave the website without finding the things he needs.
Note that if you use a translucent watercolor background, you should focus the visitor’s attention on the content with the help of typography, pictures, and colors.
6. Keep the balance between creativity and usability
Choosing from a great variety of backgrounds for the site, it is quite important to decide when you really need to use some creative solutions as beautiful animations, spectacular video backgrounds or bright colors and patterns (as, for example, when using geometric background) – and when you should be fully concerned on usability.
Sometimes such techniques negatively influence the perception and the visitor gets distracted from the main points. For example, they may be unable to quickly navigate the site or perform a targeted action. Therefore, you need to monitor the level of usability on the site and keep in mind the navigation elements, quality of content, call to action elements and so on.
7. Adaptation for mobile devices
It is also important to make your layout look perfect on mobile screens. If you use a large image or a video as the website background, you need to adjust the photo to devices of other resolutions accordingly.
Image source: Freepik Premium
Article by