О проекте
Desktop & Mobile
TODES — танцевальный холдинг, объединяющий девять направлений: школы-студии, театр, гастроли, баттлы, интенсивы, мастер-классы, дизайнерскую одежду, отчётные концерты и фестивали.
Задача
Создать единую цифровую систему холдинга: объединить разные направления в общей архитектуре, разработать дизайн-систему и новый корпоративный сайт с новостным порталом.
01
Аналитика
Изучили бизнес-процессы холдинга и требования к будущей цифровой системе: структуру направлений, контент, сценарии взаимодействия пользователей и особенности каждого ресурса.
Главная задача на этапе аналитики — понять, какие элементы должны работать как единая система, а какие требуют отдельного подхода для конкретного направления.
Главная задача на этапе аналитики — понять, какие элементы должны работать как единая система, а какие требуют отдельного подхода для конкретного направления.
02
Архитектура
На основе аналитики разработали архитектуру всех цифровых ресурсов TODES.
Каждое направление получило собственную структуру и набор пользовательских сценариев, но все проекты связали общей системой навигации.
Связующим элементом стало единое главное меню, которое позволяет пользователю переходить между направлениями холдинга и при этом сохраняет самостоятельность каждого из них.
Каждое направление получило собственную структуру и набор пользовательских сценариев, но все проекты связали общей системой навигации.
Связующим элементом стало единое главное меню, которое позволяет пользователю переходить между направлениями холдинга и при этом сохраняет самостоятельность каждого из них.
03
Дизайн
концепция
концепция
В поиске визуального языка продукта разработали 14 вариантов дизайн-концепции.
Это позволило протестировать разные подходы к подаче контента и найти решение, которое одновременно передаёт характер TODES и работает для разных направлений холдинга.
В итоге сформировали общий визуальный подход, который можно масштабировать на все ресурсы системы.
Это позволило протестировать разные подходы к подаче контента и найти решение, которое одновременно передаёт характер TODES и работает для разных направлений холдинга.
В итоге сформировали общий визуальный подход, который можно масштабировать на все ресурсы системы.
Первый вариант концепции главной страницы.
Продолжили поиск визуального решения — масштаб, динамика и характер TODES.
Проверяли, как эти качества можно передать через интерфейс и при этом сохранить понятную структуру продукта.
Проверяли, как эти качества можно передать через интерфейс и при этом сохранить понятную структуру продукта.
Проверили один из вариантов концепции в динамике, чтобы понять, как визуальная система будет работать не только в статичных макетах, но и в интерактивном интерфейсе.
Ещё один вариант концепции с Full Page скроллом. Такой подход позволял последовательно раскрывать направления и контент холдинга, сохраняя единый пользовательский сценарий внутри страницы.
Финальные варианты согласованной дизайн-концепции. На этом этапе определили визуальные принципы, которые стали основой дальнейшего проектирования всех разделов системы.
Спроектировали полноэкранное меню как единую точку навигации между всеми ресурсами TODES.
Пользователь может перейти из одного направления в другое, не теряя понимания структуры всей цифровой системы.
Пользователь может перейти из одного направления в другое, не теряя понимания структуры всей цифровой системы.
04
Desktop
После утверждения концепции спроектировали ключевые разделы и пользовательские сценарии десктопной версии.
Для каждого типа контента определили собственную структуру, сохранив при этом общие принципы навигации и визуальной системы холдинга.
Для каждого типа контента определили собственную структуру, сохранив при этом общие принципы навигации и визуальной системы холдинга.
Проработали сценарий первого входа на сайт и создали прелоадер,
который знакомит пользователя с визуальным характером TODES ещё до загрузки основного контента
который знакомит пользователя с визуальным характером TODES ещё до загрузки основного контента
Для блока хронологии разработали интерактивную подачу,
которая позволяет последовательно знакомить пользователя с историей и ключевыми событиями TODES.
которая позволяет последовательно знакомить пользователя с историей и ключевыми событиями TODES.
05
Mobile
Адаптировали основные пользовательские сценарии и структуру контента для мобильных устройств.
При этом сохранили общую архитектуру и навигацию системы, переработав расположение элементов под мобильный формат.
При этом сохранили общую архитектуру и навигацию системы, переработав расположение элементов под мобильный формат.
06
Конструктор
новостей
новостей
Новостной портал объединяет контент всех девяти направлений TODES.
При этом каждое направление работает со своими типами контента: для гастролей нужны расписания, для фотогалерей — изображения, для текстовых материалов — разные способы расстановки акцентов.
Поэтому вместо фиксированной структуры спроектировали гибкий набор блоков, из которых можно собирать разные типы публикаций.
При этом каждое направление работает со своими типами контента: для гастролей нужны расписания, для фотогалерей — изображения, для текстовых материалов — разные способы расстановки акцентов.
Поэтому вместо фиксированной структуры спроектировали гибкий набор блоков, из которых можно собирать разные типы публикаций.
Чтобы пользователь мог быстро находить нужный материал среди большого количества публикаций, добавили фильтрацию новостей по направлениям и типам контента.
Это позволяет работать с новостным порталом как с единой базой контента, не теряя разделение между направлениями холдинга.
Это позволяет работать с новостным порталом как с единой базой контента, не теряя разделение между направлениями холдинга.
Для каждого типа контента разработали отдельные UI-блоки и объединили их в конструктор новостей в админке.
Редактор может собирать публикации из готовых блоков без необходимости создавать отдельный дизайн для каждого материала.
Это позволяет масштабировать контентную часть продукта и сохранять единый визуальный язык всех публикаций.
Редактор может собирать публикации из готовых блоков без необходимости создавать отдельный дизайн для каждого материала.
Это позволяет масштабировать контентную часть продукта и сохранять единый визуальный язык всех публикаций.
07
UI-kit
Собрали UI-kit как основу дизайн-системы всей цифровой экосистемы TODES.
Систематизировали основные элементы интерфейса, состояния и визуальные принципы, чтобы разные направления холдинга оставались частью одной системы, но могли развиваться независимо.
Систематизировали основные элементы интерфейса, состояния и визуальные принципы, чтобы разные направления холдинга оставались частью одной системы, но могли развиваться независимо.
Спасибо!
Спасибо! Мы получили ваш запрос и свяжемся с вами в рабочее время.
Расскажите о ближайших целях, новых функциях и задачах команды. Мы разберёмся в контексте и предложим оптимальный формат.