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

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

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

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

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

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

Результат:

Документ с описанием функционала и структуры;
Кликабельный прототип.

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

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

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

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

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

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

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

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

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

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

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

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

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

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