Дизайн-бриф: что это и как его составить для проекта

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

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

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

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

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

Хороший бриф выполняет три функции.

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

Защищает проект от scope creep. Scope creep — это медленное разрастание проекта из-за мелких дополнений: еще одна страница, еще одна языковая версия, еще одна роль пользователя, «а заодно можно еще…». Каждое дополнение выглядит безобидно, но вместе они ломают сроки и бюджет. Бриф фиксирует скоуп проекта письменно, поэтому любое изменение становится заметным решением, а не тихим дрейфом.

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

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

Люди, которые впервые заказывают дизайн, часто спрашивают: зачем бриф, если агентство все равно будет задавать вопросы? Ответ в скорости и качестве. Без брифа первые две-три встречи уходят на сбор базовой информации, которую можно было записать за час. С брифом эти встречи сразу переходят к сути: вариантам, рискам и приоритетам. Еще одна неочевидная польза: составление брифа заставляет команду клиента договориться внутри еще до привлечения агентства. Часто самый ценный результат упражнения не сам документ, а разговор между маркетингом, продажами и руководством о том, зачем на самом деле нужен проект.

Дизайн-бриф vs креативный бриф vs техническое задание

Эти документы часто путают, а бриф и ТЗ нередко вообще считают одним и тем же. На самом деле у них разные задачи.

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

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

Техническое задание (ТЗ). Используют для разработки. ТЗ описывает функции, данные, интеграции, требования к быстродействию и безопасности настолько подробно, чтобы разработчики могли это реализовать и протестировать. Отвечает на вопрос «как именно должна вести себя система?». ТЗ обычно пишут после брифа и discovery, а не вместо них. Если клиент приходит с «ТЗ» на две страницы, чаще всего это на самом деле бриф, и это нормально.

Есть еще SOW (statement of work): договорной документ или приложение к договору со скоупом, где перечислены результаты, сроки, условия оплаты и критерии приемки. Часто его составляют на основе брифа и ТЗ. Коммерческое предложение агентства тоже опирается на бриф: без него оно будет либо очень приблизительным, либо будет содержать много допущений.

Что включить в дизайн-бриф

Это главная часть документа. В каждом блоке ниже есть вопросы, на которые стоит ответить клиенту. Длинных эссе не нужно: обычно хватает двух-трех четких предложений на вопрос.

Порядок блоков неслучаен. Сначала идет контекст и цели, потому что без них невозможно оценить ни одно дизайн-решение. Дальше аудитория и объем работ, которые определяют, что именно проектировать. Потом бренд, контент и технические ограничения, которые сужают пространство решений. И в конце бюджет, сроки и согласование, которые превращают бриф в рабочий план. Если на какой-то блок пока нет ответа, не пропускайте его, а отметьте как открытый вопрос: так команда сразу видит, что нужно выяснить на discovery.

Компания и контекст проекта

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

Ответьте на вопросы:

• Чем занимается компания, кто ваши клиенты и как вы зарабатываете? (бизнес-модель)

• Как вы хотите, чтобы вас воспринимали по сравнению с конкурентами? (позиционирование бренда)

• Что есть сейчас: текущий сайт или продукт, его сильные стороны и что не работает?

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

Цели и метрики успеха

Этот блок чаще всего заполняют размытыми пожеланиями. «Современный дизайн» и «лучший пользовательский опыт» — это не цели. Цель — это бизнес-результат.

Ответьте на вопросы:

• Какие бизнес-цели должен поддержать проект? Например, больше качественных заявок, выше онлайн-продажи, меньше обращений в поддержку, выход на новый рынок.

• Какие KPI покажут успех и какие у них текущие значения? Конверсия, количество запросов на демо, средний чек, активация пользователей.

• Что заставит вас сказать «проект сработал» через полгода после запуска?

Полезный фильтр — SMART-цели, то есть конкретные, измеримые, достижимые, релевантные и ограниченные во времени. «Увеличить количество заявок с сайта на 30 % за шесть месяцев после запуска» — это SMART-цель. «Сделать сайт привлекательнее» — нет.

Целевая аудитория

Дизайн всегда создают для кого-то. Без четкой аудитории команда проектирует для себя или для личного вкуса клиента.

Ответьте на вопросы:

• Кто основные группы пользователей и какая из них самая важная для этого проекта?

• Какую «работу» они хотят выполнить, когда приходят на сайт или в приложение? (Jobs to be Done, JTBD)

• Какие у них основные боли сегодня и с чем они вас сравнивают?

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

Объем работ и результаты

Этот блок определяет, что именно будет сделано. Это главная защита от scope creep.

Ответьте на вопросы:

• Какие страницы или экраны входят в проект? Идеально, если есть черновик карты сайта или список ключевых экранов приложения.

• Какие user flows самые важные? Например, оставить заявку, записаться на демо, оформить заказ, зарегистрироваться.

• Какие дизайн-материалы вы ожидаете получить? Вайрфреймы, финальные макеты, кликабельный прототип, UI kit или дизайн-систему, иконки, иллюстрации, анимации.

Прямо укажите и то, что не входит в проект. «Шаблоны блога не входят в первый этап» экономит недели недопонимания.

Бренд и визуальные референсы

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

Ответьте на вопросы:

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

• Какие сайты или приложения вам нравятся и что именно нравится в каждом? Если можете, соберите их в мудборд.

• От каких референсов конкурентов вы хотите отличаться и почему?

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

Контент и технические ограничения

Дизайн не существует в вакууме. Он должен работать с реальным контентом и реальными технологиями.

Ответьте на вопросы:

• Кто предоставит контент: тексты, фото, видео, данные о товарах? Когда он будет готов?

• Какую CMS будет использовать сайт или на какие платформы ориентирован продукт (web, iOS, Android)?

• Какие интеграции нужны: CRM, платежные сервисы, службы доставки, онлайн-запись, аналитика?

• Сколько языковых версий будет на старте и планируются ли новые? Для украинских компаний типичный набор UA и EN, иногда еще несколько языков для экспортных рынков.

• Есть ли требования к доступности, например соответствие WCAG?

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

Бюджет, сроки и согласование

Многие клиенты не называют бюджет, надеясь на более выгодное предложение. На практике диапазон бюджета помогает агентству предложить реалистичный объем, а не «мечту», которую потом придется резать. О том, какие факторы формируют стоимость, мы подробно писали в статье от чего зависит стоимость разработки сайта.

Ответьте на вопросы:

• Какой диапазон бюджета и есть ли гибкость?

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

• Кто принимает решения, кто дает обратную связь и сколько раундов правок запланировано на каждом этапе?

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

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

Особенности брифа для разных проектов

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

Бриф на дизайн сайта

Бриф на дизайн сайта стоит дополнить:

• Картой сайта. Даже черновик списка страниц с иерархией помогает оценить объем и спланировать навигацию.

• CMS. На какой системе будет работать сайт (WordPress, Webflow, собственная CMS) и кто будет редактировать контент после запуска.

• SEO-требованиями. Какие страницы сейчас приводят трафик и должны сохранить свои URL, какие запросы важны, как будут организованы языковые версии (UA/EN), чтобы поисковые системы правильно их понимали.

• Ответственностью за контент. Кто пишет и согласовывает тексты, кто предоставляет изображения, кто будет поддерживать сайт.

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

Для интернет-магазина в бриф стоит добавить еще несколько пунктов: количество товаров и категорий, способы оплаты (например, LiqPay, WayForPay или оплата частями), службы доставки, с которыми работаете, учетную систему и маркетплейсы, на которых уже продаете. Эти интеграции сильно влияют на структуру корзины и оформления заказа, поэтому дизайнер должен знать о них до того, как начнет рисовать checkout.

Бриф на дизайн мобильного приложения

Бриф на мобильное приложение стоит дополнить:

• Гайдлайнами платформ. Должно ли приложение точно следовать iOS Human Interface Guidelines и Material Design или использовать полностью собственный интерфейс на обеих платформах?

• Онбордингом. Что новый пользователь должен понять и сделать за первую минуту?

• Ключевыми user flows. Три-пять задач, которые определяют успех, например регистрация, заполнение профиля, первый заказ или бронирование.

• Функциями устройства. Камера, геолокация, уведомления, офлайн-режим, биометрия.

Для существующего приложения добавьте отзывы из App Store и Google Play и обращения в поддержку. Это бесплатное исследование пользователей.

Бриф на брендинг

Бриф на брендинг стоит дополнить:

• Логотипом. Новый логотип или обновление существующего? Где его будут использовать: сайт, иконка приложения, упаковка, вывески, мерч?

• Фирменным стилем. Какие элементы нужны кроме логотипа: палитра, типографика, графические элементы, стиль фото, шаблоны.

• Tone of voice. Как бренд должен звучать в текстах? Официально или дружелюбно, экспертно или с легкостью?

• Архитектурой бренда. Есть ли суббренды, продукты или услуги, которым нужна собственная айдентика в рамках одной системы?

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

Как составить дизайн-бриф: пошагово

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

Шаг 1. Соберите внутренние требования. Перед обращением в агентство проведите короткие интервью со стейкхолдерами внутри компании. Спросите отдел продаж, с чем испытывают трудности клиенты, поддержку, что они слышат каждый день, маркетинг, что им нужно от сайта, а руководство, как выглядит успех. Запишите ответы.

Шаг 2. Проведите анализ конкурентов. Составьте список из трех-пяти конкурентов и запишите, что у них хорошо, а что плохо. Это дает брифу конкретные референсы и помогает описать, чем вы хотите отличаться.

Шаг 3. Заполните анкету-бриф. Используйте блоки из этой статьи или анкету агентства. Ответьте на каждый вопрос, даже если это «пока не знаем». Честное «неизвестно» полезнее выдуманного ответа.

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

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

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

Практический совет: ведите бриф в общем документе, а не в переписке. Комментарии, версии и решения остаются в одном месте, а новые люди в проекте разбираются за пятнадцать минут, а не перечитывают месяцы переписки.

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

Как дизайнер использует бриф. Хороший бриф не ложится в ящик после старта. Дизайнер возвращается к нему на каждом этапе: формирует исследование и перечень вопросов к пользователям, выбирает направление концепций, аргументирует решения на презентациях. Когда клиент говорит «мне не нравится», бриф помогает перевести разговор с личных вкусов на цели: работает ли этот вариант на аудиторию и задачи, которые мы записали. Поэтому формулируйте цели и аудиторию так, чтобы по ним можно было оценить макет.

Типичные ошибки в дизайн-брифе

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

Размытые цели. «Хотим современный сайт» не дает ни направления, ни способа оценить результат. Дизайн-команда угадывает, клиент отклоняет варианты, и проект ходит по кругу правок.

Нет критериев успеха. Без измеримых критериев согласование превращается в вопрос вкуса. Проект можно «завершить», так и не сдвинув ни одной бизнес-метрики.

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

Нет контент-плана. Дизайн согласовывают с текстом-заглушкой, потом реальный контент приходит с опозданием и не помещается. Макеты переделывают, запуск сдвигается на недели.

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

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

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

Все это дешево исправить на этапе брифа и дорого исправлять потом.

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

Шаблон дизайн-брифа

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

Как пользоваться шаблоном на практике? Заполните его самостоятельно, даже если в некоторых строках будет «не знаем». Потом отправьте агентству вместе со ссылками на текущий сайт и доступом к аналитике. После первой встречи агентство вернет дополненную версию с уточнениями, открытыми вопросами и предложением по этапам. Эта версия и становится рабочим документом проекта.

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