Разработка многофункционального интернет-магазина

1391

Общая информация о проекте

Задача: разработка интернет-магазина детской обуви "под ключ"

Технологии: HTML, CSS, JavaScript, JQuery, PHP, Yii2

Команда: 5-10 человек

Время разработки: 250+ часов (дизайн, верстка, разработка базового функционала, тестирование, без правок и доработок)

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

Проект был разработан "под ключ" и состоял из таких этапов:

  • написание технического задания
  • разработка логотипа
  • разработка дизайна
  • верстка
  • разработка системы управления контентом и написание программной части (back end)
  • тестирование
  • поддержка и продвижение сайта (SEO)
     

Сегодня мы продолжаем работу над ресурсом: занимаемся продвижением и поддержкой, совершенствуем и расширяем функционал интернет-магазина. 

Об основных этапах разработки

Дизайн интернет-магазина (25+ часов)

Дизайн под мобильные устройства ✅
Набор шрифтов: Helvetica, Arial, Sans-serif
Цветовая гамма

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

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

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

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

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

 

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

Разработка CMS и написание программной части интернет-магазина (160+ часов)

Интернет-магазин был разработан “под ключ”, то есть клиентская часть (то, что видит пользователь) и back-end (программная часть) были написаны с нуля. Почему мы решили писать интернет-магазин с нуля, а не использовать готовую CMS? На это есть две причины:

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

Преимуществом самописного сайта является то, что он может иметь любой функционал. Если готовые системы управления контентом (OpenCart, WordPress, Joomla и другие) включают в себя минимальный неизменяемый набор функций, который расширяется с помощью специальных модулей, то самописный сайт позволяет сразу создавать свой уникальный функционал, необходимый в отдельном конкретном случае. Именно поэтому большие порталы, e-commerce сайты с нестандартным функционалом чаще всего пишут с нуля. 

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

Об особенностях самописных сайтов и сайтов на CMS можно прочитать подробней в нашей статье "WordPress vs. OpenCart vs. самописный сайт: что выбрать?"

Но есть и одно "но". Разработка сайта с нуля занимает больше времени, чем интеграция дизайна с готовым движком. Для того, чтобы ускорить разработку, программисты используют фреймворки. Говоря простыми словами, фреймворк - это набор инструментов, для быстрого решения рутинных задач. Веб-сайт для чешского магазина детской и подростковой обуви был разработан с помощью мощного PHP фреймворка Yii2.

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

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

Также наши back-end специалисты интегрировали сайт со специфической чешской учетной системой для отслеживания торговых процессов внутри магазина и подключили популярный в Чехии платежный сервис.

SEO и продвижение интернет-магазина

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

Вообще на этом этапе мы полностью провели внутреннюю оптимизацию интернет-магазина:

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

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

Вместо заключения,

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

  • Полноценный интернет-магазин нельзя сделать за неделю. Если, вам говорят, что такое возможно, знайте, что это просто маркетинговый ход. В результате разработка займет в разы дольше либо вам продадут незаконченный продукт. На разработку самописного магазина понадобится не меньше двух месяцев. Учтите, что после тестирования, у Вас могут появится дополнительные пожелания, замечания. Правки и доработки - нормальный процес. Если у вас не так много времени, вы не планируете выходить за рамки стандартного e-commerce функционала, вам подойдет разработка интернет-магазина на готовом движке. Например, OpenCart заточен сугубо под интернет-магазины. Примеры сайтов на OpenCart можно посмотреть в нашем портфолио.
  • Обязательно планируйте будущее продвижение сайта, даже если на этапе разработки вам кажется, что оно вам не понадобится. Вы многое выиграете, если во время написания тех. задания на разработку интернет-магазина, вас будет консультировать SEO-специалист.
  • Если вы планируете, что интернет-магазин будет больших размеров или с нестандартным функционалом, в том числе для продвижения, как в описанном нами кейсе, обсудите с вашими разработчиками или менеджером проекта целесообразность написания сайта с нуля. Иногда вы выиграете больше, если решите заказать разработку сайта “под ключ”, а не на готовом движке.Yii2, Laravel, Symfony - это фреймворки, которые хорошо подходят для разработки интернет-магазинов с нуля.
Больше не нужно искать и обзванивать диджитал-агентства!
Создайте тендер и получите предложения по цене и срокам от лучших веб-студий Украины.
Это бесплатно и займет 2 минуты. В каталоге 1500+ диджитал-агенств, готовых помочь в реализации ваших задач. Выберите и сэкономьте до 30% времени и бюджета!
Создать тендер
Разработка многофункционального интернет-магазина
Компания:
web-systems.solutions
Добавлено:
26-04-2018
Перейти на сайт
1391

Общая информация о проекте

Задача: разработка интернет-магазина детской обуви "под ключ"

Технологии: HTML, CSS, JavaScript, JQuery, PHP, Yii2

Команда: 5-10 человек

Время разработки: 250+ часов (дизайн, верстка, разработка базового функционала, тестирование, без правок и доработок)

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

Проект был разработан "под ключ" и состоял из таких этапов:

  • написание технического задания
  • разработка логотипа
  • разработка дизайна
  • верстка
  • разработка системы управления контентом и написание программной части (back end)
  • тестирование
  • поддержка и продвижение сайта (SEO)
     

Сегодня мы продолжаем работу над ресурсом: занимаемся продвижением и поддержкой, совершенствуем и расширяем функционал интернет-магазина. 

Об основных этапах разработки

Дизайн интернет-магазина (25+ часов)

Дизайн под мобильные устройства ✅
Набор шрифтов: Helvetica, Arial, Sans-serif
Цветовая гамма

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

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

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

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

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

 

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

Разработка CMS и написание программной части интернет-магазина (160+ часов)

Интернет-магазин был разработан “под ключ”, то есть клиентская часть (то, что видит пользователь) и back-end (программная часть) были написаны с нуля. Почему мы решили писать интернет-магазин с нуля, а не использовать готовую CMS? На это есть две причины:

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

Преимуществом самописного сайта является то, что он может иметь любой функционал. Если готовые системы управления контентом (OpenCart, WordPress, Joomla и другие) включают в себя минимальный неизменяемый набор функций, который расширяется с помощью специальных модулей, то самописный сайт позволяет сразу создавать свой уникальный функционал, необходимый в отдельном конкретном случае. Именно поэтому большие порталы, e-commerce сайты с нестандартным функционалом чаще всего пишут с нуля. 

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

Об особенностях самописных сайтов и сайтов на CMS можно прочитать подробней в нашей статье "WordPress vs. OpenCart vs. самописный сайт: что выбрать?"

Но есть и одно "но". Разработка сайта с нуля занимает больше времени, чем интеграция дизайна с готовым движком. Для того, чтобы ускорить разработку, программисты используют фреймворки. Говоря простыми словами, фреймворк - это набор инструментов, для быстрого решения рутинных задач. Веб-сайт для чешского магазина детской и подростковой обуви был разработан с помощью мощного PHP фреймворка Yii2.

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

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

Также наши back-end специалисты интегрировали сайт со специфической чешской учетной системой для отслеживания торговых процессов внутри магазина и подключили популярный в Чехии платежный сервис.

SEO и продвижение интернет-магазина

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

Вообще на этом этапе мы полностью провели внутреннюю оптимизацию интернет-магазина:

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

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

Вместо заключения,

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

  • Полноценный интернет-магазин нельзя сделать за неделю. Если, вам говорят, что такое возможно, знайте, что это просто маркетинговый ход. В результате разработка займет в разы дольше либо вам продадут незаконченный продукт. На разработку самописного магазина понадобится не меньше двух месяцев. Учтите, что после тестирования, у Вас могут появится дополнительные пожелания, замечания. Правки и доработки - нормальный процес. Если у вас не так много времени, вы не планируете выходить за рамки стандартного e-commerce функционала, вам подойдет разработка интернет-магазина на готовом движке. Например, OpenCart заточен сугубо под интернет-магазины. Примеры сайтов на OpenCart можно посмотреть в нашем портфолио.
  • Обязательно планируйте будущее продвижение сайта, даже если на этапе разработки вам кажется, что оно вам не понадобится. Вы многое выиграете, если во время написания тех. задания на разработку интернет-магазина, вас будет консультировать SEO-специалист.
  • Если вы планируете, что интернет-магазин будет больших размеров или с нестандартным функционалом, в том числе для продвижения, как в описанном нами кейсе, обсудите с вашими разработчиками или менеджером проекта целесообразность написания сайта с нуля. Иногда вы выиграете больше, если решите заказать разработку сайта “под ключ”, а не на готовом движке.Yii2, Laravel, Symfony - это фреймворки, которые хорошо подходят для разработки интернет-магазинов с нуля.
Цены на сайты: разработка
Bug