Как подобрать референсы и создать мудборд

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

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

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

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

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

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

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

Этап 1. Поймите основные требования клиента

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

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

Эта информация поможет выбрать наиболее подходящие референсы. Но прежде чем их искать, исследуйте сайты конкурентов.

Этап 2. Проведите анализ конкурентов

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

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

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

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

Этап 3. Ищите референсы на специализированных сайтах и ресурсах

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

1. Сообщества дизайнеров

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

1. Behance — платформа, где дизайнеры со всего мира делятся своими работами и идеями. Кроме примеров дизайна сайтов, есть и проекты, посвященные графическому дизайну, моде, дизайну продуктов и другим темам.

2. Dribbble — аналог Behance, на котором можно найти коллекции проектов, включая сайты, мобильные приложения, анимацию, иллюстрации и многое другое. Здесь намного реальных проектов, в основном встречаются креативные концепции для демонстрации навыков дизайнера.

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

В сообществах дизайнеров есть встроенный механизм отбора лучших работ, но он основан на голосовании пользователей. Они оценивают работы, оставляя лайки или комментарии, и на основе этой оценки проект может попасть в коллекцию «лучших». При этом нет гарантий, что дизайн сайта из категории «лучшие работы» действительно качественный. Поэтому использование Behance, Dribbble или Dprofile требует от дизайнеров некоторой скептической осторожности, чтобы избежать выбора слабых примеров.

2. Конкурсные платформы

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

1. Awwwards

2. CSS Design Awards

3. FWA

4. CSS Winner

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

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

3. Галереи сайтов

Также стоит обратить внимание на интересные дизайны сайтов, доступные на следующих платформах:
Каталог сайтов Uprock — предоставляет доступ к лучшим кириллическим сайтам, а также удобный фильтр по категориям, включая «тип сайта», «отрасль» и «стиль».

Minimal Only — собрание простых и минималистичных сайтов.

Brutalist Websites — подборка сайтов в стиле брутализма.

The-Responsive.com — коллекция примеров лучшего адаптивного дизайна разных тематик.

Httpster — каталог сайтов со всего мира с вдохновляющим дизайном.

Mimal.gallery — собрание сайтов с минималистичным и функциональным дизайном.

Land-Book — много подборок сайтов по бизнес-тематике, которые приятны по цветам и композиции.

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

Site Inspire — красивый источник вдохновения для веб-дизайнеров с коллекцией сайтов различных тематик.

One Page Love — платформа, которая предлагает подборку красивых и функциональных одностраничных сайтов.

Перечисленные ресурсы — лишь некоторые из множества платформ, на которых можно выбрать референсы для создания сайтов. На нашем сайте uprock в разделе «Вдохновение» вы найдете ссылки и на другие платформы для поиска идей.

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

Что именно искать?

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

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

Как сохранять?

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

Многие веб-дизайнеры предпочитают использовать Figma для сбора референсов и последующего создания дизайна сайта.

Делайте скриншоты референсов и храните их в одном месте. В качестве инструмента для создания полноэкранных скриншотов веб-страниц можно использовать плагин Full Page Screen Capture, доступный в браузере Google Chrome.

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

Этап 4. Анализ и выбор подходящих референсов

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

В процессе анализа следует задавать вопросы, например:

• Какие эмоции вызывает этот макет или рисунок?
• Какие решения нравятся больше других и почему?
• Какие элементы и детали могут быть полезны для проекта?

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

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

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

Например, для сайта магазина молодежной одежды могут быть следующие выводы:

«Для создания сайта магазина молодежной одежды рекомендуем использовать яркие и контрастные цвета, современные и разборчивые шрифты и простые геометрические фигуры. Взять за основу дизайна голубой цвет и дозировано использовать белый цвет, чтобы на сайте появилась динамика и воздух, выбрать салатовый цвет как акцентный. На главной странице предлагаем разместить большую фотографию  с моделями в одежде, использовать на сайте динамичные фотографии, а также для более вовлекающего дизайна добавить анимацию (появление элементов при скролле, смена цвета при наведении на кнопки). Рекомендуем сделать простую и удобную навигацию по категориям одежды и разделам сайта, чтобы посетители могли легко и быстро найти интересующие их товары».

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

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

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

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

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

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