Создание бизнес-сайта для тюнинг-ателье “Аллтехно”

В конце 2018 года к нам в веб-студию поступил заказ на создание нового сайта для московского тюнинг-ателье «Аллтехно», которое является преемником одного из самых знаменитых и старейших тюнинг-ателье, работавшего в столице с 2001 года.

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

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

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

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

На главной странице нужен был небольшой слайдер с акциями и форма обратной связи. Единственным нестандартным требованием был контент для одного из разделов сайта – его нужно было автоматически перенести и обработать (спарсить) с другого ресурса, разместив на новом сайте «Аллтехно».

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

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

Еще в начале нашего сотрудничества заказчик выслал на электронную почту документы и файлы по проекту: фотографии сервиса, контактные данные, PDF-файл с примерной структурой сайта, логотип, который он сам придумал и нарисовал.

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

Все остальные разделы сайта, кроме «Чип-тюнинга» и «Магазина», были информационными - содержали текст с изображениями. В «Чип-тюнинге» также находился каталог с марками и моделями практически всех популярных современных автомобилей, и при выборе определенной марки и модели посетитель мог увидеть доступные для своего автомобиля уровни (stage) тюнинга двигателя в виде таблицы, с указанием мощностных изменений (прибавки лошадиных сил и крутящего момента), а также стоимость прошивки (с учетом «заливки» в ECU автомобиля). Раздел «Магазин» содержал кликабельные превью карточек товаров, через которые посетитель мог попасть в нужную карточку с описанием, фотографиями и стоимостью.

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

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

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

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

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

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

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

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

Шедший далее блок «О Нас» дизайнер снабдил тематической фотографией с гоночной трассы, ниже оформил инфографику и блок «Остались вопросы?», разместил слева от него интерактивную карту Яндекс. Также он нарисовал в фирменном стиле сайта иконки для соцсетей.

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

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

Затем дизайнер приступил к оформлению остальных разделов и страниц:

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

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

Еще в самом начале заказчик сообщил, что планирует в будущем размещать на сайте некоторые товары, поэтому ему потребуется какая-то “витрина”, с полноценными карточками товаров. Нам ничего не оставалось, кроме как использовать в качестве движка OpenCart – CMS полноценного интернет-магазина, с подходящим для таких целей функционалом. В течение 4-х дней сайт был полностью сверстан и наполнен. Дизайн и верстка сайта – адаптивные.

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

Затем мы настроили и подключили весь функционал, разместили в футере иконки соцсетей и «подложили» под них ссылки, ведущие на аккаунты компании. Также заказчик попросил немного передвинуть метку местоположения на Яндекс Картах и добавить новые акции в слайдер и на страницу «Скидки и Акции». Еще мы создали и настроили доменную почту, установили счетчик метрики, проверили сайт на кроссбраузерность и кроссплатформенность.

Затем ресурс перенесли с тестового домена на основной (http://allt.ru.com/). На все работы, включая тестирование созданного “под ключ” ресурса у нас ушло 30 дней. Сайт получился необычным, запоминающимся, но в тоже время логичным и простым, хотя и с продвинутым функционалом, заложенным в него при изготовлении.