Что такое референсы: где искать референсы для сайта, зачем они нужны веб-дизайнерам и заказчикам сайтов

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

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

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

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

Его коллега по цеху, Пабло Пикассо рисовал по фотографиям и копировал чужие картины, не скрывая этого. А режиссер «Звездных войн» Джордж Лукас честно признался, что взял за основу киноэпопеи фильм и сериал «Флэш Гордон покоряет Вселенную»: у картин похожи заставки, спецэффекты и сюжет.

Деятели искусства — яркое подтверждение, что пользоваться референсами не стыдно. Освоить принцип «кради, как художник» и научиться адаптировать чужие задумки под свои задачи важнее, чем уметь придумывать идеи с нуля.

Референсы — удобный инструмент, который выполняет несколько функций.

• Помогает побороть страх чистого листа. Сложно приступить к работе, когда не знаешь, с чего начать. Референсы приносят вдохновение и ясность, как реализовать конкретную задумку: нарисовать фигуру в сложном ракурсе, составить структуру письма для email-рассылки или оформить блок с отзывами на сайте.
• Развивает насмотренность. Это визуальный опыт, который помогает отличать хорошие задумки от плохих и генерировать собственные идеи. Его часто не хватает начинающим специалистам.
• Помогает быть в тренде. Референсы отражают тенденции, актуальные в разных сферах: новые технологии, модные цветовые сочетания, популярные стили.
• Позволяет погрузиться в контекст. Поиск примеров помогает проанализировать конкурентов и выделиться на их фоне за счет уникальных решений. Кроме того, это эффективный способ изучить особенности узкой сферы. Допустим, понять, из каких разделом состоят сайты-визитки, лендинги и интернет-магазины.
• Служит источником ценных знаний. Люди, которые рисуют динозавров, никогда не видели их вживую — скелеты в музеях не в счет. Уловить анатомию рептилий им помогают иллюстрации в учебниках. По референсам изучают особенности строения объектов, учатся прорабатывать текстуры и ракурсы. А еще — перенимают стиль и технику других авторов.
• Защищает от ошибок. Референсы подскажут, что смотрится хорошо, а что не очень. Они предостерегают от использования неудачных цветовых сочетаний, плохих ракурсов и ненадежных конструкций.
• Облегчает коммуникацию между заказчиком и исполнителем. Объяснить задумку, которая есть в голове, на словах непросто — легче показать примеры. Обмен референсами помогает заказчику и исполнителю настроиться на одну волну. Для клиента это удобный способ продемонстрировать, какой результат он хочет увидеть, а для специалиста — презентовать свою задумку и получать «добро» на ее реализацию.

Референсом может стать что угодно: картинка в интернете, 3D-изображение, скульптура в музее, лицо прохожего, интерьер квартиры и так далее. У любого объекта можно перенять форму, текстуру, оттенок и другие детали, необходимые для создания собственного проекта. Выделяют 3 группы референсов:

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

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

• Дизайнеры одежды обращаются к моде разных эпох и народов, чтобы найти интересные силуэты для костюмов и идеи для аксессуаров.
• Дизайнеры интерьеров ищут вдохновение в архитектуре разных стран и в проектах своих коллег. Они находятся в постоянном поиске гармоничных сочетаний оттенков, материалов, нестандартных планировок, вариантов мебели и декора.
• В брендинге референсы помогают разработать уникальный фирменный стиль, отстроиться от конкурентов и подчеркнуть индивидуальность компании.
• Графические дизайнеры используют референсы для создания логотипов, упаковочных и рекламных материалов. Примерами для них служат картинки в интернете, постеры к фильмам и картины разных художников.
• В геймдизайне референсы нужны для проработки персонажей и локаций. Если место действия в игре — Япония, ее разработчику придется изучить особенности архитектуры этой страны.
• В веб-дизайне референсы позволяют находить удобные и эстетичные решения для оформления сайтов и приложений. В качестве источника идей используют ресурсы конкурентов и компаний из смежных областей.

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

Разберем общий алгоритм подбора референсов. Он состоит из 3-х шагов:

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

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

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

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

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

Muzli. Плагин для Chrome, который собирает свежие публикации из 120 популярных дизайнерских сообществ. Укажите в настройках тематику, которая вам интересна, и сервис сформирует подборку референсов по вашему запросу. Это удобный способ отслеживать новинки и тренды в индустрии. Расширение запоминает и анализирует пользовательский опыт: со временем оно подстраивается под ваши вкусы и показывает только интересные примеры.

Dribbble. Сайт предназначен для веб-дизайнеров и разработчиков, которые хотят поделиться своими проектами и посмотреть на работы коллег. Сервис подходят для поиска референсов, необходимых в разработке дизайна интерфейсов.

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

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

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

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

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

• Обращайте внимание на цельную композицию и ее детали. Изучайте, как элементы расположены относительно друг друга, как они создают баланс или динамику на холсте или в кадре. Рассмотрите отдельные аспекты объекта, чтобы понять, как они способствуют общему визуальному восприятию. Благодаря такому анализу вы поймете, из каких частей состоит изображение и как реализовать их в своем проекте.
• Находите ошибки, чтобы не повторять их. При анализе референсов важно обращать внимание как на положительные стороны, так и на недочеты. Если расположение кнопок на сайте показалось вам неудобным, а их дизайн — непривлекательным, запомните данный пример, чтобы не повторить его в своей работе.
• Ищите референсы не только в своей области. Никогда не знаешь, где найдешь вдохновение. Изучайте произведения искусства, работы коллег в вашей нише и в смежных областях. Фотограф может перенять ракурс, световую схему и цветокоррекцию у кадра из фильма. Шаржист может найти сюжеты для своих иллюстраций во время поездки в метро. А веб-дизайнер, которому поступил заказ на лендинг для курса по программированию, может подсмотреть структуру одностраничника на сайтах других образовательных проектов.
• Собирайте по 5-10 референсов на один проект. У одного объекта вы сможете перенять цветовую гамму, у другого — ракурс, у третьего — текстуру. За счет этого у вас получится свое, уникальное изображение. Однако важно не перестараться с поиском примеров. Когда идей слишком много, объединить их в одно целое становится сложно. Есть риск, что от каких-то находок придется отказаться. Если этого не сделать, работа может оказаться перегружена деталями.

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

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

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

Референсы необходимы для создания уникального и функционального дизайна. Разберем их роль более подробно.

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

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

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

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

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

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

Задачи, которые референсы помогают решить в работе над сайтом:

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

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

Сайт отличает лаконичный дизайн и отсутствие декоративных элементов. Несмотря на простой белый фон и черный текст, он смотрится стильно за счет оформления главного экрана. Листья растения, которые выходят за пределы фоновой рамки, создают объем — такой прием поможет разнообразить минималистичный дизайн. Текстовые блоки, расположенные на разной высоте справа и слева, придают изображению динамичности и делают его более интересным.

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

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

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