Выход в город. Как студия Tetraform создавала дизайн интерактивного атласа профессий
Wow-карта вместо скучного справочника для школьников.
![](https://248006.selcdn.ru/main/iblock/fcf/fcf0ddf446b7eea765f09fc7f710329b/0fb79c2153bdde0c2ba0f493c335bce0.jpg)
![](https://248006.selcdn.ru/main/iblock/fcf/fcf0ddf446b7eea765f09fc7f710329b/0fb79c2153bdde0c2ba0f493c335bce0.jpg)
Изображение: «Сбер» / Tetraform
Выбирать будущую профессию всегда нелегко: информация о направлениях и специальностях сложная и разрозненная. Особенную тревогу вызывает мысль, что они быстро станут неактуальными.
«Сбер» и НИУ ВШЭ решили создать веб-сайт, на котором студенты, школьники и молодые специалисты смогли бы узнавать о двенадцати направлениях профессий будущего. Команда Center-Game разработала общую концепцию и архитектуру проекта, а Tetraform привлекли работать над дизайном и проектированием.
За идеей платформы стояли масштабные исследования и анализ больших данных от банка и университета. Поэтому важно было не потерять научный фундамент, но представить его в виде увлекательного интерактивного атласа.
Получили задачу
У заказчиков уже была определена концепция: все профессиональные направления должны быть представлены как кварталы в городе. Он должен быть живым и интерактивным, чтобы аудитория легко в нём ориентировалась и могла выбрать то, что подходит им больше всего.
Визуальные решения и пользовательские сценарии должны были доступно объяснять, какие отрасли будут активно развиваться, на какие новые технологии нужно обратить внимание и кто потребуется работодателям уже очень скоро.
Первоначальная идея предполагала, что посетители сайта могли пройти профориентацию, а после — посмотреть варианты профильного обучения или вакансии.
Выбрали стилистику
Дизайнеры Tetraform начали с перебора разных референсов и решений, чтобы «нащупать» подходящий стиль: от простых схем и плоских карт до сложных 3D‑моделей, созданных на основе WebGL, и интерфейсов компьютерных игр.
Смотрели, как работают различные карты, как и с какой стороны появляются подсказки и навигация. И неожиданно много полезного почерпнули в интерфейсах сервисов для аренды жилья, где тоже есть советы и навигация по карте.
![](/upload/setka_images/14391918092022_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
Изображение: William Cameron / ArtStation
![](/upload/setka_images/14391918092022_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Изображение: Fiasco Design / Rio 2016 Interactive map
В итоге остановились на 3D-графике. Примерили разные варианты стилистики как для самого города, так и для элементов навигации.
![](/upload/setka_images/14391918092022_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
Изображение: «Лаборатория Касперского»
Спроектировали путь пользователя
Продуктовый подход требует прописывать возможные сценарии поведения пользователей, поэтому важно было выстроить исчерпывающий user flow.
Сначала все экраны создавали в виде вайрфреймов — чёрно-белых макетов, в которых акцент смещается с визуальных решений на функциональность.
![](/upload/setka_images/14391918092022_0ed1686442ac630326a48ddcef43684fa02b904b.jpg)
Изображение: «Сбер» / Tetraform
![](/upload/setka_images/14391918092022_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
Изображение: «Сбер» / Tetraform
Собрали карту
Чтобы ускорить работу, дизайнеры использовали готовые элементы для архитектуры и декора города, но адаптировали их эстетику под требования заказчика.
Банк предложил опираться на стиль одного из внутренних проектов. Некоторые UI-элементы попали в интерактивный город профессий из него.
Улицы сделали шире, чем обычно бывает в реальности, чтобы пользователям было проще воспринимать кластеры профессий.
![](/upload/setka_images/14391918092022_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
Изображение: «Сбер» / Tetraform
В проект интегрировали образ ассистента Салют — того же, что «работает» в остальных сервисах экосистемы «Сбера». Он появляется с подсказкой, когда пользователь впервые заходит на платформу.
![](/upload/setka_images/14391918092022_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
Изображение: «Сбер» / Tetraform
50 перспективных профессий «разбиты» на 12 кварталов. У них нет цветовой идентификации — только карточки с названиями направлений. Весь город единообразно оформлен в палитре и градиентах дизайн-системы «Сбера».
Создали анимацию и отказались от неё
Каждый кластер собирали по отдельности, потом «сшивали» в общую карту и оживляли деталями: добавляли фигуры людей, транспорт, парки и реалистичную дорожную разметку.
Для каждого кластера придумали анимацию, её создавали в Cinema 4D. Но в итоговый продукт она не вошла, так как сильно тормозила загрузку сайта.
![](/upload/setka_images/14391918092022_f8e2668d468d0a83016bd9d8a261b330ff850882.gif)
![](/upload/setka_images/14391918092022_7e362904b7d857173ea1dbafb405ab1977cbbb2a.gif)
![](/upload/setka_images/14391918092022_b1f5fb33da8f50f319a53de56ac6374150b960ea.gif)