Мудборд для сайта: как собрать референсы и объяснить дизайнеру, чего вы хотите

Что такое мудборд и зачем он сайту

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

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

Чем мудборд отличается от соседних документов:

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

Что положить в мудборд для сайта

Мудборд для сайта шире, чем «красивые картинки». Вот что стоит собрать:

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

Где искать референсы для сайта

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

1. Сайты вашей и смежных ниш. Откройте 10–15 сайтов конкурентов из разных городов, включая крупных игроков. Смотрите не только на «красиво», но и на то, как подана цена, где кнопка заявки, как показаны работы. Смежные ниши дают свежие идеи: для салона красоты интересно посмотреть сайты бутик-отелей и ресторанов.

2. Галереи сайтов и дизайна. Есть сайты, которые собирают лучшие примеры веб-дизайна: Awwwards, Lapa Ninja, Land-book, Dribbble, Behance. Часть зарубежных площадок из России может открываться с ограничениями. Помните, что в галереях много концептов, которые сложно повторить для реального бизнеса: красиво, но непонятно, как там оставить заявку.

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

Совет: не ищите «идеальный сайт целиком». Собирайте фрагменты — первый экран отсюда, цвета оттуда, фото из третьего места. Дизайнер соберёт из них целое.

Подборку живых примеров лендингов с разбором, что в них работает, мы собрали в статье примеры лендингов.

Как собрать мудборд: пошагово

1. Сформулируйте три слова о бренде. Например: «надёжно, тепло, без пафоса». Эти слова будут фильтром для всех примеров.
2. Соберите 30–50 кандидатов за один вечер. Не анализируйте, просто сохраняйте всё, что откликается.
3. Уберите лишнее. Оставьте 10–20 примеров. Убирайте те, что противоречат трём словам или повторяют друг друга.
4. Разложите по группам: сайты целиком, первые экраны, цвета, шрифты, фото, детали, антиреференсы.
5. Подпишите каждый пример. Одна-две строки: что взять и что не нужно. Без подписей мудборд почти бесполезен.
6. Добавьте исходные данные: логотип, фирменные цвета, фото вашего помещения или продукции.
7. Отметьте приоритет. Звёздочкой — 2–3 главных примера, которые точнее всего передают задумку.
8. Покажите коллеге или партнёру и спросите, какие три слова у него ассоциируются с доской. Если слова совпадают с вашими, мудборд собран.
9. Отправьте дизайнеру ссылку и обсудите на созвоне. Пять минут разговора по доске заменяют страницу текста.

Где собирать мудборд: Pinterest, Фигма или документ

В Pinterest доску можно сделать приватной: при создании включается переключатель, и доску видите только вы и приглашённые люди, это описано в справке Pinterest. В Фигме есть готовый шаблон мудборда для FigJam с местом под изображения, палитру и заметки.

Рабочая связка: собираете кандидатов в Pinterest или скриншотами, а финальную доску с подписями делаете в FigJam. Если хотите освоить Фигму самостоятельно, мы готовим материал Фигма для начинающих.

Как подписывать референсы, чтобы дизайнер понял

Подпись — главное, что отличает мудборд от папки «красивое». Сравните:

Формула подписи: что именно (элемент) + почему (какое ощущение) + чего не брать (если в примере есть лишнее).

Условный пример: мудборд для сайта семейной пекарни

Пример условный, чтобы показать структуру.

Допустим, сеть из двух пекарен в Твери заказывает сайт с меню и заказом тортов. Три слова: «тепло, по-домашнему, аккуратно».

Что в мудборде:

1. Исходные данные: логотип, фото вывески, фото витрины с выпечкой.
2. Сайты целиком (3): сайт пекарни из другого города — «нравится крупное фото хлеба на первом экране»; сайт кофейни — «тёплые тона и рукописный акцент в заголовках»; сайт фермерского магазина — «простое меню с фото и ценами».
3. Первые экраны (3): с подписями, где кнопка и что в заголовке.
4. Цвета: фото крафтовой упаковки и деревянной полки — «эти оттенки, без белого фона».
5. Фото (4): живые снимки рук пекаря, выпечки на столе, утреннего света — «так снимаем свои фото».
6. Антиреференсы (2): сайт с глянцевыми стоковыми тортами — «так не надо, выглядит неестественно»; тёмный ресторанный сайт — «слишком пафосно для нас».

С такой доской первый макет почти наверняка попадёт в ожидания, а правки будут касаться деталей.

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

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

Мудборд работает, когда его обсуждают вживую или на созвоне. Хороший порядок работы выглядит так:

1. Созвон по доске на 20–30 минут. Вы проходите по группам и рассказываете, что зацепило в каждом примере. Дизайнер задаёт вопросы и отмечает, где ваши примеры противоречат друг другу.
2. Дизайнер предлагает 2–3 направления. Это короткие стилевые наброски: палитра, шрифт, фрагмент первого экрана, пример фото. Сравнивать направления проще, чем отдельные картинки.
3. Вы выбираете одно направление и формулируете, что в нём доработать. Смешивать «цвета из первого, шрифт из второго, фото из третьего» можно, но собрать из этого цельный стиль лучше доверить дизайнеру.
4. Мудборд становится частью задания. Ссылка на доску и выбранное направление закрепляются в переписке или в договоре, чтобы через месяц не спорить, о чём договаривались.

Как давать обратную связь по макету, чтобы правки были понятны:

• говорите о задаче, а не о решении: «заголовок теряется на фото» вместо «сделайте заголовок красным»;
• ссылайтесь на мудборд: «в референсе № 3 было больше воздуха, здесь тесно»;
• собирайте правки одним списком, чтобы дизайнер видел картину целиком.

Частые ошибки при сборе мудборда

1. Только сайты из галерей. Конкурсные концепты красивы, но часто непрактичны. Добавьте реальные сайты, которые продают.
2. Нет подписей. Дизайнер видит 20 картинок и угадывает, что вам в них нравится. Угадывает не всегда.
3. Противоречивые примеры. Строгий минимализм рядом с ярким комиксом. Если обе идеи вам нравятся, выберите одну или обсудите с дизайнером.
4. Слишком много. 80 референсов — это уже архив. Оставьте лучшие 10–20.
5. Копирование вместо вдохновения. «Сделайте как у конкурента один в один» — плохая идея и юридически, и для бизнеса: клиенты вас перепутают.
6. Мудборд вместо содержания. Красивая доска не ответит, какие блоки нужны и что написать. Сначала продумайте, что продаёт первый экран, — об этом статья первый экран сайта.
7. Забыть про мобильную версию. Большинство посетителей смотрят сайт с телефона. Добавьте в мудборд пару скриншотов мобильных версий.

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