Корпоративный сайт
UX/UI-дизайн
Анимации

Qazaq Oil.
Бренд в движении

Новая визуальная концепция сайта: энергия дороги, живая анимация и понятные маршруты для клиентов и партнёров.

Анимационная композиция Qazaq Oil в мобильной версии

Клиент: Qazaq Oil
Сфера: Сеть АЗС · Казахстан
Работа ABC: Разработка под ключ
Новый сайт: Готовится к запуску

Задача проекта

Знакомый бренд.
Новое впечатление

Предыдущий сайт Qazaq Oil тоже создала наша команда. Со временем его визуальный язык устарел. Пришло время следующего шага.

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

Мы выполнили проект под ключ: от структуры и дизайна до разработки и подготовки визуальных материалов. Все работы — внутри команды ABC Design.

Три аудитории — три понятных маршрута

У каждого посетителя своя задача. Структура сайта помогает сразу перейти к нужному.

Автомобилистам

Найти информацию о топливе, сервисах и программе лояльности.

Топливо · Сервис · Бонусы

Бизнесу

Разобраться в топливных картах и электронных талонах для компании.

Карты · Талоны · Центр продаж

Партнёрам

Узнать о возможностях сотрудничества с сетью Qazaq Oil.

Сотрудничество · Развитие сети

Концепция и визуальный язык

Не просто рассказать.
Дать почувствовать

Вместо статичной витрины — последовательность визуальных сцен. Видео, крупные слова и движение изображений раскрывают характер Qazaq Oil.

Ключевая визуальная сцена Qazaq Oil: знак QO и крупная типографика

Один визуальный язык

От первого знакомства
до истории бренда

Визуальное производство ABC

Впечатление складывается из деталей

Для каждого приёма — своя роль в общей истории.

Первый экран Qazaq Oil со станцией на фоне вечернего неба

Прелоадер → Видео

Вход в атмосферу бренда

Авторский прелоадер со сценой АЗС задаёт настроение ещё до появления главной. Видео продолжает знакомство с брендом.

Крупная типографика и знак QO в анимационной сцене

Масштаб · Ритм · Движение

Движение со смыслом

При прокрутке меняются масштаб, положение и сочетания элементов. Типографика и изображения работают как единая композиция.

Создание · Ретушь · Подготовка

Контент с единым характером

Часть изображений создали с нуля, материалы компании обработали и отретушировали. Разные источники обрели общий визуальный язык.

Режиссура главной

Каждый блок —
часть истории

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

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

Свободная композиция вместо одинаковых блоков: фотографии, типографика и акценты работают вместе.

Раздел «Каждый путь под контролем» с крупным заголовком и коллажем фотографий Qazaq Oil — Свободная композиция вместо одинаковых блоков: фотографии, типографика и акценты работают вместе.

Новости и акции Qazaq Oil: крупная карточка акции и список новостей — Новости и акции: крупный визуальный акцент и короткие информационные карточки.

Образ бренда складывается из людей, дороги, технологий и повседневных сервисов.

Мобильная версия

Тот же характер.
Другой масштаб

Выразительная подача продолжается на небольшом экране.

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

Мобильная версия — часть общей концепции, от первой визуальной сцены до финального рассказа о бренде.

Мобильная композиция с фотографиями станций, лаборатории и сервиса Qazaq Oil — Вертикальная композиция

Единый визуальный язык

Внутри компании

Одна команда.
Общее пространство

Наше сотрудничество с Qazaq Oil выходит за рамки публичного сайта.

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

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