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

Проектирование — самый важный этап в разработке сайта. Всё остальное — как говорится, дело техники.

Хорошо спроектированный сайт даст вам полное понимание как будет выглядеть и что будет «уметь» сайт ещё до начала работы технических специалистов над проектом.

Плохо спроектированный сайт — гарантия итогового отрицательного результата.

Проектирование сайта: структура, базовый и дополнительный функционал. Как итог — прототип и описания

Время на проектирование: около 100 часов.

Результат:

документ с описанием функционала и структуры
кликабельный прототип

Проектирование включает 4 этапа:

Этап 1: описание базового функционала (НЕ требует дополнительной документации)
Этап 2: описание дополнительного функционала (требует подготовки дополнительной документации)
Этап 3: структура
Этап 4: создание интерактивного прототипа

Этап 1: Базовый функционал

CMS (система управления сайтом);
слайдер главной страницы;
хлебные крошки;
seo-функционал (поля для мета-тегов, микроразметка, тайтлы, страница 404, ЧПУ и др.);
последние просмотренные товары;
стикеры товаров (новинка, хит продаж, акция);
добавление ссылок на соц. сети;
добавление виджета Instagram
формы

Этап 2: Дополнительный функционал

Каждый из пунктов дополнительного функционала потребовал подготовку отдельного документа с описанием алгоритма работы.

Техническое задание на первичное наполнение сайта товарами
Синхронизация с сервисом МойСклад (обновление цен и остатков)
Оплата заказа
Доставка заказа
Личный кабинет
Программа лояльности
Фильтрация товаров
Добавление товаров в корзину

Этап 3: Структура каталога, меню, внутренних страниц и навигации

Совместно с клиентом была подготовлена схема — структура сайта.

Этап 4: Прототипы всех видов страниц сайта

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

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

Далее приступили непосредственно к разработке

создали дизайн, согласовывали цветовую схему будущего сайта и типографику, шрифты
сверстали макеты
установили CMS
запрограммировали функционал из Технического задания
протестировали