Backgrounds have long been a key ingredient of a well-designed website. Trends in modern design have put even more emphasis on them. They are now expected not only to frame the content, but also to ensure the visual separation of different sections of a page.
When using images for your background, it is best to choose carefully. The wrong choice can really throw your message. Not to mention the possible negative impacts on accessibility
Having this in mind, let's explore some good practices for choosing and implementing background images.
1. Accessibility Comes First
The first question you should ask yourself when considering a clutter is: What effect will this have on readability? content? You must ensure that the text is legible and that when combined with the background, an acceptable contrast ratio is set.
If you are not quite sure of accessibility but you really like a particular image, there are some things you can do to make it work. You can use photo editing software or even CSS style sheets to edit elements such as opacity and contrast, or add layer masks to make the content more readable. It is also important to choose the correct font and font size for the content itself.
The bottom line is that your decor should never interfere with the ability of a user to see correctly your content.
2. Photos must be relevant and clean
Photos have become very popular on the Web and are an excellent choice for covering large areas. It is a good idea to choose photos that are relevant to your website in one way or another. This could mean a photo of your physical location, product or service. But you could also look for something that will help you convey the message of your content. Background images should be considered as part of your overall branding strategy.
You will also need to look for pictures that have open space (think of a horizon or a field of grass) .A cluttered photo can take away your content, even with changes in opacity or color. can not use action pictures or other convincing images.It's more avoid images that are too overwhelming.
]
3. Use subtle, transparent textures
Textures can add a touch of class to the overall look of your website. Whether you are using a specific page background or content area, look for transparent textures that is, they can repeat a pattern on the screen to give it the appearance of a big picture. Although you can sometimes use a full-size textured image, the most detailed ones do not always work well on multiple screen sizes. In addition, images with a large file size can negatively affect the loading time of the page.
Subtlety is also a desired quality in a texture (unless you think the idea is not to overwhelm users with bold patterns: look for images that have softer lines and colors that contrast well with the content.
4. Consider Multiple Screens and Peripherals
The visible area of a background can change dramatically over multiple screen sizes. This can have an effect on the photos. What may look simply beautiful on a widescreen monitor can also look horrible on a phone. The key parts of the image can be cut off and cause something that loses its context.
The challenge here is the photo selection and the part code. First, look for the images that fit the desired landscape portrait square format of the parent container. They are more likely to evolve well for smaller screens.
You will also want to look at how your website CSS manages images. background for different screens.For example, using the CSS property background-size: cover; CSS makes sure that the full image is visible. probably, adjustments will have to be made so that everything looks pixel-perfect on all devices.
5. Start with high resolution images, then crop
When you download images that you plan to use for your background, choose the highest resolution available. This will allow you to make the necessary changes, and then crop the image to a more appropriate size. You will want to make sure you save the edited versions as a separate file.
Determining the appropriate size will depend on the image Although some images stretch or repeat themselves quite well ( which has the advantage of using transparent textures), others may appear distorted, in this case, crop the widest width you will need. Media queries to call in smaller versions from an image for other screen sizes.
Bring Backgrounds In the Foreground
It is understandable that with so many exciting technologies influencing web design, we tend not to pay as much attention to history. But they play a very important role in storytelling and help us create a nice user interface. Backgrounds on a full page help set the tone for a website, while section backgrounds give our content space to breathe.
Of course, everything works best when we choose images that meet our needs. Images that enhance, without interfering, the ability of a user to consume content. But we should also consider details such as size, aspect ratio and relevance for mobile devices. Remember that details matter, even when there are items used in the background.
Useful Links
-
Careers
How to become an artistic director
Mary Winkler
-
Artistic direction
Choose the best photos for your website
Eric Karkovack