Как это было
Каждый из разработанных проектов является для нашей команды чем-то большим, чем просто выполнение рабочих обязанностей. Это – отдельная история, в которую каждый из нас вкладывает много сил и стараний. Все наши проекты в дальнейшем имеют счастливое продолжение, растут и развиваются.
Вот и проект AudioPort не стал исключением. Более того, это один из самых интересных проектов за все время моей работы. Он полюбился не только мне, но и многим другим членам нашей команды. Именно в этом проекте мы смогли наглядно увидеть результат своей работы, сравнить его «До» и «После». Читайте историю создания – Вам понравится!
Постановка задачи
Перед тем как клиент обратился в нашу компанию, у него уже был свой сайт. К слову, он был весьма посредственный и не выполнял своих задач – это доказывало отсутствие продаж в течение длительного времени. Компания AudioPort - это довольная известная фирма, для которой и сайт нужен соответствующий – стильный, продающий, презентабельный.
Перед нашей командой стояли следующие задачи:
- Полностью переработать старый сайт компании сделать на его основе новый, продающий сайт.
- Разработать дизайн для нового сайта.
- Внедрить мотивационные решения на сайт.
- Добавить каталог услуг и отдельную страницу с описанием услуги.
Клиент предоставил нам примеры сайтов, которые ему нравятся, и заполнил бриф-опросник – незаменимая вещь для нас, из которой можно выудить всю необходимую информацию. Вооружившись полученными сведениями, мы приступили к созданию прототипов.
Создаем скелет сайта – рисуем прототипы
Наш прототипист – это классный специалист, у которого всегда получается воплотить наши идеи в реальность и облечь их в понятные схемы. Именно идея является важной составляющей концепции любого сайта и играет важную роль в его создании.
Но вернемся к нашему прототиписту, которому и удается воплотить идею в нечто материальное. В который раз – бесконечная благодарность за его старания и отличные результаты. Итак, расскажу, какая работа была продела в этом проекте:
- На главной странице использованы следующие блоки: шапка сайта с фразами-ловушками и возможностью заказать обратный звонок, здесь же – яркая фотография, отражающая суть деятельности компании. Блок с преимуществами рассказывает пользователям о плюсах заказа услуг именно в Аудио Порт, и информация о компании дает о ней более конкретное представление – простым пользователям нравится знать как можно больше о тех, с кем они сотрудничают. Блок услугами в виде плитки – простое и наглядное пособие по услугам компании, кнопка «подробнее» раскрывает полную информацию о конкретной услуге. Блок с акциями компании отражает выгодное для клиентов предложение, которым так и хочется воспользоваться. Блок с галереей фотографий компании и блок с командой помогают создать нужный психологический настрой с посетителями сайта – людям нравится видеть с кем они работают. Блок с сертификатами компании и историями успеха вызывают доверительное отношение и настраивает на позитивный лад. Блок с гарантиями добавляет доверие клиентов к компании. Простая форма обратной связи мотивирует к совершению звонка. Последний блок – контакты, где есть вся информация о том, как можно добраться до офиса компании и телефоны.
- Страница О нас имеет простую структуру со следующими блоками: информация о компании с наглядными фотографиями знакомит посетителей с обстановкой. Здесь также выведены блоки с командой, сертификатами и формой обратной связи, чтобы клиент всегда мог сделать заказ.
- Страница Услуги разделена на несколько блоков, каждый из которых имеет свою категорию услуг. Такая структура очень удобна для посетителей сайта – они сразу видят то, что нужно.
- Страница Статьи имеет простую структуру: превью статьи с наглядной фотографией позволяет сразу понять, о чем идет речь. При желании ознакомиться с полным текстом статьи для пользователей есть кнопка «Подробнее».
- Страница Контакты состоит из блоков с контактными данными и картой проезда, мотивационного блока и формы обратной связи.
Разработка продающего дизайна
Клиент не высказал определенных пожеланий насчет дизайна сайт, поэтому мы полностью возложили надежды на нашего классного дизайнера. Как оказалось – не зря. Смотрите, что получилось:
- В основе дизайна лежит подача элементов в форме плашек, наклоненных вправо – это создает образ динамики, что отражает концепцию сайта.
- Цветовая гамма частично взята с логотипа компании – использованы черный и красный цвета в сочетании с голубым и зеленым.
- Видимые элементы сайта выполнены в более приглушенных тонах, чтобы избежать ненужной вычурности и сконцентрировать внимание пользователя на важных деталях.
В целом дизайн получился серьезным, презентабельным и дорогим – сразу видно, что сайт принадлежит серьезной компании. Это именно то, чего мы и хотели добиться.
Верстка сайта
Прототипы нарисованы, дизайн готов – вот и настало время для самого сложного и одновременно интересного этапа – верстки сайта. Расскажу об основных моментах:
- Сайт был разработан на CMS Drupal – современная платформа с массой возможностей для дальнейшего улучшения сайта.
- При разработке использована css и css3 анимации.
- Сайт полностью адаптирован под современные браузеры и мобильные устройства.
- При отправке заявки из формы обратной связи страница не перезагружается.
- Кадрирование большого количества изображений для сайта.
Результат работы с сайтом
Результат работы получился впечатляющий, впрочем, как и всегда. Старый сайт был полностью переработан и на его основе мы разработали новый, крутой сайт с продающим дизайном.