Создание интернет-магазина для тюнинг-ателье Brig`s

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

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

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

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

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

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

Цены на сайте (что логично) должны были быть представлены только в долларах США. Также заказчик просил нас разработать логотип, фирменный стиль, все дизайн-макеты для страниц сайта, создать баннеры для слайдера на главной странице, полностью настроить необходимый функционал и заполнить несколько карточек товара в качестве примера. Наполнять сайт товарами он собирался самостоятельно, следуя подготовленной нами инструкции.

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

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

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

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

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

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

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

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

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

Когда все работы были завершены, мы проверили сайт на кроссбраузерность и кроссплатформенность. Затем провели СЕО-оптимизацию, перенесли ресурс с тестового домена на рабочий и настроили для него защищенное соединение. Наконец, мы создали для заказчика подробную инструкцию по пользованию и наполнению сайта. На все работы, включая процесс принятия решений, ушло порядка 40 дней.