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

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

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

Поиск по принципу «сначала первый экран, затем преимущества, потом карточки» сильно замедляет работу.

Эффективнее открывать интересный лендинг целиком и сразу анализировать всю страницу. Один проект может одновременно дать несколько идей:

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

Так один просмотр работает сразу на несколько задач.

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

• общую композицию;
• типографику;
• фотографии;
• графику;
• формы элементов;
• цветовую гамму;
• сочетание светлых и тёмных блоков;
• визуальный ритм страницы.

На старте необязательно понимать, какой конкретно элемент будет скопирован или адаптирован. Иногда важнее найти проект, который задаёт нужное настроение.

Начать поиск можно с ключевых слов, описывающих продукт или его визуальный характер.

Для проекта современных деревянных домов, например, подойдут запросы, связанные с Barnhouse, деревянной архитектурой или каркасными домами.

На Behance поиск можно дополнительно ограничить категорией Web Design, чтобы получать больше релевантных проектов.

Но после первых результатов не стоит оставаться только внутри одной тематики. Хорошие идеи для конкретных блоков могут находиться на сайтах совершенно других сфер.

Красивый дизайн не всегда является полезным референсом. При просмотре задавайте себе вопрос: Что конкретно я могу использовать в своём проекте?

Это может быть:

• композиция;
• принцип расположения фотографий;
• форма карточек;
• подача фактов;
• расположение элементов формы;
• работа с тёмным фоном;
• способ показать каталог;
• оформление этапов работы.

Если ответить на этот вопрос сложно, скорее всего, референс не нужен.

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

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

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

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

Например, современная архитектура может одинаково убедительно смотреться:

• на светлом минималистичном сайте;
• на тёмном фоне с крупными фотографиями;
• в тёплой природной палитре;
• в более холодной северной стилистике.

Сравнение помогает понять, какое настроение точнее соответствует задаче.

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

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

Так поиск становится инструментом решения конкретных задач.

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

Для старта достаточно:

• определить общее настроение;
• найти несколько ориентиров для первого экрана;
• подобрать идеи для двух-трёх следующих ключевых блоков;
• зафиксировать повторяющиеся визуальные приёмы.

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

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

Именно этого достаточно, чтобы перестать смотреть на пустой фрейм и перейти непосредственно к дизайну.

Домашнее задание