Референс
Это визуальный пример, на который можно опираться во время работы над дизайном. Он помогает найти подходящее решение для композиции, типографики, цвета, подачи контента, отдельных блоков и элементов интерфейса.
Что в видео-уроке:
В уроке разбираем подход к поиску референсов для веб-дизайна: учимся искать решения за пределами тематики проекта, анализировать отдельные элементы сайтов, собирать несколько источников и адаптировать найденные идеи под собственный дизайн.
Референсы. Подход к поиску
Важно понимать, что работа с референсами — это не копирование готового сайта. Задача дизайнера — анализировать чужие решения, понимать, почему они работают, и использовать отдельные приёмы в собственном проекте.
Не ищите только сайты своей тематики
Одна из распространённых ошибок — искать референсы исключительно по тематике проекта.
Например, если мы делаем сайт для образовательного проекта, необязательно смотреть только сайты школ и онлайн-курсов. Интересное решение первого экрана может встретиться на сайте сервиса, магазина, мероприятия или совершенно другого бизнеса.
Тематика сайта и его визуальное решение — разные вещи. Поэтому во время поиска важно смотреть шире и обращать внимание не только на содержание проекта, но и на то, как именно оформлен контент.
Ищите конкретные решения
Необязательно находить один сайт, который станет референсом для всего проекта. Гораздо эффективнее собирать разные примеры для отдельных задач.
Один сайт может понравиться первым экраном, другой — подачей преимуществ, третий — карточками, четвёртый — типографикой, пятый — расположением фотографий.
Таким образом постепенно формируется набор решений, из которых можно собрать собственную визуальную концепцию.
Анализируйте, а не просто сохраняйте
Недостаточно увидеть красивый сайт и добавить его в подборку. Нужно понимать, что конкретно в нём понравилось.
Если нравится первый экран, определите причину. Возможно, это крупная типографика, необычная композиция, использование изображения, цвет, работа со свободным пространством или расположение элементов.
Если нравится определённый блок, также нужно понять, что именно делает его интересным.
Такой анализ постепенно формирует визуальную насмотренность. Со временем вы начинаете замечать не просто красивый дизайн, а конкретные приёмы, из которых он состоит.
Не копируйте референс целиком
Очень важно не брать один сайт и не пытаться повторить его от первого до последнего блока. В этом случае получается не самостоятельный дизайн, а копия чужого решения. Лучше работать сразу с несколькими источниками.
Например: из одного проекта можно взять принцип построения первого экрана, из другого — идею расположения карточек, из третьего — работу с типографикой, а из четвёртого — характер графики.
При этом все решения необходимо адаптировать под собственную задачу, контент и выбранную стилистику. Референсы должны помогать найти направление, а не ограничивать работу.
Учитывайте контент проекта
При поиске референсов важно смотреть не только на внешний вид блока, но и на то, подходит ли его структура для вашего контента.
Допустим, вы нашли красивый блок преимуществ, состоящий из трёх карточек. Но в вашем проекте преимуществ семь. Если просто повторить композицию референса, она может перестать работать.
Поэтому всегда нужно учитывать количество текста, фотографий, карточек и других элементов в реальном проекте.
Сначала определите, какую информацию необходимо разместить, а затем ищите подходящий способ её подачи.
Обращайте внимание на общую систему сайта
Кроме отдельных блоков полезно анализировать сайт целиком. Посмотрите, какие приёмы повторяются на странице:
- одинаковая форма карточек;
- характерные скругления;
- повторяющиеся цвета;
- определённый стиль изображений;
- одинаковое оформление кнопок;
- принципы работы с типографикой;
- декоративные элементы.
Именно повторение таких решений формирует цельный стиль. Если просто собрать на одной странице несколько понравившихся блоков из совершенно разных сайтов без адаптации, они могут не сочетаться между собой.
Поэтому выбранные идеи необходимо приводить к одной визуальной системе.
Где искать референсы
Один из вариантов поиска — галереи готовых сайтов.
Например, в уроке используется Made on Tilda — подборка проектов, созданных на Tilda. Здесь можно смотреть реальные сайты и фильтровать их по направлениям: бизнес, магазины, события, медиа, портфолио, образование, персональные проекты и другие категории.
Такие галереи полезны тем, что позволяют посмотреть не отдельную красивую картинку, а полноценный сайт: первый экран, последовательность блоков, работу с контентом и общую стилистику.
При этом не нужно ограничиваться одной категорией. Если вы создаёте сайт для бизнеса, это не значит, что полезные решения находятся только в разделе «Бизнес».
Просматривайте разные направления и сохраняйте всё, что может пригодиться для текущей задачи.
Референсы развивают насмотренность
Поиск референсов — это не только этап конкретного проекта. Чем больше качественных сайтов вы анализируете, тем больше решений запоминаете. Постепенно появляется собственная библиотека визуальных приёмов.
Вы начинаете понимать, каким способом можно показать определённый тип контента, как разнообразить композицию, как работать с карточками, фотографиями, типографикой и другими элементами.
Поэтому референсы желательно смотреть регулярно. Главное — не просто просматривать проекты, а анализировать их и понимать, какие конкретные решения делают дизайн логичным, продуманным и интересным.
