Страх белого листа знаком тем, чья работа связана с творчеством: художникам и дизайнерам бывает сложно подступиться к новой задаче. Но для этого есть простой и полезный инструмент — мудборд. Буквально это слово переводится как «доска настроения», или коллаж. В статье рассказываем, как составить мудборд и в каких программах.
Что такое мудборд и зачем он нужен
Мудборд — это подборка визуальных образов: изображений, фотографий, цветовых палитр, шрифтов, текстур, слоганов, которые помогают определить концепцию, настроение будущего дизайн-продукта.
Главная задача — собрать визуальный образ того, что хотите получить. И здесь не так важно, чем вы занимаетесь. Мудборд решает задачи в разных сферах жизни: оформить брендбук компании или сделать баннер для фотозоны на день рождения ребенка. Даже доски желаний — это разновидность мудборда.
Еще одна важная задача — уточнить и конкретизировать ТЗ. Если вы дополните техзадание мудбордом и обсудите его с заказчиком, то с большей вероятностью избежите переделок. Клиент на начальном этапе определит, к какому результату вы стремитесь, и поймет, чего он хочет сам.
Рассказывает Дарья Купцова, коммуникационный дизайнер VK:
Мудборд помогает на первичных стадиях понять, в правильном ли направлении движется команда, и сконнектиться с заказчиком, перевести абстрактные идеи в конкретные визуальные концепции без объемных затрат сил и времени. Он служит основой для обсуждения и получения обратной связи от клиента, чтобы внести необходимые корректировки еще на ранних этапах.
Его используют во многих направлениях: в видеопродакшене — для создания тритмента, в дизайне интерьеров, одежды, сайтов, фирменных стилей. Тем не менее задача всегда одна: убедиться, что все всё понимают и согласны на общее направление.
Мудбордами пользуются и программисты. При разработке интерфейса нового сайта или приложения это помогает им коммуницировать с дизайнерами. Научиться работать в команде над общим проектом можно на курсе Skypro «Веб-разработчик». В программе есть отдельный блок, когда студенты выполняют задачу вместе под руководством опытного наставника.
Из чего состоит мудборд
Цветовые схемы
Цвет помогает бренду выстроить позиционирование на рынке. Но если цвет подобрать неправильно — он испортит впечатление.
Есть общепринятые и привычные сочетания. К примеру, почти все аптеки — зеленые или синие. Редкие представители индустрии выбирают красный. Такие эксперименты требуют дополнительных усилий, чтобы вызвать доверие. А вот у ресторанов всё разнообразнее, оттого сложнее определиться. Всё зависит от выбранной концепции.
В первую очередь решите, какое настроение должно быть у клиента, когда он взаимодействует с вашим брендом.
Воспользуйтесь специальными библиотеками, чтобы выбрать цветовые сочетания.
На My Brand New Logo выбирают цвета по характеристикам, например винтажные или яркие
Так вы поймете, какие цвета вам подходят, а какие — точно нет. Уточните эти оттенки или попробуйте собрать собственное сочетание с помощью цветового круга на Colorscheme:
Выберите один, два контрастирующих, три или четыре цвета. Или аналогию — близкие по оттенку цвета, акцент-аналогию — близкие цвета + один контрастный
Такой инструмент подходит тем, кто не знает правил сочетания: программа автоматически подстраивается под теорию цвета.
Еще один способ подобрать цвет — выбрать одну фотографию или собрать целый коллаж по мотивам вашей работы. Например, взять их на Pinterest:
Так увидите, какие цвета преобладают на фото, и возьмете в рабочую палитру.
Или загрузите фото или коллаж в Imgonline и установите необходимое количество цветов. После этого попробуйте найти закономерности и собрать готовую палитру.
Шрифты
Правильно подобранный шрифт тоже влияет на восприятие. Определите характер: с засечками или без, рукописный или декоративный. Так будет проще найти подходящий.
Ищите среди бесплатных шрифтов гугла: здесь много вариантов со свободной лицензией. То есть чтобы их использовать, платить не нужно.
Либо ищите на платных сервисах, например Paratype.
К популярным шрифтам есть комментарии с характеристиками
Слоганы
В мудборде нет подробных текстовых пояснений, ведь задача не описать, а показать настроение. Но если у вашего проекта есть слоган или цитата — используйте их, чтобы усилить восприятие, передать идею.
Пример короткой и емкой фразы с Pinterest
Паттерны
Это узоры, иллюстрации с повторяющимися элементами. В мудборде подборка паттернов поможет найти настроение проекта, в дизайне интерьера станет руководством по поиску аналога. Например, для фартука кухни или обоев.
Подборка фруктовых паттернов с Pinterest: подобные примеры помогут определить стилистику будущего узора
Иллюстрации
Они могут быть выполнены в любом стиле и тоже влиять на восприятие. Так, рисунок одного и того же животного может передавать разные настроения.
Уютная иллюстрация с Pinterest, выполненная цветными карандашами. Подходит для детской книги
Тоже медведь с Pinterest, но уже контурный и монохромный, передает агрессивный настрой. Подойдет для татуировки или логотипа спортивного клуба
Чтобы избежать недопонимания с заказчиком, выбирайте не только настроение, но и технику для будущей работы. Например, карандаш или акварель, цифровой рисунок или от руки, полноцветный или контурный.
Фотографии
При создании мудборда настроение лучше всего передают фотографии.
Представьте, что вам нужно определиться с концепцией нового кафе. Понять, кто будет ваша ЦА, зачем вы ей: встретиться с друзьями в непринужденной обстановке или обсудить рабочие вопросы. Визуализируйте это, чтобы решить, что вам нужно.
На примерах один и тот же сюжет: девушка в кафе. Но слева атмосфера уютной кофейни, чтобы встретиться с друзьями. А справа — коворкинг или творческое пространство. От этих вводных зависит, как будут позиционировать проект.
Материалы
Понять идею помогут даже физические ощущения. В работе над дизайном интерьера важно показать материалы и их свойства: гладкие, шероховатые, мягкие. Аналогично — в дизайне одежды. Нужно и фасон показать, и определиться с тканью.
Представьте, что вы работаете над брендом компании, которая занимается экологичной фермерской продукцией. В этом случае добавить в мудборд пример деревянной визитки — отличное решение.
Пример с Pinterest
Научиться создавать дизайн и верстать веб-страницы можно за 10 месяцев на курсе Skypro «Графический дизайнер». Освоите работу в основных графических редакторах, изучите основы брендинга и анимации. А еще узнаете, как налаживать коммуникацию в команде и общаться с заказчиками. Портфолио наполните курсовыми и практическими заданиями.
Чего быть не должно
❌ Противоречий. В мудборде показывайте одну идею, но с разных сторон: цвет, шрифт, фото. Примеры не должны спорить друг с другом. Не добавляйте в мудборд, в основе которого старое черно-белое кино, кадры из современных блокбастеров. Даже если общая тематика — фильмы. А вот самих мудбордов может быть несколько, чтобы было проще выбрать лучшую идею.
❌ Личных предпочтений. Они подойдут, только если мудбордом будете пользоваться лично вы. Или когда ваши с заказчиком взгляды полностью совпадают.
❌ Сложных ассоциаций. Задача мудборда — отразить идею и показать настроение максимально просто. Чем понятнее мудборд, тем легче определить концепцию. Сложная символика возможна в дальнейшем, например когда создаете логотип.
❌ Клишированных фотографий и иллюстраций. Ищите по-настоящему характерные фото, без голливудских улыбок и прочих визуальных штампов.
Например, атмосферу в офисе можно показать так:
Фото с Istockphoto
Фото с Unsplash
Во втором примере больше жизни, потому что люди в офисе могут улыбаться и смеяться, а прыгать от восторга — вряд ли.
В Skypro вас проведут за руку до новой работы: дадут необходимую теорию, много практики, погрузят в IT с нуля. В течение года реально освоить специальность, причем совмещать с другими делами: понадобится от десяти до пятнадцати часов в неделю. В результате у вас будет диплом, портфолио, сильное резюме. Центр карьеры гарантированно поможет найти работу: это фиксируем в договоре.
Где искать идеи и исходники
✈️ Платные и бесплатные фотостоки
Там найдете фотографии и иллюстрации.
Shutterstock — сток, где больше четырехсот миллионов изображений. Предлагает разнообразный контент: фото, видео, аудио, 3D. Есть бесплатный пробный период: до десяти изображений. Предусмотрен встроенный фоторедактор.
Stock.adobe — принадлежит компании Adobe, поэтому имеет интеграцию с Creative Cloud. Это удобно для дизайнеров, видеоредакторов и иллюстраторов.
Unsplash — бесплатный сток, больше двух миллионов изображений. Большой выбор работ, которые пока редко встречаются в хорошем разрешении. Специализируется только на фотоконтенте.
✈️ Сервисы для поиска вдохновения
Один из популярных — Pinterest. Это своеобразный агрегатор идей и товаров со всего интернета. Достаточно вбить в поиске ключевые слова, например «свадьба в скандинавском стиле». Сервис выдаст разнообразный контент в тему — пины. Это шрифты, рисунки, фотографии, готовые мудборды, товары. Перейдите в карточку пина: там будет ссылка с подробностями о покупке.
Аналоги:
✈️ Тематические сообщества дизайнеров
Behance — социальная медиаплатформа, где дизайнеры, видеографы, иллюстраторы, 3D-визуализаторы делятся успешными проектами. Выбирайте проект по тематике или смотрите лучшие за определенный период.
Фильтруйте результаты по типу: брендинг, иллюстрации, по цвету и даже по региону
Dribbble — схожая по функционалу платформа. Часто специалисты размещают работы на разных сервисах, чтобы охватить как можно больше людей. Здесь тоже есть фильтры: брендинг, иллюстрации, дизайн продукта, типография и не только.
Awwwards — узкоспециализированное сообщество с идеями для веб-дизайнеров и разработчиков приложений.
✈️ Офлайн
Окружающий мир — по-прежнему мощнейший источник вдохновения. Люди в кафе, билборд у дороги, случайные ситуации или красивый закат — всё это можно отлично вписать в мудборд.
Как создать мудборд
1️⃣ Проанализируйте работы конкурентов
Ориентируйтесь не только на ощущения, но и на то, что уже сделали другие специалисты. Когда создаете бренд компании, изучите сферу. Проанализируйте примеры: есть ли закономерности, сложились ли в индустрии традиции. Если да — попробуйте предположить почему: это поможет не допустить ошибок. Например, не сделать логотип компании, который будет полностью повторять цвета уже известного конкурента.
2️⃣ Выберите концепцию
Остановитесь на одной идее. Проработайте ее со всех сторон: настроение, цвета, материалы. Если у вас несколько вариантов — определите, чем они отличаются. Не смешивайте их в одном мудборде. Лучше соберите разные доски и выберите ту, которая ближе к задумке.
3️⃣ Подберите взаимосвязанные фото
В мудборде важно сохранить идею. Не перегружайте его разномастными фотографиями — достаточно пары, чтобы передать настроение или материал. Используйте изображения, которые не противоречат друг другу: так концепцию будет проще считывать.
4️⃣ Определите цветовую гамму
Возьмите за основу готовые подборки. Или создайте с помощью цветового круга. Воспользуйтесь фотографиями, которые вы подобрали к мудборду. Попробуйте найти закономерности самостоятельно или воспользуйтесь онлайн-сервисами. Если закономерностей нет — выберите понравившиеся цвета с фото и посмотрите, как они сочетаются между собой.
5️⃣ Выберите шрифт
Необязательно конкретный. Достаточно определиться с характеристиками: антиква, брусковый, рукописный. То есть сузить круг поиска. Потом будет проще найти аналог среди платных или бесплатных вариантов.
6️⃣ Составьте композицию
Соберите материалы в одном месте. Необязательно красиво выравнивать все элементы: мудборд — это не рекламный баннер. Но постарайтесь логично и понятно продемонстрировать всё, что удалось собрать. К примеру, в одной части мудборда соберите цвета. Рядом — материалы. Затем фотографии. Так будет понятна концепция проекта.
Участвуйте в вебинарах Skypro, чтобы узнать больше об IT-профессиях. Спикеры рассказывают о требованиях работодателей, нужных навыках для старта в IT, делятся советами, где учиться и как найти работу.
Где оформить мудборд
Для создания мудборда подойдут стандартные программы: Paint и PowerPoint, Figma и Photoshop. Но даже те, кто не знает эти программы, могут воспользоваться онлайн-сервисами.
Canva — графический редактор с интуитивно понятным интерфейсом, для многих задач достаточно бесплатной версии. Пользуйтесь версией для компьютера или мобильным приложением. Минус: для работы нужен быстрый интернет.
Moodboard — бесплатный сервис. Берите готовые шаблоны или создавайте мудборды с нуля.
SampleBoard — платный сервис, цена от $12 в месяц. Сохраняйте мудборд в виде презентации или делитесь им в соцсетях.
Niice — платный сервис, от $83,25 в месяц. Включает доступ к собственной галерее изображений, расширенный объем памяти и возможность подключать до десяти пользователей. Бесплатный вариант тоже есть: в нём все работы остаются публичными, можно создать до пяти мудбордов.
Мудборд собирают даже вручную. Вырезки из журналов, реальные предметы и фотографии, рисунки от руки. Всё это тоже отлично подходит, чтобы показать концепт.
Рассказывает Дарья Купцова, коммуникационный дизайнер VK:
Мудборд удобно создавать в Figma: если вы загрузите скачанные изображения пачкой в рабочее пространство, то программа сама их ровно сколлажирует. Еще есть широкий выбор инструментов, который позволит вам перекрасить, подписать и даже анимировать ваши элементы. Программой можно пользоваться в браузере, а можно установить на компьютер.
В ней много различных плагинов, например Unsplash (бесплатный фотосток), который при запуске позволит искать атмосферные фото и вставлять их сразу в рабочее пространство не выходя из программы. Или Color Palettes — с ним можно выбирать цветовую палитру из полутора тысяч вариантов.
Для обратной связи клиент может оставлять комментарии прямо в вашем файле, и вы можете ему ответить. При нажатии на аватарку одного из пользователей в правом углу верхней панели можно следить за просмотром файла глазами другого человека, что тоже удобно при личной защите проекта.
Еще вы можете передать права на редактирование вашим коллегам и собирать мудборд вместе в режиме реального времени, но стоит учесть, что на бесплатном тарифе сможете поделиться с командой только тремя проектами.
Как выглядит мудборд: примеры
По мудборду ниже видно будущий интерьер спальни. Понятна цветовая палитра, материалы и общий стиль оформления. Даже шрифт, который в интерьере не нужен, подчеркивает настроение проекта: уникальный стиль и утонченность.
Пример с Pinterest
Ниже — рукотворный мудборд. Его могли создать, чтобы передать атмосферу будущей французской кофейни со свежей выпечкой.
Пример с Pinterest
Третий пример мудборда могли собрать, чтобы определить концепцию магазина ювелирных украшений.
Пример с Pinterest
На курсе Skypro «Графический дизайнер» можно собрать сильное портфолио еще в процессе обучения. В ходе курсовых работ вы сделаете дизайн email-рассылки, создадите презентации продуктов, разработаете дизайн лендинга. Когда будете искать работу — сможете продемонстрировать не только уверенные знания основных инструментов дизайнера, но и свои проекты.
Главное о мудборде
- Мудборд помогает определить и визуализировать концепцию. Проработайте все элементы: цвета, фотографии, иллюстрации, шрифты, паттерны, материалы.
- Избегайте хаоса. Мудборд — это про одну идею, а не про ее поиск. Элементы не должны противоречить друг другу.
- Хороший мудборд не нуждается в тексте. Если необходимо уточнить отдельные моменты — оставляйте короткие заметки. Чем меньше текста, тем лучше.
- Собирайте доски любым способом: вручную, в онлайн-сервисах, специальных графических программах.
Добавить комментарий