Веб-дизайн
19 февраля 2021
286

Что такое мудборд в дизайне на конкретных примерах и как его создать

Воплощаем изображение в реальность с помощью доски настроения
Содержание:

У вас было такое, что вы придумываете какую-то идею, представляете, как это будет выглядеть в действительности, но как только начинаете делиться идеей со знакомыми, каждый раз слышите: «О чем ты, черт возьми, говоришь?».

Не волнуйтесь, есть один инструмент, который поможет решить эту проблему, и этот инструмент — мудборд (доска настроения).

Станьте веб-дизайнером с полного нуля и зарабатывайте удаленно

Что такое мудборд

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

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

Типы мудбордов

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

Аранжировка модных ковриков коричневыми, бордовыми и белыми ниткамиАранжировка модных ковриков коричневыми, бордовыми и белыми нитками

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

Коллаж из различных иллюстрированных постеров к фильмам и несколько красивых иллюстрацийКоллаж из различных иллюстрированных постеров к фильмам и несколько красивых иллюстраций

В этой статье мы поговорим о цифровых мудбордах и о том, как их создавать.

Как создать мудборд

Цель мудборда — передать ваше воображение миру, поэтому вам необходимо определить:

  • для чего вам это нужно;
  • для кого это нужно;
  • какие чувства вы желаете вызвать.

Если для компании важно понять свои ценности, как она выражает их в своих продуктах?

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

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

Поиск идей

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

Pinterest

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

Подборка контента на Pinterest по ключевому слову «шоколад»Подборка контента на Pinterest по ключевому слову «шоколад»

Behance

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

Мудборды в бьюти-сфере на Behance.netМудборды в бьюти-сфере на Behance.net

Dribble

Это отличная онлайн-платформа для сбора идей, созданная художниками и дизайнерами со всего мира. Она объединяет веб-дизайнеров и графических дизайнеров, специалистов по 3D-визуализации, чтобы делиться своими работами и рекламировать свои услуги.

Мудборды на онлайн-платформе Dribble.comМудборды на онлайн-платформе Dribbble.com

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

Подборка изображений для мудборда

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

Популярные инструменты:

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

Дополнительные инструменты

Есть инструменты, которые помогут выбрать подходящую цветовую палитру.

Ваша камера. Нет, это не шутка 🙂

Есть классное бесплатное приложение Adobe Capture, которое помогает делать снимки и генерирует цветовые схемы из фотографии. Чтобы позаимствовать идею, которая вас зацепила, вам просто нужно сфотографировать изображение.

Фокусируясь на портрете Винсента Ван Гога с помощью камеры, используя приложение Adobe Capture, приложение генерирует цветовую палитру из фотографий.Фокусируясь на портрете Винсента Ван Гога с помощью камеры, используя приложение Adobe Capture, приложение генерирует цветовую палитру из фотографий.

Adobe Color — это инструмент, где вы можете ввести любое ключевое слово, и он предложит изображения с цветовыми палитрами.

Adobe ColorAdobe Color

Обзор мудборда

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

Обратная связь

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

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

Заключение

Это был простой 5-этапный процесс, позволяющий воплотить ваши идеи в жизнь. Продолжайте исследовать и собирать все, что вам нравится, и создавайте свой стиль.

Мудбординг — это воплощение вашего воображения в реальность, но есть определенные вещи, о которых вы должны помнить:

  • Не тратьте слишком много времени на раздумья во время поиска идей;
  • Выбирайте только лучшие изображения из своей коллекции, которые действительно отражают ваши идеи;
  • При написании обзора, делайте его кратким, легким для восприятия, поэтому не используйте жаргон и сленг. Обзор должен быть нейтральным, чтобы не вводить в заблуждение зрителя.
Как стать веб-дизайнером с нуля и работать удаленно на фрилансе
Регистрируйтесь на бесплатный 3-дневный онлайн-интенсив
Рекомендуемые статьи:
Веб-дизайн
19.03.2021
Zero Block на Tilda — что это и как работает
Можно ли создать собственный дизайн на Tilda? Сервис Tilda многими воспринимается только в качестве обычного конструктора сайтов, на котором по-быстрому можно сложить сайт-визитку или незамысловатый лендинг. Что касается дизайнеров, то Tilda многие просто не воспринимают всерьез. Дизайн? Да, ну! О чем вы говорите? Какой может быть дизайн на конструкторе сайтов? Там стандартные, уже придуманные кем-то […]
61
Читать статью
Веб-дизайн
18.02.2021
Что такое веб-дизайн и чем занимается веб-дизайнер?
Определение веб-дизайна Веб-дизайн — это один из этапов разработки сайта. Сайты создаются для e-commerce (интернет-магазины), для услуг или для информационных блогов, но все, что связано с внешним видом и визуальной составляющей сайта, подпадает под понятие «веб-дизайн». Чтобы создать полноценно работающий сайт, вам необходимо знать языки программирования: Язык гипертекстовой разметки, состоящий из HTML-тегов для создания структуры […]
163
Читать статью
Веб-дизайн
5.04.2021
Мокап – что это и зачем нужен в дизайне
Что такое мокап Мокап – это макет, с помощью которого заказчик может увидеть свой продукт в трехмерном изображении, то есть визуально представить и понять, как будет выглядеть готовый продукт в реальности. Обычно это файл в формате PSD, который заказчик может открыть у себя на компьютере либо телефоне и посмотреть, как будет выглядеть: логотип; дизайн фирменного […]
88
Читать статью
Веб-дизайн
4.03.2021
10 основных правил типографики в веб-дизайне
Что такое типографика Типографика является одним из важных элементов веб-дизайна. Она делает контент читаемым с помощью визуальной иерархии, правильно подобранных шрифтов и верстки текста. Плохая типографика может испортить впечатление пользователя о сайте, а с ростом популярности CSS и HTML она стала еще более важной. Как правильно отметил директор дизайнерского агентства Information Architects Оливер Райхенштайн: Веб-дизайн […]
265
Читать статью
Веб-дизайн
15.02.2021
Краткое руководство, как стать веб-дизайнером с нуля
Часто ли вы задумываетесь о том, что могли бы улучшить дизайн посещаемых вами сайтов? Или, возможно, у вас уже есть личный блог, который вы активно ведете и заметили, что процесс проектирования и создания сайта вам очень импонирует. Если это так, и вы хорошо разбираетесь в деталях, обладаете талантом к креативу и творчеству, не боитесь технических […]
339
Читать статью
Веб-дизайн
1.03.2021
Сколько зарабатывает веб-дизайнер в штате и на фрилансе
Профессия веб-дизайнера будет востребована до тех пор, пока людям будут нужны сайты. Основными этапами процесса создания любого сайта являются: веб-дизайн; вёрстка страниц; программирование; наполнение контентом; тестирование. Веб-дизайнер приступает к работе практически первым, сразу после определения концепции и структуры сайта сайта. Что делает веб-дизайнер Веб-дизайнер отвечает за внешний вид сайта. Он заботится о том, чтобы сайт […]
95
Читать статью
Веб-дизайн
20.02.2021
UX-дизайн — что это такое и почему так важен для пользователя
UX-дизайн (от англ. user experience — «опыт пользователя») — это изучение потребностей и задач пользователей, когда мы говорим про их опыт взаимодействия с сайтом или приложением. UX это про то, когда вы пользуетесь сайтом и чувствуете, что все находится в нужном месте, вы не тратите много времени на поиск интересующей вас информации, и все ясно […]
361
Читать статью
Веб-дизайн
25.02.2021
Что такое модульная сетка в дизайне и зачем она нужна
Секрет успеха в любом виде дизайна зависит от того, как расположены все элементы друго относительно друга. В этом и есть смысл создания дизайн-макета сайта или приложения. Важной составляющей дизайна являются сетки. Они — основа всех макетов, инфографики и презентаций. Дизайн макета предполагает использование одной сетки или группы сеток, в зависимости от того, какая у вас […]
131
Читать статью
Веб-дизайн
9.04.2021
Что такое референсы и для чего они нужны
Что такое референсы Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер, чтобы начать и настроиться на нужный лад. Для чего нужны референсы Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. […]
30
Читать статью
Веб-дизайн
6.03.2021
Что такое брендбук и как он может помочь бизнесу?
Задумывались ли вы о том, хороша ли визуальная идентичность вашего бренда в интернете? Суть брендинга в его уникальности, что делает узнаваемым продукт среди конкурентов, но владельцы малого и среднего бизнеса в потоке рутинных дел забывают про внешний вид своей компании, откладывая создание брендбука на потом. Наличие брендбука позволит вам: сэкономить деньги; повысить вовлеченность; привлечь больше […]
70
Читать статью
Веб-дизайн
14.03.2021
Figma — что это за программа и как она работает
Что такое Figma и для чего используется? Figma — это инструмент веб-дизайна, способный создавать: макеты; прототипы; интерактивную анимацию. Веб-разработчики используют Figma в качестве библиотеки компонентов системы дизайна. Figma контролирует актуальность рабочих версий макета, поддерживает функцию совместной работы, режим демонстрации и генерации кода. Figma — это редактор векторной графики для совместного проектирования интерфейсов, используемых в веб-разработке […]
59
Читать статью
Веб-дизайн
22.02.2021
Новые тренды веб-дизайна и вдохновение на 2021 год
Тренды веб-дизайна приходят и уходят. Пользователи посещают множество сайтов каждый день, и компаниям приходится проявлять больше творчества, чтобы привлечь их внимание. Предприниматели сосредотачиваются на визуальной привлекательности и удобстве использования своих сайтов, чтобы пользователи оставались там. Давайте теперь подробно рассмотрим ведущие тенденции дизайна UI / UX на 2021 год и посмотрим, как популярные бренды успешно их […]
91
Читать статью
Оставьте ваш комментарий