ТЗ для дизайнера: шаблон, по которому получаешь нужный результат с первого раза

Что такое ТЗ для дизайнера и чем оно отличается от брифа

Термины часто путают. Бриф описывает бизнес и задачу: кто вы, кто клиент, что продаёте, какая цель. Техническое задание описывает, что конкретно сделать: размеры, тексты, элементы, форматы. На маленьких задачах вроде баннера или поста их объединяют в один документ, и это нормально.

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

Универсальный шаблон ТЗ: 10 пунктов

Этот шаблон подходит для любой дизайнерской задачи. Скопируйте и заполните, пустые пункты удалите.

1. Что нужно сделать. Одна строка: «баннер для рекламы во ВКонтакте», «логотип для кофейни», «дизайн главной страницы сайта».
2. Кто вы и что продаёте. Два-три предложения о бизнесе, без истории компании.
3. Для кого. Кто увидит результат, что для этих людей важно, чего они боятся.
4. Где будет размещено. Площадка, носитель, размеры, формат. От этого зависит всё остальное.
5. Главная задача. Что должен сделать или понять человек: нажать, позвонить, запомнить название, отличить от конкурента.
6. Обязательные тексты и элементы. Готовые тексты дословно, логотип, телефон, QR-код, пометка «Реклама» и данные рекламодателя, если это реклама.
7. Фирменный стиль. Цвета с кодами, шрифты, логотип в векторе, брендбук, если есть.
8. Референсы. 3–5 примеров «нравится» и 2–3 «не нравится», с объяснением.
9. Ограничения. Что нельзя: цвета конкурента, фото людей, мелкий текст, определённые образы.
10. Сдача и условия. Формат файлов, срок, сколько вариантов, сколько кругов правок, нужны ли исходники.

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

Как написать ТЗ на баннер

Баннер живёт секунды: человек листает ленту или страницу и решает, остановиться ли. Поэтому в ТЗ на баннер важна конкретика по месту размещения.

Что указать:

• Площадку и формат. Реклама в Яндекс Директе, во ВКонтакте, сторис, баннер на сайте, растяжка на улице. У каждой площадки свои размеры и требования; для Директа они описаны в справке Яндекса об изображениях, там же предупреждение, что картинку при показе могут обрезать под разные форматы.
• Все размеры сразу. Если нужны квадрат, вертикаль и широкий формат, перечислите их в ТЗ. Адаптация потом стоит отдельно.
• Один главный текст. Заголовок до 5–7 слов и, если нужно, одна строка уточнения. Остальное переносите в текст объявления.
• Кнопку или призыв. «Записаться», «Рассчитать стоимость», «Купить со скидкой».
• Обязательные пометки. Для интернет-рекламы в России действует маркировка: пометка «Реклама» и сведения о рекламодателе, правила описаны в статье 18.1 закона «О рекламе». Часто их размещают в самом объявлении, но место под них стоит оговорить с дизайнером заранее.

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

Как написать ТЗ на логотип

Логотип — долгая история: он будет на вывеске, в аватарке, на упаковке, в документах. Ошибка в ТЗ здесь обходится дороже всего, потому что всплывает через полгода, когда логотип не помещается на кружку или не читается на тёмном фоне.

Что указать:

• Название точно так, как оно должно быть написано. Регистр букв, латиница или кириллица, нужен ли дескриптор (короткая подпись «кофейня у дома»).
• Где будет использоваться. Список носителей: сайт, аватарка в соцсетях, вывеска, упаковка, одежда, печать. От этого зависит, насколько сложный знак допустим.
• Какой тип логотипа нужен. Только шрифтовой, знак плюс название, эмблема. Если не знаете, попросите дизайнера предложить и объяснить выбор.
• Варианты сдачи. Основной, горизонтальный и вертикальный, одноцветный, вариант для тёмного фона, маленький значок для аватарки и иконки сайта.
• Форматы. Вектор (SVG, PDF или AI), PNG с прозрачным фоном, коды цветов для экрана и печати.
• Планы на товарный знак. Если хотите регистрировать логотип, скажите об этом сразу: нужен оригинальный знак без чужих элементов.

Сколько это стоит у фрилансера и студии и что должно входить в цену, разбирали в статье сколько стоит логотип.

Если разговор с дизайнером идёт по кругу и вы не можете объяснить, каким видите первый экран сайта, иногда проще увидеть готовый вариант и поправить его.

Как написать ТЗ дизайнеру на сайт

Дизайнер сайта не придумывает структуру и тексты с нуля, он оформляет то, что уже решено. Поэтому ТЗ на дизайн сайта опирается на два документа: структуру (что и в каком порядке на страницах) и тексты. Если структуры нет, начните с прототипа сайта: дизайн без него почти всегда переделывают.

Что указать дизайнеру в дополнение к общему шаблону:

• Список страниц и экранов. Главная, услуга, контакты, всплывающая форма, страница «спасибо».
• Откуда придут люди. Из рекламы, из поиска, с Карт. От этого зависит первый экран.
• Что считается заявкой. Звонок, форма, мессенджер, запись онлайн. Кнопки должны быть на виду.
• Мобильная версия. Большая часть трафика малого бизнеса часто идёт с телефона, поэтому просите макет мобильной версии каждого экрана, а не только ширину ноутбука.
• На чём будет сайт. Тильда, другой конструктор, своя вёрстка. Дизайнер должен рисовать то, что потом можно собрать.
• Состояния элементов. Как выглядит кнопка при наведении, ошибка в форме, пустое поле.

Полный порядок работы над дизайном сайта, от этапов до приёмки макета и прав на исходники, есть в статье заказать дизайн сайта.

Примеры формулировок: плохо и хорошо

Большинство переделок начинается с размытых слов. Вот как их переписать.

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

Условный пример: ТЗ на баннер для клининга

Пример условный, не кейс студии. Клининговая компания в Казани, средний чек 6 000 ₽, запускает рекламу уборки после ремонта во ВКонтакте.

Задача: рекламный баннер для ВКонтакте. Бизнес: клининг в Казани, уборка квартир после ремонта, работаем 5 лет. Аудитория: люди, которые закончили ремонт и устали; боятся, что уберут плохо и придётся переделывать. Размеры: 1080×1080 и 1080×1920 (для историй). Главная задача: нажать «Рассчитать стоимость». Тексты: заголовок «Уборка после ремонта за 1 день», подзаголовок «Отмоем пыль, краску и окна. От 6 000 ₽». Элементы: логотип в правом верхнем углу, кнопка внизу. Стиль: цвета из логотипа, фото чистой светлой комнаты, без людей в униформе с фотостока. Не нравится: коллажи «до/после» из четырёх фото, мелкий текст, много восклицательных знаков. Сдача: PNG и исходник в Фигме, 2 варианта, 2 круга правок, срок 3 рабочих дня.

Что даёт такое ТЗ в цифрах. Без него типичный сценарий выглядит так: первый вариант мимо, три-четыре круга переписки, неделя вместо трёх дней. Если дизайнер берёт 1 500 ₽ за круг правок сверх пакета, лишние два круга стоят 3 000 ₽ плюс неделя без рекламы. При 3 заявках в день и конверсии в заказ 30% неделя простоя — это около 6 несостоявшихся заказов по 6 000 ₽, то есть 36 000 ₽ упущенной выручки. Цифры условные, но видно главное: сдвиг запуска обходится дороже самих правок.

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

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

Порядок приёмки:

1. Сверьте с ТЗ по пунктам. Размеры, тексты, обязательные элементы, форматы. На этом шаге вы проверяете только, сделано или нет; вкус обсуждаете позже.
2. Посмотрите в реальном размере. Баннер — на телефоне в ленте, логотип — в аватарке и на вывеске (можно на мокапе), сайт — на своём смартфоне.
3. Покажите тому, кто похож на клиента. Не всему офису, а одному-двум людям из аудитории. Спросите: «Что здесь предлагают? Что нужно сделать?»
4. Соберите правки одним списком от одного человека. Пронумеруйте, укажите место и что не так. «Заголовок не читается на фото — затемнить фон» лучше, чем «как-то не то».
5. Отделите правки от новой задачи. «Поменять цвет кнопки» — правка. «А давайте ещё вертикальный вариант» — новая работа, которой не было в ТЗ.
6. Примите файлы. Проверьте, что пришли все форматы, исходники открываются, шрифты есть в списке с лицензиями.

По умолчанию по части четвёртой Гражданского кодекса судьба прав на заказное произведение зависит от договора: статьи 1288 и 1296 позволяют передать заказчику исключительное право или только право использования. Если логотип или сайт должен принадлежать вам целиком, пропишите передачу исключительного права и исходников в договоре явно.

Частые ошибки в ТЗ для дизайнера

• Нет места размещения. Дизайнер рисует «вообще», потом выясняется, что нужна вертикаль для историй.
• Тексты «потом». Дизайн под выдуманный текст приходится перерисовывать, когда приходит настоящий, в три раза длиннее.
• Референсы без объяснения. Пять ссылок без слов «что нравится» дизайнер прочитает по-своему.
• Слишком много согласующих. Правки от трёх человек противоречат друг другу, и круги не заканчиваются.
• Не сказано про исходники и права. Через год нужно поменять телефон на баннере, а исходника нет.
• ТЗ на всё сразу. Логотип, сайт и 20 баннеров одним документом. Лучше по отдельному ТЗ на каждую задачу.
• Нет критерия готовности. Если в ТЗ не записано, что сдаётся и в каком виде, приёмка превращается в спор о вкусе.

Что делать, если ТЗ писать некогда

Короткий путь: созвон на 20–30 минут, где дизайнер задаёт вопросы по шаблону выше, а потом сам присылает ТЗ на согласование. Хороший подрядчик так и делает. Если он берётся за работу без единого вопроса, это повод насторожиться.

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