⬆️ Победители в номинации Search Innovation

Отправьте заявку
и получите предложение

Отправьте заявку
и получите предложение

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

Изучение предметной области

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

Вести работу над проектом без понимания того, как она устроена ‒ неэффективно и неправильно.

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

Для изучения предметной области наша компания проводит комплексное маркетинговое исследование, которое включает в себя такие направления:

Анализ рынкаАнализ рынка, на котором работает компания.

Анализ эффективностиАнализ эффективности рекламных кампаний, которые проводятся вне интернета, определение наиболее упешных.

Целевая аудиторияИсследование целевой аудитории будущего интернет-магазина, изучение ее вкусов.

Анализ сайтов конкурентовИзучение сайтов конкурентов, их успешных идей и анализ их ошибок.

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

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

На этом этапе нам важна помощь и желание клиента открыться нам и доверить свои проблемы.

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

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

Составление плана работ

Если при изучении предметной области бизнеса клиент отвечает на вопрос: «Зачем вам нужен интернет-магазин?», то на этом этапе нужно получить ответ на вопрос «Каким именно вы видите интернет-магазин, какие задачи он должен решать и как выглядеть?».

Составление плана работ по проекту состоит из таких этапов:

  1. Постановка задач, которые должен решить интернет-магазин
  2. Разработка концепции будущего проекта
  3. Формирование структуры сайта и рубрикатора товаров (услуг)
  4. Написание технического задания проекта

Первый и ключевой этап разработки — определение основной задачи, которую компания ставит перед своим ресурсом.

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

Смена задач увеличивает объемы работ и затягивает сроки запуска проекта.

Пример такой ситуации:

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

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

Если у вас нет четкого понимания, что именно вам нужно, то специалисты компании Acommerce предложат вам варианты концепции проекта.

Когда конечная цель ясна, самое время приступать к формированию концепции проекта.

Концепция проекта — это модель проекта, в которой должны быть выделены ключевые факторы (даны ответы на ключевые вопросы). В процессе разработки концепции должно стать понятно «что делать?» и «как это делать?», нужно представить весь процесс разработки и понимать как им управлять.

Одним из важных этапов является формирование структуры и рубрикатора сайта. От структуры сайта зависит насколько комфортно пользователям будет находится на сайте, насколько понятна им будет навигация и т.д. Поэтому ориентируйтесь на то, что будет удобно пользователям. Ставьте себя на их место. Думайте, как бы вы искали тот или иной товар.

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

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

При написании технического задания специалисты предусматривают все нюансы процесса разработки интернет-магазина. Техническое задание является документом, и на него следует ориентироваться при сдаче проекта заказчику.

Проектирование сайта

На этапе проектирования интернет-магазина мы отвечаем на следующие вопросы: «Какие задачи решает интернет-магазин? Мы правильно реализовываем эти задачи? Как интернет-магазин будет выглядеть и работать?».

Проектирование дает четкое понимание того, что и как будет работать, какая будет структура страниц, как будут располагаться информационные блоки и функциональные элементы.

Другими словами есть возможность «пощупать» функционал будущего проекта.

Цель проектной работы ‒ спрогнозировать поведение пользователей на сайте.

Проектирование сайта

Пользователей привлекает и удерживает на сайте:

  • логичная структура меню;
  • удобная навигация;
  • понятные функции.

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

При проектировании сайта ориентируются на техническое задание.

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

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

Последовательность действий:

Последовательность действий

Преимущества проектирования

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

На этапе проектирования станет понятно, как будет выглядеть готовый проект, и можно будет скорректировать его, если вдруг что-то не так.

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

Мы уверены, что:

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

Программирование модулей

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

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

Решение задач состоит из таких этапов:

Программирование модулей Программирование модулей Программирование модулей Программирование модулей

Четкая формулировка задачи

Выбор алгоритма решения задачи

Написание кодов программы

Отладка и тестирование программы

На этом этапе к сайту подключается админка, что дает возможность управления всеми функциями веб-ресурса и делает сайт «живым».

Работы ведутся по двум направлениям — программируется Front End и Back End.

Front End — все активные элементы сайта (навигация, формы регистрации, поиск, новостные модули и т.д.), которые видят и могут использовать пользователи сайта.

Back End — система управления (движок сайта), с помощью которой в дальнейшем будет происходить обновление информации на сайте администраторами.

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

Если возникает такая ситуация, что модуль уже разработан, а клиент решил еще что-то добавить к функционалу, то создается отдельное техническое задание на внесение изменений.

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

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

Разработка модулей присходит поэтапно, после завершения программирования каждого из них происходит тестирование.

Для налаживания процесса разработки интернет-магазина мы используем систему управления. Использование системы управления проектом имеет такие преимущества:

  • позволяет контролировать процесс разработки проекта;
  • производить планирование;
  • обсуждать работы по проекту;
  • анализировать работы;
  • и многие другие возможности.

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

По окончанию этапа программирования и отладки — сайт готов к наполнению.

Создание дизайн-концепции

После завершения программной части уточняется конечный вариант структуры, функций и навигационной системы сайта. Следующий этап разработки — создание дизайн-концепции проекта.

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

Создание дизайн-концепции

Определенных требований к составу и структуре дизайн-концепции нет. Структура может меняется в зависимости от сложности проекта.

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

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

Для начала разработки дизайна необходимо заполнить дизайн-бриф, предоставить логотип и элементы фирменного стиля (если они есть).

Сначала разрабатываются основные страницы интернет-магазина:

  • главная страница;
  • страница рубрики товаров;
  • страница товара;
  • текстовая страница;
  • процесс оформления заказа и т.д.

Макеты предоставляются заказчику для утверждения, далее при необходимости вносятся правки.

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

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

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

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

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

Верстка дизайна

После того, как макет дизайна готов, он передается на верстку.

На этом этапе объединяются результаты работ всех предыдущих этапов: программные модули, дизайн и контент складываются в единое целое.

Верстка сайта ‒ это создание веб-страницы по утвержденному макету. Другими словами, создается код страницы с помощью языка разметки гипертекста (html).

Верстка состоит из таких этапов:

  • анализ макета и разметка модульной сетки;
  • подготовка графических элементов;
  • верстка основных элементов;
  • верстка внутренних элементов.

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

Основные моменты, на которые мы обращаем внимание при верстке:

Верстка дизайна

Ширина страницы. Мы учитываем то, что пользователи используют разные мониторы с разными разрешениями. Ширина сайта может быть фиксированной, а может быть резиновой. Требованием к сайтам с фиксированной шириной является отсутствие горизонтального скролла на мониторах с разрешением 1024×768 пикселей. Резиновый сайт выглядит по-разному на разных мониторах, поэтому макет должен растягиваться на всю ширину окна браузера.

Кроссбраузерность

Кроссбраузерность. Разные браузеры могут отображать одну и ту же страницу интернет-магазина по-разному. Мы проверяем и поправляем отображение сайта в основных браузерах последних версий.

Чистый код

Чистый код. Код html разметки страницы должен быть отформатирован, логические блоки должны быть выделены. Использование каскадных таблиц стилей (CSS) позволяет убрать из кода лишние тэги, уменьшить вес сайта. Правильный код облегчает индексацию сайта поисковыми системами, а небольшой вес сокращает время загрузки сайта.

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

Отладка и запуск проекта

На этом завершальном этапе происходит проверка качества выполненной работы.

Тестируется работоспособность проекта:

  • проверяется все ли модули работают правильно;
  • не выдает ли сайт ошибок;
  • корректно ли он отображается в браузерах и т.д.

Выявленные в ходе финального тестирования ошибки устраняются в рамках технического задания.

При сдаче проекта заказчику демонстрируются функции интернет-магазина, которые описаны в техническом задании проекта.

Отладка и запуск проекта

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

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

Теперь интернет-магазин готов выполнять свою самую важную функцию ‒ приводить клиентов, приносить прибыль и повышать узнаваемость бренда и т.д. На этом этапе работ нужно начинать его продвижение в интернете.

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

Компания Aweb работает в сфере интернет-рекламы с 2006-го года. Мы накопили большой опыт в сфере поискового продвижения, контекстной рекламе, веб-аналитике. На наших глазах неоднократно менялись алгоритмы поисковых систем, но мы научились быстро адаптироваться к изменениям, чтобы качество наших услуг всегда оставалось на высоком уровне.

Уже готовы заказать разработку интернет-магазина?

Анна Журба
менеджер проектов

Узнайте стоимость вашего проекта

Отправьте заявку
Получите предложение