HPA
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ae932038ab1ec32b11_00-hpa-case-cover-v3.webp)
HPA
Клиент
HPA
Год
2023
Услуги
Веб дизайн
Разработка
High Performance Analytics (HPA) — итальянская компания, которая занимается разработкой и внедрением кастомных прогнозных моделей и алгоритмов на основе искусственного интеллекта. После создания визуальной айдентики для HPA, мы приступили к разработке сайта на ее основе. Компания нуждалась в современной платформе, которая, сохраняя лаконичность и аккуратность брендинга, отразила бы технологичность и современность HPA.
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/64dcae983ec6291b9046fc2f_%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-04-06%20%D0%B2%2023.07%201.jpg)
Главная страница
Для первого экрана мы разработали 3D-графику, сопровождающую вводную информацию о компании. Под первым экраном расположен блок новостей. Медийная составляющая для HPA второстепенна, наполнение сайта контентом не должно занимать много времени, поэтому мы закладывали большую гибкость и вариативность размещения контента в новостном блоке. Новости могут публиковаться с вертикальными и с горизонтальными изображениями, верстаться в разное количество колонок.
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ac216fff683be96008_02-animatic-hpa-tech-illustrations.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ad32c832613fe7de76_03-hpa-cards-w-illustrations.webp)
Графика
Общее стилевое решение сайта строится на лаконизме, тонких линиях и схематичной инженерной графике. Из бендинга на сайт перенесены все фирменные цвета бренда: HPA Analytics Yellow, HPA Lucid Black и HPA Bright White. Правила работы с изображениями, иконками, диаграммами и инфографикой подробно прописаны и снабжены антипримерами для большей наглядности.
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482bceb38050d0fb0f516_04-hpa-typography.webp)
Гибкие макеты
В разделах Services и Solutions количество услуг может меняться, поэтому мы предусмотрели возможность растягивать и сужать плитки на этих страницах, ставить их по одной, по две и по три в ряд в зависимости от четного и нечетного количества сервисов. Мы подробно расписали логику всех перестроений, чтобы у команды HPA не было разночтений при публикации контента.
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ad507b564729b99701_05-hpa-anomaly-detection.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482aee59a986a6e16efc4_06-hpa-page-details-1.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482adf76e3c466c654aaf_06-hpa-page-details-2.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482aeda1062dd283bef42_06-hpa-page-details-3.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ae2419a8d81c61ab64_06-hpa-page-details-4.webp)
Адаптивность и навигация
Сайт адаптирован для всех устройств, от смартфонов и планшетов до мониторов с высоким разрешением 4K. Мы детально проработали информационную архитектуру площадки и предусмотрели возможность добавления бургер-меню на главной странице. Это гибкое решение позволит увеличивать количество разделов в будущем. Сайт создан на CMS WordPress в двух версиях — на итальянском и английском языках.
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482c33eb1b6bef60c7cb2_07-hpa-mobile-page-details.webp)
Для унификации текстовых страниц во всех разделах мы создали конструктор блоков. Галереи, списки, выносные заголовки, аккордеоны, врезки для прикрепления файлов с обозначением разрешения — конструктор покрывает все необходимые вариации контента.
Конструктор блоков
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482c391716018cf85485f_08-hpa-news-page.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482b00256421dc0723c65_09-hpa-job-at-hpa.webp)
Design System
Given the specific nature of the HPA's field and the rapid pace of its development, we considered strategic solutions and scalability options for the website. We created a design system that the HPA team can turn to when developing new digital products.
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ae7012bb122634df8f_11-hpa-ui-details.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482af8fba4917ba139b92_12-hpa-design-system.webp)
Результат
Визуальный язык бренда HPA комплексно и точно перенесен в цифровое пространство. Плоский, графичный дизайн выделяет сайт на фоне похожих между собой футуристично оформленных площадок конкурентов. Мы создали инструменты, решающие проблему гибкости и масштабируемости сайта. Реализовали конструктор блоков для быстрой сборки и наполнения контентом новых страниц. Современный, функциональный сайт укрепляет HPA в статусе прогрессивного игрока в области технологий искусственного интеллекта.
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ad507b564729b99701_05-hpa-anomaly-detection.webp)
![](https://cdn.prod.website-files.com/649f293b8432e8eb619b9891/65f482ae0c9e1d17bcf120f9_14-hpa-main-page-logo.webp)
Вебсайт
Команда
Анастасия Сокирко
Дизайн директор
Александр Гладких
Арт директор
Александр Сарнычев
Аккаунт директор
Глеб Новиков
Дизайнер
Лена Плотникова
Менеджер проекта
Инна Март
3D анимация