Роман Симачевский: Проектируем сайт

1. Проектируем сайт
или Как составить правильное
техническое задание

2. • Весь комплекс подготовительных работ, которые предшествуют
началу разработки сайта.
• Его основная задача – максимально точно и подробно описать, что
конкретно нужно сделать разработчикам
• Это аналог чертежей и проектной документации, которые готовятся
перед началом строительства дома
Что такое проектирование сайтов
и для чего оно нужно

3. Люди все ищут в интернете, значит надо делать сайт
Часто подготовка к разработке выглядит так

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

5. Ребят, мне надо сайт типа вот этого. И чтобы оттуда заказ
можно было отправить
Часто подготовка к разработке выглядит так

6. • ГОСТ 34.602-89 по созданию ТЗ на автоматизированную
систему, утвержденный в 1990 году
• Собственные форматы написания ТЗ у разных
разработчиков
• Многие заказчики под ТЗ понимают краткую постановку
задачи
• Например, такую: есть 3 розничные точки, которые торгуют
запчастями для 4 марок. Данные о продажах и складских остатках
сливаются в единую 1С. Нужно сделать сайт, на котором будет 4
раздела по маркам, с указанием какая деталь в какой из точек есть
в наличии.
Техзаданием на сайт могут называть очень разные
документы

7. Возможные причины:
• Сайт был недостаточно подробно описан и разработчик
ошибся в оценке сроков работы
• Сайт был недостаточно подробно описан и у заказчика в
процессе работы появились новые хотелки.
Две трети крупных проектов заканчиваются с
превышением сроков и бюджета

8. Разработка сайта без ТЗ или по поверхностному
заданию имеет риски

9. Разработка сайта без ТЗ или по поверхностному
заданию имеет риски
• Может быть превышено время разработки
• Может быть превышена стоимость разработки
• Может получиться не совсем то, что вы хотели
• Может получиться не совсем то, что вам на самом
деле нужно
• В процессе эксплуатации сайта обнаружатся не
предусмотренные узкие места
• Можете потратить на это больше денег, чем оно на
самом деле стоит – ведь у разработчика тоже есть
риски.

10. Большое подробное ТЗ – для сложных
индивидуальных проектов?
• Много стандартных ситуаций и потребностей
• Много готовых решений для этих ситуаций
Но ТЗ – это в первую очередь планирование

11. Постановка задачи
• Что мы хотим получить от этого сайта?
• Кто им будет пользоваться?
• Как планируем его развивать в будущем?
• Что на нем нужно отразить?
• Какие исходные данные хотим интегрировать?

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

13. Аудитория сайта – сценарный метод
• Берем данные о типовом пользователе у своих
продавцов (анкеты)
• Придумываем сводный портрет
• Сочиняем сценарий поведения на сайте
• Отталкиваемся от сценариев при разработке
структуры

14. Аудитория сайта – сценарный метод
Например:

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

16. Описание программных модулей
Состав элементов для базы данных
Пример – сколько характеристик у товара в каталоге? Для
простой футболки это могут быть:
• название,
• артикул,
• состав ткани,
• цвет, размер,
• у каждого цвета и размера своя цена,
• максимальная скидка,
• картинка,
• Наличие на складах для каждого соотношения цвет/размер

17. Описание программных модулей
Помимо состава элементов для каждого модуля будет
полезно сделать общую сводную схему для всех модулей
– структуру баз данных сайта

18. Описание программных модулей
Описание механизма работы модуля
• Весь процесс работы: как рубрицируются данные, как
присваиваются статусы, как действуют пользователи
• Сценарии, происходящие при нажатиях на кнопки
• Перечень возможных состояний модуля (пустой экран,
мало информации, много информации)

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

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

21. Создание прототипов
Пример прототипа

22. Требования к верстке
Вспоминаем сценарии и думаем о разных устройствах.
Скорее всего сайтом будут пользоваться с мобильников и
ему понадобится адаптивная версия верстки.
Нужно показать это на прототипах

23. Требования к системе администрирования
Описание требований к CMS:
• нужен ли распределенный доступ к разным
разделам
• как должна быть организована структура админки
• требования к оформлению

24. Интеграция с другими системами
• Если у вас интернет-магазин, то нужно передавать
данные о складских остатках в реальном времени из
1С.
• Создание счета для юрлица: нужно генерить номер
счета и передавать его, потом передавать в личный
кабинет данные об оплате из 1С.
• Можно интегрировать базу клиентов, заявки по почте
и прочее.
• Нужно прописать в ТЗ, каким образом будет
происходить этот обмен данными

25. Переезд со старого сайта
Если новый сайт делается на замену старому, в ТЗ нужен
отдельный пункт

26. Переезд со старого сайта
Нужно описать:
– Как будут переноситься данные со старого сайта
– Адреса каких страниц должны остаться прежними
– Какие нужно прописать редиректы, чтобы не потерять
посещаемость из поисковиков (нужен анализ
поискового трафика).

27. ТЗ готово, что дальше?
Отдавайте его на оценку разработчику. Хотите
устроить тендер – отдавайте нескольким
Подписывая договор, разделите работу на этапы с
дробной оплатой – это дисциплинирует и не дает
работе затянуться.
Дизайн, верстка, первая очередь, вторая и т.д.

28. Планирование внедрения
Параллельно с разработкой планируйте внедрение
нового сайта.
• Изменится ли как-то процедура продаж и
отчетности?
• Будут ли изменения в работе с клиентами?
• Кто будет готовить первичные материалы для сайта?
• Кто будет делать текущие материалы (новости,
анонсы и т.п.)?
• Запускайте новый сайт и наслаждайтесь

29. Спасибо за внимание!
Роман Симачевский
simachevsky@gmail.com
www.1stepprojects.com