1. Тренинг
«Разработка интернет-
магазина: от идеи до
реализации»
Артём Марков
web4sale.ru

3. ПРОБЛЕМЫ

4. Проблемы
• Не знаем чего хотим
• Не знаем что получится
• Не знаем как сделать
• Встречаемся с проблемой взаимодействия
– С подрядчиками
– С фрилансерами
– Своей командой
• Проблемы соблюдения сроков
• Оптимизаторы говорят что такой сайт
продвигать не получиться – переделывайте
• Проблема поддерживать сайт в дальнейшем

5. ВИДЕНИЕ ПРОЕКТА

6. Обычное ТЗ
- Выглядит как текстовый документ
- Скучный настолько, что второй раз
открывать тяжко
- Предназначен для того, чтобы тыкать друг-
друга при разрешении проблем
- Много формальностей, что снижает его
ценность

7. ТЗ для интернет-магазинов сложнее
- Каждое место должно продавать
- Задача: довести покупателя до цели
- Нужно продумать взаимодействие и
работу сложных и интерактивных
элементов
- Информация о товарах не передается в
виде текста статьи, как на
информационном сайте

8. Матричный вид технического задания

9. Преимущества
 Понимание смысла каждого элемента на протяжении
всего проекта
 Всем участникам проекта понятно зачем и как они это
делают, в соответствии с этим подстраивают результат
своей работы под конечную цель элемента
 Видно визуально что это за элемент и где он должен
находиться – каждый представляет по-своему
 Для сработавшейся команды, для того чтобы начать
работать хватает wireframe макета это уменьшает время
производства сайта

10. 1. Определение целей
(стратегия)
 Изучаем рынок
 Выбираем нишу и основную линейку продуктов
 Создаем портрет посетителя
 Делаем УТП для рынка

11. 2. Определение функционала для достижения цели
(тактика)
 Изучаем функционал конкурентов
 Опросы аудитории на форумах
 Работа с покупателями
 Работа с «экстремальными пользователями»
 Корректировка портрета посетителя
 Выписываем найденный функционал
 Сортируем по важности для пользователя
 Сортируем по ROI
 Выбор CMS

12. 3. Создание прототипа
 Распределяем элементы из базового набора
 Распределяем элементы необходимые в этой нише
 Получаем первую обратную связь
 Можем начинать разработку

13. 4. Дизайн
 Отдаем прототип дизайнеру на «раскраску»
 Снабжаем дизайнера регламентом работ и ТЗ
 Получаем:
1. Сокращение стоимости
2. Сокращение сроков
3. Хорошие отношения

14. 5. Верстка
 Передаем дизайн верстальщику (им может быть и
программист)
 Снабжаем верстальщика регламентом работ и ТЗ
 (!) Верстальщик должен быть со знанием Jquery
 Отладка верстки и проверка элементов
 Получаем:
1. Верстку со скриптами
2. Понимание проекта
верстальщиком

15. 6. Программирование Backend
 На основе готовой и отлаженной верстки можем начать
программировать публичную часть
 При программировании сверяемся с пунктами:
• Цели
• Функции
• Прототип
• Верстка

16. 7. Программирование Frontend
 На основе предыдущего шага делаем публичную часть
сайта и сверяемся с пунктами:
• Цели
• Функции
• Прототип
• Верстка
• Программирование
Backend

17. 8. Наполнение
 Информационные страницы
 Каталог товаров

18. 9. Тестирование
 Тестирование всех этапов, поскольку изменяя что-то
одно мы можем случайно испортить другое
• Про это часто забывают
• На фрилансе эту часть работ возлагают на заказчика

19. Как это ТЗ в итоге выглядит?

20. ПРОЦЕСС

21. Линейный и оптимизированный процесс:

22. Оптимизированный процесс:

23. Оптимизированный процесс:

24. Старт!
 Цели
 Календарный план работ
 Стоимость разработки

25. 1. Сбор сведений
 Анализируем рынок, инструменты:
• Wordstat
• Счетчики конкурентов
• Чек конкурентов
 Анализ аудитории
 Составляем портрет посетителя
 Начинаем Backend Программирование
Получаем:

26. 2. Техническое задание
Нужно: Сбор сведений
Получаем: Макет сайта
 Макет сайта
 Распределяем элементы из базового набора
 Распределяем элементы необходимые
Нужно: Сбор сведений
в этой нише
 Начинаем Backend Программирование Нужно: Макет сайта
Получаем: Текстовое ТЗ
 Текстовое ТЗ Контроль:
Относительно сбора сведений

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

28. 4. Backend программирование
 Нужно
 Сбор сведений
 Учет фильтров по параметрам
 Покупка лицензии
 Установка CMS
 Настроить ЧПУ
 Поставить на базовом шаблоне

29. 5. Написание текстов для информационных страниц
 Нужно
 Сбор сведений
 Страницы, на которые нужен текст:
 Главная
 О компании
 Доставка и оплата
 Контакты
 Гарантия
 Каталог
 Раздел каталога 1
 Раздел каталога …

30. 6. Интеграция на стандартном шаблоне из коробки
 Нужно
 Готовое Backend Программирование
 Тексты информационных страниц
 Делается для:
 Скорейшей индексации

31. 6. Интеграция на стандартном шаблоне из коробки
6.1 Выкладка текстов
 Нужно
 Готовое Backend Программирование
 Тексты информационных страниц
 Делается для:
 Скорейшей индексации

32. 7. Заполнение товарами «вслепую»
 Нужно
 Готовое Backend Программирование
 Определены и запрограммированы фильтры
 Делается для:
 Скорейшей индексации
 Сокращение сроков производства
 Уже можно тестировать работу фильтров
- Минусы:
- Не отображается все так, как будет в финале
- Нужен второй проход

33. 7. Заполнение товарами «вслепую»
 Персонал: Менеджер контент-менеджеров
 Набор фрилансеров
 Раздача заданий
 Распараллеливание работ
 Контроль по времени
 Контроль по качеству
 Расчет с фрилансерами
 Определение фильтров
 Тз на заполнение

34. 8. Дизайн
 Нужно
 Сбор сведений
 Макет сайта
 Страницы для отрисовки:
 Главная
 Каталог
 Товар
 Корзина
 Корзина …
 Сравнение
 Результаты поиска
 Страница не найдена 404
 Результат работы фильтра
 Статья
 Контакты
 Контроль:
 Соответствие макету
 Отражение интерактива
 Расстановка маяков
 Юзабилити чеклист

35. 9. Верстка
 Нужно
 Дизайн
 ТЗ макет
 ТЗ текст
 Контроль:
 Валидность
 Кросс-браузерность
 Соответствие дизайну

36. 10. Frontend программирование
 Нужно
 ТЗ макет
 ТЗ текст
 Верстка
 Тексты
 Товары
 Контроль:
 Проверка валидности
 Проверка скриптов
 Работа программы

37. 11. Тест всех систем
 Дизайн
 Программирование
 Заполнение

38. Финиш!

39. ИТОГО

40. В программу включено:
 29 декабря – первое задание для закрытой группы «Маркетинг для
интернет-магазинов».
 10 января (вторник) старт для 2х групп – обратная связь по первой части:
разбор ДЗ (пишите отчеты).
«Обработка прайс-листа и определение ассортимента».
 13 января (пятница) Гостевая лекция «Копирайтинг для интернет-
магазинов»
 16 января (понедельник) «Проектирование интернет-магазина»
 18 января (среда) «Составление технического задания на создание
интернет-магазина»
 21 января (суббота) Гостевая лекция «Брендинг для интернет-магазинов»
 23 января (понедельник) «Взаимодействие с фрилансерами и своей
группой разработки»
 25 января (среда) Гостевая лекция «Составление договора и
взаимодействие с вебстудией»
 27 января (пятница) – финал для Silver и Gold группы
 28 января (суббота) – VIP день и финал для Platinum группы – личная
встреча участников и живой однодневный тренинг.

41. web4sale.ru/kak
Артём Марков
artem.markov@web4sale.ru
+7(916)182-32-81