Вы — компания, которая хочет обновить свой сайт и ищет для этого подрядчиков. Но как подрядная команда разработчиков поймет, каким вы видите результат? Как наемные дизайнеры смогут отразить ценность фирмы, ее айдентику и бренд, не работая там и дня? Для решения такой задачи подойдет мудборд.
9375 просмотров
Что такое мудборд?
В дословном переводе с английского мудборд звучит как «доска настроения». Если подбирать термин на русский манер, больше всего подойдет слово «коллаж». На первый взгляд, ничего серьезного. Как «доска настроения» может помочь специалисту в выполнении задачи? На самом деле, помочь может, и даже очень эффективно.
Мудборд содержит в себе образцы тех элементов, которые заказчик хочет видеть на сайте: цвет, шрифт, стиль, референсы. Он отображает основную идею и концепцию, подходящую к проекту, и может выглядеть по-разному: в виде реальной доски, коллажа, стикеров с референсами или в виде презентации.
Промежуточно резюмируем: мудборд — это инструмент, который отражает основные идеи и элементы по проекту. Он помогает дизайнеру и клиенту сразу попасть на одну волну и определиться с желаемым результатом наиболее детально, тем самым оптимизируя процесс взаимодействия. Подготовительные обсуждения ускоряются и позволяют дизайнерам раньше приступить к работе и, как следствие, быстрее передать проект разработчикам для запуска сайта.
Как создать мудборд
Этапы работы с мудбордом
Этап 1. Брифинг
На первом этапе происходит знакомство с клиентом и его проектом. Здесь дизайнер собирает основные вводные у заказчика, определяет вектор работы и концепцию будущего сайта. Это важный процесс, от итогов которого зачастую зависит все дальнейшее общение. Если брифинг пройдет плохо, дизайнер не поймет задачу, а у клиента сложится не лучшее представление о команде. Если же он проведен хорошо, это поможет избежать множества проблем на следующих этапах и ускорить рабочий процесс.
На брифингах обычно обсуждаются следующие моменты:
- цели и задачи проекта;
- кто целевая аудитория сайта;
- можно ли отходить от фирменного стиля;
- какое настроение лучше задать дизайн-концепции;
- как вписать настроение в сложившуюся айдентику клиента;
- какие сайты нравятся клиенту и почему;
- какие сайты категорически не нравятся и чем именно.
Этап 2. Подготовка мудборда
На втором этапе происходит самое интересное: подготовка мудборда. Здесь дизайнеры определяются с концептуальной идеей, а после подбирают цвета, шрифты, прорабатывают стилистику иконок, думают о вариантах применения анимации на будущем сайте клиента и десятках других фишек.
Кстати, при выборе цвета будущего сайта есть два варианта развития событий:
- если у клиента есть сложившийся фирменный стиль, то дизайнеры берут его в работу, адаптируя цвета айдентики заказчика под веб (производится мелкая настройка контраста и яркости);
- если же у клиента нет фирменного стиля, отдел дизайна предлагает цвета, которые на их взгляд подходят клиенту и его проекту.
Детали определяются не только для главной, но и для одной из внутренних страниц сайта, чтобы как можно точнее попасть в пожелания клиента.
Если проект обширный и у клиента нет четкого видения своего будущего сайта, наши специалисты готовят бенчмаркинг. Это сравнительный анализ, в котором собраны исследования по наиболее частым трендам в дизайне сайтов со ссылками на информацию. Так клиент будет иметь представление о вариациях и сможет на основе сравнения выделить, что ему нравится, а что не нравится.
Этап 3. Презентация
На заключительном третьем этапе команда презентует клиенту готовый мудборд. Заказчик, в свою очередь, дает детальную обратную связь о предложенных решениях. Дальше дизайнеры используют мудборд как основу для составления дизайн-концепции, которую также согласовывают с клиентом и передают разработчикам, чтобы те воплотили все смелые идеи дизайнера и заказчика в цифровую реальность.
Полезные инструменты для работы с мудбордом
Первое, о чем обязательно стоит упомянуть, это базовый инструмент для построения доски. В команде Uplab дизайнеры составляют мудборды в программе Figma. Удобный онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.
В дизайне особенно важно много практиковаться и развивать насмотренность. Опыт и наблюдение за тем, какие появляются технологии, какие существуют тренды, прокачивают дизайнера и расширяют идейный кругозор. Следующие инструменты помогут в этом.
Платформа для тренировки насмотренности и поиска вдохновения. Это одно из крупнейших онлайн-сообществ, где собираются дизайнеры и делятся своими проектами, получают лайки, подписчиков и отзывы. На сервисе можно найти работы графических дизайнеров, иллюстраторов, веб-дизайнеров и 3D-визуализаторов.
Это интернет-сайт конкурса профессиональных веб-дизайнеров и разработчиков, на котором собраны тысячи лучших работ профессионалов со всего мира. Он может стать еще одним местом для поиска вдохновения по графике.
Хороший ресурс для поиска референсов по UI-дизайну. Это удобная коллекция сайтов, которая постоянно пополняется. Если дизайнер ищет что-то конкретное, здесь есть функция разделения коллекций по стилю, типу, теме и платформе.
Это галерея лучших главных страниц сайтов, собранная со всего интернета. Для удобства навигации на сайте есть поиск и специальные теги, которые проставлены у каждого сайта. Так, если вам интересны сайты с каким-то определенным типом главных страниц, вы можете либо вбить это в поиске, либо кликнуть по подходящему тегу.
Каталог веб-дизайна, проект дизайнерского бюро Division Binaural. Этот сайт служит источником вдохновения для дизайнеров-разработчиков и энтузиастов HTML. В нем собраны концепции сайтов с уклоном в модернизм и простоту.
Что получаем в итоге?
Вам наверняка известен принцип Парето, согласно которому 20% усилий дают 80% результата. Этап визуальной коммуникации через мудборд — это и есть 20% оптимальных усилий. Именно поэтому работа с мудбордом позволяет при наименьших временных затратах получить максимально эффективный результат:
- заказчик получает удобную визуализацию;
- дизайн отвечает ожиданиям;
- дизайнер получает расположение заказчика;
- обе стороны экономят время.
Источник: vc.ru
В какой программе делать мудборды
Информация
- Правила пользования
- Антиспам-политика
- Политика конфиденциальности
- Политика cookie
- Политика возврата средств
Инструменты
- Конструктор писем
- Валидатор email
- Бесплатные шаблоны
- Автоматизация
- Сводная статистика
- Интеграции
- Пробная версия конструктора
Блог
- Читать
- Предложить статью
- Редакция
- Реклама и сотрудничество
Техподдержка
Russia 8 (800) 551-68-22
Спасибо, ждите письмо.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно).
Как запустить email-маркетинг с нуля?
В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️
*Вместе с курсом вы будете получать рассылку блога Unisender
Источник: www.unisender.com
Как сделать мудборд за 7 простых шагов
Мудборд — это коллекция референсов и других данных, которые задают определенный стиль для вашего проекта. Дизайнеры, иллюстраторы, фотографы создают мудборды, чтобы собрать концепцию идеи в одном месте.
Например, веб-дизайнеру нужно создать сайт для интернет-магазина цветов. Он начинает собирать примеры сайтов конкурентов, подбирать дизайн подобных проектов. После выбора наилучших вариантов, дизайнер углубляется в идею и подбирает: цветовые схемы сайта, типографику и элементы сайта. Только после этого начинает работать над созданием прототипа.
Чем мудборды помогают при разработке сайта:
- Задают стиль сайта
- Ускоряют создание сайта за счет референсов
- Если вы делаете сайты на заказ, то это обезопасит вас от недопонимания с заказчиком
Где создавать мудборд
Создать мудборд можно и в Word, но лучше использовать специальные сервисы, которые решают эту задачу. Сервисы удобнее: в них есть встроенные библиотеки изображений и шрифтов.
Выбирайте сервис, с которым будете работать, и приступаем к первому шагу.
1. Определите направление вашего проекта
Мудборды могут быть буквальными и практичными (с шрифтами, цветовыми схемами и изображениями) или же они могут быть направлены на изучение тона и настроения.
Эти два типа можно делать параллельно. На одной доске вы указываете, какие будете использовать цвета, паттерны и изображения. А на второй — в каком стиле будет создан сайт.
2. Соберите существующий материал
Теперь, когда вы определили направление для вашего мудборда, добавьте на нее: ценности бренда, позиционирование, любые логотипы, элементы дизайна и фотографии. Возможно, они не войдут в окончательный вариант мудборда, но все же эти данные помогут начать работу.
3. Добавьте образы
Изображения, которые вы решите включить в свой мудборд, могут оказать большое влияние на внешний вид сайта. Они помогут определить такие вещи, как тон, кадрирование, стилистику и цветовую схему.
Если вы не можете вспомнить сайты, которые вам понравились, то примеры можно найти на Dribbble , Behance и Designspiration . Тут разные дизайнеры делятся своими работами, которые можно отсортировать по типу проекта, цветовой схеме и другим важным параметрами.
Популярный сайт Behance, на котором мы нашли примеры веб-дизайна. Преимущества использовать для референсов такие сайты в том, что на них дизайнеры публикуют работы, где используют последние тренды. А значит ваш сайт долго будет актуальным.
Не беспокойтесь, если на вашей доске хаос, мы исправим это позже, а пока добавляйте как можно больше идей.
4. Добавьте примеры анимаций
Анимация на сайтах может быть совершенно разная: от самой простой, которая практически незаметна для пользователя, до сложной с wow-эффектом, как, например, parallax.
Этим вы расширите понимание, с какими анимациями нужен сайт, и уже под них будете подстраивать дизайн.
5. Добавьте цвета и шрифты
Цвет может быть отличным способом выразить определенные чувства и индивидуальность. К примеру, сайт аптеки лучше создавать в светлых цветах, а страницу ночного клуба в темных и ярких. Но для каждого из этих сайтов будет один-два цвета, которые покажут индивидуальность конкретного сайта.
Сервис Kuler поможет для поиска цвета, которые дополняют бренд. Еще один лайфхак — такой цвет уже находится на вашем мудборде, проанализируйте референсы, которые вы добавили, и найдите подходящий цвет.
А для подбора шрифтов используйте дизайнерский сайт Typewolf . Это отличный способ изучить различные комбинации шрифтов и как они взаимодействуют друг с другом.
6. Время навести порядок
После того как вы собрали все свои идеи в одном месте, следующий шаг — упорядочить их, чтобы создать идеальную композицию.
Этот процесс может занять некоторое время, и часто возникает ощущение, что вы понятия не имеете, как будет выглядеть мудборд. Скорее всего, у вас будет много материала, чем нужно, и он может выглядеть разрозненным. Это нормально!
Начните с изучения композиции и введения иерархии. Поместите ключевой элемент, например, логотип, чтобы закрепить вашу доску, и измените размер и положение остальных элементов, чтобы показать их важность и взаимосвязь друг с другом.
7. Опишите свои мысли
Если вы обладаете визуальным мышлением, то мудборд — это бесценный инструмент, позволяющий передать образ и настроение вашего проекта так, как иногда не могут слова. Но для клиента или его дизайнеров нужно добавить описание ваших мыслей. Это поможет объяснить ваши идеи и сохранить все в контексте. Не обязательно вдаваться в подробности — просто напишите в несколько слов, что вы хотели передать конкретным изображением.
И готово!
Мудборд выше создан через Milanote. Примерно такая информация должна быть и на вашей доске.
Теперь, когда ваша доска с референсами готова, у вас есть визуальное представление, как будет выглядеть дизайн — приступайте к созданию сайта.
Владимир Кравчук
Редактор блога Weblium. Разбираю мировую статистику по eCommerce, чтобы вы улучшали свой бизнес в онлайне, а еще рассказываю о новых трендах в диджитале.
Источник: ru.weblium.com