Как работать с референсами: инструкция для дизайнеров и не только

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

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

Референсом может быть:

• картинка, фотография;
• сайт, приложение;
• цветовая палитра;
• стиль анимации;
• способ подачи контента;
• отдельные UI-элементы (кнопки, меню, формы);
• функциональные компоненты (фильтры, сортировки и другие).

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

Пример, как правильно использовать референсы. Допустим, вы делаете сайт для сети семейных кафе. Клиент говорит: «Хочу что-то уютное, но не скучное». Пока непонятно. Но вот он показывает сайт пекарни с теплыми цветами, крупными шрифтами и качественными фото. И вы начинаете понимать, куда копать.

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

Визуальный. Это картинка или интерфейс, вдохновляющие стилем, цветами или атмосферой. Например, в 2023 году мы сделали лендинг для арт-галереи «Том Сойер» — получился хороший пример минималистичного дизайна.

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот как дизайнеру прокачать насмотренность.

• Каждый день по чуть-чуть. Завести привычку раз в день смотреть 2−3 проекта (например, на Mobbin, One Page Love или Land-Book), не ради копирования, а чтобы фиксировать, что именно нравится и почему.
• Разбирать чужие работы. Почему карточки товара на сайте выглядят чисто и современно? Как решена анимация в приложении? Чем держит внимание обложка на YouTube-канале? Чем подробнее раскладываете, тем лучше запоминается.
• Сравнивать и выбирать. Например, ищете примеры хедера. Сравниваете пять штук: где навигация интуитивнее, а где визуально легче.

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

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

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

Суть работы с рефами не в сохранении красивых картинок и повторении идеи, а в том, чтобы понять, почему она работает. А затем придумать что-то свое. Например, один и тот же сайт можно разобрать с разных сторон:

• по цвету,
• по композиции,
• по микроанимации,
• по структуре,
• по шрифтам.

Когда изучаете референсы, задавайте себе эти вопросы:

1. Первичное восприятие.

• Почему это сразу привлекло моё внимание?
• Какие эмоции вызывает этот дизайн?

2. Функциональный анализ.

• Как и почему это работает?
• Какие проблемы пользователя решает это решение?
• Удобно ли это в использовании или просто красиво?
• Как организована навигация/взаимодействие?

3. Визуальный разбор.

• Какие цвета и шрифты используются?
• Как построена композиция и иерархия элементов?
• Какие визуальные акценты расставлены и почему?

4. Критическое осмысление.

• Что бы я сделал иначе?
• Какие недостатки или слабые места я вижу?
• Как выглядит это решение без оригинального контекста?

5. Практическое применение.

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

6. Глубокая рефлексия.

• Соответствует ли это трендам или это вневременное решение?
• К какому типу пользователей обращен этот дизайн?
• Какие принципы из этого можно применить в других проектах?

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

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

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

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

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

Пошагово работа дизайнера с референсами выглядит примерно так.

1. Изучаем задачу. Сначала — бриф/интервью с клиентом, целевая аудитория, цели и задачи сайта, пожелания клиента по дизайну и функциям

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

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

4. Создаём мудборд. Когда референсы собраны, их нужно систематизировать и оформить на мудборде, например, в Figma.

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

6. Фиксируем визуальное направление. После обсуждения и правок определяем стиль: современный минимализм, ретро, нейтральная классика и т. д. Это станет опорой для дальнейшего дизайна.

Когда идет работа с референсами, соблюдайте несколько правил:

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

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

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

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

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

Российская платформа, где дизайнеры и агентства публикуют кейсы и ищут клиентов. Здесь можно собрать кейс прямо на сайте или импортировать из Behance за пару минут. Все проекты отсортированы по категориям — UX/UI, лендинги, брендинг и др.

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

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

Конструктор, на сайте которого есть большая коллекция сайтов, разработанных с помощью Readymag. Здесь и лендинги, и портфолио, и e-commerce.

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

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

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

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

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

Здесь собраны лучшие проекты с анимацией, сделанные с помощью GSAP. Удобно смотреть, как именно реализованы те или иные приемы — ScrollTrigger, Flip, SplitText и другие. Полезно, если хочется разобраться, как работает анимация на сайтах, и повторить что-то похожее у себя в проекте.

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

Галерея сайтов с акцентом на эстетику и интерактив. Не все пригодится в жизни — но если нужно вдохновение по структуре, анимации, подаче контента, лучше места не найти. Полезно искать не только победителей, но и номинантов — там часто больше «живых» сайтов. Особенно хорошо работает для digital-продуктов, fashion и креативных агентств.

CSS Winner — каталог награждённых сайтов с акцентом на UI, UX и современные веб-технологии. У каждого проекта указаны платформа, отрасль, используемые приемы и ссылки на оригинал. Можно отфильтровать работы по типу сайта или дате публикации.

Платформа, которая с 2000 года награждает лучшие веб-проекты за дизайн, UX и технологическую инновационность. Каждый день жюри выбирает «FWA of the Day», а по итогам месяца и года отбираются лучшие работы. На сайте есть проекты, отмеченные за оригинальные анимации, интерфейсы, концептуальные идеи и сложную реализацию.

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

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

Еще несколько интересных площадок для вдохновения.

• #madeontilda — галерея лучших проектов пользователей Tilda.
• Pageflows — UI/UX-вдохновение и лучшие примеры сайтов и приложений.
• Pinterest — ищем не только UI и графику, но и композиционные решения, шрифтовые пары и цветовые схемы.
• Web Design Inspiration — каждый день выкладывают свежие идеи и тренды веб-дизайна.
• Land-Book — подборки красивых и удобно оформленных сайтов, удобно искать по нишам и стилям.
• Design Inspiration — сайты, иллюстрации и фото по категориям и цветам — удобно для мудбордов.
• Savee — визуальные закладки и мудборды, где легко собирать вдохновение по разным темам.
• One Page Love — лучшие одностраничные сайты: от портфолио до лендингов.
• Lapa Ninja — большая галерея лендингов + бесплатные книги и ресурсы для дизайнеров.
• Collect UI — интерфейсное вдохновение на каждый день, с примерами по категориям.
• Interface Index — коллекция UI-решений от B2B-сервисов, SaaS и десктопных приложений.
• Best Agency Sites — независимая витрина лучших сайтов креативных агентств.
• Admire The Web — ежедневная галерея сайтов с фокусом на композицию и детали.
• Mimal.gallery — строго, просто, удобно: минималистичный и функциональный веб-дизайн.
• The-Responsive.com — примеры качественной адаптивной верстки с хорошей реализацией.
• Brutalist Websites — подборка сайтов в стиле брутализма.
• Motionographer — не совсем про веб, но must-have для вдохновения в моушн-дизайне.
• Dribbble — интересные решения по компонентам и анимации.
• 60FPS Design — коллекция анимаций UI/UX и элементов взаимодействия из лучших мировых приложений для iOS, Android и веба.
• Refero — крупнейшая библиотека веб-сайтов и iOS-приложений.
• CallToInspiration — галерея CTA-решений.
• Hoverstat.es — подборка необычных сайтов с характером: нестандартные идеи и смелый визуал.
• Navbar.gallery — большая галерея навигации: от минималистичных меню до креативных хедеров.

Еще пара советов, где найти качественные референсы.

Профильные каналы в Telegram

• Crazyart — искусство и креатив для вдохновения;
• Фича дня — интересные решения из мира e-commerce;
• Now How Channel — дизайн со всего мира: свежие приёмы, тренды и кейсы.
• N С К У С С Т В О — атмосферные фотосессии;
• NAJES китchen — нескромно пиарим наш канал, а что вы нам сделаете :)
• BDSR DESIGN REFERENCES — примеры моушн-дизайна;
• Post Tribe Inspiration — подборки для вдохновения в моушн-дизайне, 3D и компьютерной графике;
• UI Muse — выкладывают крутые интерфейсы.

Фотостоки — Pexels, Unsplash, Life of Pix и Pixabay;

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

• формулируйте конкретные запросы, например: «b2b saas landing dark theme»;
• используйте ключевые слова и теги;
• следите за авторами: если нашли крутой кейс — посмотрите портфолио или кого лайкает автор;
• ищите по стилям: brutalist ui, neo serif logo, pastel brand identity — стилистика часто говорит больше, чем категория.

Нет. Референсы — это не воровство, а насмотренность и аналитика. Они помогают не копировать вслепую, а понимать, как и почему работают чужие решения.

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

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

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

Удобные платформы, чтобы хранить референсы:

• Pinterest — для быстрых подборок и умной выдачи по интересам;
• Notion — если хочется хранить с комментариями, тэгами и ссылками;
• Google Drive или Яндекс Диск — если нужен простой архив с папками и скринами.
• Figma — куда же без нее родимой.

Хорошая база растет вместе с вами. В начале это просто куча разрозненных картинок, потом — аккуратные папки и примеры референсов на любой случай:

• шрифты,
• цветовые схемы,
• мобильные интерфейсы,
• иллюстрации с характером,
• приемы в карточках товара,
• приемы для адаптива.

Не забудьте подписать пару слов («нравится композиция», «прикольный паттерн из логотипа»), чтобы не забыть, зачем вы вообще это сохранили. Со временем такая база станет личной визуальной библиотекой. Чем она полнее, тем точнее вы чувствуете, что «ваше», а что нет. И быстрее поймете, как работать с референсами правильно.

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