Правильный алгоритм создания интернет-магазина

0. Понимать как работает система управления магазином.

Для углубленного понимания работы системы рекомендуется почитать инструкции на Айтинити https://itinity.org/docs/1 .

1. Понять что необходимо сделать

Выснить/сформулировать цели и задачи проекта.

1.1. Допрашиваем заказчика с пристрастием, чтобы понять чем торгуют, какой маркетинг и какие бизнес-процессы обслуживания покупателей.

1.2. На начальном этапе собирается рабочая группа и происходит общее обсуждение. Какая структура сайта и подача темы. Придумать компоновку и стиль сайта. Логика ведения человека к действиям. (совместная работа контент-менеджера, дизайнера и маркетолога)

Ответственный сотрудник фиксирует проект (Документ: концепция проекта).

2. Материалы от заказчика

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

3. Делаем дизайн-проект

Наброски. Схематично показываем где какие блоки находятся. Фотки не вставляем, красиво не разукрашиваем, но тексты не рыбные, а конкретные или максимально приближенные. 

Сначала НЕ ГЛАВНУЮ страницу, а карточку товара и список товаров. Логика ведения человека к действиям.  Если проект очень простой можно делать проект сразу в унитеме без набросков.

Далее определяемся с визуалом. Рекомендуется не выдумывать особо, а посмотреть опыт других и показать другие сайты в качестве примеров.

Дизайнера-оформителя на данном этапе не подпускаем к проекту на пушечный выстрел!!! Он будет не только бесполезен, но и вреден, сделав красивую, но нерабочую картинку, которую не дай бог еще покажут клиенту.

4. Работа на сайте 

Задача сделать минимально работающий продукт.

4.1. Создаём структуру (таксономию не делаем сразу всю, особенно если она будет импортироваться). Логика ведения человека к действиям.

4.2. Определяем характеристики товаров - эту работу перекладываем на клиентов, но предварительно обучаем их.

4.3. Готовим и размещаем несколько текстов и фото. Не используем “рыбные” тексты и картинки - это идиотизм и приводит к серьезным ошибкам!

5. Дизайн

5.1. По утвержденному дизайн-проекту делаем дизайн основных страниц. В начале без шлифовки мелочей.

Не используем “рыбные” тексты и картинки - это идиотизм и приводит к серьезным ошибкам!

Адаптивность. Делаем средне-распространенный экран, типа 1360 или 1920 пикселей, прикидываем какие могут быть трансформации на чуть меньших или больших экранах. Дизайнеру следует представлять как сайт будет выглядеть на планшете и телефоне.

Следует представлять как работает система и оставлять возможности на будущее (например, сейчас это каталог, но оставить место для кнопки купить).

5.2. После утверждения основного дизайна заказчиком создаем дизайны под планшет и под мобильный телефон.

5.3. Предверстка. Дизайнеру (хоть они и противятся) или проектировщику полезно самостоятельно поработать в унитеме, перед тем как отдавать верстальщику. Так можно выявить проблемные места в юзабилити сайта и подправить дизайн.

6. Верстка

Сделать так, чтобы нарисованная красота появилась на сайте.

6.1. Сначала предверстка. Дизайнер может делать её самостоятельно, а верстальщик уже будет делать сложные вещи. Знаний верстки не требуется, но очень полезно для развития навыков

6.2. Окончательная верстка специалистом. Не забываем про юзабилити, кроссбраузерность, разные разрешения экрана.

6.3. Дополнительно. Проверяем дизайн при отключенных картинках - цвета должны быть адекватными и всё читабельно.

6.4. Cтавим подпись на сайте, чтобы было понятно кого ругать :)

7. Наполнение сайта

Здесь можно и в хост и в гриву напрягать клиента по подготовленному для него руководству по наполнению сайта. Это полезно проекту, потому что клиент больше знает о своем товаре и, как правило, клиент не выделит достаточные бюджеты, чтобы это делало агентство, а проект без наполнения не заработает.

8. Обучение клиента

Это обязательно, чтобы он понимал как работает система не боялся своего сайта и пользовался им.

Обучаем работать с заказами.

9. Шлифуем мелочи

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