В городе дорог. Разработка сайта для оператора дорожного строительства

1. Вводная задача от заказчика, проблематика, цели

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

В результате сотрудничества интернет-агентства «Амадо» и группы предприятий «UCON GROUP» в сети появился новый сайт-мегаполис.

Цели и задачи проекта

В 2013 году мы получили заказ на создание корпоративного сайта для группы предприятий «UCON GROUP», крупнейшего на Западном Урале оператора в сфере дорожного строительства.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Этапы работы

Всё шло по классической схеме: анализ данных — прототипирование — дизайн. Особенностью проекта является степень участия разработчика. Обычно корпоративный сайт мы сдаем с образцами наполнения внутренних страниц, а дальше за дело берется Заказчик.

Три главных слова

Вообще, «технологичность» вошла в тройку главных слов, характеризующих этот сайт. Два других — «взаимосвязи» и «наглядность». Работа началась с общего исследования и прототипа. Аудитория сайта, в основном, топ-менеджмент, b2b, государство, СМИ, сотрудники компании.

Один раз увидеть

Цифры, факты, документы, оборудование, проекты, даты — всё это надо было наглядно показать. Для этого мы выбрали проверенные инструменты: инфографику, статистику, презентацию, картографию. Где только можно, на смену текстам пришли знаки, иллюстрации и схемы.

Для проектирования сайта потребовался месяц, для дизайна — около 3 месяцев. Практически каждую страницу отрисовывали «под ключ» — с реальными материалами, с учетом всех подробностей и малейших деталей. В итоге получилось порядка 115 макетов с иконками, иллюстрациями, инфографикой.

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

Анастасия Богдановская

арт-директор, Амадо

«Фишка» сайта — способ презентации проектов, как текущих, так и завершенных. Наша логика очевидна: компания делает дороги, значит — не обойтись без карты.

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

3. Результаты сотрудничества

Было разработано особое представление проектов компании

Если проект текущий:

• На карте показан каждый этап работы с указанием процента выполнения. Каждый этап выделен цветом и, переключая этапы, можно увидеть какой участок дороги в данный момент ремонтируется.
• Степень готовности проекта и используемые технологии отражены в иконках, которые, в свою очередь, связаны с соответствующими разделами сайта. По каждому этапу имеется подробное описание работ.
• Каждый участок дороги на разных этапах фотографируется. Простым кликом точка на карте раскрывается в актуальные фотографии с объекта на данном участке. При желании можно было развить идею и поставить видеокамеры.

Таким образом, можно отслеживать динамику работы по проекту практически в реальном времени.

Кроме того в каждый проект транслируются новости с объекта, привязанные именно к нему, отзывы и комментарии официальных лиц и руководителей проекта. А также различная документация.

Если проект завершен, вместо интерактивной карты пользователю предлагается фотогалерея, которая также снабжена необходимыми сведениями по проекту.

Адаптивный сайт

Одним из основных показателей новизны и актуальности сайта стала его адаптивность. Необходимо отметить, что в период разработки ресурса адаптивные решения только начинали применяться (2013 год). В свою очередь, сайт группы предприятий «UCON GROUP» изначально задумывался как адаптивный.

Мы учли требования заказчика:

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

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

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

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