Mask Safe — один из крупнейших интеграторов в области информационной безопасности в России. Компания обратилась в Digital-агентство «Паравеб» с запросом разработать сайт, который поможет привлечь новых клиентов. Также необходимо было представить сложную профессиональную сферу более понятной для потенциальных клиентов, показать многообразие предоставляемых услуг и основные направления работы компании.
Большинство клиентов заказчика — представители госсектора. Современный дизайн не обходится без 3D анимации, которая может долго загружаться при медленном интернет-соединении на компьютерах слабой мощности (а именно такая ситуация часто наблюдается в офисах госслужб). Поэтому необходимо было найти компромисс между современными трендами и удобством для посетителей сайта.
Этап разработки дизайн-концепции
Идея, которая легла в основу дизайна, — алмаз, самый твердый и износостойкий минерал — его сложно разрушить. В нашем случае ключевая ассоциация — защита, крепкая как алмаз.
Что внутри алмаза? Первый вариант анимации стартового экрана показывает, как из частиц образуется кристалл, внутри которого заключен отпечаток пальца — символ персональных данных — он под надежной и крепкой защитой.
Чтобы сделать ассоциацию с защитой персональных данных более очевидной, мы заменили отпечаток пальца на цифровой ключ (символ данных), вокруг которого из частиц — элементов защиты — образуется цельный кристалл, символизируя абсолютную безопасность.
Эта концепция была представлена клиенту.
Реализация
После согласования визуальной концепции мы приступили к ее оптимизации для веба. Чтобы первый экран прогружался быстрее, мы отказались от теней, отражений и преломлений света. Все это заменили текстурами. То же самое со сложным светом.
Интерактивная карта
На одной из страниц сайта клиент попросил создать интерактивную карту защищенных сетей. В процессе обсуждения ТЗ дополнилось пожеланием, чтобы на странице присутствовал элемент геймификации, карта преобразовывалась по клику.
Здесь мы выбирали между 3D-анимацией и серией видео, которые бы запускались при открытии страницы и реагировали на скролл. Выбор снова пал на упрощенные 3D-модели. Их использование позволяет сделать страницу более интерактивной. Мы реализовали возможность для пользователя активировать различные уровни защиты и наблюдать, как эти действия влияют на уязвимость информационной системы. Здесь же посетитель сайта может узнать про каждый уровень безопасности подробно и выбрать подходящую для себя конфигурацию.
«Нам хотелось сделать не просто хорошо. Например, в разделе «Создание защитных сетей» мы разместили 3D дом, на который можно запустить симуляцию хакерских атак. Все это сделано через JavaScript и WebGL, наши дизайнеры отрисовывали каждый кадр.», - Эмиль Ахтямов, Директор Digital-агентства «Паравеб»
Структура сайта
Структура сайта может непосредственно влиять на качество взаимодействия пользователя с сайтом и его поведенческий опыт (глубину, время просмотра страницы и т. п.).
Посетитель сайта может быстро сориентироваться и найти отраслевые решения, прочитать актуальные статьи по теме безопасности в разделе «В тренде», ознакомиться с полным каталогом решений и узнать подробнее о компании в соответствующем разделе.
Сайт интегратора в сфере информационной безопасности MaskSafe победил в номинации «Сайт вендора, платформы, сервиса» в конкурсе «Золотой сайт 2021», а также взял награду «CSSDA Special Kudos».