Сайт Mask Safe: как сделать информационную безопасность понятной для клиента. Кейс

Mask Safe — один из крупнейших интеграторов в области информационной безопасности в России. Компания обратилась в Digital-агентство «Паравеб» с запросом разработать сайт, который поможет привлечь новых клиентов. Также необходимо было представить сложную профессиональную сферу более понятной для потенциальных клиентов, показать многообразие предоставляемых услуг и основные направления работы компании.

Большинство клиентов заказчика — представители госсектора. Современный дизайн не обходится без 3D анимации, которая может долго загружаться при медленном интернет-соединении на компьютерах слабой мощности (а именно такая ситуация часто наблюдается в офисах госслужб). Поэтому необходимо было найти компромисс между современными трендами и удобством для посетителей сайта.

Этап разработки дизайн-концепции

Идея, которая легла в основу дизайна, — алмаз, самый твердый и износостойкий минерал — его сложно разрушить. В нашем случае ключевая ассоциация — защита, крепкая как алмаз.

Что внутри алмаза? Первый вариант анимации стартового экрана показывает, как из частиц образуется кристалл, внутри которого заключен отпечаток пальца — символ персональных данных — он под надежной и крепкой защитой.

Чтобы сделать ассоциацию с защитой персональных данных более очевидной, мы заменили отпечаток пальца на цифровой ключ (символ данных), вокруг которого из частиц — элементов защиты — образуется цельный кристалл, символизируя абсолютную безопасность.

Эта концепция была представлена клиенту.

Реализация

После согласования визуальной концепции мы приступили к ее оптимизации для веба. Чтобы первый экран прогружался быстрее, мы отказались от теней, отражений и преломлений света. Все это заменили текстурами. То же самое со сложным светом.

Интерактивная Карта

На одной из страниц сайта клиент попросил создать интерактивную карту защищенных сетей. В процессе обсуждения ТЗ дополнилось пожеланием, чтобы на странице присутствовал элемент геймификации, карта преобразовывалась по клику.

Здесь мы выбирали между 3D-анимацией и серией видео, которые бы запускались при открытии страницы и реагировали на скролл. Выбор снова пал на упрощенные 3D-модели. Их использование позволяет сделать страницу более интерактивной. Мы реализовали возможность для пользователя активировать различные уровни защиты и наблюдать, как эти действия влияют на уязвимость информационной системы. Здесь же посетитель сайта может узнать про каждый уровень безопасности подробно и выбрать подходящую для себя конфигурацию.

Структура сайта

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

Посетитель сайта может быстро сориентироваться и найти отраслевые решения, прочитать актуальные статьи по теме безопасности в разделе «В тренде», ознакомиться с полным каталогом решений и узнать подробнее о компании в соответствующем разделе.

Сайт интегратора в сфере информационной безопасности MaskSafe победил в номинации «Сайт вендора, платформы, сервиса» в конкурсе «Золотой сайт 2021», а также взял награду «CSSDA Special Kudos».