Дизайн  •  29 августа 2022  •  5 мин чтения

Не плагиат, а вдохновение: зачем нужны референсы в дизайне

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

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

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

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

Референсы для графического и веб-дизайна решают несколько задач:

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

Кому нужны референсы

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

● Референсы для веб-дизайнера задают направление, когда нужно создать дизайн сайта, лендинга, баннера или приложения.
● Фотографам референсы помогают найти идеи для съёмок: цвета, композицию, сюжет или стиль.
● Референсы для графических дизайнеров — инструмент для создания логотипов, фирменного стиля, упаковки, рекламных материалов, вывесок, витрин.
● Для иллюстраторов, гейм-дизайнеров и 3D-художников референсы нужны, чтобы создавать фантастические миры и персонажей.
● Тем, кто работает над брендингом и фирменным стилем, референсы помогают создать образ и цветовое решение, которые выделят бренд на фоне конкурентов.
● Дизайнеры одежды используют референсы, чтобы найти новые силуэты и стилевые решения.
● Дизайнеры интерьера с помощью референсов разрабатывают нужный стиль и цветовую гамму, следуя пожеланиям заказчика.

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

Создавайте удобные интерфейсы для интернет-ресурсов
Представьте себя на месте дизайнера и спроектируйте пользовательский опыт — попробуйте бесплатную вводную часть
курса «Дизайнер интерфейсов»

Виды референсов

В качестве референса используют:

● Статичную 2D-графику: фото, видео, иллюстрацию, эскиз или макет.
● 3D-изображения: предметы, персонажей, пейзажи, интерьеры или целые сцены из 3D-анимации.
● Физические объекты: скульптуру, архитектуру, предметы одежды, мебель, технику и механизмы, детали интерьера, человеческие лица и фигуры, животных и растения.

Референсы можно разделить по видам:

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

Стилевые референсы для презентации тату-студии с комментариями дизайнера

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

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

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

Разница между референсом и мудбордом

Референсы часто путают с мудбордом (от англ. mood board — «доска настроения»). Визуальные референсы — это примеры, которые дизайнер использует для подготовки макета. Мудборд — это способ представления референсов в виде подборки изображений, объединённых общей идеей или настроением. Он может выглядеть как коллаж из фотографий, иллюстраций, иконок, текста, цветовых пятен. В мудборд можно собрать самые абстрактные пожелания заказчика. Например, «что-то молодёжное» или «что-нибудь в пастельной гамме».

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

Где искать референсы для дизайна

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

Пример подборки на Behance по запросу «стиль бохо»

Pinterest — социальная сеть, где можно собирать коллекции изображений по разным запросам: стиль, цвет или тема.

Пример подборки на Pinterest по запросу «дизайн кофейни»

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

Пример подборки на Dribbble по запросу «интернет-магазин»

Как правильно работать с референсами

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

Прежде чем собирать референсы самостоятельно, нужно получить:

● ТЗ от заказчика;
● вводные по продукту: особенности, преимущества, аудитория, конкуренты;
● технические условия: где будет использоваться макет, в каких размерах и материалах;
● референсы от заказчика: примеры того, какие проекты ему нравятся, — их тоже можно использовать в работе, но не стоит ограничиваться ими.

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

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

2. Отбор референсов.
Для использования в работе можно брать как целые макеты или продукты, так и отдельные детали, шрифты или просто оттенки цвета.

3. Оформление подборки.
Можно собрать мудборд на Behance и Pinterest, в графическом редакторе Figma или сделать презентацию в Keynote или Google Slides.

Подборка референсов для дизайна презентации на Pinterest
Подборка референсов для презентации на Behance

4. Анализ подборки и выводы.
Это удобнее всего делать в Figma или презентации, добавляя к изображениям свои комментарии и аргументы. Именно от них нужно отталкиваться при создании дальнейшей идеи, а не от картинки-примера.

Вопросы для анализа могут быть следующими:

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

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

Пример комментария для анализа референсов может быть таким: «Мне не нравится этот фрагмент в лендинге — текст „слипается“, и его сложно прочитать. Вывод: здесь неудачно оформлены отступы, лучше сделать их в два раза больше. Тогда текст будет разбит на тематические блоки и его будет легко читать». Источник: http://aschoolofschools.iksv.org/

Советы новичкам

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

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

● Ищите стилевые референсы в смежных областях и даже далёких от той, к которой принадлежит продукт или проект. Идеи для дизайна сайта иногда можно найти в журнале с интерьерами, а для иллюстрации — в археологическом музее.
● Собирайте не только отдельные компоненты, но и комбинации: например, заголовок и текст под ним. Это поможет сразу подобрать удачные сочетания, чтобы потом не пришлось переделывать каждый элемент макета.
● Собирайте по 5–10 референсов для каждой задачи. Так вы сможете выбрать лучшие детали и приёмы из каждой подборки, чтобы использовать в готовом проекте.
● Оценивайте референсы не только с позиции красоты и гармоничности, но и функциональности, как они решают поставленную задачу.

Елена Хурина

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

Создавайте удобные интерфейсы для интернет-ресурсов
Представьте себя на месте дизайнера и спроектируйте пользовательский опыт — попробуйте бесплатную вводную часть
курса «Дизайнер интерфейсов»
Поделиться
Wed Sep 21 2022 23:25:49 GMT+0300 (Moscow Standard Time)