Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#кейсы</a>

2 <ul><li>20 сен 2022</li>

3 <li>0</li>

4 </ul>Wow-карта вместо скучного справочника для школьников.

5 Изображение: "Сбер" / Tetraform

6 Сооснователь и дизайн-директор студии Tetraform рассказывает, как создаются проекты на стыке функциональности и wow-эффекта.

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

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

9 За идеей платформы стояли масштабные исследования и анализ больших данных от банка и университета. Поэтому важно было не потерять научный фундамент, но представить его в виде увлекательного интерактивного атласа.

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

11 Визуальные решения и пользовательские сценарии должны были доступно объяснять, какие отрасли будут активно развиваться, на какие новые технологии нужно обратить внимание и кто потребуется работодателям уже очень скоро.

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

13 Дизайнеры Tetraform начали с перебора разных референсов и решений, чтобы "нащупать" подходящий стиль: от простых схем и плоских карт до сложных 3D‑моделей, созданных на основе WebGL, и интерфейсов компьютерных игр.

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

15 Карта, созданная с помощью преобразования данных с Google Maps в векторные изображения. Этот проект нашли в портфолио концепт-художникаИзображение: William Cameron /<a>ArtStation</a>Интерактивная карта Рио-де-Жанейро для Олимпиады-2016. Отсюда взяли на заметку анимациюИзображение: Fiasco Design /<a>Rio 2016 Interactive map</a>В итоге остановились на 3D-графике. Примерили разные варианты стилистики как для самого города, так и для элементов навигации.

16 3D-визуализация в интерфейсе Smart City - сервиса для управления кибербезопасностью городской инфраструктуры. Она стала основным референсомИзображение: "<a>Лаборатория Касперского</a>"Продуктовый подход требует прописывать возможные сценарии поведения пользователей, поэтому важно было выстроить исчерпывающий user flow.

17 Сначала все экраны создавали в виде вайрфреймов - чёрно-белых макетов, в которых акцент смещается с визуальных решений на функциональность.

18 Вайрфрейм раздела о кластере "Здоровье"Изображение: "Сбер" / TetraformВайрфрейм теста для профориентацииИзображение: "Сбер" / TetraformЧтобы ускорить работу, дизайнеры использовали готовые элементы для архитектуры и декора города, но адаптировали их эстетику под требования заказчика.

19 Банк предложил опираться на стиль одного из внутренних проектов. Некоторые UI-элементы попали в интерактивный город профессий из него.

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

21 В дизайн каждого кластера заложены визуальные метафоры, которые имеют отношение к сфере. Например, в кластере ESG можно увидеть ветрогенераторы - символы зелёной энергетики и экологичности, а в визуализации кластера "Здоровье" есть цепь ДНК - символ биоинформатики и исследований организмаИзображение: "<a>Сбер</a>" / TetraformВ проект интегрировали образ ассистента Салют - того же, что "работает" в остальных сервисах экосистемы "Сбера". Он появляется с подсказкой, когда пользователь впервые заходит на платформу.

22 <a>Салют</a>встречает новых пользователей атласа и помогает им сориентироваться в городе профессийИзображение: "<a>Сбер</a>" / Tetraform50 перспективных профессий "разбиты" на 12 кварталов. У них нет цветовой идентификации - только карточки с названиями направлений. Весь город единообразно оформлен в палитре и градиентах дизайн-системы "Сбера".

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

24 Для каждого кластера придумали анимацию, её создавали в Cinema 4D. Но в итоговый продукт она не вошла, так как сильно тормозила загрузку сайта.

25 Изображение: "<a>Сбер</a>" / Tetraform<a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>