Как референсы помогают заказчику и исполнителю найти общий язык?

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

Что такое референс в дизайне

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

Важно! Если дизайнер показывает мудборд с примерами от Apple, Nike или Google, это не значит, что он просто скопирует их дизайн и перекрасит в другой цвет. Референсы нужны, чтобы показать направление мысли и обозначить результат. 

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

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

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

1. Убрать двусмысленность. А как это «смело», «современно»? А вот вам jpg, это как на картинке. 

2. Задать чёткие рамки. Достаточно 5–10 примеров, чтобы дизайнер понял рамки стиля, выбрал цвета и общий характер работы.  

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

4. Понять уровень сложности. По типу референсов видно, чего ожидают: простого лендинга, сложной анимации, фирменной графики или глубокой типографики. Это помогает честно оценить объём работ и рассчитать цену. 

5. «Попасть» в ожидания с первого прототипа. Вы делаете, заказчик принимает, все счастливы — идеалити. 

По каким критериям изучают референсы

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

Шаг 1: что здесь общего? 

Бургер Кинг: коричневый фон, красный баннер, тёплые оттенки, круглые иконки. Закат и море: релакс, спокойствие, мягкие переходы. Дали: лёгкость? Свобода? Уже вырисовывается общая атмосфера проекта. 

Шаг 2: что зацепило? 

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

Шаг 3: это технически реально?

Нашли референс с классной анимацией при скролле — блоки плавно всплывают, фон меняет оттенок. Красиво, но для клиента на Tilda не подойдёт: долго, дорого, не для этого бюджета. Можно предложить другой приём: простые hover-эффекты на кнопках, лёгкое затемнение фото при наведении, работает даже на слабых мобильных. 

Шаг 4: что у конкурентов?

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

Шаг 5: собрать всё вместе

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

Как искать и чем вдохновляться

Референсы ищут обе стороны, и клиенты, и дизайнеры, только действуют по-разному. Клиенту не нужно разбираться в типографике и сетках, достаточно показывать то, что нравится. Красивый сайт, случайный баннер, удачное фото: нашёл, заскринил, бросил в рабочий чат. Задача дизайнера: оценить решение с точки зрения ресурсов и стоимости, и направить в правильный вектор. Для вдохновения можно отправить клиента на Behance, Dribbble, Pinterest, а если совсем не получается, сделать ещё проще: открыть нейросеть (Midjourney, DALL·E, Nano Banana) и сделать референсы вместе с ним. Обычно хватает пары итераций, чтобы понять, в какую сторону двигаться. 

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

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

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

1. Клиент присылает сайт Apple и говорит: «Хочу такой же». Проблема: у Apple бюджет на дизайн примерно как годовой оборот среднего бизнеса. Там кастомные шрифты, анимации, которые разрабатывали месяцами, съёмки продуктов в студии за сотни тысяч долларов. Что делать: разобрать референс на элементы и понять, что именно нравится: минимализм, много воздуха, крупная типографика? А дальше сделать адаптацию под реальность.  

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

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

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

5. Референс не проверили на практичность. Дизайнер увидел на Dribbble крутой концепт с 3D-графикой, сложными анимациями и нестандартной навигацией — и взял его за основу. Но многие работы на Behance и Dribbble — это арт-концепты, а не рабочие решения. Они не тестировались на пользователях, не адаптировались под мобильные, могут тормозить при загрузке. Если и берём такое, то только с обязательным тестированием и адаптацией под гаджеты. 

6. Не учли контекст. Дизайнер собрал мудборд из премиальных брендов (Chanel, Rolex, Bentley) для проекта сосисочной «Ваня и Аня» с бюджетом 100 тысяч рублей. Проблема: у премиум-брендов другие задачи, другая аудитория, другие способы коммуникации с ней, на локальном общепите это не сработает. Здесь нужен заход через «просто, быстро, вкусно, дёшево». 

Советы по использованию референсов

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

Возьмите в привычку собирать интересные идеи и реализации постоянно, а не под конкретный проект. Создайте личную библиотеку в Pinterest, Yonote или просто в папке на компьютере, тогда каждому новому клиенту вам будет что предложить. Кстати, вам необязательно брать примеры из той же ниши, что и проект: руководствуйтесь общим интентом, который хотите передать. Например, идеи для сервиса B2B можно найти в EdTech, а для стоматологической клиники — на сайте SPA-салона. 

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

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