Имиджевый сайт для компании "Балтика-Транс"
Сайт транспортно-экспедиционной компании, одного из лидеров в области контейнерных перевозок по всему миру.
Задачи
Информационная структура, технические решения, визуальный ряд должны последовательно работать на образ компании. Сайт должен быть спроектирован с учетом полной адаптивности, которая должна позволить ему отображаться без прокрутки в один экран на устройствах от планшета и выше.
Создать коммуникативную площадку бренда, передающую сложное сочетание качеств:
- лидерские амбиции компании,
- сочетание основательности и динамики,
- зрелой солидности и инновационности,
- колоссального масштаба и внимания к деталям.
Креативная концепция
В основу концепции мы заложили нестандартную форму — шестигранник из логотипа компании, одновременно устойчивый и динамичный. Усилить динамику решили за счет использования анимации.
В первом варианте соты должны располагаться на разных уровнях в объемном пространстве.
В динамике применяется эффект параллакса, чтобы усилить чувство объема и глубины пространства. В сотах находятся элементы содержания: фотографии, видео, текстовая информация, ссылки на внутренние страницы сайта.
Концепция была отвергнута в процессе. Выглядело чудесно, но создавалось ощущение легкого хаоса, а это противоречит имиджу компании.
Мы решили сосредоточиться на использовании крупных графических форм, образующих нестандартный геометрический рисунок на весь экран.
В центре экрана расположен куб, поставленный на ребро (повторяющий логотип компании), дополненный сегментами справа и слева.
В каждую из получившихся ячеек может быть помещен свой информационный блок, содержащий текст, пиктограммы, видео, фотографии. Каждому информационному разделу сайта соответствует такая страница — шестиугольник.
В ходе презентации концепций, было важно показать не только структуру, но и динамику для каждой концепции. Поэтому мы сделали бумажный прототип и оживили его, двигая нарезанные карточки.
Проектирование сайта
Спроектировать сайт в рамках такой сложной концепции стало настоящим вызовом.
Главная сложность информационного проектирования — вписать структуру информации в жесткие рамки «шестиугольников».
Всю информацию о компании и услугах мы свели в 6 разделов, в каждом из которых 6 конечных страниц. Это потребовало пересмотра всей контентной стратегии и десятка встреч с заказчиком. Даже названия пунктов меню мы меняли по нескольку раз, чтобы соблюсти визуальный баланс.
Одно из требований к сайту — отсутствие прокрутки на страницах. Сайт должен полностью занимать экран на устройствах с любым разрешением экрана. Без серьезной адаптивности было не обойтись. На конечных страницах мы все-таки оставили прокрутку, поскольку содержимое таких страниц может быть длинным. Но вместо штатной прокрутки мы создали свою, в локальной области экрана.
Создание дизайн-макетов
На этапе дизайна в макетах объединяются фирменный стиль компании, идея, заложенная в концепции, и прототип.
Из-за большого количества графики очень важно было вывести баланс цвета, создать правильные цветовые пятна.
Для того, чтобы собрать композицию к центру, мы использовали для центрального элемента белый цвет и фото светлых оттенков, а окружающее пространство выполнили в темно-синей цветовой гамме.
Чтобы подчеркнуть внимание к деталям, мы ввели такой элемент как ступенчатые градиенты для разделения пунктов меню и оформления активных элементов.
Потребовалось несколько часов мозговых штурмов и несколько попыток визуализации для нестандартных страниц, таких как «контакты» и «форма обратной связи». Их внешний вид и функциональность нужно было вписать в жесткие рамки концепции.
Очень много сил и внимания ушло на подбор уникальных изображений для каждого раздела сайта и приведение их в нужную цветовую гамму. Каждый элемент контента прошел через руки дизайнеров.
Дальше была очень сложная верстка, работа со скриптами и адаптивностью. Нам пришлось сменить несколько разработчиков в проекте, прежде чем результат стал соответствовать задумке.
Наконец, результат был представлен заказчику. Президент компании сказал, что результат нравится ему до слез (это буквальная цитата).