How do references help the customer and the contractor find a common language?

The main task of the designer is to do as the client wants. As practice shows, even the sky is colored differently for everyone. And you will be surprised how many meanings the phrase “intuitive interface” can have. Therefore, in order not to guess what size the menu should be and what the customer means when he talks about lightness, references are needed. The article explained what they are, how to use them at work, and how to find the ones you need. 

What is a reference in design?

This could be a screenshot of a website or application, a poster, an interface, an advertising banner, or even a scene from a popular film that is used in work. Designers ask clients for references and show them their selections to make sure that by minimalism they mean laconic website design in the Apple style, rather than the multi-colored geometry of Bauhaus, to describe the overall vibe of the project. Even if you have only two screens: the main page of a consulting company in gray tones with a large grid as an example of what you like, and a promotional landing page with illustrations, gradients and decorative typography as a categorical no, you can already work with this. 

Important! If a designer shows a moodboard with examples from Apple, Nike or Google, this does not mean that he will simply copy their design and repaint it in a different color. References are needed to show the direction of thought and indicate the result. 

However, now any idea can be visualized in a neural network. Artificial intelligence will draw anything you want based on a text prompt - you can play around with ideas, see what’s wrong, and correct it right on the fly. 

Why are references needed?

Swedish scientists confirmedthat visual cues improve the accuracy of communication between people with different backgrounds and languages, reduce the risk of misunderstandings and help quickly reach a common decision. They reduce the number of unnecessary correspondence and calls, reduce the risk of misinterpretation of the brief, and improve insight into design. And here's what else they are needed for:

1. Remove ambiguity. How is this “bold”, “modern”? And here is a jpg, it’s like in the picture. 

2. Set clear boundaries. 5–10 examples are enough for the designer to understand the scope of the style, choose colors and the general nature of the work.  

3. Get guidelines for the entire project. For example, if you need to add a catalog to your site, you already know what the client is expecting. 

4. Understand the level of difficulty. The type of references shows what is expected: a simple landing page, complex animation, branded graphics or deep typography. This helps to honestly assess the scope of work and calculate the price. 

5. Meet expectations from the first prototype. You do it, the customer accepts it, everyone is happy - ideality. 

What criteria are used to study references?

The client throws into the chat everything he liked: the main Burger King, a photo of the sunset over the sea, a screenshot of the menu from nowhere, and a Dali painting. The designer collects them into a moodboard and begins to study them.  

Step 1: What does this have in common? 

Burger King: brown background, red banner, warm shades, round icons. Sunset and sea: relaxation, tranquility, soft transitions. Dali: lightness? Freedom? The general atmosphere of the project is already emerging. 

Step 2: What caught your attention? 

Instead of playing a guessing game, it is better to ask the client directly. Perhaps he wants the same large round category buttons as BC, or visual navigation, or something else. If he says “general feeling,” we act through hypotheses and select our own references. 

Step 3: is it technically possible?

We found a reference with a cool animation when scrolling - blocks smoothly pop up, the background changes color. Beautiful, but not suitable for the Tilda client: long, expensive, not for this budget. You can suggest another technique: simple hover effects on buttons, slight darkening of the photo when hovering, it works even on weak mobile phones. 

Step 4: What are the competitors?

The designer opens 5-7 websites of the client’s competitors. It’s clear that you want to rebuild, but every niche has recognizable patterns that it’s better not to give up. For example, an online store should have a cart in the upper right corner and filters on the left. If you change it, you will lose a decent share of customers. You can also look at the implementation of ideas from competitors and understand whether it is really convenient. 

Step 5: Put it all together

The designer looks for patterns, repeating elements and contradictions: for example, the client shows both minimalism and abstractions, it is necessary to clarify what is meant. And then he builds from this the basis for the implementation of the project. 

How to search and what to be inspired by

Both parties, clients and designers, look for references, but they act differently. The client does not need to understand typography and grids; it is enough to show what they like. A beautiful website, a random banner, a good photo: I found it, screened it, and threw it into the work chat. The designer’s task is to evaluate the solution in terms of resources and cost, and direct it in the right direction. For inspiration, you can send your client to Behance, Dribbble, Pinterest, and if it doesn’t work out at all, it’s even easier: open a neural network (Midjourney, DALL·E, Nano Banana) and make references with him. Usually a couple of iterations are enough to understand which direction to move. 

The designer acts differently. He creates an online moodboard (this is more convenient for team work) and first fills it with everything he has: he enters screenshots of the client, his findings, typography options, colors. Collects data on competitors, divides them into groups: direct (it is important to differentiate from them) and companies from related niches (here you can get ideas). Analysis of competitors' websites allows you to immediately find weak points and work around them in a new project: for example, abandon an overly complex menu and choose a structure that works faster and more clearly. Or write the prices right away so as not to piss off potential clients even before contacting you.  

If there is no tone of voice, it also needs to be designated, at least roughly: a friendly expert, your boyfriend, a mentor, a provocateur. This affects the choice of fonts, colors, and illustration style. And then all that remains is surgical work: cutting off what is unnecessary, leaving only what is suitable. 

Typical mistakes with references

1. The client sends the Apple website and says: “I want the same one.” Problem: Apple has a design budget that's roughly the same as the annual turnover of a midsize business. There are custom fonts, animations that took months to develop, product shooting in a studio for hundreds of thousands of dollars. What to do: parse the reference into elements and understand what exactly you like: minimalism, a lot of air, large typography? And then make an adaptation to reality.  

2. In your selection of references you have a website for a biker club, a landing page for a wedding salon, and a corporate portal for a bank. It is not clear how to connect them, so we clarify with the client what he had in mind and offer an implementation. 

3. The target audience is not taken into account. For example, for a law company, a website for a children’s center with cartoon illustrations is offered as a reference. Serious clients looking for reliability and expertise will only be put off by this design. 

4. The reference is used as a guide, no deviations. This is wrong, very often in the process of work it is discovered that, for example, this particular grid is not suitable for publishing a video, and the immediately selected style does not match the tone of voice. There should always be room for change. 

5. The reference was not checked for practicality. The designer saw a cool concept on Dribbble with 3D graphics, complex animations and non-standard navigation - and took it as a basis. But many works on Behance and Dribbble are art concepts, not working solutions. They have not been tested on users, have not been adapted for mobile devices, and may be slow to load. If we take this, then only with mandatory testing and adaptation to gadgets. 

6. Didn't take into account the context. The designer put together a moodboard from premium brands (Chanel, Rolex, Bentley) for the Vanya and Anya sausage project with a budget of $1,000. Problem: premium brands have different tasks, different audiences, different ways of communicating with them; this will not work in local catering. Here you need to enter through “simple, fast, tasty, cheap.” 

Tips for using references

Take notes directly on the references. “I like the combination of blue and orange here,” “This grid is suitable for a catalog,” “This style of icons is too childish.” Otherwise, in a week you will forget why you saved this screenshot. 

Make it a habit to collect interesting ideas and implementations constantly, and not for a specific project. Create a personal library in Pinterest, Yonote, or just in a folder on your computer, then you will have something to offer to each new client. By the way, you don’t have to take examples from the same niche as the project: be guided by the general intent that you want to convey. For example, ideas for a B2B service can be found in EdTech, and for a dental clinic - on the website of a SPA salon. 

Clients often send screenshots, but it’s better for a designer to share links to live sites to immediately show how animations work and how the resource behaves on different screens and devices. Work with references at different stages of the project: first you choose the general mood and design, then you can select examples for blocks and forms, product cards. This is a good argument in favor of your decision, for example, if the client says: “The button should be larger,” show in the pictures that a large one can get lost in the background, and a small, but contrasting one looks better. 

Come get some cool references in our portfolio. And if you also want to be included in someone’s selection, just fill out the brief.