HPA
Heading
Client
HPA
Year
2023
Services
Web Design
Web Development
Our collaboration with High Performance Analytics (HPA), Italian experts in creating Custom Artificial Intelligence for all industrial sectors, started with designing their visual identity. Having successfully tackled that task, we moved on to the next one — translating the branding into the digital realm through the development of the website. It was crucial to maintain the stated conciseness, graphical appeal, and neatness from the branding while also avoiding excessive futurism often associated with most AI-related platforms.
Main page
The main page is divided into two parts. The first part contains introductory information, including the 3D graphics we created, and the second features news. Since HPA focuses on AI development rather than the media aspect, we ensured high flexibility in presenting content in the news section. News articles can be published with both vertical and horizontal images and can be formatted in different numbers of columns.
Graphics
All the brand's signature colors — HPA Analytics Yellow, HPA Lucid Black, and HPA Bright White — were seamlessly transferred from the branding to the website. Following the principles of conciseness and schematics, we incorporated technical graphics on the site. We expanded HPA's design language, describing the specific characteristics this graphics should have, and meticulously outlined the rules for working with images, icons, diagrams, and infographics.
Flexible Layouts
In the Services and Solutions sections, the number of entities may vary. Therefore, we designed the capability to expand and contract tiles on these pages, placing them one by one, in pairs, or sets of three, depending on the even or odd quantity of services. We thoroughly documented the logic behind all rearrangements and provided counterexamples to ensure clarity for the HPA team when they publish content.
Adaptability
The website is built on WordPress and has two versions – in Italian and English. From mobile to 4K, we worked on responsiveness for all devices, providing a stable and intuitive experience. Additionally, we implemented a flexible burger menu that appears when there are many links in the navigation.
For enhanced convenience in placing textual materials on the HPA website, we developed a versatile builder. Text materials for all sections are crafted using a unified layout, with the only distinction being in the header. Inside the pages, a multitude of blocks are available: accordions, inserts for attaching files with their resolution indicated, galleries, lists, and pullout quotes. Different header variations were implemented for various sections — narrow for news and wide for other sections, providing the option to include a photo or video as a background.
Text Page Builder
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.
Result
The website features a modern and clean design, setting it apart from the overly futuristic sites of competitors. We introduced flexibility in all lists and listings, enabling easy customization using different blocks. The branding was seamlessly translated into the digital space. As part of a strategic advancement, we assisted in maturing HPA's presence in the digital landscape, creating a user-friendly, functional site that reaffirms HPA's status as a progressive player in the field of AI technologies.
