Техническое задание и прототип сайта
Прототип сайта и техническое задание — способ договориться о результате до того, как на него потрачены деньги. Рисуем кликабельный прототип, пишем ТЗ на разработку сайта или сервиса и считаем по нему смету. ТЗ ваше: его можно отдать любому подрядчику.
Зачем начинать с ТЗ
Смета «от» выросла вдвое уже в ходе работ
С ТЗ смета считается по списку функций, а не по впечатлению от созвона. Всё, что добавляется потом, видно и оценивается отдельно.
Разработчик сделал не то, что вы представляли
Прототип показывает результат заранее: вы щёлкаете по экранам и правите их до того, как написан код.
Приёмка превратилась в спор
В ТЗ записаны критерии приёмки: что должно работать и как это проверить. Спорить не о чем.
Подрядчики называют несравнимые цены
Одно ТЗ для всех — и цены становятся сравнимыми, а разница в подходе видна сразу.
Что такое прототип сайта простыми словами
Прототип — это чертёж сайта: какие страницы будут, какие блоки на каждой, куда ведут кнопки и что видит посетитель на каждом шаге. Как план квартиры перед ремонтом: по нему видно, где стены и двери, но ещё не выбраны обои. Разделы и страницы берём не из головы, а из семантического ядра для структуры: так в карте сайта оказывается то, что клиенты действительно ищут.
Прототип делают в серых тонах, без фотографий и фирменных цветов — чтобы обсуждать логику и удобство, а не оттенок кнопки. Кликабельный прототип можно открыть в браузере или на телефоне и пройти путь посетителя: от главной до заявки. По согласованному прототипу дальше работает студия веб-дизайна и разработки.
Чем прототип отличается от дизайна. Прототип отвечает на вопрос «что и где», дизайн сайта — «как это выглядит»: цвета, шрифты, фото, характер бренда. Дизайн рисуют поверх согласованного прототипа, поэтому переделок становится заметно меньше.
Прототипирование сайта: виды прототипов
Глубину прототипа выбираем под задачу: для лендинга хватит одного, для сервиса нужен другой.
Что это
- Скетч
- набросок от руки или в редакторе
- Wireframe
- статичные серые экраны с блоками
- Кликабельный прототип
- wireframe со связанными экранами в Figma
- Интерактивный прототип
- почти работающий интерфейс: формы, состояния, анимация
Для чего
- Скетч
- быстро обсудить идею и структуру
- Wireframe
- согласовать структуру и содержание страниц
- Кликабельный прототип
- пройти путь посетителя, проверить сценарии
- Интерактивный прототип
- сложные сервисы, тесты с пользователями
Сколько работы
- Скетч
- меньше всего
- Wireframe
- немного
- Кликабельный прототип
- средне
- Интерактивный прототип
- больше всего
Для сайта услуг и лендинга обычно хватает кликабельного прототипа. Для веб-сервисов, кабинетов и приложений — кликабельного или интерактивного, потому что сценариев больше и ошибка дороже. Инструменты — Figma, иногда Axure для сложной логики.
ТЗ на разработку сайта: из чего состоит
Десять разделов, которые есть в каждом нашем техзадании на разработку сайта. Пример ТЗ присылаем по заявке.
Цели и задачи
Зачем сайт и как поймём, что он работает: заявки, продажи, записи.
Целевая аудитория
Кто приходит на сайт, с какими вопросами и с какого устройства.
Структура и карта сайта
Разделы и страницы, адреса, меню, связи между страницами.
Блоки страниц
Что на каждой странице: тексты, формы, фото, калькуляторы. Ссылка на прототип.
Функции
Формы, фильтры, корзина, личный кабинет, поиск — что именно делает каждая.
Интеграции
CRM, 1С, оплата, доставка, телефония: что и в какую сторону передаётся.
Панель управления
Что владелец сайта меняет сам: тексты, цены, товары, баннеры.
Мобильная версия и скорость
Как сайт выглядит на телефоне, требования к загрузке.
SEO и аналитика
Мета-теги, адреса, разметка, цели в Метрике.
Критерии приёмки
Как проверить, что всё сделано: список проверок для каждой функции.
Разработка ТЗ для программного продукта
ТЗ на разработку системы или сервиса сложнее, чем на сайт: здесь важны не страницы, а сценарии и данные. В таком ТЗ описываем:
- роли пользователей — клиент, менеджер, администратор, и что может каждый;
- пользовательские сценарии — пошагово: что делает человек и что отвечает система;
- функциональные требования — что система должна уметь;
- нефункциональные требования — скорость, нагрузка, безопасность, где хранятся данные;
- интеграции — с какими системами обменивается данными и в каком формате;
- критерии приёмки — по каждому сценарию.
Такое ТЗ — основа для разработки ПО на заказ с фиксированной сметой. Если продукт новый и спрос не проверен, ТЗ пишем сразу под первую версию — MVP, чтобы не проектировать то, что может не понадобиться.
Проекты, которые начинались с ТЗ
Сервис и платформа, для которых мы сначала описали сценарии и требования, а потом по ним разрабатывали и принимали работу.
Сервис кластеризации поисковых запросов
Свой сервис, который раскладывает поисковые запросы по будущим страницам сайта по выдаче Яндекса: смета до сбора, ручные правки, выгрузка в Excel.
Платформа для сети сайтов
Своя платформа для запуска и ведения многих сайтов: библиотека блоков с превью, шаблоны страниц, медиатека, меню и дублирование сайта в один клик.
Сколько стоят техзадание и прототип
Прототип и ТЗ сайта
структура, прототип ключевых страниц, ТЗ из десяти разделов, смета
Прототип и ТЗ сервиса
роли, сценарии, интерактивный прототип, требования, критерии приёмки
Если разработку потом делаем мы, стоимость ТЗ засчитываем в неё. Цена зависит от числа страниц или экранов, ролей, интеграций и глубины прототипа.
Как мы делаем создание прототипа сайта и ТЗ
- 01
Бриф и интервью
Разговариваем с вами и сотрудниками, которые работают с клиентами. Вы получаете записанные цели и ограничения.
- 02
Анализ конкурентов
Смотрим, как устроены сайты конкурентов и что ищут клиенты. Для структуры сайта используем семантическое ядро.
- 03
Структура и сценарии
Карта сайта или сервиса и пути пользователей. Вы согласуете схему.
- 04
Прототип
Кликабельный прототип ключевых экранов. Вы проходите его сами, при желании — с будущими пользователями.
- 05
ТЗ и смета
Техзадание по десяти разделам и смета по функциям. Вы получаете документы, которые можно отдать любому подрядчику.
Вопросы о ТЗ и прототипе
Что такое прототип сайта?
Что такое прототип простыми словами?
Как сделать прототип самому и в какой программе?
Чем прототип отличается от дизайна сайта?
Кто должен писать ТЗ — заказчик или разработчик?
Можно ли отдать ваше ТЗ другому подрядчику?
Сколько времени занимают ТЗ и прототип?
Засчитывается ли стоимость ТЗ в разработку?
Готовое ТЗ — основа для разработки сайта по ТЗ с фиксированной сметой. Если сайт уже есть и нужно понять, что в нём мешает посетителям, начните с юзабилити-аудита. А если нужен взгляд со стороны на всю ИТ-часть компании — это ИТ-консалтинг.
Обсудим ваш проект
Заявку читает руководитель проекта, а не колл-центр и не автоответчик.
Что будет после заявки
- Укажите удобный способ связи для обсуждения задачи.
- Созвонимся, чтобы понять задачу, цифры и ограничения.
- Предложим план: что сделать, в каком порядке, кто из команды подключится и сколько это стоит.
Заявка ни к чему не обязывает. Если задача окажется не нашей, скажем прямо и подскажем, куда обратиться.
Расскажите о задаче
Имени и телефона достаточно. Подробности можно добавить сразу или обсудить при звонке.