Tom Hunter

Том Хантер занимается кибербезопасностью и предоставляет полный спектр решений и процедур по выстраиванию системы защиты от угроз корпоративной информационной безопасности. Ребята анализируют существующие системы защиты, рассказывают, как можно их развить, и создают комплексные решения для управления ИБ.

Задача – разработать корпоративный сайт компании.

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

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

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

Сайт проработан для всех разрешений экранов – от декстопов до планшетов, чтобы на любом устройстве с ним было удобно и комфортно взаимодействовать.

Мы разработали сайт по принципу Mobile-First и использовали возможности HTTP2. При просмотре с мобильного телефона сайт загружает минимум файлов. Для разных разрешений экрана мы разработали отдельный файл стилей. С телефона браузер загружает только файлы для мобильной версии. Для планшета загружаются 2 версии, для ноутбука - 3, а для десктопа - 4.

Так сайт грузится максимально быстро и отвечает руководствам поисковых систем. 

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

Большинство изображений (где это возможно) подключены методом lazy-load. Таким образом для отображения первичного контента нужно минимум времени. Остальные браузер загрузит, когда пользователь уже будет просматривать страницу. Это позволило увеличить скорость загрузки страниц.

Для некоторых lazy-изображений подключён placeholder с логотипом компании. Placeholder заполняет пустое место под изображением, которое загружается какое-то время. Иконки и изображения в формате svg, подавляющее большинство прошли оптимизацию.

Везде, где возможно, мы реализовали анимацию плавных переходов – при наведении на элементы и у всплывающих окон. 

А еще – отложили загрузку карт (из-за собственных шрифтов и иконок они очень тяжелые) и отключили весь не используемый на сайте функционал WordPress. 

Получили GTMetrix PageSpeed Score – 94%. Сайт загружается полностью за 5 секунд.

В итоге получился полноценный сайт, состоящий из 12 страниц. Через графику и быструю загрузку сайта мы показали, что компания находится на пике информационных технологий.