Процесс создания сайта Elko Group

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

Аудит

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

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

Основная идея ребрендинга: «Мы открыты к разговору». Компания проводит не только визуальные изменения, но и меняется изнутри. После 10 лет работы Elko Group есть что рассказать, о этому основным акцентом становится открытая коммуникация с сотрудниками, клиентами, заказчиками, дистрибьюторами и т.д.

Первые наброски

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

На основе брендбука пробуем различные цветовые варианты оформления шапки и прямой речи.

Сразу прикидываем, как сайт будет отображаться на экране телефона. Проверяем работоспособность шапки с обращением.

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

Чтобы немного разбавить информацию, пытаемся визуализировать некоторые факты.

Хочется еще больше задействовать цветовую палитру из нового фирменного стиля и активнее обыграть прямоугольную форму логотипа. Пробуем различные варианты.

Все варианты десктоп-версии сразу же проверяем на телефоне.

Арт-директор просит сократить количество цветов и убрать «рыб» с фона.

«В целом результат довольно безликий. Нет характера и индивидуальности. Не цепляет. Что если попробовать плитку? Компания переехала в новый офис, а значит фотографии интерьера можно смело использовать в макете. Хочется больше «инсайда» и фотографий. Это лучше всего продемонстрирует их новую концепцию – открытость.

Также нужно еще больше приглушить цвет и вернуть шапку. Карту хочется сделать более темной и контрастной, а страны стоит разместить прямо на ней. Для кейсов не требуется столько места, их нужно сделать меньше. Как вариант, цвет плашки кейса можно выкрасить в основной цвет логотипа и чередовать».

Прототип

Набрасываем прототип чтобы показать возможности анимации на главной странице. В том числе промо-фотографий в шапке.

Презентация

Исправляем мелочи, зашиваем все в pdf и едем на презентацию к клиенту.

Концепция принята

Переходим к внутренним страницам. Делаем первый подход.

В процессе работы над внутренними страницами понимаем, что изначальная концепция «клетки в стык» не выживет.

Дизайнер предлагает отделить элементы и уменьшить количество плашек для контента.

Требования к фотосъемке

Согласовываем правки с клиентом. Подготавливаем файл, в котором описываем требования к промо-фотографиям в шапке.

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

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

Пока клиент занят фотосъемкой, собираем остальные внутренние страницы.

Навигация

Детально прорабатываем навигацию для всех устройств.

Подготавливаем все макеты и передаем их на верстку. Параллельно приступаем к работе с CMS.