Заказчик:
Владимир — представитель компании по предоставлению услуг аварийной эвакуации «Эвакуаторы в Химках».
Задача:
Разработать компактный сайт-визитку, который бы ярко, ёмко и сочно описывал бы услуги эвакуаторов, работающих по Химкам, а также всему Подмосковью.
С чем работаем?
Предполагаемый сайт заказчика — явно визитка, так как сам заказчик указал на то, что нужен приятный и современный сайт, но при этом нет необходимости реализовывать большую платформу, как, например, корпоративный сайт с десятком уникальных страниц, и можно обойтись небольшим, но информативным сайтом.
Никакого корпоративного стиля, гайдлайнов и прочих атрибутов айдентики у заказчика не было, поэтому решено было также собрать максимально простой логотип, который бы уместно вписывался в сайт.
Как проходила работа?
Подготавливаем фундамент сайта — собираем информацию
Первым этапом, естественно, нужно было собрать с заказчика всю необходимую информацию, но информации от заказчика было минимум. Решили на данном этапе работать по ключевому референсу, предоставленному заказчиком — референсный сайт заказчику нравился, и он бы вполне мог использовать его (если бы это был его сайт), однако изучив сайт, было принято решение, что сохранять ту идеологию сайта не совсем корректно, так как он уже достаточно старовато выглядит и нужно привнести немного свежего воздуха в дизайн.
Собрали простенькую структуру без динамических разделов:
- Главная
- Услуги
- Цены
- Сотрудничество
- Контакты
Такой структуры вполне достаточно для того, чтобы ёмко рассказать о компании. Как только стало понятно, что будет находиться на каждой из страниц, мы сразу же перешли к дизайну.
Создаем логотип и формируем дизайн-макеты
Первым шагом собрали логотип — он получился максимально простым, но при этом всё равно заключал в себе отсылку к эвакуаторам. Он представляет из себя стрелу эвакуатора с крюком на конце. Надпись «В ХИМКАХ» символизирует эвакуируемый транспорт. Таким образом логотип раскрывает в себе всю суть эвакуаторов.
Рис.1 Итоговая версия логотипа «Эвакуаторы в Химках»
Логотип задал тон будущему дизайну сайта. Буквально в течение одного дня собралась главная страница, которая очень информативно раскрыла все услуги, цены, а также особенности предоставляемых компанией услуг.
Рис.2 Дизайн главной страницы сайта «Эвакуаторы в Химках»
Почти все остальные страницы были идентичны друг другу, вследствие этого рисовать все макеты было бы неэффективно. Именно поэтому подготовили страницу, которая послужила эталоном для остальных, и сразу же перешли к стайлгайду.
Рис.3 Страница цен
Именно стайлгайд, в случае с сайтом-визиткой, является одним из ключевых дизайн-макетов. Туда входят многие элементы: все уровни заголовков, различные состояния текста, кнопок, правила построения таблиц, иконка сайта и т.д. Иконка сайта была упрощена до изображения крюка эвакуатора. Кому-то может показаться, что это лиса с длинным хвостом (да, мы любим Firefox).
Рис.4 Стайлгайд, который вобрал в себя различные состояния интерактивных элементов
Сайт естественно подразумевал адаптивность. Особенно важно было сохранить его информативность в мобильной версии (оказавшись в форс-мажорной ситуации, пользователи в основном заходят именно с мобильных устройств).
Рис.5 Визуализация мобильной версии для представления, как будет выглядеть сайт с мобильного устройства
Как только все макеты оказались готовы, они отправились к разработчикам для согласования. Разработчики нареканий не обнаружили, и дали отмашку на отправку макетов заказчику. Буквально в течение дня пришел ответ с утверждением всех макетов — и это сразу же послужило сигналом к старту работ над технической составляющей сайта.
Оживление макетов. Верстка и интеграция
Сайт нуждался не только в дизайн-реализации, но и тщательной технической проработке. И хотя сам сайт кажется небольшим, это не далеко не означает что он делается за пару часов — на развертывание платформы, а также верстку всех элементов уходит не менее двух-трёх дней.
Front-end разработчик успешно оживил макеты и они стали отзываться на действия пользователя — что на любом сайте особенно приятно.
Аним.1 Интерактивность в меню, форме обратной связи, «липкой» шапке и кнопке «Наверх»
Завершение работ и размещение на основном домене
Когда работа над технической частью оказалась завершена, и все баг-тесты успешно пройдены, сайт перешел в руки контент-менеджера для заполнения его базовой информацией. Так как сайт оказался сравнительно небольшим, это заняло несколько часов, по окончанию которых сайт успешно переехал на свой нынешний домен — evakuato.com
Рис.6 Завершенный сайт «Эвакуаторы в Химках», открытый на макбуке и смартфоне