Решение
Разработка
В ходе разработки корпоративного сайта мы столкнулись с рядом вызовов, которые успешно преодолели, чтобы создать безопасное и функциональное решение для клиента.
Обошли сложный доступ к данным
Административный доступ к существующему сайту был максимально ограничен. Нам пришлось запрашивать данные вручную или через архивы, а также использовать VPN клиента для получения информации.
Разработали интерактивную карту по продуктам
Важно было реализовать функцию подсветки регионов в зависимости от доступности продукта по стране. Пользователь должен легко ориентироваться на карте. Карта должна позволять двигать и приближать отдельные участки.
Сделали группу задач по обеспечению безопасности сайта
Мы уделили особое внимание защите сайта. Он создан с учётом требований защиты от постороннего доступа. Провели длительные проверки, прошли аудит от специалистов по кибербезопасности на стороне Сбера и обеспечили защиту от следующих видов атак:
- Межсайтовый скриптинг (XSS).
- SQL-инъекции.
- CSRF-уязвимости.
- Фишинг через редирект.
Провели блок технических работ на сайте:
- полную настройку сервера для работы сайта,
- настройку и проверку базовой защиты,
- установку и включение модулей защиты сервера и CMS.
Обеспечили действия по защите данных сайта и их резервированию:
01. Автоматическое создание резервных копий сайта.
02. Обработка ввода и вывода данных.
03. Настройки аутентификации и разделения прав доступа.
04. Подключение к серверу и админ-панели через демилитаризованную зону (DMZ) по VPN.
Команда настроила следующие виды защиты:
- От внедрения управляющих SQL-команд.
- От атак «Cross-site scripting».
- Минимизация прав в СУБД и ОС.
- Безопасность Web-сервисов и приложений.
- Безопасность XML-документов и XML-схемы.
Настроена обработка ввода и вывода. Созданы требования к аутентификации.
Поработали с упрощением поиска данных
Улучшили возможности поиска данных на сайте. Внедрили на страницах нейросеть GigaChat: пользователь может задать вопрос и быстро получить информацию по своей тематике.
Дизайн
Клиент заказал редизайн сайта, чтобы эффективнее продвигать линейку из 8 продуктов. При обновлении дизайна мы поставили такие цели:
01. начать лучше привлекать внимание пользователей,
02. повысить узнаваемость бренда,
03. улучшить взаимодействие пользователей с продуктами и повысить эффективность их продажи,
04. привлечь новых клиентов,
05. создать современный понятный стиль, помогающий управлять вниманием клиента и упрощающий восприятие контента.
Мы разработали три концепции дизайна, каждая из которых была ориентирована на эффективное взаимодействие с пользователем и демонстрацию технологичности компании.
Первый вариант предлагал карточную верстку, второй — акцентировал внимание на типографике, а третий — на демонстрации продуктов. Клиент выбрал карточный дизайн, который лег в основу всех страниц. Каждый продукт представлен в формате удобной карточки с основными характеристиками.
Стилистика
Мы сделали сайт ярче и легче, усилив текущую цветовую гамму в рамках брендбука. Для каждого продукта разработали уникальные иллюстрации и подобрали фотографии, которые визуально выделяют особенности решений.
Типографика
Подобрали шрифт, который делает контент привлекательным и удобным для восприятия.
Анимация
Совместно с фронтенд-разработчиком создали сдержанный и ненавязчивый анимированный фон, который создает технологичную, но комфортную атмосферу. Одним из сложных элементов стала интерактивная карта — своего рода визуальная «игрушка» для пользователей. На карте:
- Реализована анимация и подсветка регионов.
- На главной отображаются регионы с наличием продуктов компании.
- Пользователь может легко получить информацию о присутствии компании в регионах.
Удобство и функциональность
Разработали макеты каждой страницы сайта для 3 видов разрешений экрана:
ПК — 1920×1080 пикселей.
Планшеты — 1280×768 пикселей.
Смартфоны — 320× 569 пикселей.
Весь контент и функционал, который можно увидеть с ПК, доступен на мобильных устройствах. Организован простой понятный поиск данных. Легко отсортировать информацию по продуктам и документы по ним. Сайт стал не только более эстетичным, но и удобным для работы команды клиента с контентом и инструментами взаимодействия с пользователями.
Стек технологий: Webpack, Gulp, Scss, Ts, HTML5. Библиотеки Popper.js, Swiper.
Результат
Через полгода после старта сотрудничества был запущен современный и удобный корпоративный сайт, который отвечает потребностям пользователей и демонстрирует технологичность компании. Он станет точкой притяжения для клиентов, партнеров и соискателей бренда благодаря следующим разделам:
- Главная страница — дает полное представление о компании и её возможностях.
- Витрина продуктов — удобная структура с информацией о продуктах.
- Пресс-центр — доступны ановости с фильтрацией по тематике и дате.
- Карьерная страница — информативный раздел для соискателей с текстами о корпоративной жизни. Можно откликнуться на вакансии прямо с сайта.
- Поддержка — для каждого из 8 продуктов доступны FAQ, форма связи и контакты.
- Статьи — материалы и аналитика по актуальным темам.
- Контакты — не только контакты основного офиса, но и всех подразделений, служб поддержки и пресс-служб.
- Юридические документы — материалы предоставлены и отсортированы по типу документа и продукту.
Сайт не только стал витриной для продуктов компании, но и эффективным инструментом для коммуникации с клиентами и пользователями.
Внедрили новый дизайн сайта с информативной карточной версткой. Обновили цветовую гамму, сделав блоки контрастными и цепляющими внимание. Позаботились о кастомных иллюстрациях и интерактивах.
Улучшили механизмы поиска данных на сайте. Внедрили нейросеть GigaChat от Сбера, чтобы пользователи могли получить качественную обратную связь по продукту. Изначально интеграции с GigaChat не было в смете, но по просьбе клиента мы ее настроили. Сервис работает без ошибок.
Отдельным вызовом стало то, что после длительной приемки готового сайта у нас стартовал ряд проверок его работы со стороны специалистов по кибербезопасности. Их проводила команда Сбера. Сотрудники моделировали атаки и собирали для нас обязательный пакет изменений, которые нужно внести, чтобы устранить потенциальные уязвимости.
Наш DevOps сделал доработки, и уже второй аудит сайта прошел отлично. Мы действительно позаботились об усиленной защите сайта от действий хакеров. Обеспечили базовую защиту межсайтового скриптинга, SQL-инъекций, CSRF-уязвимостей и фишинга через редирект.
Заказчик доволен, хочет передать нам техподдержку сайта. Наша команда тоже осталась довольна этим сотрудничеством и будет рада его продолжить в 2025.
