Создание интернет-магазина по продаже масел и аккумуляторов

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

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

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

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

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

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

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

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

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

В «шапке» сайта разместилась вся необходимая информация и еще осталось место под логотип. В блоке «Интернет-магазин» расположили краткий текст о магазине «Стоампер». Также на главной странице появился блок «Хиты продаж» с превью карточек самых покупаемых товаров. Еще здесь были блоки «Преимущества» и «Как заказать», оформленные в виде инфографики с пошаговой «инструкцией» покупки. В блоке «О Компании» появились все полезные и интересные факты о фирме. Одновременно велась работа по выбору и приобретению доменного имени.

После утверждения структуры сайта заказчиком дизайнер приступил к разработке логотипов (нескольких на выбор) и фирменного стиля. В это же время склад заказчика посетил фотограф, который на профессиональном оборудовании (включая осветительное) за 2 дня сфотографировал более 350 товаров в разных ракурсах. В общей сложности получилось свыше 2000 фотографий, которые еще необходимо было изучить, выбрать лучшие, обработать и подготовить для размещения.

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

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

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

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

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

Все вышло красиво и необычно: как правило, на сайтах подобной тематики (да и вообще в интернет-магазинах) стараются не делать дополнительных эффектов, чтобы не отвлекать посетителя от товара. Но у нас получилось сделать эффекты аккуратно, органично вписав их в фон сайта.

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

Затем мы оптимизировали ресурс под запросы, которые заказчик хотел продвигать, поработав с разделами “Аккумуляторы”, “Автомасла”, “Услуги по замене” и со всеми карточками товаров. На оптимизацию всех страниц сайта у нас ушло почти 3 недели.