Всё фирменное здесь настоящее: логотип взят с сайта авиакомпании, цвета — из брендбука 2025 года, тексты — с aeroflot.ru. Своими остались только ритм и композиция.
Заголовки авиакомпании набраны фирменными шрифтами, которые нельзя свободно встраивать. Замену подбирали измерением: сравнили пропорции букв на живом сайте с открытыми шрифтами с кириллицей. Ближе всех оказался Geologica.
Интерфейс набран Golos Text — тем же шрифтом, что и основной текст на aeroflot.ru. Он открытый, поэтому его не пришлось заменять.
Логотип — официальный SVG из шапки aeroflot.ru, в светлой и тёмной версиях. В подвале концепта написано, что это не официальный сайт.
Pantone 287#002F87
Pantone 281#00205C
Reflex Blue#001689
Pantone 158#EE7623
Pantone 277#ABC8E7
Оранжевый стоит только там, где нужно сказать «вы здесь»: активная вкладка, выбранная дата, линия маршрута на карте и фокус на тёмном фоне. Всё остальное — синий и белый.
02 — Поиск билетов
Первый экран
Главная задача сайта авиакомпании — найти рейс, поэтому поиск стоит на первом экране поверх фотографии A350 из фотобанка «Аэрофлота». Огромное слово «Куда» меняется на выбранный город, а календарь сразу открывает двойной месяц для дат туда и обратно.
В поиске работают 66 городов с карты полётов авиакомпании, календарь, пассажиры с классом и проверка полей. Кнопка в результатах открывает тот же поиск на aeroflot.ru.
03 — Три задачи
Экраны
Выдача
Демо-выдача и настоящий переход
Рейсы и цены в выдаче условные, и каждая строка это говорит. Зато кнопка под ними собирает маршрут, даты и пассажиров в ссылку на реальный поиск aeroflot.ru.
Карта полётов
Направление и расстояние
Каждый город стоит под своим настоящим азимутом от Москвы, а кольца показывают расстояние. Кнопка «Искать билеты» переносит выбранный город в поиск.
Телефон
Поиск под большой палец
На телефоне то же окно, что и на десктопе, выезжает снизу: выбор города с поиском по названию и коду, календарь, пассажиры. Закрывается крестиком, клавишей Escape и после выбора.
04 — Горизонтальная глава
Классы обслуживания
Эконом, Комфорт и Бизнес идут главой, которая закрепляется на экране и листается вбок при прокрутке вниз,. Фотографии салонов взяты из фотобанка авиакомпании, а тексты — со страниц классов на aeroflot.ru.
Каждый цвет, размер, скругление и тайминг записан в спецификацию с источником: брендбук, замеры живого aeroflot.ru или вывод из них. Сборку проверяет скрипт, который читает стили в браузере: 78 проверок из 78.
Запрет на шаблонные приёмы
Прежде чем начать, мы разобрали прошлую версию концепта и записали, что в ней было шаблонным: придуманная палитра, сгенерированные фото, кнопки-таблетки, стена цифр, стекло. Каждый пункт стал запретом, и сборку проверяли на трёх ширинах экрана.
Доступность
Выбор города, вкладки поиска и меню работают с клавиатуры, окна закрываются по Escape, а из меню фокус возвращается на кнопку, которая его открыла. При настройке «меньше движения» анимации отключаются, а глава классов не закрепляется.
06 — Честно
Границы концепта
Это инициативный концепт студии VERSTA. Его никто не заказывал, он не согласован с ПАО «Аэрофлот», и студия никак не связана с компанией. В подвале концепта это сказано прямо: «Концепт редизайна. Не является официальным сайтом Аэрофлот».
Что настоящее
Логотип, цвета, тексты разделов, предложения, классы и персональные опции взяты с aeroflot.ru на 24 сентября 2026 года. Города — с карты полётов авиакомпании, фотографии — из её фотобанка. Происхождение каждого файла записано.
Что условное
Время рейсов и цены в выдаче — демонстрация, они посчитаны из расстояния и помечены «демо». Заголовочный шрифт — открытая замена фирменному. Предложения со временем меняются, в концепте они такие, какими были в день съёмки.
Что не работает
Купить билет, зарегистрироваться на рейс или войти в личный кабинет здесь нельзя. Для настоящего поиска есть ссылка на aeroflot.ru. Страница закрыта от поисковиков.
«Аэрофлот», «Аэрофлот Бонус», логотип и названия продуктов принадлежат их правообладателю и использованы только для описания концепта.
07 — Ход работы
Что было и что сделали
Задача
С чего начали
На aeroflot.ru много задач сразу: купить билет, зарегистрироваться, проверить рейс, узнать о классах и милях. Всё это подано одинаковыми баннерами и плитками. Нужно было сохранить структуру и порядок сайта, но дать каждому блоку свою форму.
Решение
Что изменили
Поиск стоит на первом экране поверх фотографии A350, классы идут горизонтальной главой, направления показаны на карте по азимуту и расстоянию. Бренд оставили настоящим: знак, цвета, тексты и фотографии.
08 — Цифры
Что можно посчитать
66городов в поиске — с карты полётов
78 / 78проверок стилей по спецификации
23 / 23проверок интерфейса в браузере
09 — Что входило
Состав работы
Исследование и структура
Арт-дирекшн
UX/UI-дизайн
Разработка и запуск
Технологии, на которых собран проект.
ViteHTMLCSSJavaScriptSVGGeologicaGolos Text
Границы кейса
Что показывает эта страница
Снимки сделаны с работающего проекта, а не с макета. Показываем интерфейс и решения, которые сделали сами.
Результат кейса — выпущенный интерфейс. Изменение числа заявок, выручки и позиций в поиске мы этой работой не измеряли и не приводим. Полоса с цифрами появляется только там, где измерение действительно есть.