Задача
Программе требовалось одновременно объяснить сложную социальную идею и довести разных людей до конкретного действия. Подопечному важно понять, чему можно научиться и как подать заявку. Наставнику — увидеть формат участия и меру ответственности. Работодателю — понять, зачем ему инклюзивный найм. Партнёру — увидеть прозрачную модель поддержки. Родителю и сопровождающему специалисту — понять, что происходит с ребёнком внутри программы.
Обычный приём «сделаем раздел для каждого» здесь не работал: посетитель приходит на главную и должен за один экран понять смысл проекта и следующий шаг, не изучая внутреннюю терминологию. Второе ограничение — интонация. Подопечный не мог быть показан как получатель помощи, иначе программа теряла смысл: она про профессию, а не про опеку. Третье — аудитория с разным опытом взаимодействия с цифровыми продуктами, и для неё базовая доступность интерфейса обязательна.
Решение
Позиционирование. Ключевая идея бренда — преемственность добра и передача профессионального опыта. «Платиновый» в названии обозначает не статусную награду, а ценность человека, который делится знаниями. Из этого следует вся коммуникация: подопечный показан как будущий специалист, наставник — как человек, вкладывающий практический опыт.
Логотип и визуальная система. Знак объединяет две фигуры и динамическую дугу. Он читается как поддержка, совместное движение и передача импульса от наставника к подопечному. Система строится на насыщенном пурпурном акценте, светло-серых фигурах и нейтральном фоне, контрастной типографике, тонких линиях и геометрических подложках. На фотографиях реальные люди и рабочие ситуации, без медицинской символики. Крупные белые поля снижают визуальную нагрузку. Логотип подготовлен для светлого фона, компактной навигации и мобильной версии.
Архитектура главной. Верхняя навигация намеренно короткая: «О нас», «Новости», «Контакты» и основная кнопка действия. Главная разворачивает историю в девять шагов. Сначала миссия и ценностное предложение, цели проекта и для кого создана программа. Затем как устроено наставничество и обучение, наставники и подопечные, истории и рекомендации. В конце новости, партнёры и призыв присоединиться. Первый экран построен на фотографии рукопожатия и тезисе о преемственности; полупрозрачная текстовая полоса удерживает читаемость заголовка, не закрывая эмоциональный кадр.
Сценарии аудиторий. Каждая группа получает ответ на три вопроса: что даёт программа, как она устроена и какое действие нужно сделать дальше. Для подопечного это кому подходит программа, какие навыки развивают, как проходит обучение, какова роль наставника, какие данные нужны для обращения и кто свяжется после заявки. Призыв к действию сформулирован понятно и не обещает автоматического трудоустройства. Рядом с формой объяснён следующий шаг, чтобы снизить тревожность. Для наставника отдельно разобраны форматы участия, поддержка со стороны проекта и способ начать разговор с координатором. Корпоративная аудитория получает собственный блок: практические задачи, экспертное и ресурсное партнёрство, участие сотрудников в наставничестве, возможности для выпускников. Кнопка в этом блоке ведёт к контакту с командой, минуя универсальную форму пожертвования.
Карточки участников. Карточки наставников и подопечных построены на портрете, имени и роли, профессиональном контексте, короткой цитате, видео и связанной истории. Слайдер позволяет обновлять состав участников без переработки страницы; стрелки, индикаторы и состояние активной карточки спроектированы сразу под мышь, клавиатуру и сенсорный экран.
Контакт без ухода со страницы. Основная кнопка открывает всплывающую форму: имя, контакт, роль или интерес, сообщение, согласие на обработку данных. Спроектированы состояния обязательного поля, отправки, успеха, ошибки и возврата на исходное место страницы. Форма короткая, потому что детальная анкета до первого разговора с координатором не нужна.
Адаптив и доступность. Мобильная версия перестроена: упрощается навигация, многоколоночные блоки выстраиваются друг за другом, изображения кадрируются иначе, меняются кегли и интервалы. Слайдеры переходят на сенсорное управление, а кнопка действия остаётся рядом с ключевым содержанием. В доступность заложены предсказуемая структура заголовков, заметный фокус клавиатуры, подписи полей вне плейсхолдера и ошибки, обозначенные текстом в дополнение к цвету. Учтены достаточная зона нажатия, альтернативный текст, текстовая альтернатива видео и отсутствие автозапуска звука, а страницу можно увеличить без потери сценария.
UI-кит и передача в разработку. Дизайн разложен на переиспользуемые элементы: цветовые токены, типографическая шкала, сетка и контрольные точки адаптива, кнопки и ссылки, состояния навигации. Сюда же относятся карточки новостей и участников, слайдеры, формы и сообщения валидации, предпросмотр видео и модальное окно с подложкой. Для элементов прописаны состояния наведения, фокуса, нажатия, неактивности, загрузки, успеха и ошибки. В передачу вошли карта страниц, пользовательские сценарии, макеты для десктопа и мобильных, правила изображений и кадрирования, спецификация типографики и цветов, поведение всплывающих окон и слайдеров.
Результат
У программы появился узнаваемый и уважительный образ, который держится на людях и профессии, без символов болезни. Публичный ресурс объясняет миссию с первого экрана и разводит пять аудиторий по своим маршрутам. Каждый маршрут ведёт к одному понятному действию: разговору с командой. Новостной раздел даёт программе жизнь после запуска: истории участников, материалы об инклюзивном найме, наборы, публикации партнёров.
Компонентный UI-кит и спецификация позволили наполнять сайт новым контентом, не разрушая характер интерфейса. Публичный предпросмотр дизайна показывает согласованный образ на широком десктопе и нескольких мобильных экранах.
