Как составить мудборд для сайта

Этот веб-сайт использует файлы Cookie для улучшения пользовательского опыта. Используя наш веб-сайт, вы даете согласие на использование всех файлов Cookie в соответствии с нашей Политика Cookie .

• цели и задачи проекта;

• кто целевая аудитория сайта;

• можно ли отходить от фирменного стиля;

• какое настроение лучше задать дизайн-концепции;

• как вписать настроение в сложившуюся айдентику клиента;

• какие сайты нравятся клиенту и почему;

• какие сайты категорически не нравятся и чем именно.

• если у клиента есть сложившийся фирменный стиль, то дизайнеры берут его в работу, адаптируя цвета айдентики заказчика под веб (производится мелкая настройка контраста и яркости);

• если же у клиента нет фирменного стиля, отдел дизайна предлагает цвета, которые на их взгляд подходят клиенту и его проекту.

• заказчик получает удобную визуализацию;

• дизайн отвечает ожиданиям;

• дизайнер получает расположение заказчика;

• обе стороны экономят время.

1. Что такое мудборд
2. Что можно показать на мудборде
3. Принципы создания мудборда
4. Кто использует мудборды
5. Где можно сделать мудборд

Сервисы для создания мудбордов: обзор 2022

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

Давным-давно мы делали обзор сервисов для мудбордов, но с той поры слишком многое изменилось: кого-то из них поглотили более крупные компании, кто-то исчез с рынка вовсе, с кем-то теперь работать сложно из-за глобальной политики, да и новички появились. Решили посмотреть, что сейчас можно использовать при создании визуальных брифов — и делимся с вами находками. Но сначала — быстрый ликбез по теме мудбордов (на всякий случай).

Краткая вводная

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

Мудборд, с английского Moodboard, «доска настроения» — полотно, где собраны разные визуальные элементы. Если хотите, зовите его визуальным брифом, если «мудборд» звучит для заказчиков как-то не так. Он нужен, чтобы отразить общее настроение и стилистику будущего проекта и точнее понять «хотелки» клиента. Потому что одно дело — словесные брифы заполнять, другое — смотреть картинки и говорить нравится/не нравится.

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

Что включает в себя мудборд при разработке сайта

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

В каждый мудборд, который мы обсуждаем с заказчиком, обычно входят:

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

Дополнительно можно показать примеры анимаций (например, решения по механике слайдов) и графического контента (например, стилистику иллюстраций, фотографий или 3D-моделей).

Где брать идеи для мудборда

• профессиональные сайты вроде Awwwards или Dribble;
• творческий Behance или всезнающий Pinterest с миллиардами картинок на любую тему;
• любые фотостоки, вроде Unsplash, где можно найти фото или иллюстрации всего-чего-угодно;
• уже использованные на других проектах решения;
• и даже — объекты окружающего мира, если они укладываются в стилистику и задают тон всему проекту.

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

Сервисы для создания мудбордов

Совет от кэпа: Pinterest

Если на Pinterest можно искать вдохновение для мудборда, то почему нельзя здесь же его и собрать? Заводим в аккаунте отдельную доску — и можно работать: понравилась идея — делаем пин (правда, если досок несколько, это не так удобно, потому что пин падает в последний использованный проект).

Если очень надо — добавляем на эту доску свои картинки, загружая их как новые пины (увы, придется заливать поштучно). Порядок пинов на доске можно менять перетаскиванием. Когда доска полностью готова — можно отправить ссылку на неё (но чтобы человек смог её посмотреть, ему нужен аккаунт).

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

Всё могу: Figma

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

У Figma есть шаблоны, и шаблоны мудборда, к счастью, тоже. Можно использовать их (внутри шаблона даже есть инструкция, с чего начать). А можно снести вообще все элементы, просто выделив их мышью и нажав Del, и на чистом листе сделать всё с нуля. Помимо изображений, тут можно добавлять стикеры, фигуры, какие-то веселые штампики, рисовать от руки и, конечно, писать комментарии.

Главный плюс сервиса в том, что здесь доступна командная работа: можно открыть доступ к проекту только для просмотра, а можно и для редактирования. При этом все комментарии показываются в поле справа — как в полноценном чате. А дать доступ к мудборду можно простой ссылкой.

Вердикт: понятно, что у Фигмы есть куча других достоинств (не зря же она уже давно сместила Скетч с пьедестала), но если говорить именно о создании мудбордов — она классная и интуитивно понятная. А также, если не заводить корпоративный аккаунт (который сложно оплатить из РФ) — бесплатная, и при этом с очень хорошим функционалом.

Сто в одном: Miro

Miro больше известен как сервис для создания схем, майндмэпов и инфографики, но теоретически его можно использовать и для мудбордов. Готовых шаблонов именно под эту задачу нет, но будто бы и не надо: можно просто перетащить картинки с рабочего стола на доску и расположить их так, как нравится. К ним легко добавить объекты вроде кружочков с нумерацией, текстов, стрелок, диаграмм, рисованных линий и — что удобно — комментариев. Готовый мудборд можно сохранить как изображение, файл pdf или ссылку на Google диск.

Вердикт: в бесплатном тарифе можно создать всего 3 доски, и они будут доступны всем добавленным членам команды — если такой вариант открытости вас устраивает, вполне можно пользоваться. Заодно и графики красивые будете всюду вставлять, правда же? 🙂 В платных тарифах нет ограничения на количество рабочих досок, плюс можно приглашать сторонних людей к обсуждению. Но как оплачивать сервис картой российского банка — вопрос.

На всё готовенькое: Niice

Niice — не просто сервис, а бренд-хаб (как бы это ни звучало). Для старта работы нужно завести аккаунт и выбрать свою роль (агентство, фрилансер и т. д.), а потом заполнить данные о себе. Когда готово — можно стартовать. Тут тебе, пожалуйста, и мудборды, и контент-календари, и гайдлайны можно стряпать с помощью уже готовых шаблонов, да ещё и сразу в своей цветовой схеме и со своим логотипом (удобно, если вы агентство или студия).

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

Поделиться готовым мудбордом можно, отправив ссылку письмом на нужный адрес электропочты прямо внутри сервиса, а можно — просто пошарить ссылку или даже запаролить проект и давать доступ только избранным. А ещё проект можно экспортировать как zip-архив.

Вердикт: если вы не хотите париться с компоновкой мудборда и мечтаете просто вставлять туда картинки, чтобы «оно как-то само» сделалось красивым — сервис подходит идеально. Из обидных ограничений — всего 5 рабочих досок и 100 загрузок, иначе — платите денежку (а это ж сложно в штормовом 2022).

На страх и риск: Moodboard

Сервис Moodboard — максимально простой и даже регистрации не требует (денег — тем более). На стартовой странице ждут несколько готовых макетов, которые можно использовать, как есть, или отредактировать, добавив своих картинок. Если не понравились шаблоны — велкам создавать собственный мудборд: изображения можно добавлять из папок или просто перетаскивая. Позиции картинок также легко менять перетаскиванием.

Одна беда: изображения, вроде бы, загружаются, но на самом деле нет — сервис выдает ошибку (и как её победить — неизвестно). Но заявлено, что созданный мудборд теоретически можно сохранить как файл pdf или отправить ссылкой. Ну и приятно то, что потенциально созданные мудборды автоматически скрыты от других пользователей (если вы не разрешите обратное).

Вердикт: если упорство — ваше кредо, и вы готовы попытать счастье с упрямым сервисом в нескольких браузерах (а вдруг загрузит!), смело можно пользоваться. Но не факт, что по ссылке, что вы отправите потом, ваш мудборд откроется у заказчика.

Олдскул и ограничения: Sampleboard

Sampleboard — скромный сервис для ценителей эстетики в интерьере и на фотографиях. Здесь нет свободного пространства на рабочей доске — перед стартом работы придется выбрать формат (А4, фото или что-то еще). Добавленные изображения складываются на лист пачкой, друг на друга, вместо хоть какой-то интуитивной сетки. К картинкам можно добавить тексты и фигуры вроде треугольника, квадрата и круга (негусто). Готовый мудборд можно сохранить как jpg, png или pdf файл.

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

Итого

Если у вас ещё не чешутся руки сделать свой мудборд, то, наверное, они просто в перчатках — осень на дворе 🙂 А если серьёзно, то вариантов сделать визуальный бриф сейчас не так уж много — выбирайте под свои задачи и учитывайте ограничения. Мы же в студии свой выбор давно сделали и вообще всё делаем в Фигме: от прототипов и мудбордов до итоговых макетов и анимированных презентаций заказчику. Потому что удобно, черт побери 🙂