Our friends at PAZE studio hired us to implement the responsive design part of their brand new, animation driven website. Fluid typography and spacing all the way!
Our friends from PAZE studios were working on the relaunch of their own studio's website. With the design almost done and in the process of working on the content, they approached us to help with the frontend implementation.
Objective & Solution
After speaking with their design team it was clear that PAZE values slickness and a super clean and minimalistic user experience over everything.
Since the website will be presenting their outstanding animation work first and foremost, they needed the layout of the website to be reduced, feel organized and look great on any screen size from phones to huge studio displays.
To achieve this we opted to leverage fluid design tokens in typography and spacing, so that the layout would transform in continuous and seamless manner from small to bis screens.
The following are some of the deliverables that were created for this project.
Fluid Type and Spacings
Implementation
We're using the latest CSS features to enable super fluid transformation of the site as the viewport gets smaller and bigger.
Fluid Spacing Tokens
Implementation
Through the use of variable units which grow smaller and bigger based on the viewport, we could deliver a simple spacing scale to use throughout the entire design.
Fluid Type Scale
Implementation
We configured TailwindCSS with easy to use and flexible design tokens which automatically adapt the font sizes based on the size of the screen.
