What are references and how to use them correctly

When you need to quickly and accurately convey an idea to a performer – a designer, illustrator, copywriter, photographer, or developer – one look at an example is often more valuable than a long instruction. In this article, we’ll analyze what references are, where to look for them, and how to work with them correctly.

What are references and why do you need them?

A reference is any example or sample that illustrates the idea of the desired result. It can be an image, video, website screenshot, a piece of text, or even a real-life object. The main purpose of the reference is to show the direction. That is, the style, composition, color scheme, tone of the message, or desired behavior of the interface.

References reduce the risk of misunderstandings between the person who orders the work and the person who does it. They save time, because instead of long explanations, it is enough to show the reference and briefly explain what it demonstrates. At the same time, the reference should not be a «copy and paste» instruction. A healthy approach is to use it as a starting point for a new, adapted idea.

What can be a reference

References are very different – it is important to understand what function each of these ideas performs. So let’s analyze this point in detail.

Images and illustrations

These can be photographs, sketches, portfolio works, etc. Images instantly convey a visual style: composition, ratio of elements, lighting, and level of detail. When you choose a photo or illustration as a reference, it is important to specify exactly what inspires you from this sample – the angle of the object, the location of the title, the ratio of positive and negative space, or a specific type of lighting. Such a definition allows designers and photographers to understand not the general aesthetics, but the practical problem to be solved, and at the same time avoid directly copying the work of other authors.

Videos and animations

Commercials, product demonstrations, and motion design show dynamics: the pace of editing, the rhythm of scenes, the type of transitions, and the work with sound. If your project involves a moving image or micro-animations in the interface, choosing a video reference makes it clear how the movement should feel, how long each fragment will last, and what level of energy to convey. It is advisable to indicate time codes and comments in the reference, because this is what allows the performer to reproduce the expected dynamics without unnecessary interpretations.

Websites and interfaces

The website or interface of a landing page, mobile application, and dashboards illustrate UX solutions as references. That is, the hierarchy of information, the location of CTAs, the logic of transitions, and the adaptive behavior of elements. It’s useful to describe not only the visual appearance but also the expected interaction – which elements should be clickable, how tooltips behave, what is the logic of filling out forms. This helps developers and designers to recreate the desired user behavior and avoid ambiguities during implementation.

Texts

Textual references define the language style – the degree of formality, sentence length, method of argumentation, and examples of successful headlines. When you provide a textual reference, indicate which specific phrases or language techniques you want to see in the communication and which should be avoided. Such clarity helps copywriters recreate the desired tone and structure of the message while maintaining the uniqueness of the content.

Physical references

Physical references, such as packaging, materials, prototypes, real-world objects, etc., provide an understanding of tactile and constructive solutions: type of material, finish, dimensions, and packaging method. For product design or packaging production, it is important to add photos from different angles, accurate measurements, and notes on the material or printing method. Such information allows engineers and manufacturers to recreate the desired effect and identify production limitations in a timely manner.

Case studies and examples with metrics

Successful campaigns and A/B test results demonstrate how certain ideas worked in real life and what business results they produced. When you use a case study as a reference, you need to pay attention to the context: what was the audience, what was the budget, and what metrics were measured. This approach allows you to correctly transfer proven approaches to your project, realizing that success depended on specific circumstances.

Mixed references

Often, the best results are obtained by combining elements from different sources: visuals from one reference, textual tone from another, and interactive solutions from a third. When combining, it’s important to analyze the compatibility of the elements and record which parts of each example will be adapted. A clear matrix «reference → element → accept/adapt/reject» will help to maintain logic and avoid stylistic or functional contradictions in the final product.

Where to look for references

Even without professional training or paid tools, you can collect a high-quality reference database. It’s not the number of sources that matters, but the regularity and ability to spot good solutions in the everyday information field.

Pinterest, Behance, and Dribbble remain the main platforms for finding visual ideas for inspiration and structure. It’s great to see how others are working with colors, composition, typography, or presentation of ideas in general. Pinterest is great for collecting diverse references into boards, Behance for diving deeper into projects, and Dribbble for a quick look at current stylistic ideas. Free and paid photo stocks such as Unsplash, Pexels, or Shutterstock are also useful not only as a source of images but also as references for light, mood, and angles. Looking through the selections, it’s easy to see which visual techniques look modern and which are already outdated.

The next thing is video platforms. YouTube and Vimeo are worth using when you need examples of movement, rhythm, and script logic. It is convenient to analyze not only the videos themselves, but also how the introduction is built, how the viewer’s attention is held, and where the accents are placed.

Social networks remain at the peak of popularity, so Instagram and TikTok provide insight into modern visual language and fast formats. This is especially useful when it is important to understand how information is presented now: briefly, emotionally, with a focus on the first seconds of attention.

Personal archives of photographs taken during work, travel or everyday life and personal observations often become the most valuable references. They are unique, unconventional, and convey the real context well. It is worth keeping such materials separately, with brief notes on what seems to be successful in them. In addition, magazines, storefronts, product packaging, and public place navigation are all living examples of design and communication. They help you to better feel the scale, materials, and interaction with objects in a real environment.

How to collect and structure references correctly

Before you start collecting references, you should have a logical plan of action that will allow you to collect useful samples without unnecessary noise and quickly pass them on to your team.

1. Start with the goal. In 1-2 sentences, formulate what should change or what the result should look like: mood, functionality, format, indicator (CTR, time on page). The goal will become a filter for all further examples.
2. Collect 6-10 relevant references. Select only those samples that directly correspond to your goal. Less is more: 6-10 examples provide enough context and don’t distract attention.
3. Write short comments. For each reference, add what is valuable in this sample and what to take or not to take from it. This will eliminate the need for additional explanations during the assignment.
4. Group them into categories. Divide the examples into logical blocks: composition, palette, tone of voice, UX solutions, animation, etc. This will help you find relevant elements faster when working.
5. Highlight 2-3 key reference points. Identify the main patterns that the team will use to build the concept. This helps to maintain focus and make faster decisions during edits.
6. Tie references to specific tasks. Add a link or file directly to a task in the project manager, indicate the context and expected result for that task.
7. Check technical requirements. In your notes, specify file format, dimensions, timecodes for videos, or material parameters for physical references.

After collecting, quickly review the collection with the team or client, agree on 2-3 key benchmarks, and document them in a brief. This will reduce the number of iterations and make the implementation process more transparent.

A practical example of using a reference

To better understand how to use references, let’s look at an example. Let’s imagine a task: you need to update a banner for a landing page. The goal is to make it more understandable and increase the number of clicks, not just «refresh the design». To do this, a reference is selected in which the headline is clearly readable, the product is in the spotlight, and the call to action is immediately noticeable and not lost among other elements.

Specific explanations are recorded next to it: we take the general composition and logic of the arrangement of elements, adapt the colors to the brand, use the style of photography as a guide to the mood, but without repeating the plot or presentation. It is also noted that the font and wording of the CTA should match the existing tone of voice of the brand.

Thanks to this approach, the designer immediately understands what to focus on and where there is freedom for decisions. The banner is created faster, discussions are reduced to meaningful edits, and the result is better aligned with the original goal rather than a subjective «like/dislike» feeling.

Practical tips for making references work effectively

To make references really work, and not just remain a nice collection, you should add a few simple steps to the process:

• limit the time for approval: agree in advance when you will approve references;
• record not only «what we take», but also «what we will not take.»
• evaluate the realism of examples: before approving a reference, think about whether it can be reproduced within a given budget, timeframe, and technical conditions;
• link references to the result, not just the visual. If possible, articulate what should change after implementation: usability, readability, engagement, or another metric.

Pay attention!

A reference should inspire, not serve as a template for copying. Direct reproduction of other people’s work without permission is a risk to reputation and a source of possible legal claims. Cite sources, write down the terms of use, and if in doubt, request written permission from the author or choose materials from stocks and open licenses. This minimizes risks and protects the project at all stages.

Iryna Voitovych

Copywriter

Author's page