Что такое референс, зачем он нужен и где используется

Для чего нужны референсы

Поиск идей и вдохновения

Референсы используют на первых этапах проекта, когда концепция только формируется.

Обычно перед дизайнером стоит конкретная задача. Например, сделать дизайн упаковки косметики, который отразит натуральность и безопасность продукта. Специалист смотрит, как такую задачу решают другие бренды, и выделяет подходящие приёмы. Это могут быть природные цвета, минимальное количество текста, растительные узоры. После анализа примеров дизайнер создаёт собственную, уникальную комбинацию из похожих элементов.

Согласование концепции проекта

Слова не всегда точно передают нужный образ. Понятия «стильно», «дорого», «минималистично» разные люди понимают по-разному. Дизайнер может считать минимализмом белый фон и тонкий шрифт. Заказчик — крупную типографику и отсутствие декоративных элементов. Если заранее не согласовать визуальные ориентиры, можно получить не соответствующий ожиданиям результат.

Ускорение работы над задачами

Обычно дизайнеры не отрисовывают макет с нуля. Чаще они адаптируют уже существующие удачные решения под свой проект. Если стандартное расположение кнопок в приложении работает, не обязательно его менять. Нужно просто определить, какие конкретно кнопки добавить в меню, и проработать визуал.

Где применяют референсы

Референсы встречаются почти в любой работе, связанной с визуалом и творчеством.

Графический дизайн

В графическом дизайне примеры используют при разработке:

• Логотипов
• Фирменного стиля
• Упаковки товара
• Рекламных материалов
• Презентаций
• Полиграфии

При создании логотипа или другого объекта дизайнер не всегда ищет примеры компаний из той же отрасли. Для кофейни можно взять за образец не только логотипы кофеен, но и айдентику пекарен, ресторанов или даже книжных магазинов. Всё зависит от тематики заведения и его общей концепции.

Иногда источником идеи могут стать не другие логотипы, а бытовые предметы, произведения искусства, природные объекты.

Веб-дизайн и разработка сайтов

В веб-проектах референсы используют для главной страницы, каталога, карточки товара, формы заказа и других компонентов.

В первую очередь интерфейс сайта должен вести пользователя к целевому действию: заявке, покупке, регистрации. Если важная кнопка теряется на фоне ярких иллюстраций, а анимация мешает заполнять форму, путь к цели замедляется. Поэтому трендовые, сложные дизайны обычно применяют для имиджевых сайтов, портфолио, презентации нового продукта. Часто основная задача таких проектов — произвести впечатление, а не продавать напрямую. Для интернет-магазина или сложной корпоративной системы приоритет стоит отдавать понятной навигации и читаемости.

Создание текстов и контента

Референсы используют и в работе с контентом. Здесь они могут задавать структуру материала, формат подачи или визуальный стиль.

Например, редактор готовит серию карточек для социальных сетей. В качестве примера можно взять публикацию с похожей структурой:

• Короткий заголовок
• Один главный тезис
• Иллюстрация
• Короткое пояснение
• Призыв к действию

Иногда копирайтер или редактор может брать за пример Tone of Voice других брендов, рубрики в социальных сетях или цепочки писем. Главное — не повторять концепцию целиком, а адаптировать подход под собственную задачу.

Маркетинг и креативы

В маркетинге референсы используют при разработке рекламных кампаний и креативов для разных каналов. Они помогают заранее согласовать не только внешний вид материалов, но и идею, подачу сообщения, формат коммуникации.

Например, для рекламной кампании нового напитка можно собрать отдельные референсы:

• По визуальному стилю фотографий
• По композиции рекламного баннера
• По формату короткого видео
• По интонации рекламного текста
• По способу размещения призыва к действию

При этом маркетинговый референс не обязательно показывает готовый дизайн. Он может демонстрировать саму идею коммуникации: неожиданный поворот в сюжете, юмористическую подачу, сравнение продукта с альтернативой, использование пользовательского контента.

В маркетинговых референсах важно учитывать не только внешний вид примера, но и его задачу. Креатив может не подходить для конкретной аудитории, продукта или рекламной площадки.

При подготовке кампаний в Яндекс Директе референсы помогают команде сформировать единое понимание креативной концепции и создавать материалы, которые лучше соответствуют ожиданиям целевой аудитории.

Виды референсов

Единой универсальной классификации референсов нет. На практике их удобно разделять по функциям.

Визуальные референсы

Такой пример показывает конкретное визуальное решение. Например, расположение элементов на картинке, цвета, типографику.

Предположим, нужно разработать баннер для интернет-магазина. Дизайнер подбирает несколько референсов. На одном удачно подобрано расположение фотографии, текста и заголовка, на других — шрифты и геометрические узоры. Вместе эти примеры описывают направление точнее, чем один универсальный образец.

Референсы для стиля и настроения

Такой материал показывает не отдельные конструкции, а общий характер будущей работы.

Для бренда одежды можно собрать фотографии, которые передают:

• Спокойное настроение
• Естественный свет
• Нейтральные цвета
• Минималистичную композицию

Такие примеры задают эмоциональный тон проекта на раннем этапе, до выбора конкретных элементов.

Здесь важно не смешивать «настроение» и буквальное решение. Фотография туманного леса может передавать спокойствие и природность, но сама по себе не означает, что в дизайне нужно использовать изображение леса.

Примеры отдельных элементов проекта

Иногда нужен образец не для целого проекта, а для конкретного приёма. Например, оформления таблицы, декоративного паттерна на фон или ретуши фотографий. Здесь важно чётко понимать, что должно получиться в результате. Иначе можно долго выбирать среди множества универсальных референсов.

Функциональные референсы

Функциональный референс показывает, как должен работать отдельный элемент или весь продукт. Такой пример нужен, когда важно передать не внешний вид, а сценарий использования, последовательность действий или поведение интерфейса.

Например, для интернет-магазина функциональным референсом может быть карточка товара с удобным выбором размера, изменением фотографий и быстрым добавлением в корзину. При этом дизайн карточки не обязательно копировать. Важно показать сам принцип работы.

Такой подход полезен при работе над сложными цифровыми продуктами. Функциональный референс переводит описание вроде «нужен удобный фильтр» в конкретный сценарий: открыть фильтр, выбрать несколько параметров, увидеть количество подходящих товаров, применить настройки и при необходимости сбросить их.

Чем референс отличается от мудборда

Референс — отдельный пример или небольшая группа примеров, которые показывают конкретное решение.

Мудборд — подборка визуальных материалов, собранная для передачи общего настроения проекта.

Мудборд может включать фотографии, цвета, текстуры, шрифты, иллюстрации, предметы и другие изображения. Каждый элемент будет отражать нужный стиль и тон, но не обязательно станет частью итогового дизайна.

Нередко дизайнеры и фотографы используют оба инструмента. Сначала создают мудборд, затем подбирают примеры для конкретных элементов.

Например, для бренда косметики мудборд может содержать фотографию мрамора, изображение упаковки, палитру бежевых оттенков, снимок интерьера и образец типографики. Такая подборка задаёт общий визуальный характер. Референс при этом будет показывать упаковку с нужной композицией этикетки.

Как правильно работать с референсами

1. Сформулировать, что требуется найти.

Например: «Нужны примеры логотипов с геометрическим знаком и простой типографикой». Полезно сразу разделить обязательные признаки и желательные: например, геометрическая форма может быть обязательной, а монохромная палитра — только предпочтительной.

2. Разделить проект на элементы.

При разработке сайта можно отдельно искать референсы для первого экрана, карточек товаров, меню, формы заказа и мобильной версии.

3. Подобрать примеры по конкретным критериям.

Нужно найти варианты, которые соответствуют задаче: например, по композиции, цвету, типографике или сценарию взаимодействия.

4. Подписать каждый пример.

Рядом с изображением стоит указать, что именно привлекает внимание.

Например: «Подходит крупный заголовок», «Нравится контраст текста и фона», «Интересна форма знака», «Не подходит цветовая схема». Важно фиксировать и то, что в отобранных образцах сделано неудачно: слишком мелкий текст, сложная навигация, слабый контраст. Такой анализ помогает не перенести в новый проект недостатки референса.

5. Проверить целостность подборки.

Примеры не должны противоречить друг другу по ключевым параметрам. Если одна часть подборки задаёт минималистичное направление, а другая — сложную декоративную композицию, лучше разделить их или выбрать одно направление.

6. Проверить ограничения проекта.

Сложная тонкая графика может хорошо выглядеть на большом экране, но потерять читаемость в маленькой иконке. Поэтому решение нужно проверять в реальном контексте: на разных устройствах, в соседстве с текстом, на светлом и тёмном фоне, а для печати — с учётом особенностей материала и цветопередачи.

7. Проверить права на исходные материалы.

Референс служит ориентиром, но не даёт автоматического права использовать найденную фотографию, иллюстрацию или дизайн в готовом проекте. Условия нужно проверять для каждого материала отдельно. Даже если материал разрешено использовать, лицензия может требовать указания автора, запрещать изменение изображения или ограничивать коммерческое применение.

Ошибки при работе с референсами

Прямое копирование

Распространённая ошибка — воспринимать референс как готовый шаблон.

Например, дизайнер находит понравившийся логотип, меняет в нём цвет, название и пару деталей. Такой подход может сделать новый дизайн слишком похожим на оригинал и привести к нарушению авторских прав.

Референс стоит разбирать на составляющие: форму, композицию, цвет, масштаб, типографику и принцип построения. Затем эти приёмы нужно адаптировать под собственную задачу.

Поиск референсов без постановки цели

Если задача не сформулирована, в коллекцию могут попадать случайные изображения. Через некоторое время там оказываются одновременно минималистичные и наполненные композиции, фотографии с разными по настроению цветовыми палитрами и другие противоречащие друг другу образцы.

Перед поиском нужно определить конкретные направления: стиль, цвета, формы, тип шрифтов, композицию.

Использование слишком большого количества примеров

Для небольшой задачи обычно достаточно до 5–10 точных примеров. Если проект большой, подборку лучше разделить по категориям.

Каждый образец должен иметь понятную функцию. Если невозможно объяснить, зачем изображение находится в подборке, его стоит убрать.

Заключение

Референс — рабочий инструмент для поиска и согласования визуальных решений. Он переводит абстрактные пожелания вроде «современно» или «минималистично» в конкретные характеристики: цвет, форму, композицию, шрифт, масштаб и способ подачи.

В начале работы с референсами нужно определить их задачу, затем подобрать примеры, после этого из каждого примера выделить нужные приёмы. Так на основе конкретных образцов можно создать новый дизайн или текст.

Дополнительные материалы