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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск идей

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

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.07.2021
Пагинация страниц сайта — что это и как ее сделать
Когда мы читаем книгу, информация в ней подается постранично. Прочитывая одну страницу, всегда можно перевернуть, чтобы перейти к следующей, поставить закладку на самом важном или интересном месте, открыть сразу на трехсотой или четыреста двадцать шестой. Это принцип не только «бумажных» книг — электронные работают аналогично, потому что подобный формат привычен и удобен всем людям. Что […]
103
Читать статью
Веб-дизайн
7.06.2021
Адаптивный веб-дизайн сайта: что это и зачем нужен
В этой статье мы собираемся разобрать, что такое адаптивность сайта и ее важность в веб-дизайне и интернет-маркетинге. С ростом популярности Интернета многие компании начинают заявлять о своем онлайн-присутствии с помощью сайта или блога. Ежедневно запускается около тысячи интернет-ресурсов. И если раньше пользователи, чтобы заходить на сайты, использовали только настольные компьютеры со стандартным размером экрана, а […]
72
Читать статью
Веб-дизайн
30.06.2021
Что такое favicon и зачем он нужен вашему сайту
Внешний вид вашего сайта может сыграть важную роль в повышении узнаваемости бренда и того, как пользователи воспринимают ваш бизнес. Хороший сайт — это сочетание множества элементов веб-дизайна, которые вместе создают профессиональный внешний вид. Каждый день появляются десятки и сотни тысяч сайтов, есть все тематики и направления, поэтому необходимо не просто рекламировать себя и использовать различные […]
111
Читать статью
Веб-дизайн
19.03.2021
Zero Block на Tilda — что это и как работает
Можно ли создать собственный дизайн на Tilda? Сервис Tilda многими воспринимается только в качестве обычного конструктора сайтов, на котором по-быстрому можно сложить сайт-визитку или незамысловатый лендинг. Что касается дизайнеров, то Tilda многие просто не воспринимают всерьез. Дизайн? Да, ну! О чем вы говорите? Какой может быть дизайн на конструкторе сайтов? Там стандартные, уже придуманные кем-то […]
307
Читать статью
Веб-дизайн
9.04.2021
Что такое референсы и для чего они нужны
Что такое референсы Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер, чтобы начать и настроиться на нужный лад. Для чего нужны референсы Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. […]
237
Читать статью
Веб-дизайн
14.03.2021
Figma — что это за программа и как она работает
Что такое Figma и для чего используется? Figma — это инструмент веб-дизайна, способный создавать: макеты; прототипы; интерактивную анимацию. Веб-разработчики используют Figma в качестве библиотеки компонентов системы дизайна. Figma контролирует актуальность рабочих версий макета, поддерживает функцию совместной работы, режим демонстрации и генерации кода. Figma — это редактор векторной графики для совместного проектирования интерфейсов, используемых в веб-разработке […]
219
Читать статью
Веб-дизайн
20.02.2021
UX-дизайн — что это такое и почему так важен для пользователя
UX-дизайн (от англ. user experience — «опыт пользователя») — это изучение потребностей и задач пользователей, когда мы говорим про их опыт взаимодействия с сайтом или приложением. UX это про то, когда вы пользуетесь сайтом и чувствуете, что все находится в нужном месте, вы не тратите много времени на поиск интересующей вас информации, и все ясно […]
452
Читать статью
Веб-дизайн
8.07.2021
Айдентика бренда — что это такое и как ее создать
«Выделиться из толпы» — то, что необходимо и человеку, чтобы его узнавали, и компании. Даже применительно к людям говорят о «личном бренде», и это означает не только черты лица, прическу, манеру одеваться, но и многое другое — от «тона голоса» в соцсетях и в жизни, до каких-либо поступков, например, участия в благотворительных фестивалях для поддержки […]
74
Читать статью
Веб-дизайн
26.05.2021
Лучшие бесплатные и платные фотостоки (фотобанки)
Идеи для контента или готовые изображения и видео легко найти на фотостоках, а уникальные фото и видео с высоким качеством — в фотобанках. Среди сайтов нет четкого разделения, что такое фотобанк, а что такое фотосток. В этой статье примем их за синонимы. В фотобанке можно найти бесплатное изображение, в фотостоке — платное и наоборот. Одни […]
145
Читать статью
Веб-дизайн
5.04.2021
Мокап – что это и зачем нужен в дизайне
Что такое мокап Мокап – это макет, с помощью которого заказчик может увидеть свой продукт в трехмерном изображении, то есть визуально представить и понять, как будет выглядеть готовый продукт в реальности. Обычно это файл в формате PSD, который заказчик может открыть у себя на компьютере либо телефоне и посмотреть, как будет выглядеть: логотип; дизайн фирменного […]
347
Читать статью
Веб-дизайн
14.07.2021
Прототип сайта — что это и зачем нужен
Каждый сайт должен продавать. Даже если речь идет о некоммерческом проекте, где нет прямого предложения «купи что-то», все равно посетитель «расплачивается» своим вниманием и временем, а приобретает необходимую информацию, развлечение, общение. Поэтому дизайн ресурса должен быть не просто «красивым» или «гармоничным», а еще и продающим. Прототип сайта — это «основа», на которой потом будет держаться […]
139
Читать статью
Веб-дизайн
18.02.2021
Что такое веб-дизайн и чем занимается веб-дизайнер?
Определение веб-дизайна Веб-дизайн — это один из этапов разработки сайта. Сайты создаются для e-commerce (интернет-магазины), для услуг или для информационных блогов, но все, что связано с внешним видом и визуальной составляющей сайта, подпадает под понятие «веб-дизайн». Чтобы создать полноценно работающий сайт, вам необходимо знать языки программирования: Язык гипертекстовой разметки, состоящий из HTML-тегов для создания структуры […]
457
Читать статью
Оставьте ваш комментарий