How To Create a Cover For a Website

Sometimes, however, the cover looks like an advertisement and includes a clear message, a call to action, and an image showing what the customer will get as a result. If you are running a SPA or a beauty salon, a good cover photo would be that showing your estheticians or masseurs at work. If you are into the home repair business, add pictures of your workers, showing that they are not inexperienced young guys but highly-qualified professionals one can rely on. If you’re selling cute cat notebooks, don’t hesitate to put them on the cover. In this case, you don’t even need to write anything—the picture speaks for itself.

A perfect cover photo should be empty in the middle—without any details or items.

The title on the first page is almost always located in the center. When the text covers important visual elements, no one will see them. Moreover, the text may not be readable.

For example, a landscape photo that features a desert or the sky, a tabletop with no objects in the middle, a green forest… it all depends on the theme of your website, the desired mood, and your imagination. The aim is to make text easily readable.

If you place the text against the area with lots of elements, you’ll make it harder to read. Therefore, make sure the size of the elements is in harmony with the font size.

A cover photo is a background that creates a particular mood. It can either amplify your message or go unnoticed.

All in all, the aim is to help the visitor read and quickly understand the text. Let’s say you are designing a website for a conference. You add a conference title, date, time, and location to the cover. If the text visually merges with the background and is almost unreadable, a visitor may simply skip it, scroll down and miss the important information.

When the text stands out, a well-chosen photo will reinforce the message. For example, you put a photo from the last year’s conference on the cover. People can see how the event was organized, whether it was a large hall with hundreds of people or, on the contrary, a cozy space with just a few participants. A photograph can replace a couple of paragraphs. Anyways, first of all, people should get essential information about time and location.

The text and image should complement each other. For example, place your text on the empty wall. A uniform background won’t compromise readability.

When repeating elements in the picture form a pattern, it may seem that they fill the entire space forming a homogenous background. This is not exactly so—look at all the tiny details that create visual noise and complicate the perception of the copy. It might be a good idea to darken the background image in this case.

When the main subject of a photo is located on the right side, the text should be placed on the left. It works as follows: a website visitor can clearly see a person’s face, which is the most significant object in the picture; other details are less important.

If the person is in the center of the image, do not add text on top of the face—it's better to lower it closer to the body area.

Generally speaking, a person’s face is the most significant object in the photo. If the face is covered with text, website visitors won’t feel comfortable as they won’t be able either to see the object in detail or read the message.

Darken the image with gradient filters.

If the selected background image makes the copy hard or impossible to read, cover it with a filter: higher filter opacity results in a darker background.

It’s much easier to read the text against a contrasting background. Yet try not to overdo with the darkening as the objects in the photo may become indistinguishable. Look at the original brightness of the image to decide how to apply the gradient: for some photos, 20% will do, while others should be darkened by 70% or more. Try different options.

Darkening is not suitable for all pictures. Bright images might get pale or dingy due to the black gradient. The atmosphere of sorrow may be created. Choose darker photos to avoid this effect.

Another way to add mood to the website is toning. Opt for color filters instead of the standard black. Use the official brand colors for the gradient, or choose a color from the website color scheme. Alternatively, pick a shade that matches the color palette of the image.

You can color not only the background but also the text. Moreover, you can combine background toning and text color at the same time. You should be very careful, though, to avoid the garish and flashy look of your website.

Tip: choose two colors and use one as a primary color (90%) and another as an accent color (10%).

For example, you can apply the yellow gradient to the background and add bright blue text. Or cover the entire image with an acid green filter and overlay orange text on it. It looks bright and cheerful, so it might be a good option for a conference or a startup website.

You can make white covers, they usually look nice. If you have a high key photo with bright lighting that features a captivating object, combine it with dark or colored text.

Covers showing nothing except for one object look intriguing. It’s also much easier to marry text with such images. Imagine that you ordered a professional photo shoot, and the objects are located on a neutral background: a sound system or a car against a white or gray background. This makes combining text and images a piece of cake.