Practical advice from the art director

How To Create a Cover For a Website

Tilda founder and CEO Nikita Obukhov explains how to avoid common mistakes when creating a website cover and shares design tips on how to marry text and images.

Nikita Obukhov
Tilda Founder and CEO
A cover is the essence of a website, expressed in three to five words and supported by a photograph. The cover page is the first thing visitors see when they land on your website, and at this very stage, people make a decision whether to stay on the website and continue reading or close the tab. Therefore, your task is to make the first page as catchy and captivating as possible.
Website Cover: Getting Started
The key principle of a cover design: text comes first, while imagery only supports it.

The message is of major importance, while the background image sets the right mood. Therefore, try to choose an image that does not make the text difficult to read and perfectly matches the voice of your website.

Also, there is no need to immediately show what you are offering on the cover. The image is just a background supporting the message. For example, take a look at the cover below. It is the first page of the hoodies & sweatshirts online store: the tinted background has nothing to do with the hoodies. In this case, the purpose of the cover is to set a particular mood. It should inspire visitors and help them dive into the topic.
The Hero Section of Activize, activize.ae
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.
Tilda's website template for a home renovation company
Free images for your digital projects are available on professional stock photo websites that distribute images under the Creative Commons Zero (CC0) license. This means that an image is free from copyright restrictions: in other words, it can be used and modified in every possible way, including for commercial purposes without asking permission.

Here are some sources of free high-quality stock photos: Unsplash, Pexels, Stocksnap, Rawpixel.

Yana Plushcheva
Senior Designer at Tilda
An important part of my job is to pick images for Tilda templates. Initially, I only have a description and a general theme of the template, all the images are yet to be found. When the text is ready, I understand how many lines should I use on the cover, how many sections should be included in the top menu, do we have a tagline and call to action, how many buttons do I need to add (if any), is there a form, etc. Having in mind the number of elements and their visual weight, I look for an image with a suitable composition that, in the first place, will make it easy to read the message on the cover and won’t steal the show.
How to Choose a Cover Image
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.
1. Place text on a clear, uncluttered area of the photo
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.
The text it's hard to read because the background is busy. Online photo editor website cover: pixlr.com
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.

Yana Plushcheva
Senior Designer at Tilda
My goal is to choose an image that will properly convey the message. This means that the product or service should be represented in the photo either directly (interior with chairs in case of a furniture workshop) or indirectly (a beautiful seaside for a travel agency website). To choose a photo that is indirectly related to the topic, think of what the clients are expecting to get, or include imagery of the attributes associated with this particular topic.

Here are some templates created by the Tilda designers. Each template is an example of a different approach to choosing a cover:
2. Work with simple shapes
The text and image should complement each other. For example, place your text on the empty wall. A uniform background won’t compromise readability.
Tilda template ("Contacts" section)
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.
The background looks uniform, but the text gets lost among the elements and becomes unreadable
3. Place the text in the area with less important elements
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.
Recommended Image Specs for Tilda Covers
Format: jpg
Dimensions: 1680×900 px
Dots per inch: 72 dpi
Color model: RGB
Compression ratio: 10
The Cover Image Makes the Text Harder to Read. How to Fix It
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.
To darken the background on Tilda, open the Settings panel of the block and change the opacity percentage next to the fields "Filter start color" and "Filter end color". If you set the same values, the darkening will be uniform. Or you can increase the opacity in the bottom area to get a smooth gradient.
Cover Settings on Tilda featuring 2 filter settings: Сolor and Opacity. The higher the percentage of opacity, the denser the color filling
Darkening Makes the Background Look Too Gloomy. How to Fix It
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.
To create a color gradient on Tilda, choose the color for the top and bottom filters in the Settings panel. You can use a single-shade toning or combine two different colors for a duotone effect. The intensity of the filter depends on the values in the "Opacity" field.
Filter color settings on Tilda, Cover band template
Adding Colors
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.
Use online tools to help you choose the right color for your text or background.

Coolors is a color scheme generator that helps quickly check if several colors go well with each other.

Materialpalette helps you create a color palette for material design suggesting the color options for the main text or the background.

ColorHunt offers ready-made palettes. To add a shade to your page, copy its Hex code.
Cover Design Ideas for Inspiration
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.

Yana Plushcheva
Senior Designer at Tilda
There is no universal method to select imagery. If you come across a suitable photo, try to visualize it on the cover: how it will be cropped, where the text can be placed, what parts of the image will be covered, whether visual elements affect readability, can a gradient help. This is another filter that helps you choose photos.

I also check if the cover looks natural on the page. It should be consistent with other images and the overall layout. Therefore, it is better to select all the photos for the website at once.
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.
Check what the cover looks like on mobile. On low-resolution displays, your web design can be completely different from what you see on the desktop version. If an important visual element is covered by the text, make two separate blocks: one for the desktop view, the other for mobile devices.

Adjust the position of text and images for both blocks. Then use the "Block Visibility on Devices" option in the Settings panel.

The visibility range for mobile devices is from 0 to 980 px.
The visibility range for desktop devices is from ≤980 px.
A Brief Guide to Creating a Cover
1
Choose a background image that does not compromise readability: no important elements or small details in the center.
2
Place the text against a plain and homogeneous area of the image.
3
If the text is hard to read because of the distracting elements on the image, darken the background with a gradient.
4
If the cover looks messy due to a black filter, choose a different photo or add a color tint to the current one. A bright gradient filter will lift your website mood.
5
Use a bright color for the title. Together with background filters, this technique adds up to creating the right feel.

Text: Nikita Obukhov, Yana Plyushcheva
Editing, design, layout: Lera Merzlyakova, Ira Smirnova
Illustrations: Julia Zass
If you enjoyed this article, please share it with your friends! Thanks ✌️
See also:
Free coursebook on how to design, set up, and run
high-conversion landing pages

Free practical guide to web animation with examples, techniques,

and tips on how to use them

Made on
Tilda