The phrase “I want a modern beautiful site” tells the developer almost nothing. It is said about minimalist black-and-white pages and about bright sites with animation, about strict corporate catalogs and about light landing pages. Each person pictures something of their own under these words, and this usually comes out on the first layout, when redoing it already costs more.
The wishes themselves are not the point here: they are simply worded too broadly. A few examples of sites, with short notes on what exactly you like in them, tell the developer more than any description in words. These examples are called references.
What a reference gives and what it does not
A reference — is an example you can point at: this is how I want it, this is how I do not. It removes the problem of translating from the language of taste into the language of design. You do not need to know the name of a type of font or of a layout technique; it is enough to show a site where it is present.
What a reference does not give — a ready solution. Another company’s site is made for its tasks, its audience and its materials. Copying it in full will not work and is not needed: the design is built around your services, your photos and your texts. A reference shows the direction, not the end point.
That is why a list of links on its own, without comments, helps little. The developer sees five different sites and does not understand what unites them: the color, the structure, the mood, or one button you liked.
How many references to choose and where to look for them
Usually a few examples are enough. If there are too many of them, they start to contradict one another, and choosing a direction becomes harder. If there is one example, it is unclear what in it is the main thing.
You can look anywhere. Competitors’ sites show what is usual in your field, and sites from other fields often suggest a fresh move. Design collections will do, and the apps you use every day, and printed materials, if they have the mood that is needed.
It is also useful to collect anti-references — examples of what you definitely do not like. Sometimes they say more about your expectations than the successful examples do: “I do not want it like here, too gloomy and a lot of text” cuts off a whole direction at once.
What exactly to mark in a reference
The main thing when working with examples — to say what exactly you like. Almost always it is one or two things out of several.
- Structure.How the page is arranged: what is on the first screen, in what order the blocks go, how the menu is organized, how quickly you get to the price or the request form.
- Typography.Which fonts, large or restrained headings, a lot of air between the lines or dense text.
- Color palette.A light or a dark background, one accent color or several, bright or muted shades.
- Animation.Whether there is movement on scroll, how the blocks appear, whether the buttons and the cards are animated. Here it is especially useful to note where the movement helps and where it already irritates.
- Catalog design.How the product or service cards look, how the filters work, what is visible in the preview.
- A separate element.Sometimes, of the whole site, one thing is what you like: a calculator, a booking form, a gallery, a way of showing the stages of the work. This is a valuable reference too, if that is what you say.
It is good when each note takes one or two lines. For example: “I like the first screen — a large photo and a short heading, without extra buttons. I do not like the colors, they are too cold.” A comment like that is enough to understand the point.
How not to drown in the designer’s words
The client is not required to speak the designer’s language. The words “composition”, “modular grid” or “hierarchy” are not required. Ordinary words are enough: “cramped”, “too much of everything”, “the button is not visible”, “the text is hard to read”, “it looks cheap”, “I want it calmer”.
Such remarks are more precise than they seem. If you say that the site looks cramped, that is a task for the developer: more air, fewer elements on the screen. If you say that the button is not visible, that is a question of contrast and placement. Turning a feeling into a decision — is my work, and for that what is needed is the feeling itself, not a ready recipe.
Recipes without an explanation work worse: “make the button red”, “remove this block”. The decision may be the right one, but if it is unclear what problem it solves, it is easy to do what was asked and not get what was wanted. It is better to say the one and the other: “the button is not visible, maybe make it red?”
How to word comments on a layout
When the first layout appears, the references turn into a point of comparison. It is convenient to look at the layout together with them and to ask yourself: did it carry over what I liked in the examples?
Comments are worth collecting into one list, rather than sending them one by one. Each comment is better tied to a specific place: “home, second screen, heading” is clearer than “somewhere in the middle”. And it is worth separating what you do not like from what, as it seems to you, will not work for clients. These are different things, and it is more convenient to discuss them in different ways.
If along the way you have found a new reference, that is normal. But then it is important to say whether it changes the direction or refines it. A new direction after an approved layout — is a change to a decision already made, and it affects the deadlines and the estimate. A refinement within the same direction usually fits into ordinary revision.
When a reference calls for a complex solution
Sometimes a liked example has something that standard tools do not: non-standard animation, an interactive diagram, a calculator with unusual logic. This can be done; the cost is simply worth discussing separately. Such elements are made separately, sometimes with their own code, and as a non-standard task they are estimated in advance.
The reverse also happens: an effect that looks complex can be got by simple means, and then I will say so. That is why it is worth showing the reference in full, even if it seems that repeating it is impossible.
For a site with a large number of pages of the same type, it is useful to look at references also from the point of view of a system. On a corporate site on Tilda I make unified templates for repeating pages, so it matters that a style you like works equally well on the home page and on the tenth service page.
What a good set of references can look like
Below is a notional example, not a real project. It shows the format, not a taste.
| Example | What you like | What you do not like |
|---|---|---|
| Site A | First screen: a large photo and a short heading | Colors that are too dark |
| Site B | How the stages of the work are shown, step by step with icons | An overloaded menu |
| Site C | Service cards with the price right in the preview | Small text |
| Anti-reference D | — | A lot of animation, everything moves on scroll |
With a table like this, the first conversation about design starts from specifics. If you have already collected examples, or you are only starting, describe the project in the quiz on the site. I will reply in person, look at the references and say which of them fit your task.