The project
Website design, Webflow development, CMS integration and localisation: from the home page with its brand imagery to the Bluence product pages and the map of their global impact.
A sober site, with full-bleed photography, figures that read from a distance and the brand blue as the only accent.
The challenge
To tell the story of a technical company with a worldwide presence clearly, and to let their team maintain the content.
The details
Recorded on the site as delivered
Colour
The palette of Isotrol, by how much it is used on the delivered site. Hover over a colour.
Usage measured on recordings of the delivered site: every pixel counts towards the nearest colour; photos and gradients aside.
Typography
Measured on isotrol.com, at 1440 px.
Spacing
- Base step
- 4 px
- Between sections
- 128 px
- Container
- 1360 px
- 4gap, 36 times
- 6padding, 52 times
- 8gap, 64 times
- 12gap, 56 times
- 16padding, 90 times
- 24padding, 81 times
- 28padding, 18 times
- 32padding, 61 times
- 48gap, 21 times
The paddings, margins and gaps that repeat most on the delivered site, at 1440 px and true scale; almost all fall on 4 px steps.
Motion
CMS filters with Finsweet and animations with GSAP.
Their impact, on a map
The figures count up on entering and, hovering over a country, its project appears.
Bluence
The product, with its section: each solution with its tags, its name in light Aspekta and the software capture.
The story that inks in
The presentation goes from grey to ink, word by word, as you scroll.
Under the hood
Tools
- Figma
- Webflow
- GSAP
- Finsweet
How it is built
- Design in Figma and development in Webflow
- CMS integration and Webflow localisation
- CMS filters with Finsweet and animations with GSAP
Conclusion
A technical company with a worldwide presence, told in a sober site: full-bleed photography, figures that read from a distance and their impact on a map.
The Webflow CMS and localisation were set up so their team can maintain the content.
In their words
“We are delighted to be working with you on our projects. The service, execution, deadlines and delivery are excellent, but what really stands out is your knowledge and your ability to improve on our initial idea.”
“The client’s testimonial about this project goes here: two or three lines, with their charcoal portrait. Placeholder for Eric.”