Создание сайта «Нефтьмагистрали»

Описание Процесс

Изучаем бизнес клиента. Находим уникальные черты, такие как, например, собственный ресторан на АЗС, где берут свежие продукты, а не разогревают уже готовые блюда. Мыслим масштабно и идейно, пока не трогая сайт вообще.

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

Запоминаем — и думаем дальше.

Понимаем, что АЗС — это уже давно не просто бензоколонка, а целый торговый центр. Там есть интернет, туалет, еда, тепло, телевизор, водичка, журнальчики, ресторан, автоаксессуары, терминалы оплаты и еще куча всего другого. Пробуем мыслить не просто страницами сайта и интерфейсами, а слоганами. Придумываем четыре концепции.





Клиент больше склоняется к варианту про дом, но просит отойти от такой прямой аналогии. Решаем в центре показать в разрезе большую АЗС, где все преимущества будут как на ладони.

Придумываем рассказывать историю, прокручивая страницу. Так получается масштабность: начав с общего вида заправки, мы приближаемся к уровню машины, а потом, наоборот, смотрим с большой высоты на Москву и видим все АЗС.

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

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

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

Арт-директор утверждает.

В некоторых местах решаем инвертировать страницы. Получается прикольно.

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

Нужно показать «вкусные» фотографии свежих продуктов, которые готовят в ресторане. Устраиваем фотосессию.

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

Тем временем иллюстратор рисует картинки.

Допиливаем приятные интерактивные мелочи.

Переход на главной странице предполагалось сделать переключалкой. Но после того, как решение протестировали на людях, пришлось от него отказаться.

Нужно придумать более простой механизм знакомства пользователей с преимуществами заправки. Предложение с псевдоссылками — то что надо.

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