Дизайн карьерного сайта

Карьерная страница, рассказанная через восемь сцен

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

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

Как положение прокрутки становится сменой сцены

В исходнике прокручиваемый путь страницы сопоставляется с позициями от 0 до 7 — по одной для каждой из восьми сцен. Сцена становится текущей, когда она ближайшая к данной позиции. Соседние сцены могут оставаться частично видимыми в момент передачи; именно поэтому скриншот, сделанный между остановками, может выглядеть размытым или задвоенным.

Четыре пронумерованные остановки на орбитальном маршруте подачи заявки

Сцена с подачей заявки переводит последовательность в лунный маршрут. Остановка 1, отмеченная иконкой компьютера и надписью Submit, расположена ближе к нижней середине; остановка 2 — левее, а остановки 3 и 4 продолжаются в верхней части орбиты. Числа задают порядок чтения, поскольку геометрия не представляет собой привычной временной шкалы слева направо.

01

Путь связывает, а числа задают последовательность

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

02

Иллюстрация — не полная инструкция

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

Где визуальная реконструкция требует настоящего HTML

OpenDesign создал это в качестве официального примера для хакатона и визуального исследования, а не как заказной проект Moonshot. Это различие заметно в реализации: сцены 2–8 — предоставленные референсные изображения, и эти изображения помечены как aria-hidden. Смена текущей сцены не делает метки внутри изображения доступными в виде текста.

1. Размещайте заголовки вне фонового изображения

   В рабочей версии заголовок и пояснение сцены должны оставаться выделяемым текстом. Фон может содержать кабину, звёзды или луну; он не должен быть единственным местом размещения инструкции по подаче заявки.

2. Разделяйте анимацию и доступ к информации

   Обеспечьте устойчивый, читаемый макет при отключённой анимации и прямой путь к процессу. Это предлагаемое улучшение, а не функция, проверенная в предоставленной реконструкции. Посетитель не должен осваивать scroll-анимацию, чтобы найти следующий шаг.

Что демонстрирует данный дизайн карьерного сайта

Этот кейс демонстрирует компоновку сцен и scroll-анимацию, а не актуальные вакансии или рабочий бэкенд для приёма заявок. Намеренно пиксельное референсное оформление — не векторная графика, и экспорт в нативном разрешении не снимает это стилистическое ограничение. Используйте материал для изучения повествовательной механики и механики переходов; для получения актуальной информации о найме обращайтесь к официальным каналам работодателя.