Кейс

Дизайн и анимации интерактивного Атласа профессий Сбера и НИУ ВШЭ

Совместно с Center-Game спроектировали, оформили и анимировали Атлас профессий в виде интерактивной карты.

Атлас профессий →
О проекте

Навигатор по профессиям будущего

Сбер и Высшая школа экономики подготовили исследование перспективных профессиях, которые могут быть востребованы уже в 2022–2023 годах. При подготовке исследования была использована методика прогнозирования «форсайт» с участием ведущих функциональных экспертов Сбербанка и НИУ ВШЭ, а также анализ больших данных рынка труда.

Задача

Разработать «живой» город будущего для атласа профессий

Сбер и НИУ ВШЭ запускают интерактивный веб-сайт, на котором студенты, школьники и молодые специалисты изучают востребованные профессии будущего по 12 направлениям. Здесь они могут пройти профориентацию, узнать, что им больше подходит и найти профильное обучение.

Олег, Elearning-разработчик Сбера

У нас уже была концепция города профессий будущего. Нужно было доработать её, чтобы школьники, абитуриенты 
и молодые специалисты легко ориентировались 
в профессиях будущего и могли выбрать то, что подходит 
им больше всего. Город хотели сделать «живым» 
и интерактивным.

Саша, руководитель продакшена и co-founder

Ни слова больше, работаем!

Решение

Спроектировали путь пользователя в интерактивном атласе

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

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

дизайн

ПОДГОТОВИЛИ И СВЕРСТАЛИ МАКЕТЫ ДЛЯ СТРАНИЦ КЛАСТЕРОВ  И 50 ПРОФЕССИЙ

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

карта

Собрали карту города из готовых элементов и доработали их

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

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

взаимодействие

Анимировали метафоричные образы кластеров

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

Результат

Атлас профессий от Сбера и ниу ВШЭ

Интерактивный атлас проводит абитуриентов, студентов и молодых специалистов по самым востребованным профессиям будущего.

Изучить Атлас →

01

Разработали уникальный спецпроект, о котором написали крупные СМИ

02

Спроектировали удобный путь пользователя, который помогает сориентироваться в актуальных профессиях будущего

03

Придумали уникальный визуальный образ и анимацию для каждого кластера

Дизайн навигатора по «Атласу профессий»

Дизайн страницы с описанием кластера и карточками профессий

Драфт карты с тематическими кластерами

Команда

разработали нестандартный спецпроект и сделали его понятным для пользователей

Саша, co founder

Разработала общую концепцию проекта и следила за её соблюдением

Илья, project manager

Следил за сроками и общался по организационным вопросам

Данила, UI/UX designer

Спроектировал путь пользователя, интерфейс и стилистику проекта

Эдвард, 3D-моделлер

Собрал трёхмерную карту города и настроил анимации

Center-Game, партнеры

Вели разработку и ИТ-часть

Саша, co-founder

Разработала общую концепцию проекта и следила за её соблюдением

Илья, project-manager

Следил за сроками и общался по организационным вопросам

Center-Game, партнеры

Вели разработку и ИТ-часть

форма связи

Расскажите о вашей задаче

Расскажите о вашей задаче

Получили вашу заявку!

Наш менеджер скоро напишет или позвонит, чтобы обсудить детали. А пока вы можете почитать полезные посты в наших соцсетях
Oops! Something went wrong while submitting the form.

01

Свяжемся с вами, чтобы договориться об онлайн-встрече

02

После встречи предложим решение и оценим состав работ

03

После утверждения подпишем договор и начнем работу

Делимся новыми кейсами и полезными статьями в письмах
Получили вашу заявку!
Oops! Something went wrong while submitting the form.

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

© 2018-2022 Tetraform. All right resrved.

Подпишитесь на нас, чтобы не потерять

Расскажите о вашей задаче

Получили вашу заявку!

Наш менеджер скоро напишет или позвонит, чтобы обсудить детали. А пока вы можете почитать полезные посты в наших соцсетях
Oops! Something went wrong while submitting the form.