Не просто насмотренность: как дизайнеру работать с референсами

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

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

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

В статье рассказываем:

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

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

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

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

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

Как дизайнеры используют референсы в реальных проектах

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

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

В результате область поиска становится уже. Дизайнер ищет не абстрактно «что-нибудь красивое для сайта», а решение конкретной задачи с учётом технических ограничений, особенностей контента и поведения пользователей.

Упростить этот поиск помогает разделение референсов на три направления:

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

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

Информация и структура: как организовать контент

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

Дизайнер может смотреть:

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

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

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

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

Стиль и настроение: как найти визуальный язык

Здесь дизайнера интересует уже не столько устройство интерфейса, сколько ощущение, которое он создаёт.

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

Чтобы не искать нужное настроение вслепую, сначала отталкиваются от платформы бренда. Если её нет, команда уточняет ожидания на этапе брифа или интервью с представителями компании.

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

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

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

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

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

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

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

Механика: как понять, почему интерфейс работает

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

Это могут быть:

• слайдеры;
• карточки;
• способы навигации;
• микроинтеракции;
• анимация;
• работа со звуком;
• интерактивные 3D-объекты.

При анализе такого референса особенно полезно задать два вопроса: «Какую задачу здесь решает эта механика?» и «Сработает ли она в контексте моего проекта?»

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

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

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

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

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

Мудборд для выбора общего направления

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

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

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

Референсы для конкретных блоков

После выбора общего направления начинается более точечный поиск.

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

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

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

Выбор площадки зависит от того, что именно вы хотите найти. Для общего визуального поиска можно использовать Muzli — агрегатор собирает проекты из разных областей дизайна, от сайтов и мобильных интерфейсов до типографики, иллюстрации и брендинга. Если нужны именно современные сайты, пригодятся Godly и Siteinspire: первый удобен для поиска актуальных визуальных приёмов, второй позволяет фильтровать проекты по стилю, типу, тематике и платформе.

Когда нужен не целый сайт, а решение для конкретного блока, полезнее специализированные библиотеки. В Unsection собрано более 4000 примеров отдельных секций — от первых экранов и навигации до CTA и футеров. А Footer.design пригодится, если нужно изучить именно варианты нижней части страницы.

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

А если интересует не внешний вид, а поведение интерфейса, полезен Spotted in Prod. В нём собраны примеры из реальных цифровых продуктов: онбординг, фильтры, модальные окна, жесты, состояния интерфейса и другие механики.

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

Как искать и анализировать референсы

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

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

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

Шаг 3. Разберите, почему решение работает. Это ключевой этап. Вместо «мне нравится этот экран» попробуйте определить, что именно создаёт нужный эффект. Иерархия? Размер элементов? Контраст? Сетка? Последовательность блоков? Анимация? Удобный пользовательский сценарий?

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

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

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

5 упражнений для развития насмотренности

Работа с референсами полезна не только в коммерческих проектах. На них можно тренироваться разбирать чужие решения и постепенно формировать собственную библиотеку приёмов.

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

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

3. «Подберите референс по атмосфере». Возьмите описание условного бренда — например, «современная IT-компания» или «премиальный жилой комплекс в центре Москвы». Найдите 3–5 подходящих референсов и для каждого объясните, какие конкретные приёмы передают нужное ощущение.

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

5. «Быстрый поиск». Поставьте таймер на пять минут и попробуйте найти десять референсов под конкретную задачу. После этого пересмотрите подборку без ограничения времени: какие примеры действительно полезны, какие попали туда только из-за эффектной картинки и что вы пропустили? Так можно тренировать скорость поиска, не подменяя ею качество отбора.

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

Главное о работе с референсами

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