--- title: "Кейс создания сайта для компании Truck-Auto" description: "Создание сайтов в Астане Кейс компании imark Официальный дилер Hyundai в Астане «Truck Auto»Визуальн..." author: "imarkkz" published: "2017-04-17T00:15:59+00:00" modified: "2017-04-17T00:15:59+00:00" locale: "ru" canonical_url: "https://yvision.kz/post/keys-sozdaniya-sayta-dlya-kompanii-truck-auto-763761" markdown_url: "https://yvision.kz/post/keys-sozdaniya-sayta-dlya-kompanii-truck-auto-763761/markdown" site_name: "Yvision.kz" --- # Кейс создания сайта для компании Truck-Auto > Создание сайтов в Астане Кейс компании imark Официальный дилер Hyundai в Астане «Truck Auto»Визуальн... ##### [Создание сайтов в Астане](https://imark.kz/) **Кейс компании [imark](https://imark.kz/)** ****Официальный дилер Hyundai в Астане «Truck Auto»Визуальная часть.Компания Truck auto официальный дилер Hyundai.Исходя из этого, дизайн сайта выполнен в современном стиле с элементами фирменного цвета компании. Плавные анимации переходов, качественные картинки и тематическая инфографика использованы на сайте, от этого пользоваться им приятнее и удобнее.Основная задача.Клиенту нужно было [разработать стильный и удобный сайт.](https://imark.kz/) Он должен доносить до людей идею компании Truck Auto и давать полное представление об их услугах.На сайте показаны отличительные качества компании перед конкурентами и подчеркнуты преимущества приобретения техники и у официального дилера Hyundai и других услуг Truck Auto.Этап 1Работа над проектом началась с составления опросника для клиента.Произвели анализ конкурентов по территории СНГ для поиска более лучших предложений. Заказчику предоставлен список лучших сайтов. Таким образом, получив комментарии по списку и собрав в голове примерную структуру, мы приступили к разработке «скелета» будущего сайта.На данном этапе заказчик утверждал заголовки, текста и последовательность информации в структуре. Заголовки сделали продающими с прямым обращением к клиенту. Во всех заголовках были добавлены ключевые слова1. В главной странице сайта отразили 3 преимущества с акцентом на цифры и достижения компании для привлечения внимания клиента. Также установили логотип, под низ которого написали ключевые слова. Здесь же добавили номер и всплывающее окно для прямого контакта с представителем компании.Добавили меню сайта с разделами. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/14545/14545_900.png) 2. Определили спектр услуг. Каждой услуге дали краткое описание. Добавили ярлыки, чтобы клиент мог перейти именно на ту услугу, которая его интересует. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/14603/14603_900.png) 3. Также сделали отдельный блок о лизинге компании ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/15240/15240_900.png) 4. В блоке с запчастями для автомобилей указали 3 преимущества, а также разделили запчасти по отдельным категориям ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/15551/15551_900.png) 5. Подобрали модели 3 автомобилей с описанием их наиболее важных для клиента характеристик. Сюда добавили окно со словом «заказать» для упрощения заказа автомобиля. Для всех моделей автомобилей сделали отдельную страницу с переходом на него через ярлык «смотреть все модели» ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/19246/19246_900.png) 6. На сайте указали актуальные акции с более информативными условиями об акции во всплывающем окне. А также формой захвата для участия в акциях. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/16336/16336_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/15641/15641_900.png) 7. Отразили на сайте 6 преимуществ компании с подробным уточнением каждой из них. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/15898/15898_900.png) 8. Блок для просмотра интерьера офиса, склада и сервисного центра. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/16665/16665_900.png) 9. На сайте были добавлены блоки для просмотра сертификатов и отображением официальных партнеров компании для завоевания доверительного отношения клиента. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/17237/17237_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/17569/17569_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/18129/18129_900.png) 10. Разработали удобную форму для записи на тех обслуживание ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/17004/17004_900.png) 11. Блок с отзывами клиентов ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/17764/17764_900.png) 12. Подвал сайта содержит всю необходимую информацию для клиента со временем работы, электронной почтой и контактными данными компании. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/18448/18448_900.png) Этап 2Отправили клиенту на одобрение первый вариант структуры сайта. Проект получил одобрение. Двигаемся дальше.Были приняты корректировки по сайту и продолжена работа по усовершенствованию проекта.Результат проделанной работы дизайнером.1й вариантПервый блок с навигационным меню, кнопкой заказа звонка и атмосферной картинкой. Добавили логотип Hyundai ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/19657/19657_900.png) Данный блок решили наполнить инфографикой, обозначив их положение шаблонами. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/19867/19867_900.png) Блок для заказа запчастей ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/20132/20132_900.png) Изменили блок с моделями автопарка. Убрали описание, добавили больше техники в слайдере, оставили так же кнопку со страницы полного автопарка ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/20266/20266_900.png) Страница полного каталога ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/20524/20524_900.jpg) Примерно оформлен блок с акциями. Картинка выставлена для просмотра, позже добавили подходящую ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/20784/20784_900.png) Но такой дизайн не прижился. Мы продолжили искать оптимальный вариант. И вот что у нас получилось.2й вариантТаким стал 1й блок сайта. Поработали над атмосферными картинками. Главный экран смотрелся отлично. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/21127/21127_900.png) На главной странице сайта добавили номер, адрес и почту, чтобы клиент мог сразу обратиться в компанию и всплывающее окно для прямого контакта с представителем компании.Дизайн формы захвата был один. Вот вариант формы захвата обратного звонка ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/21294/21294_900.png) Добавили блок о компании с представлением краткой информации про ее историю становления для завоевания доверия клиента. Первоначальный шаблонный вариант ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/21646/21646_900.png) В дизайн было добавлено больше фирменного цвете и тематических линейных иконокБлок с услугами компании ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/21795/21795_900.png) Форма для записи на тех обслуживание ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/22081/22081_900.png) Преимущества компании ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/22496/22496_900.png) Этапы работы. Дали описание каждому шагу сделки ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/22778/22778_900.png) Блок с акциями. Добавили качественную атмосферную картинку. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/22874/22874_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/23077/23077_900.png) Оформили благодарственную страницу, вручную нарисовали каталог. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/23477/23477_900.png) Поработали над блоком с отзывами клиентов ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/23739/23739_900.png) Компании, которые сотрудничают с truck auto ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/23903/23903_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/24129/24129_900.png) Отправив промежуточный отчет, прикрепив варианты готовых блоков, не переставали искать лучший дизайн. Заказчики остался доволен проделанной работой и указал некоторые корректировки.Но на этом мы не перестали экспериментировать с дизайном. Большим изменением стало решение перенести навигационное меню сайта в боковую панель. Вот что у нас получилось. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/24448/24448_900.png) Форма захвата обратного звонка ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/24694/24694_900.png) Доработали слайдер с техникой, так же оставили кнопку с возможностью просмотреть весь автопарк. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/24991/24991_900.png) Страница автопарка ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/25224/25224_900.png) Обновили блок о лизинге. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/25491/25491_900.png) Страница о лизинге ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/25715/25715_900.png) По указанным корректировкам, слегка изменился блок с запчастями ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/26231/26231_900.png) Позже слегка изменили расположение, поместив разделы в одну линию, заполнив пустоту в блоке ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/26094/26094_900.png) Форма захвата заказа детали ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/26439/26439_900.png) Акции компании ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/26638/26638_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/27697/27697_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/26903/26903_900.png) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/27471/27471_900.png) Блок преимуществ компании ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/28088/28088_900.png) О компании ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/27218/27218_900.png) Таким образом решили отобразить этапы проведения сделки ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/28384/28384_900.png) Форма на тех обслуживание тоже не много изменилась, клиент решил выделить только 2 качества ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/28624/28624_900.png) Доработали блок с сертификатами и грамотами ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/28895/28895_900.png) Блок с компаниями, которые являются клиентами truck auto ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/29108/29108_900.png) Блок партнеров truck auto ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/29336/29336_900.png) Кейсы компании. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/29662/29662_900.png) Информативный подвал сайта. Добавили необходимую информацию, предоставленную заказчиком. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/29894/29894_900.png) После одобрения заказчиком, мы внесли пару штрихов и презентовали готовый проект, который можно посмотреть на [http://truck-auto.kz](http://truck-auto.kz/)Параллельно с разработкой сайты были проведены работы:· настроили цели, конверсии и отслеживание активности пользователей на сайте ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/30164/30164_900.jpg) · произведена [поисковая оптимизация сайта](http://context.imark.kz/) по ключевым слвовам. ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/30894/30894_900.png) · привязали счётчики аналитики гугл и яндекс· создали корпоративные почты компании, написав дополнительную инструкцию к активации и пользовании почтой ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/30417/30417_900.jpg) ![Кейс создания сайта для компании Truck-Auto](http://ic.pics.livejournal.com/imarkblog/81420699/30480/30480_900.jpg) ##### [Создание сайтов в Астане](https://imark.kz/) --- Source: [https://yvision.kz/post/keys-sozdaniya-sayta-dlya-kompanii-truck-auto-763761](https://yvision.kz/post/keys-sozdaniya-sayta-dlya-kompanii-truck-auto-763761)