Разработка продающего сайта audio-port.ru

#7970
Задача: 

На основе материалов старого сайта разработать новый сайт с продающим дизайном

Тип бизнеса: 
Что мы сделали: 

провели полную переработку старого сайта

​разработали продающий концепт для нового сайта

внедрили продающий дизайн

Результат: 

Новый, классный сайт с продающим дизайном

Полная переработка старого сайта и разработка нового - читайте, как это было!

Диана Зайцева
Руководитель отдела развития

 Как это было

Как это было

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

Вот и проект AudioPort не стал исключением. Более того, это один из самых интересных проектов за все время моей работы. Он полюбился не только мне, но и многим другим членам нашей команды. Именно в этом проекте мы смогли наглядно увидеть результат своей работы, сравнить его «До» и «После». Читайте историю создания – Вам понравится!

Постановка задачи

Постановка задачи

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

Перед нашей командой стояли следующие задачи:

  • Полностью переработать старый сайт компании сделать на его основе новый, продающий сайт.
  • Разработать дизайн для нового сайта.
  • Внедрить мотивационные решения на сайт.
  • Добавить каталог услуг и отдельную страницу с описанием услуги.

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

Создаем скелет сайта – рисуем прототипы

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

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

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

Создаем скелет сайта – рисуем прототипы

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

Создаем скелет сайта – рисуем прототипы

  • Страница Услуги разделена на несколько блоков, каждый из которых имеет свою категорию услуг. Такая структура очень удобна для посетителей сайта – они сразу видят то, что нужно.

Создаем скелет сайта – рисуем прототипы

  • Страница Статьи имеет простую структуру: превью статьи с наглядной фотографией позволяет сразу понять, о чем идет речь. При желании ознакомиться с полным текстом статьи для пользователей есть кнопка «Подробнее».

Создаем скелет сайта – рисуем прототипы

  • Страница Контакты состоит из блоков с контактными данными и картой проезда, мотивационного блока и формы обратной связи.

Создаем скелет сайта – рисуем прототипы

Разработка продающего дизайна

Клиент не высказал определенных пожеланий насчет дизайна сайт, поэтому мы полностью возложили надежды на нашего классного дизайнера. Как оказалось – не зря. Смотрите, что получилось:

  • В основе дизайна лежит подача элементов в форме плашек, наклоненных вправо – это создает образ динамики, что отражает концепцию сайта.

Разработка продающего дизайна

  • Цветовая гамма частично взята с логотипа компании – использованы черный и красный цвета в сочетании с голубым и зеленым.

Разработка продающего дизайна

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

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

Разработка продающего дизайна

Верстка сайта

Верстка сайта

Прототипы нарисованы, дизайн готов – вот и настало время для самого сложного и одновременно интересного этапа – верстки сайта. Расскажу об основных моментах:

  • Сайт был разработан на CMS Drupal – современная платформа с массой возможностей для дальнейшего улучшения сайта.
  • При разработке использована css и css3 анимации.
  • Сайт полностью адаптирован под современные браузеры и мобильные устройства.
  • При отправке заявки из формы обратной связи страница не перезагружается.
  • Кадрирование большого количества изображений для сайта.

Результат работы с сайтом

Результат работы с сайтом

Результат работы получился впечатляющий, впрочем, как и всегда. Старый сайт был полностью переработан и на его основе мы разработали новый, крутой сайт с продающим дизайном. Смотрите сами, что у нас получилось:

Таким образом, мы имеем:

дизайн

с продающим дизайном

полная переработка

старого сайта

Ещё классные кейсы
Получить классное предложение
Очень оперативно рассмотрим заявку и сделаем для Вас замечательное предложение

Хотите продающий сайт? Оставляйте заявки!

Вадим Скопинцев
Генеральный директор