Что в видео-уроке:
В уроке разбираем, где искать референсы для веб-дизайна и как правильно с ними работать. Рассмотрим Made on Tilda, Behance, Dribbble, Land-book, CSS Design Awards и Httpster, а также научимся анализировать отдельные визуальные решения и адаптировать их под свой проект.
Материалы урока:
Madeontilda - tilda.cc/ru/madeontilda
Behance - behance.net
Dribble - dribbble.com
Landbook - land-book.com
Httpster - httpster.net
CSS Design Awards - cssdesignawards.com
Референсы для веб-дизайна
Хорошая подборка референсов не является набором сайтов для копирования. Это библиотека решений, из которой можно извлекать отдельные принципы и адаптировать их под конкретную задачу.
Зачем дизайнеру нужны референсы
Начинать разработку интерфейса с пустого экрана значительно сложнее, чем предварительно изучить существующие решения.
Референсы позволяют понять, какие композиционные приёмы используются в современных проектах, как дизайнеры работают с крупной типографикой, фотографиями, карточками, цветом и пространством.
Кроме того, поиск референсов помогает определить визуальное направление будущего сайта ещё до детальной отрисовки макета.
Не ищите только сайты конкурентов
Одна из распространённых ошибок — ограничивать поиск тематикой будущего сайта.
Для сайта цветочного магазина действительно полезно посмотреть проекты из той же сферы. Но если изучать только их, существует риск получить слишком предсказуемое решение.
Гораздо продуктивнее дополнительно смотреть проекты из других ниш и искать в них подходящие визуальные принципы.
Например, композицию первого экрана можно взять за основу с сайта архитектурной студии, принцип оформления карточек — из интернет-магазина одежды, а работу с типографикой — из промосайта мероприятия.
В результате дизайн получается более разнообразным и индивидуальным.
Где искать референсы
В работе можно использовать несколько площадок, каждая из которых решает немного разные задачи.
Made on Tilda
Позволяет изучать реальные опубликованные сайты. Здесь удобно смотреть структуру страниц, расположение блоков, анимацию и взаимодействие элементов непосредственно в работающем интерфейсе.
Behance
Подходит для подробного изучения дизайн-кейсов. Авторы часто показывают проект целиком — от первого экрана до внутренних блоков. Это позволяет анализировать не только отдельную красивую композицию, но и всю систему оформления сайта.
Dribbble
Удобен для быстрого поиска отдельных экранов и элементов интерфейса. Здесь можно находить идеи для карточек, форм, меню, тарифных блоков, первых экранов и других компонентов.
Land-book
Представляет собой подборку современных сайтов и лендингов. Он хорошо подходит для развития насмотренности и поиска актуальных композиционных решений.
CSS Design Awards
Полезен для знакомства с более экспериментальными проектами. На площадке можно найти необычную типографику, интерактивные приёмы, сложную анимацию и нестандартную работу с композицией.
Httpster
Собирает веб-дизайн со всего мира и позволяет расширить поиск за пределы наиболее популярных площадок.
Как формулировать поисковые запросы
Для Behance, Dribbble и других площадок с внутренним поиском лучше использовать разные варианты запросов.
Не ограничивайтесь названием бизнеса. Добавляйте тип проекта и нужное направление: landing page, website design, e-commerce, corporate website и другие формулировки.
Полезно использовать английские запросы — количество результатов обычно становится значительно больше.
Если прямой запрос даёт однообразные результаты, попробуйте перейти к смежной тематике или искать не отрасль, а конкретный элемент интерфейса.
Как анализировать найденные работы
Сохранить несколько красивых картинок недостаточно. Каждый референс необходимо разобрать и понять, что именно в нём подходит вашему проекту.
При анализе обращайте внимание на следующие элементы:
- композицию и первый экран;
- структуру страницы;
- типографику и масштаб текста;
- цветовую гамму;
- фотографии, иллюстрации и графику;
- оформление карточек, кнопок и форм;
- декоративные элементы;
- анимацию и интерактивность.
Если нравится только один элемент сайта, сохраняйте его отдельно. Не нужно искать один идеальный проект, который решит сразу все задачи.
Не копируйте — адаптируйте
Референс должен давать направление, а не готовый дизайн. Если в чужой работе понравилась композиция, попробуйте понять её принцип: где находится основной акцент, как распределено пространство, какое соотношение между текстом и изображением.
Затем этот принцип можно адаптировать под собственный контент, фирменный стиль и задачи пользователя.
Кроме того, не каждое эффектное решение подходит для реального проекта. Особенно это касается концептуальных работ и сайтов с большим количеством анимации. Перед использованием приёма необходимо оценить его удобство и соответствие задаче.
Референсы как инструмент развития насмотренности
Регулярный просмотр качественных проектов постепенно формирует визуальную базу дизайнера.
Чем больше хороших решений вы анализируете, тем легче становится понимать, почему один интерфейс выглядит современно и цельно, а другой — нет.
Поэтому поиск референсов — не подготовительный этап, который можно пропустить, а важная часть процесса проектирования. Он помогает быстрее находить идеи, увереннее принимать решения и создавать собственный визуальный язык проекта.
