Что такое референс и зачем он дизайнеру

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

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

Коротко о главном

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

Что такое референс

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

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

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

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

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

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

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

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

Простой практический тест: если убрать все, что вы взяли из референса, останется ли от вашего проекта что-то ваше. Если ответ «нет», это уже не референс.

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

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

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

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

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

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

Договориться с заказчиком . Едва ли не главная функция. Слова «сделайте современно и дорого» каждый понимает по-своему, картинки не оставляют места для разночтений.

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

Вдохновиться . Самая очевидная и при этом наименее надежная причина. Вдохновение приходит нерегулярно, а проект надо сдать в пятницу.

Как разбирать референс

Здесь новички теряют больше всего пользы. Обычный подход это «нравится, сохраню». Профессиональный подход это ответить на вопрос, за счет чего это сделано.

Разбирайте по слоям:

Композиция . Что первым притягивает взгляд и почему. Куда взгляд идет дальше. Где пустое пространство и как оно работает.

Сетка и структура . На сколько колонок разбит макет, какие отступы, что выровнено по чему.

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

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

Детали . Скругления, толщина линий, тени, характер иллюстраций.

Что не так . Ищите слабые места тоже. Понимание чужой ошибки полезнее восхищения чужой находкой.

Полезное упражнение для начинающих: возьмите понравившуюся работу и опишите словами, почему она хорошая, не используя слов «красиво» и «стильно». Если получается, вы видите приемы. Если нет, вы пока видите только результат.

Сколько референсов нужно

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

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

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

Мудборд: как собрать референсы в концепцию

Мудборд это подборка референсов, оформленная как единая композиция, а не как папка с файлами.

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

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

Последний пункт важнее, чем кажется. Без подписей заказчик решит, что вы собираетесь скопировать показанное. Подпись вроде «отсюда берем принцип разреженной верстки, но не цвет» снимает этот вопрос заранее.

Как работать с референсами заказчика

Отдельный навык, о котором почти не пишут.

Просите примеры до начала работы . Не «расскажите, как вы это видите», а «покажите три-пять сайтов или макетов, которые вам нравятся».

Спрашивайте, что именно нравится . Заказчик приносит пять примеров, и вам кажется, что он хочет минимализм. А ему на самом деле понравился в них крупный шрифт, и минимализм здесь ни при чем. Один уточняющий вопрос экономит неделю переделок.

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

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

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

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

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

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

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

Локальный контекст

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

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

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

Типичные ошибки

Один референс на весь проект . Заканчивается копией.

Сбор без разбора . Сохранили сто картинок, ни одну не проанализировали. Пользы ноль.

Референсы из другой эпохи . Приемы устаревают, особенно в вебе. Проверяйте дату работы.

Показ референсов без пояснений . Заказчик воспринимает их как обещание сделать точно так же.

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

Копирование без учета контекста . Решение, работающее у крупного бренда с узнаваемым именем, может не сработать у нового бизнеса, которого никто не знает.

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

Частые вопросы

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

Референс это отдельный пример. Мудборд это подборка референсов, собранная в единую композицию и объясняющая направление.

Можно ли показывать заказчику чужие работы?

Да, для объяснения концепции это нормальная практика. Важно проговорить, что вы берете принцип, а не собираетесь повторить работу.

Сколько референсов достаточно?

От пяти до десяти на задачу. Меньше ведет к копированию, больше превращается в кашу.

Использовать референсы это не стыдно?

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

Можно ли брать референс из другой сферы?

Не только можно, но и нужно. Именно оттуда приходят нестандартные решения.

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

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

Что дальше

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

Работа с референсами, мудбордами и защитой концепции перед заказчиком входит в программу курса Pro Design в PROWEB: шесть месяцев, графический и веб-дизайн, полиграфия, с нуля и с реальными проектами в портфолио. Если ближе предметная среда и пространство, посмотрите на дизайн интерьера и экстерьера, там работа с образцами и подборками устроена похоже, но материал другой.

Сомневаетесь, ваше ли это направление, пройдите бесплатный IT-тест.