Создание интернет-магазина мёда и полезных продуктов

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

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

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

Задачи проекта

Как выяснилось, заказчица имела неплохо “раскрученный” аккаунт в Instagram, с 7 тысячами подписчиков, через который продавала и продвигала свои товары. Но поскольку функционал Instagram и его постов достаточно ограничен, торговля, помимо прибыли, приносила и излишнее общение с потенциальными клиентами по разным поводам, заставляла без конца отвлекаться на пояснения о наличии товара, сроках его доставки и т.д.

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

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

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

После того, как от заказчицы был получен полный список пожеланий к ресурсу, мы в течение суток подготовили три коммерческих предложения, с разными вариантами объемов работ, сроков и стоимости. Первый, начальный вариант, предполагал создание сайта с базовым наполнением и фиксированной версткой, второй, стандартный, предлагал ресурс с базовым наполнением и адаптивной версткой, а третий вариант ресурса “под ключ” - включал создание сайта с полным наполнением (в том числе наполнением всех категорий товарами), адаптивную верстку, СЕО оптимизацию под поисковые системы. Взяв некоторое время на обдумывание, Милана выбрала второй вариант сайта.

Реализация цели

Предстоящие нам работы по созданию сайта включали:

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

Логотип у заказчицы уже имелся, она просила лишь немного доработать его, поменяв название. Еще Милана просила нас взять на себя консультационное сопровождение, оказывая помощь в случае, если самостоятельно справляться ей будет трудно. Также она не исключала, что в дальнейшем сайт придется дорабатывать и развивать, и хотела чтобы мы обязательно подключились к этому процессу. Конечно же, мы заверили ее в полной поддержке и готовности работать дальше, а также договорились разбить оплату на три этапа (соответствующие этапам выполнения основных блоков работ на сайте), и приступили к созданию ресурса.

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

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

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

Пока заказчица занималась фотосъемкой своих товаров, мы подобрали несколько вариантов доменных имен и отправили их Милане. Она выбрала http://med.pp.ru/ - это имя и было оперативно оформлено. Затем мы приступили к разработке структуры ресурса.

Главную страницу решили сделать в виде посадочной страницы, на которой расположили:

• контактную информацию с номером телефона и графиком работы (в самом верху);
• строку главного меню, а под ним красивую картинку с заголовком «Магазин меда и полезных продуктов»;
• блок «Мы предлагаем» с картинками-превью категорий «Взбитый мед», «Натуральный мед», «Шоколад на меду» и «Полезные подарки», при клике на которые пользователь быстро попадал в соответствующую категорию;
• блок «О Нас», где планировалось разместить краткую информацию о бизнесе и преимуществах продукции Миланы;
• блок с инфографикой «Почему мы» - все плюсы приобретения товаров именно здесь;
• отзывы реальных покупателей, которые заказчица должна была передать нам вместе с другими материалами чуть позднее.

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

Всего мы собирались сделать четыре раздела: «Взбитый мед», «Натуральный мед», «Шоколад на меду» и «Полезные подарки». В каждом из них должны были разместиться по три превью товара в строке, но в разделе «Шоколад на меду» заказчица просила разделить товары на три категории: «Крафт», «Премиум» и «WELLNESS шоколад».

Структура карточки товара была стандартная: фотография товара, блок с его описанием, выбор количества, стоимость и кнопка «В корзину». Еще карточка содержала блок с отзывами и форму для их отправки – для тех, кто хотел бы поделиться своими впечатлениями о товарах.

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

После этого работу начали сразу два специалиста: копирайтер (он готовил тексты для блоков главной страницы и страницы «О Нас») и дизайнер (который занялся обработкой полученных от заказчицы материалов: нескольких десятков фотографий товаров в разных ракурсах).

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

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

Используя выбранное цветовое решение и подготовленное “главное” фото, а также другие имеющиеся у нас фотографии, дизайнер оформил блок «Мы предлагаем» и нарисовал иконку для блока «Почему мы». По всей главной странице он разместил разные «вкусные» элементы: лесные ягоды, орехи, печеньки, и т.д.

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

Следующей нашей задачей была верстка. В качестве CMS для сайта выбрали OpenCart, точнее, его русскоязычную версию OcStore. Мы давно работали с этим движком и прекрасно знали все его преимущества и возможности. За три дня сайт был полностью сверстан, и веб-мастер приступил к наполнению разделов и категорий сайта. Нам требовалось сделать всего несколько карточек - они служили примером для дальнейшего самостоятельного наполнения сайта заказчицей.

Как и обещали, мы подготовили для Миланы подробные инструкции по пользованию админ-панелью сайта (а в дальнейшем консультировали ее при размещении контента). Дизайн и верстка сайта – адаптивные. Когда верстка и наполнение сайта были завершены, вебмастер приступил к настройке функционала, формы заказа и корзины.

Готовый функционал был продемонстрирован заказчице. Она сказала, что оформление требует слишком много информации от посетителя сайта, поэтому стандартные формы желательно намного упростить. Для этого нам пришлось установить сторонний модуль, который значительно облегчил процедуру заказа и свел необходимую для этого информацию к минимуму. Так, по сути, мы получили функционал «Быстрого заказа» при оформлении.

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

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

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