Задача
Программе требовалось одновременно объяснить сложную социальную идею и довести разных людей до конкретного действия. Подопечному важно понять, чему можно научиться и как подать заявку. Наставнику — увидеть формат участия и меру ответственности. Работодателю — понять, зачем ему инклюзивный найм. Партнёру — увидеть прозрачную модель поддержки. Родителю и сопровождающему специалисту — понять, что вообще происходит с ребёнком внутри программы.
Обычный приём «сделаем раздел для каждого» здесь не работал: посетитель приходит на главную и должен за один экран понять смысл проекта и следующий шаг, не изучая внутреннюю терминологию. Второе ограничение — интонация. Подопечный не мог быть показан как получатель помощи, иначе программа теряла смысл: она про профессию, а не про опеку. Третье — аудитория с разным опытом взаимодействия с цифровыми продуктами, для которой базовая доступность интерфейса перестаёт быть формальностью.
Решение
Позиционирование. Ключевая идея бренда — преемственность добра и передача профессионального опыта. «Платиновый» в названии обозначает не статусную награду, а ценность человека, который делится знаниями. Из этого следует вся коммуникация: подопечный показан как будущий специалист, наставник — как человек, вкладывающий практический опыт, а не как абстрактный благотворитель.
Логотип и визуальная система. Знак объединяет две фигуры и динамическую дугу — поддержка, совместное движение, передача импульса от наставника к подопечному. Система строится на насыщенном пурпурном акценте, светло-серых фигурах и нейтральном фоне, контрастной типографике, тонких линиях и геометрических подложках. Фотографии — реальные люди и рабочие ситуации, без медицинской символики. Крупные белые поля снижают визуальную нагрузку. Логотип подготовлен для светлого фона, компактной навигации и мобильной версии.
Архитектура главной. Верхняя навигация намеренно короткая: «О нас», «Новости», «Контакты» и основной CTA. Главная разворачивает историю в девять шагов — миссия и ценностное предложение, цели проекта, для кого создана программа, как устроено наставничество и обучение, наставники и подопечные, истории и рекомендации, новости, партнёры, призыв присоединиться. Hero построен на фотографии рукопожатия и тезисе о преемственности; полупрозрачная текстовая полоса удерживает читаемость заголовка, не закрывая эмоциональный кадр.
Сценарии аудиторий. Каждая группа получает ответ на три вопроса: что даёт программа, как она устроена и какое действие нужно сделать дальше. Для подопечного это кому подходит программа, какие навыки развивают, как проходит обучение, какова роль наставника, какие данные нужны для обращения и кто свяжется после заявки. CTA сформулирован как понятное действие, без обещания автоматического трудоустройства, а рядом с формой стоит объяснение следующего шага — чтобы снизить тревожность. Для наставника отдельно разобраны форматы участия, поддержка со стороны проекта и способ начать разговор с координатором. Корпоративная аудитория получает собственный блок: практические задачи, экспертное и ресурсное партнёрство, участие сотрудников в наставничестве, возможности для выпускников. Их CTA ведёт не в универсальную форму пожертвования, а в контакт с командой.
Люди вместо абстракций. Карточки наставников и подопечных построены на портрете, имени и роли, профессиональном контексте, короткой цитате, видео и связанной истории. Слайдер позволяет обновлять состав участников без переработки страницы; стрелки, индикаторы и состояние активной карточки спроектированы сразу под мышь, клавиатуру и touch.
Контакт без ухода со страницы. Основной CTA открывает pop-up-форму: имя, контакт, роль или интерес, сообщение, согласие на обработку данных. Спроектированы состояния обязательного поля, отправки, успеха, ошибки и возврата на исходное место страницы. Форма короткая — детальная анкета до первого разговора с координатором не нужна.
Адаптив и доступность. Мобильная версия — не пропорциональное уменьшение: упрощается навигация, многоколоночные блоки становятся последовательными, изображения получают другой crop, меняются кегли и интервалы, слайдеры переходят на touch, CTA остаётся рядом с ключевым содержанием. В доступность заложены предсказуемая структура заголовков, заметный keyboard focus, подписи полей вне placeholder, ошибки текстом, а не только цветом, достаточная зона нажатия, альтернативный текст, текстовая альтернатива видео, отсутствие автозапуска звука и возможность увеличить страницу без потери сценария.
UI kit и handoff. Дизайн разложен на переиспользуемые элементы: цветовые токены, типографическая шкала, сетка и breakpoints, кнопки и ссылки, состояния навигации, карточки новостей и участников, слайдеры, формы и сообщения валидации, video preview, modal overlay, состояния hover, focus, active, disabled, loading, success и error. В передачу вошли карта страниц, пользовательские сценарии, desktop- и mobile-макеты, правила изображений и crop, спецификация типографики и цветов, поведение popup и слайдеров.
Результат
У программы появился узнаваемый и уважительный образ, который держится на людях и профессии, а не на символах болезни. Публичный ресурс объясняет миссию с первого экрана и разводит пять аудиторий по своим маршрутам, приводя каждую к одному понятному действию — разговору с командой. Новостной раздел даёт программе жизнь после запуска: истории участников, материалы об инклюзивном найме, наборы, публикации партнёров.
Компонентный UI kit и спецификация позволили наполнять сайт новым контентом, не разрушая характер интерфейса. Публичное дизайн-превью показывает согласованный образ на широком desktop и нескольких мобильных экранах.
