Что такое референсы в дизайне и как правильно с ними работать

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

Референсы нужны для того, чтобы:

• Преодолеть страх «белого листа». Анализ чужих решений помогает выйти из творческого ступора и сформулировать идеи, которые раньше не приходили на ум.
• Найти источник вдохновения. Комбинируя чужие идеи, можно развить собственный уникальный стиль или творчески переосмыслить привычные, но устаревшие элементы дизайна.
• Найти информацию. Если дизайнер впервые сталкивается с конкретной задачей, референсы помогут понять, как подходили к подобным проектам другие. Так можно отследить тенденции прошлых десятилетий и научиться различать архитектурные и другие направления.
• Изучить тренды. Чтобы оставаться востребованным специалистом, важно следить за трендами в нише. Знание последних визуальных тенденций поможет поддерживать конкурентоспособность и иметь стабильно высокий заработок.
• Развить насмотренность. Анализируя чужие работы, дизайнер учится различать стили, цветовые решения, композиции, обогащая визуальный опыт.
• Упростить коммуникацию между исполнителем и заказчиком. Вместо длинных описаний заказчик может прислать два–три примера и описать, как он хочет адаптировать их. А исполнитель предложить таким образом разные варианты. Все это поможет упростить коммуникацию, снизить риски непонимания и ускорить согласование.

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

По содержанию — визуальные и функциональные. К визуальным референсам относятся картинки, фотографии, инфографики, иллюстрации — они помогают выбрать стиль, цветовую гамму и композицию. Функциональные — это примеры интерфейсов и моушн-дизайнов, с помощью которых можно разработать удобные пользовательские сценарии и создать эффективное UX/UI-решение.

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

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

Референсы актуальны практически во всех сферах жизни, где важен визуальный эффект:

• фотография;
• живопись;
• кино и геймдизайн;
• архитектура и интерьер;
• графический и веб-дизайн;
• моушн-дизайн и 3D;
• мода;
• брендинг и маркетинг.

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

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

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

Dribbble — платформа для дизайнеров, ориентированная на UI/UX и иллюстрации, где делятся работами, идеями и создают портфолио. Этот ресурс идеален, чтобы искать тренды и форматы. Также на Dribbble есть блог про занятость на фрилансе и биржа заказов.

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

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

• Muzli — расширение для браузера и онлайн-сообщество для дизайнеров с подборками свежих трендов в дизайне и UX/UI.
• Landingfolio — библиотека лендингов, элементы которых можно использовать как шаблоны в Figma.
• Awwwards — это коллекция лучших сайтов по мнению профессионального жюри, а также блог, обучающие материалы и биржа вакансий.
• Figurestock — ресурс стоковых фотографий людей разного возраста и в разных позах.
• Minden Pictures — сайт с фотографиями животных и дикой природы.
• They draw — это подборка иллюстраций на тему еды, природы, путешествий, карт, меню, праздничных открыток и не только.
• New Old Stock — это сток винтажных фотографий из государственных архивов без авторских прав. Здесь можно найти фото исторических событий, интерьеров, улиц и многое другое.
• Foodiesfeed — это сток бесплатных изображений еды высокого качества, в том числе сгенерированных ИИ.

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

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

Вот несколько простых шагов, которые помогут пользоваться референсами эффективно.

1. Собирайте до 15 примеров. Так вы сможете создать уникальное решение на основе разных идей, а не просто повторить чей-то стиль.
2. Ищите примеры в разных сферах. Не ограничивайтесь только вашей нишей. Архитектура, мода, природа, кинематограф — все это может дать неожиданные идеи даже для сайта-портфолио.
3. Изучите детали. Обращайте внимание на стиль, композицию, цветовые решения. Анализируйте, что работает, а что — нет. Так развивается насмотренность и критическое мышление.
4. Систематизируйте находки. Используйте сервисы вроде Figma, Miro или Eagle, чтобы сохранять, классифицировать и комментировать понравившиеся работы. Все это поможет в будущем быстро найти и использовать референс в новом проекте.
5. Создавайте мудборды. Коллажи из референсов помогают визуализировать атмосферу, настроение и стилистику будущего проекта. Ты вы сделаете абстрактные идеи наглядными — для вас и для клиента.

Если вам пока не совсем ясно, как работает мудбординг, или вы хотите прокачать визуальное мышление, обратите внимание на курс ProductStar «Профессия UX/UI-дизайнер». В программе предусмотрен отдельный модуль, посвященный работе с мудбордами, референсами и стайлбордами.

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

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

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

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

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

Ищите их на профессиональных платформах — Behance, Pinterest, Dribbble, Httpster, на дополнительных ресурсах — Muzli, Landingfolio, Awwwards и других. Также можно искать вдохновение в повседневной жизни.

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