Что такое референсы: где искать референсы для сайта, зачем они нужны веб-дизайнерам и заказчикам сайтов
Работа над созданием чего-то нового всегда начинается с поиска референсов — примеров, которые натолкнут на интересные идеи и креативные решения. Их используют в разных сферах, в том числе в живописи, кинематографе, фотографии, маркетинге и веб-дизайне. В этой статье мы подробно разберем, зачем нужны референсы, как их искать и правильно использовать, чтобы создать стильный, удобный и уникальный дизайн сайта.
Что такое референсы
Термин «референс» произошел от английского слова «reference», которое переводится как «отсылка» или «пример». Его можно услышать от представителей профессий, деятельность которых связана с визуальными образами: режиссеров, фотографов, художников, модельеров и дизайнеров. Однако инженеры, композиторы, писатели и другие специалисты тоже пользуются этим инструментом.
Референсы — материалы, которые человек собирает в поисках вдохновения перед тем, как приступить к реализации собственного проекта. Для копирайтеров ими могут стать статьи в блогах, для SMM-щиков — профили в соцсетях, а для программистов — фрагменты кода.
История термина началась много лет назад. Известные художники придумывали сюжеты картин не из головы, а искали идеи в творчестве других деятелей искусства. Во времена Ренессанса их черпали из произведений античности, а в 19-м веке — из рисунков иностранных народов. Наглядный пример — Ван Гог, который вдохновлялся японскими гравюрами.
Его коллега по цеху, Пабло Пикассо рисовал по фотографиям и копировал чужие картины, не скрывая этого. А режиссер «Звездных войн» Джордж Лукас честно признался, что взял за основу киноэпопеи фильм и сериал «Флэш Гордон покоряет Вселенную»: у картин похожи заставки, спецэффекты и сюжет.
Деятели искусства — яркое подтверждение, что пользоваться референсами не стыдно. Освоить принцип «кради, как художник» и научиться адаптировать чужие задумки под свои задачи важнее, чем уметь придумывать идеи с нуля.
Для чего нужны референсы
Референсы — удобный инструмент, который выполняет несколько функций.
- Помогает побороть страх чистого листа. Сложно приступить к работе, когда не знаешь, с чего начать. Референсы приносят вдохновение и ясность, как реализовать конкретную задумку: нарисовать фигуру в сложном ракурсе, составить структуру письма для email-рассылки или оформить блок с отзывами на сайте.
- Развивает насмотренность. Это визуальный опыт, который помогает отличать хорошие задумки от плохих и генерировать собственные идеи. Его часто не хватает начинающим специалистам.
- Помогает быть в тренде. Референсы отражают тенденции, актуальные в разных сферах: новые технологии, модные цветовые сочетания, популярные стили.
- Позволяет погрузиться в контекст. Поиск примеров помогает проанализировать конкурентов и выделиться на их фоне за счет уникальных решений. Кроме того, это эффективный способ изучить особенности узкой сферы. Допустим, понять, из каких разделом состоят сайты-визитки, лендинги и интернет-магазины.
- Служит источником ценных знаний. Люди, которые рисуют динозавров, никогда не видели их вживую — скелеты в музеях не в счет. Уловить анатомию рептилий им помогают иллюстрации в учебниках. По референсам изучают особенности строения объектов, учатся прорабатывать текстуры и ракурсы. А еще — перенимают стиль и технику других авторов.
- Защищает от ошибок. Референсы подскажут, что смотрится хорошо, а что не очень. Они предостерегают от использования неудачных цветовых сочетаний, плохих ракурсов и ненадежных конструкций.
- Облегчает коммуникацию между заказчиком и исполнителем. Объяснить задумку, которая есть в голове, на словах непросто — легче показать примеры. Обмен референсами помогает заказчику и исполнителю настроиться на одну волну. Для клиента это удобный способ продемонстрировать, какой результат он хочет увидеть, а для специалиста — презентовать свою задумку и получать «добро» на ее реализацию.
Виды референсов: как их используют в разных областях
Референсом может стать что угодно: картинка в интернете, 3D-изображение, скульптура в музее, лицо прохожего, интерьер квартиры и так далее. У любого объекта можно перенять форму, текстуру, оттенок и другие детали, необходимые для создания собственного проекта. Выделяют 3 группы референсов:
- Стилистические. У них можно подсмотреть общую концепцию дизайна или конкретные детали. Помогают подобрать цветовую палитру, шрифтовые пары, иконки, иллюстрации и выстроить композицию.
- Тематические. Представляют собой анализ ниши и конкурентов. Позволяют определить лидеров рынка, тренды и особенности отрасли.
- Технологические. Способствуют погружению в контекст, полезны для изучения нюансов сферы и технических требований к изображению. Чтобы создать дизайн коробки для чая, не помешает посмотреть упаковки других брендов, чтобы понять особенности макета. Также технологические референсы служат источником интересных фишек: художественных приемов и функциональных находок.
Рассмотрим, как и зачем данные виды референсов используются в разных областях дизайна.
- Дизайнеры одежды обращаются к моде разных эпох и народов, чтобы найти интересные силуэты для костюмов и идеи для аксессуаров.
- Дизайнеры интерьеров ищут вдохновение в архитектуре разных стран и в проектах своих коллег. Они находятся в постоянном поиске гармоничных сочетаний оттенков, материалов, нестандартных планировок, вариантов мебели и декора.
- В брендинге референсы помогают разработать уникальный фирменный стиль, отстроиться от конкурентов и подчеркнуть индивидуальность компании.
- Графические дизайнеры используют референсы для создания логотипов, упаковочных и рекламных материалов. Примерами для них служат картинки в интернете, постеры к фильмам и картины разных художников.
- В геймдизайне референсы нужны для проработки персонажей и локаций. Если место действия в игре — Япония, ее разработчику придется изучить особенности архитектуры этой страны.
- В веб-дизайне референсы позволяют находить удобные и эстетичные решения для оформления сайтов и приложений. В качестве источника идей используют ресурсы конкурентов и компаний из смежных областей.
Как работать с референсами
Сбор референсов начинают во время подготовительного этапа работы. Если проект выполняется на заказ, пусть клиент заполнит бриф. Помимо общей информации о проекте, в нем указывают технические условия: размеры и назначение изображения, а для digital-картинок — их формат, разрешение и цветовой профиль. Чтобы лучше понять вкусы заказчика, попросите его прислать референсы: примеры работ, которые ему нравятся.
Разберем общий алгоритм подбора референсов. Он состоит из 3-х шагов:
- Поиск примеров в разных источниках. Для этого используйте ключевые слова, которые отражают стилистику или тематику проекта: «минимализм в дизайне сайтов», «дизайн студии йоги».
- Отбор и анализ референсов. Сохраните понравившиеся примеры в отдельную папку, пересмотрите их и проанализируйте, чем они вас зацепили. Сделайте пометки: «хороший шрифт», «интересная композиция», «необычное оформление футера», «удобное меню».
- Составьте мудборд. Это тематические коллажи, которые превращают набор разрозненных примеров в единую концепцию. Чтобы оформить мудборд, используйте физическую доску и прикрепите на нее распечатанные изображения. Второй вариант — создать презентацию или цифровой коллаж.
Как находить и использовать референсы
Поговорим о том, где искать референсы и как их использовать, чтобы создавать уникальные проекты высокого качества.
Методы поиска подходящих референсов
Для поиска референсов используют разные площадки. Рассмотрим самые популярные среди них, которые пригодятся дизайнерам.
Behance. Сервис для художников, фотографов, графических и веб-дизайнеров. Здесь авторы публикуют свои работы и ищут вдохновение в проектах коллег.
Pinterest. Социальная сеть, где пользователи делятся друг с другом красивыми фотографиями, иллюстрациями и кадрами из фильмов. Чтобы найти референсы, введите в поисковую строку запрос: цвет, стиль или тематику изображения. В ленте вы увидите как отдельные картинки, так и целые подборками. Плюс сервиса — возможность создавать свои доски с понравившимися примерами.
Muzli. Плагин для Chrome, который собирает свежие публикации из 120 популярных дизайнерских сообществ. Укажите в настройках тематику, которая вам интересна, и сервис сформирует подборку референсов по вашему запросу. Это удобный способ отслеживать новинки и тренды в индустрии. Расширение запоминает и анализирует пользовательский опыт: со временем оно подстраивается под ваши вкусы и показывает только интересные примеры.
Dribbble. Сайт предназначен для веб-дизайнеров и разработчиков, которые хотят поделиться своими проектами и посмотреть на работы коллег. Сервис подходят для поиска референсов, необходимых в разработке дизайна интерфейсов.
Awwwards. Официальный сайт престижной премии в области веб-дизайна. Здесь регулярно размещают самые красивые и функциональные примеры современных веб-ресурсов. Используйте сервис для поиска вдохновения и отслеживания трендов.
SketchFab. Сервис, где публикуется интерактивный 3D-контент. Все изображения делятся на тематические категории, что облегчает навигацию и поиск референсов. Объекты можно увеличивать и крутить, чтобы рассмотреть их со всех сторон и под разными ракурсами. 3D-модели удобно использовать для изучения анатомии тела в статике и в движении.
Нейросети. Их можно использовать для генерации референсов по вашему запросу. Midjourney или Kandinsky за пару секунд создаст нужную картинку по промпту — заданному набору характеристик. Инструмент позволяет экспериментировать с позами персонажа, подбирать ему разную одежду, прорабатывать пейзажи.
Советы по адаптации и интеграции референсов в собственные проекты
Основное правило для работы с референсами: их нельзя копировать точь-в-точь. Это не готовое решение задачи, а вспомогательный инструмент для поиска и развития собственных идей. Если вам понравилось чужое изображение, это не повод для плагиата. Используйте его как базу и постарайтесь преобразовать задумку, дополнив ее своим видением.
Делимся советами по работе с референсами, которые помогут превратить их из красивых картинок в ценный источник информации, способный повысить качество вашего проекта.
- Обращайте внимание на цельную композицию и ее детали. Изучайте, как элементы расположены относительно друг друга, как они создают баланс или динамику на холсте или в кадре. Рассмотрите отдельные аспекты объекта, чтобы понять, как они способствуют общему визуальному восприятию. Благодаря такому анализу вы поймете, из каких частей состоит изображение и как реализовать их в своем проекте.
- Находите ошибки, чтобы не повторять их. При анализе референсов важно обращать внимание как на положительные стороны, так и на недочеты. Если расположение кнопок на сайте показалось вам неудобным, а их дизайн — непривлекательным, запомните данный пример, чтобы не повторить его в своей работе.
- Ищите референсы не только в своей области. Никогда не знаешь, где найдешь вдохновение. Изучайте произведения искусства, работы коллег в вашей нише и в смежных областях. Фотограф может перенять ракурс, световую схему и цветокоррекцию у кадра из фильма. Шаржист может найти сюжеты для своих иллюстраций во время поездки в метро. А веб-дизайнер, которому поступил заказ на лендинг для курса по программированию, может подсмотреть структуру одностраничника на сайтах других образовательных проектов.
- Собирайте по 5-10 референсов на один проект. У одного объекта вы сможете перенять цветовую гамму, у другого — ракурс, у третьего — текстуру. За счет этого у вас получится свое, уникальное изображение. Однако важно не перестараться с поиском примеров. Когда идей слишком много, объединить их в одно целое становится сложно. Есть риск, что от каких-то находок придется отказаться. Если этого не сделать, работа может оказаться перегружена деталями.
Референсы в веб-дизайне
Референсы часто используются в веб-дизайне для разработки сайтов и приложений. Рассмотрим особенности их применения в данной сфере.
Референсы в контексте веб-дизайна
Сбор референсов — обязательный этап в работе веб-дизайнера. Примеры пригодятся для разработки айдентики и фирменного стиля компании, продуктовых упаковок, веб-сайтов и контента для социальных сетей. Как правило, дизайнер собирает две папки референсов: для клиента и для себя:
- Для заказчика составляют подборку стилей, в которых может быть реализован проект. К ней добавляют варианты интересных решений с краткими комментариями, что именно специалисту понравилось в данном примере: структура сайта, сочетание шрифтов, дизайн призывов к действию.
- Для себя дизайнер собирает дополнительные референсы, которые помогают докрутить тематику и стилистику, выбранные заказчиком, сделать подачу более оригинальной и привнести в нее что-то новое.
Важность референсов в веб-дизайне
Референсы необходимы для создания уникального и функционального дизайна. Разберем их роль более подробно.
- Знакомство с современными трендами. Тенденции в веб-дизайне быстро меняются. Анализ референсов позволяет понять, какие композиции, цветовые схемы, варианты типографики и стили изображений сейчас актуальны.
- Анализ конкурентов. Изучите дизайн других компаний в вашей нише, чтобы позаимствовать у них интересные находки, избежать чужих ошибок, а главное — не допустить повторов. Если разработать дизайн, похожий на оформление, которое использует другой бренд, есть риск, что клиенты будут путать сайты или продукцию двух компаний.
- Изучение разных стилей. Изучайте минимализм, конструктивизм, винтаж, готику, digital и другие визуальные концепции, просматривая работы художников и дизайнеров. Они станут источником вдохновения и помогут создать уникальное и эстетичное оформление.
- Исследование пользовательского опыта. Обращайте внимание на навигацию сайтов, интерактивные элементы и другие нюансы, которые влияют на удобство дизайна. Это необходимо для разработки дружелюбного интерфейса.
Использование референсов при разработке сайтов в конструкторе Craftum
Если вы создаете сайт на конструкторе Craftum, в качестве референсов можно использовать библиотеку готовых шаблонов. Они разработаны профессиональными дизайнерами и разбиты на тематические категории: онлайн-магазины, IT-услуги, красота и здоровье, кафе и рестораны. Выберите понравившийся вариант и адаптируйте его под свои задачи: измените цветовую гамму и шрифты, добавьте изображения, видео, тексты. За счет этого внешний вид сайт станет уникальным.
Если у вас есть готовая подборка необычных референсов, которые вы хотите реализовать в своем проекте, воспользуйтесь функцией дизайн-блок. Инструмент позволяет добавлять в макет любые объекты, располагать и настраивать их так, как вам требуется.
Референсы сайта
Референсы упрощают процесс работы над сайтом, помогают найти общий язык с заказчиком и создать удобный для пользователей интерфейс. Разберем, за счет чего им это удается, и рассмотрим несколько примеров.
Что такое референсы сайта
Референсы сайта — это примеры веб-ресурсов других компаний, шаблоны в онлайн-конструкторах и любые другие графические изображения, которые помогают в разработке онлайн-площадки. Они служат опорой для дизайнера и помогают ему и клиенту понять, в каком направлении будет развиваться концепция оформления.
Собирая референсы сайтов, анализируйте отдельные элементы дизайна: структуру, композицию, цветовую палитру, типографику, навигацию, оформление отдельных блоков, кнопок и виджетов. Это поможет составить представление о том, какие решения подходят для создания удобного в использовании и визуально приятного веб-ресурса.
Как референсы сайта помогают в разработке и улучшении веб-ресурсов
Задачи, которые референсы помогают решить в работе над сайтом:
- Погрузиться в тематику. Сайт для фитнес-тренера и интернет-магазин одежды будут отличаться по структуре, функционалу и дизайну.
- Разработать структуру. Подобрать оптимальное количество и расположение блоков, оформление хедера и футера.
- Выбрать визуальные решения. Определить цветовую палитру, шрифтовые пары, иконки и другие графические элементы.
- Повысить юзабилити интерфейса. Анализ других сайтов позволит понять, какие элементы интерфейса удобны и интуитивно понятны для пользователей.
Анализ примеров удачных референсов сайтов
Рассмотрим некоторые референсы дизайна сайтов и обратим внимание на элементы, которые можно у них позаимствовать.
Сайт отличает лаконичный дизайн и отсутствие декоративных элементов. Несмотря на простой белый фон и черный текст, он смотрится стильно за счет оформления главного экрана. Листья растения, которые выходят за пределы фоновой рамки, создают объем — такой прием поможет разнообразить минималистичный дизайн. Текстовые блоки, расположенные на разной высоте справа и слева, придают изображению динамичности и делают его более интересным.
Данный референс — отличный пример, как отразить тематику сайта в дизайне. Помимо изображения собаки, на главном экране присутствует декор в виде следов от лапок и изображение надкусанной косточки — эта милая деталь символизирует скидки.
Этот референс подойдет для работы над сайтом мероприятия. Здесь можно посмотреть структуру: на сайте указана программа фестиваля, приглашенные гости и призы для участников. На главном экране предусмотрена кнопка для покупки билета, что хорошо для конверсии лендинга и удобства потенциальных клиентов. Изображения и текстовые блоки, расположенные под наклоном, придают дизайну динамику и обыгрывают спортивную тематику — берите прием на вооружение.
Заключение
Лучше один раз увидеть, чем сто раз услышать. Эта поговорка описывает роль референсов в веб-дизайне и разработке сайтов. Примеры других проектов продемонстрируют, какие визуальные и функциональные решения хороши, а какие — нет, подскажут, как их реализовать, и помогут найти общий язык заказчику и исполнителю. Главное не забывать творчески перерабатывать интересные находки и стремиться привнести в дизайн уникальность.