Референс: виды, отличия и правила использования

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

Что важно? Работа с референсами — отдельный навык, который объединяет наблюдательность, аналитическое мышление и творческую смелость. Нужно собрать подборку вдохновляющих образцов и уметь вычленять из них ключевые принципы: композицию, ритм, цветовую схему, драматургию деталей. Такой подход превращает чужие работы в полезный инструмент.

Что такое референс простыми словами

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

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

Источник: shutterstock.com

Референсы нужны не для механического повторения чужих работ. Они помогают:

• точнее оформить замысел, сделать его конкретнее и посмотреть на будущий результат со стороны;

• находить неожиданные идеи и запускать творческий поиск;

• разобраться, как другие авторы решали сложные задачи: выстраивали композицию, подбирали палитру или создавали фактуру;

• снизить риск ошибок и быстрее пройти первые этапы работы;

• получить самостоятельный результат, соединив приемы из нескольких источников.

Зачем нужны референсы в ТЗ

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

• Снимают растерянность перед пустым листом. Исполнитель сразу получает направление и понимает, на какие решения можно опереться.

• Сокращают число согласований. Чем яснее примеры при обсуждении ТЗ, тем ниже вероятность многочисленных бесплатных доработок перед запуском.

• Обозначают ожидаемый уровень. Ссылка на интерфейс Т-Банка или Авиасейлс показывает, насколько тщательно заказчик рассчитывает проработать детали.

Работа с референсами дает преимущества обеим сторонам:

«Голодные игры» для бизнеса:
Как занять нишу за 3–6 месяцев и получать в 3–5 раз больше клиентов

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

Мы разработали стратегию, которая помогла 196 нашим клиентам стать №1 в своих нишах за 3–6 месяцев.

Что показали кейсы:

• стратегия сработала в 93%;
• средняя окупаемость инвестиций — 312%;
• в сложных нишах заявка в 7 раз дешевле, чем в Директе;
• клиенты в среднем увеличили прибыль на 217% за первые 3 месяца.

Мы уверены в результате, поэтому даём финансовую гарантию в договоре.
И да, вы можете внедрить стратегию сами (хотя мы будем немного ревновать).

Скачайте бесплатно нашу пошаговую стратегию с кейсами в 78 нишах и начните забирать в 3-5 раз больше клиентов, пока конкуренты продолжают терять рынок.

Скачать стратегию роста

PDF 2,3 MB

Где используют референсы

Фотография

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

Рисование, живопись

Работая над картиной в манере Ван Гога, художник изучит его палитру, характер мазка, детали и композицию. Для более широкой задачи, например портрета, ориентирами могут стать произведения Репина или Кустодиева. А приемы фотореалистической живописи удобно разбирать по работам немецкого художника Герхарда Рихтера.

Видеосъемка

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

Музыка

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

Мода и стиль

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

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

Графический дизайнер обращается к референсам при разработке логотипа, выборе шрифта или создании визуальной системы бренда. Если нужен сдержанный классический шрифт, но Times New Roman кажется слишком очевидным, альтернативы можно подобрать, например, на Typewolf.

Архитектура

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

Подходящие решения публикуют профильные сайты и архитектурные журналы.

Копирайтинг

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

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

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

Дизайн интерьеров

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

Виды референса

По форме все референсы можно разделить на три основные группы:

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

2. Трехмерные объекты. Это 3D-персонажи, интерьеры и элементы ландшафта, которые можно поворачивать и рассматривать с разных сторон.

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

Снимок памятника относится к двухмерным материалам, его модель в Blender — к трехмерным, а сам монумент на городской площади — к материальным объектам.

Хорошо собранная подборка помогает договориться об основных параметрах проекта:

• стиль: передает идею, настроение, палитру и принципы типографики;

• функционал: наглядно объясняет требования, устройство страниц и логику сервиса;

• текст и ToV (Tone of Voice): показывает, какая манера подачи соответствует голосу бренда;

• UX-паттерны: демонстрируют готовые сценарии взаимодействия с интерфейсом. Оценивая их, учитывайте измеримые показатели: CTR, отказы и время на сайте.

Где искать референсы

Источники могут быть разными. Чаще всего примеры находят:

• у конкурентов — чтобы изучить интересные решения в своей отрасли;

• в интернете — через поиск по точным ключевым запросам;

• у подрядчиков — дизайнеры и маркетологи могут подготовить подборку, если готовой концепции пока нет;

• на биржах текстов, фотографий и видео — понравившиеся работы становятся ориентирами для собственного контента;

• самостоятельно — даже простой эскиз или схема способны объяснить дизайнеру либо проектировщику нужную идею.

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

Дизайнеры ищут референсы на разных платформах. Среди популярных вариантов:

• Behance — международная площадка, на которой дизайнеры собирают и показывают лучшие проекты.

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

• Muzli — сообщество веб-разработчиков, дизайнеров и авторов визуального контента.

• Motionographer — ресурс с работами ведущих студий motion-дизайна.

• Landingfolio — подборка удачных лендингов разных тематик для digital-дизайнеров.

• Awwwards — сайт известной премии по веб-дизайну, где собраны выразительные и функциональные цифровые проекты.

• CSS Design Awards — площадка международной премии с работами дизайнеров, агентств и студий.

• Dribbble — профессиональное сообщество, участники которого публикуют проекты, обмениваются идеями и обсуждают решения.

• Minimal. gallery — коллекция дизайн-проектов, построенных на принципах минимализма.

• Figurestock — библиотека изображений людей в разнообразных позах.

• Minden Pictures — фотоколлекция дикой природы: животных, растений, пейзажей и подводного мира.

• Httpster — архив вдохновляющих сайтов и трендов, который ведется с 2012 года.

• They Draw — собрание тематических иллюстраций о путешествиях и еде.

• New Old Stock — архив атмосферных снимков городов и интерьеров.

• Foodiesfeed — фотографии продуктов, готовых блюд и процесса приготовления еды.

Не ограничивайтесь одной площадкой: изучайте фотостоки, панорамы Яндекс Карт и Google Maps, результаты в Яндекс Картинках. Идеи встречаются в книгах, кино, музеях, поездках, магазинах и даже во время обычной прогулки.

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

ТОП-7 кейсов
из разных ниш с ростом
от 89% до 1732%

Узнать подробнее

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

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

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

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

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

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

Отличия референса от других терминов в диджитале

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

Референс и мудборд в дизайне

Референс можно сравнить с отдельным кирпичом, а мудборд (англ. moodboard — «доска настроения») — с собранным из таких элементов зданием. Это коллаж из изображений, шрифтов, орнаментов и палитр, который передает атмосферу и визуальный язык проекта.

Например, при создании брендбука московской кофейни фотография одной минималистичной вывески из Pinterest будет референсом. А единая доска в Figma с интерьерами, фактурой крафтовой бумаги, вариантами шрифтов и формой бариста уже станет мудбордом.

Референс и исходник в дизайне и видео

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

Референс в дизайне выполняет роль подсказки: специалист изучает композицию и приемы, но не переносит сам файл в проект. Если чужую иллюстрацию скачать и ограничиться заменой цветов в Photoshop, это уже использование исходника (вероятно, с нарушением лицензии), а не творческое вдохновение.

Референс vs мудборд vs исходник

Референс и плагиат

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

В России эти отношения регулирует статья 1259 Гражданского кодекса РФ. Идеи, методы и концепции сами по себе не охраняются авторским правом, однако закон защищает конкретную форму их воплощения. На практике разница выглядит так:

• Можно — работа с референсом. Изучить карточку Ozon, заметить крупную контрастную кнопку «В корзину» и рейтинг рядом с ценой, а затем применить похожую UX-логику в собственных фирменных цветах. В этом случае заимствован принцип, а не оформление.

• Нельзя — плагиат. В точности повторить оттенок кнопки Ozon, взять фирменный шрифт и те же иконки. Здесь копируется уже форма выражения.

Референс и оммаж

Как отличить плагиат от удачной культурной отсылки? Оммаж — это сознательное, узнаваемое и уважительное обращение к известному произведению.

Например, Авиасейлс и Яндекс Еда выпускают рекламу, стилизованную под известные кинопостеры или мемы. Полностью повторить лендинг конкурента — значит скопировать его работу. А снять собственный ролик в духе «Брата 2» или Cyberpunk 2077, сохранив характерные ракурсы и цветовую атмосферу — уже прием постмодерна и заметный рекламный ход.

Референс vs Плагиат vs Оммаж

Референс и бенчмарк

На старте проекта маркетологи и продакт-менеджеры нередко смешивают эти понятия. Фразой «Наш референс — приложение Альфа-Банка» заказчик может описывать не оформление, а бизнес-модель, конверсию и возможности супераппа. В таком случае речь идет о бенчмарке — рыночном стандарте качества.

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

Референс и прототип

Иногда заказчик показывает красивый экран с Dribbble и просит разработчиков немедленно писать код. Бывает и наоборот: UX-дизайнер приносит серый структурный макет (прототип, или wireframe), чтобы согласовать логику, а клиент принимает его за финальный дизайн и удивляется отсутствию цвета.

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

Референс vs Бенчмарк vs Прототип

Референс vs брендбук

Допустим, арт-директор предложил неоновые референсы, но брендбук разрешает компании только синий и белый.

Примеры могут задавать настроение и механику, однако они всегда подчиняются фирменным правилам. Поэтому из понравившейся работы можно взять сетку, ритм или способ расположения блоков, а цвета, шрифты и tone of voice привести к стилю бренда. Референс в таком случае не отменяет ограничения, а показывает принцип, который нужно корректно адаптировать.

Типичные ошибки в работе с референсами

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

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

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

• Если у подборки нет цели и системы, она быстро превращается в склад несвязанных изображений. Сначала определите, какие части проекта нужно визуализировать, и ищите материалы по этим критериям.

• Слишком узкий набор источников делает результат однообразным и предсказуемым. Смотрите работы авторов с разными подходами и стилями — так вероятность найти небанальное решение будет выше.

• Перенос приема без учета продукта и целевой аудитории может сделать дизайн неуместным. Любую найденную идею необходимо соотнести с конкретной задачей и потребностями пользователей.

Ловушки в работе с референсами

Ловушка бюджета: синдром «сделайте как у топового продукта»

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

Задача специалиста — перевести впечатление клиента в реалистичные требования. Сначала полезно выяснить, что именно воспринимается как «крутое»: плавная навигация, крупные карточки, ощущение премиальности или понятная структура. Из примера стоит извлечь нужную механику, а не пытаться воспроизвести дорогую оболочку целиком.

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

Таблица: Алгоритм работы с клиентом при ограниченном бюджете

Четкое согласование ожиданий на старте и дает условную экономию 20 % времени на правках. Узнав, что нужная анимация стоит 500 тысяч, клиент вряд ли попросит добавить ее на десятом круге согласования.

Кросс-отраслевые референсы: идеи за пределами ниши

При работе над доставкой еды логично сначала открыть «Купер», «Яндекс Еду» или «Самокат» и посмотреть, как задачу решили лидеры рынка.

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

Источник: shutterstock.com

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

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

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

Готовые кросс-отраслевые связки, которые работают в 2027 году

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

Эффект Франкенштейна

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

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

Чтобы убедить заказчика не смешивать все идеи одновременно, объясните последствия через особенности восприятия:

• Когнитивный диссонанс. Пользовательский мозг распознает закономерности и ожидает продолжения выбранной логики. После минималистичной шапки в духе Студии Лебедева кислотные карточки маркетплейса требуют дополнительной адаптации. Даже лишние полсекунды создают усталость и раздражение.

• Проблемы доступности (Accessibility). Контраст, размеры зон нажатия и иерархия заголовков рассчитываются внутри единой дизайн-системы. При соединении трех систем появляются «слепые зоны» и элементы, в которые трудно попасть пальцем на мобильном экране.

• Усложнение разработки. Вместо единого UI-kit фронтенд-разработчику приходится создавать отдельные решения для каждого заимствованного блока. Это замедляет загрузку и в перспективе способно увеличить стоимость поддержки минимум на 30 %.

Правило декомпозиции переводит обсуждение правок из области личного вкуса в предметный разговор о структуре.

Что такое антиреференсы в брифе

Антиреференс, или антипример — это дизайн, стиль, шрифт либо отдельный элемент, который заказчик точно не хочет видеть в готовой работе.

Фразы «не хочу плоский дизайн, как у ВКонтакте» или «только не шрифт, похожий на Сбер» заранее обозначают границы и экономят исполнителю десятки часов. Тщательно собранные антиреференсы на этапе брифа могут сократить число циклов правок минимум на 20 %.

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

• сведения о компании и ее продукте;

• описание целевой аудитории;

• референсы — то, что нравится заказчику;

• антиреференсы — нежелательные решения;

• обязательные элементы и юридические либо стилистические ограничения;

• бюджет и сроки.

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

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Источник изображения в шапке: shutterstock.com

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Как провести вебинар: правила, этапы, полезные инструменты
• Массовая рассылка email: задачи, виды, этапы создания