Download - Проектирование большого интернет-магазина
![Page 1: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/1.jpg)
Тренинг «Разработка интернет-магазина: от идеи до
реализации»Артём Марков
web4sale.ru
![Page 2: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/2.jpg)
![Page 3: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/3.jpg)
ПРОБЛЕМЫ
![Page 4: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/4.jpg)
Проблемы
• Не знаем чего хотим• Не знаем что получится• Не знаем как сделать• Встречаемся с проблемой взаимодействия
– С подрядчиками– С фрилансерами– Своей командой
• Проблемы соблюдения сроков• Оптимизаторы говорят что такой сайт продвигать не
получиться – переделывайте• Проблема поддерживать сайт в дальнейшем
![Page 5: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/5.jpg)
ВИДЕНИЕ ПРОЕКТА
![Page 6: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/6.jpg)
Обычное ТЗ
- Выглядит как текстовый документ- Скучный настолько, что второй раз
открывать тяжко- Предназначен для того, чтобы тыкать друг-
друга при разрешении проблем- Много формальностей, что снижает его
ценность
![Page 7: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/7.jpg)
ТЗ для интернет-магазинов сложнее
- Каждое место должно продавать- Задача: довести покупателя до цели- Нужно продумать взаимодействие и
работу сложных и интерактивных элементов
- Информация о товарах не передается в виде текста статьи, как на информационном сайте
![Page 8: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/8.jpg)
Матричный вид технического задания
![Page 9: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/9.jpg)
Преимущества
Понимание смысла каждого элемента на протяжении всего проекта
Всем участникам проекта понятно зачем и как они это делают, в соответствии с этим подстраивают результат своей работы под конечную цель элемента
Видно визуально что это за элемент и где он должен находиться – каждый представляет по-своему
Для сработавшейся команды, для того чтобы начать работать хватает wireframe макета это уменьшает время производства сайта
![Page 10: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/10.jpg)
1. Определение целей(стратегия)
Изучаем рынок Выбираем нишу и основную линейку продуктов Создаем портрет посетителя Делаем УТП для рынка
![Page 11: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/11.jpg)
2. Определение функционала для достижения цели(тактика)
Изучаем функционал конкурентов Опросы аудитории на форумах Работа с покупателями Работа с «экстремальными пользователями» Корректировка портрета посетителя
Выписываем найденный функционал Сортируем по важности для пользователя Сортируем по ROI
Выбор CMS
![Page 12: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/12.jpg)
3. Создание прототипа
Распределяем элементы из базового набора Распределяем элементы необходимые в этой нише
Получаем первую обратную связь
Можем начинать разработку
![Page 13: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/13.jpg)
4. Дизайн
Отдаем прототип дизайнеру на «раскраску» Снабжаем дизайнера регламентом работ и ТЗ
Получаем:1. Сокращение стоимости2. Сокращение сроков3. Хорошие отношения
![Page 14: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/14.jpg)
5. Верстка
Передаем дизайн верстальщику (им может быть и программист)
Снабжаем верстальщика регламентом работ и ТЗ (!) Верстальщик должен быть со знанием Jquery Отладка верстки и проверка элементов
Получаем:1. Верстку со скриптами2. Понимание проекта
верстальщиком
![Page 15: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/15.jpg)
6. Программирование Backend
На основе готовой и отлаженной верстки можем начать программировать публичную часть
При программировании сверяемся с пунктами:• Цели• Функции• Прототип• Верстка
![Page 16: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/16.jpg)
7. Программирование Frontend
На основе предыдущего шага делаем публичную часть сайта и сверяемся с пунктами:• Цели• Функции• Прототип• Верстка• Программирование
Backend
![Page 17: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/17.jpg)
8. Наполнение
Информационные страницы Каталог товаров
![Page 18: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/18.jpg)
9. Тестирование
Тестирование всех этапов, поскольку изменяя что-то одно мы можем случайно испортить другое
• Про это часто забывают• На фрилансе эту часть работ возлагают на заказчика
![Page 19: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/19.jpg)
Как это ТЗ в итоге выглядит?
![Page 20: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/20.jpg)
ПРОЦЕСС
![Page 21: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/21.jpg)
Линейный и оптимизированный процесс:
![Page 22: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/22.jpg)
Оптимизированный процесс:
![Page 23: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/23.jpg)
Оптимизированный процесс:
![Page 24: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/24.jpg)
Старт!
Цели Календарный план работ Стоимость разработки
![Page 25: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/25.jpg)
1. Сбор сведений
Анализируем рынок, инструменты:• Wordstat• Счетчики конкурентов• Чек конкурентов
Анализ аудитории Составляем портрет посетителя Начинаем Backend Программирование
Получаем:
![Page 26: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/26.jpg)
2. Техническое задание
Макет сайта Распределяем элементы из базового набора Распределяем элементы необходимые
в этой нише Начинаем Backend Программирование
Текстовое ТЗ
Нужно: Сбор сведений
Получаем: Макет сайта
Нужно: Сбор сведений
Нужно: Макет сайта
Получаем: Текстовое ТЗ
Контроль:
Относительно сбора сведений
![Page 27: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/27.jpg)
3. Определить параметры для подборщика и фильтрации
Нужно Прайс листы
Это нужно для: Backend Программирования, но не задерживает его выход
![Page 28: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/28.jpg)
4. Backend программирование
Нужно Сбор сведений Учет фильтров по параметрам Покупка лицензии
Установка CMS Настроить ЧПУ Поставить на базовом шаблоне
![Page 29: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/29.jpg)
5. Написание текстов для информационных страниц
Нужно Сбор сведений
Страницы, на которые нужен текст: Главная О компании Доставка и оплата Контакты Гарантия Каталог
Раздел каталога 1 Раздел каталога …
![Page 30: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/30.jpg)
6. Интеграция на стандартном шаблоне из коробки
Нужно Готовое Backend Программирование Тексты информационных страниц
Делается для: Скорейшей индексации
![Page 31: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/31.jpg)
6. Интеграция на стандартном шаблоне из коробки6.1 Выкладка текстов
Нужно Готовое Backend Программирование Тексты информационных страниц
Делается для: Скорейшей индексации
![Page 32: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/32.jpg)
7. Заполнение товарами «вслепую»
Нужно Готовое Backend Программирование Определены и запрограммированы фильтры
Делается для: Скорейшей индексации Сокращение сроков производства Уже можно тестировать работу фильтров
- Минусы:- Не отображается все так, как будет в финале- Нужен второй проход
![Page 33: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/33.jpg)
7. Заполнение товарами «вслепую»
Персонал: Менеджер контент-менеджеров Набор фрилансеров Раздача заданий Распараллеливание работ Контроль по времени Контроль по качеству Расчет с фрилансерами Определение фильтров Тз на заполнение
![Page 34: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/34.jpg)
8. Дизайн Нужно
Сбор сведений Макет сайта
Страницы для отрисовки: Главная Каталог Товар Корзина Корзина … Сравнение Результаты поиска Страница не найдена 404 Результат работы фильтра Статья Контакты
Контроль: Соответствие макету Отражение интерактива Расстановка маяков Юзабилити чеклист
![Page 35: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/35.jpg)
9. Верстка
Нужно Дизайн ТЗ макет ТЗ текст
Контроль: Валидность Кросс-браузерность Соответствие дизайну
![Page 36: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/36.jpg)
10. Frontend программирование
Нужно ТЗ макет ТЗ текст Верстка Тексты Товары
Контроль: Проверка валидности Проверка скриптов Работа программы
![Page 37: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/37.jpg)
11. Тест всех систем
Дизайн Программирование Заполнение
![Page 38: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/38.jpg)
Финиш!
![Page 39: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/39.jpg)
ИТОГО
![Page 40: Проектирование большого интернет-магазина](https://reader034.vdocuments.mx/reader034/viewer/2022051322/54623fb4af7959f61b8b4a4e/html5/thumbnails/40.jpg)
В программу включено: 29 декабря – первое задание для закрытой группы «Маркетинг для
интернет-магазинов». 10 января (вторник) старт для 2х групп – обратная связь по первой части:
разбор ДЗ (пишите отчеты).«Обработка прайс-листа и определение ассортимента».
13 января (пятница) Гостевая лекция «Копирайтинг для интернет-магазинов»
16 января (понедельник) «Проектирование интернет-магазина» 18 января (среда) «Составление технического задания на создание
интернет-магазина» 21 января (суббота) Гостевая лекция «Брендинг для интернет-магазинов» 23 января (понедельник) «Взаимодействие с фрилансерами и своей
группой разработки» 25 января (среда) Гостевая лекция «Составление договора и
взаимодействие с вебстудией» 27 января (пятница) – финал для Silver и Gold группы 28 января (суббота) – VIP день и финал для Platinum группы – личная
встреча участников и живой однодневный тренинг.