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

ТЗ на дизайн сайта должно описывать не абстрактную «красоту», а задачу бизнеса, аудиторию, страницы и критерии результата. В документе зафиксируйте визуальное направление, мобильную версию, состояния форм, материалы, сроки и порядок правок. Тогда заказчик и дизайнер одинаково понимают объём работы ещё до начала макетирования.

Зачем заказчику ТЗ на дизайн сайта

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

Фраза «сделайте современно» понятна только тому, кто её произнёс. Для одного владельца бизнеса это белый минимализм, для другого - крупные фотографии, яркие кнопки и анимация. Дизайнер не может угадать личные ожидания без примеров, контекста и ограничений.

Разделяйте обязательные требования и пожелания. Логотип, фирменные цвета и кнопка «Заказать консультацию» могут быть обязательными. Градиенты, анимация карточек и нестандартное меню лучше обозначить как идеи для обсуждения после решения основной задачи.

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

При удалённой работе документ особенно полезен. Если проект ведут между Алматы, Астаной и другим городом Казахстана, часть обсуждений проходит письменно. ТЗ с примерами и критериями надёжнее длинного созвона, после которого участники по-разному запомнили договорённости.

Какие данные включить в ТЗ: базовый шаблон

Начните ТЗ с исходных данных: кто заказчик, что продаёт компания, где работает и какого результата ждёт от сайта. Затем добавьте структуру, материалы, ограничения и критерии приёмки. Если пункт пока неизвестен, напишите «нужно предложить вариант». Пустое место чаще приводит к случайному решению, чем к полезной инициативе исполнителя.

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

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

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

Как описать аудиторию и цель дизайна

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

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

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

Учитывайте привычные для клиентов каналы связи. Посетителю в Казахстане может быть удобно позвонить, написать в WhatsApp, открыть карточку компании в 2GIS или получить консультацию через форму. Не размещайте все варианты одинаково заметно: в ТЗ укажите главный сценарий и запасные способы связи.

• Кто клиент: частное лицо, предприниматель, закупщик или руководитель.
• Где он находится: Алматы, Астана, другие города Казахстана или несколько стран.
• Что он уже знает о продукте и какие вопросы задаёт перед покупкой.
• Чего опасается: скрытой цены, долгого ответа, отсутствия гарантии или сложного оформления.
• Какое действие должно стать главным после просмотра страницы.

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

Как сформулировать стиль, цвета и требования к мобильной версии

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

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

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

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

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

Референсы и антипримеры: как объяснить, что нравится

Для ТЗ достаточно нескольких референсов, если к каждому есть короткое объяснение. Можно брать разные решения: у одного сайта - структуру, у другого - карточки, у третьего - работу с фотографиями. Антипримеры обозначают границы вкуса: дизайнер понимает не только направление, но и решения, которых следует избегать.

Комментарий «нравится сайт» бесполезен. Лучше написать: «нравится крупный заголовок на первом экране», «подходит спокойная зелёно-графитовая палитра», «хорошо читаются карточки услуг», «не нравится фиксированная панель, которая закрывает экран на телефоне».

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

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

Готовый пример ТЗ для лендинга

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

Проект: лендинг сервиса по обслуживанию коммерческого транспорта в Алматы. Цель: получать заявки на диагностику и расчёт ремонта. Аудитория: владельцы автопарков и управляющие, которым важны срок, гарантия и понятная смета. Стиль: деловой, уверенный, без визуального шума. Обязательные блоки: первый экран с телефоном и формой, преимущества, услуги, этапы работы, гарантия, фотографии сервиса, ответы на вопросы, контакты и карта. На мобильном экране кнопка звонка и форма должны быть доступны без долгой прокрутки. Нужны состояния формы: пустая, ошибка, успешная отправка. Референсы приложены с комментариями. Первый вариант - через согласованный срок после получения материалов, правки собираются одним списком от ответственного лица.

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

Сколько стоит сайт и что влияет на сроки

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

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

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

В стоимость разработки у нас входят домен .kz, хостинг и SSL на первый год. Для новых проектов используем современный стек, включая Next.js и React, учитываем SEO-структуру с начала работы и предусматриваем удобную админку. Поддержка и доработка после запуска доступны как ежемесячная услуга от 50 000 ₸.

Типичные ошибки в ТЗ и признаки плохого подрядчика

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

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

Не нужно фиксировать в ТЗ каждую величину отступа, если у компании нет готовой дизайн-системы. Такой контроль создаёт видимость точности, но не гарантирует удобство. Лучше закрепить функциональные требования, примеры, ограничения и критерии приёмки, а часть визуальных решений оставить специалисту.

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

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

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

• Цель сформулирована через действие посетителя, а не только через узнаваемость.
• У каждой страницы есть назначение и обязательные элементы.
• Аудитория описана через ситуацию, потребность и сомнение.
• Есть референсы с пояснением, что именно понравилось.
• Антипримеры объясняют, какие решения использовать нельзя.
• Мобильная версия и состояния интерфейса не забыты.
• Указаны готовые материалы и ответственный за недостающий контент.
• Определены сроки, порядок комментариев и число кругов правок.
• Понятно, как дизайн связан с дальнейшей разработкой и SEO-структурой.

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

Частые вопросы

Вопросы о ТЗ обычно связаны с объёмом документа, ответственностью за содержание и изменениями после старта. Ниже - практические ответы, которые помогут подготовить исходные данные, обсудить границы работы и не принять новую задачу за обычную правку уже согласованного макета.

• Нужно ли писать ТЗ, если у меня только лендинг? Да. Для лендинга достаточно описать цель, аудиторию, структуру блоков, материалы, референсы, мобильную версию и состояния формы.
• Кто должен составлять ТЗ - заказчик или дизайнер? Заказчик лучше знает бизнес и ограничения, а дизайнер помогает превратить их в рабочую структуру. Обычно документ уточняют совместно на брифинге.
• Можно ли изменить ТЗ после начала работы? Можно, если отдельно согласовать влияние изменений на цену и срок. Новая страница, другой сценарий формы или смена аудитории уже не считаются обычной правкой.
• Сколько референсов достаточно? Нескольких примеров с комментариями обычно хватает. Большая подборка без пояснений смешивает разные стили и усложняет выбор направления.
• Нужно ли указывать точные цвета и размеры? Обязательные правила брендбука укажите точно. Остальные параметры лучше описать через задачу, контраст, читаемость и примеры.
• Входит ли дизайн в стоимость разработки сайта? Это зависит от состава проекта и договора. Попросите отдельно указать макеты, программирование, контент, интеграции и количество правок.

С чего начать подготовку ТЗ

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

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