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.
Project Outcomes
Fluid Layout
The entire layout including typography and spacings is now based on a fluid design system that drives the whole website.
Quicker Iterations
Through a very lean and tidy code base, the team at PAZE studios can iterate quickly, which enables fast growth of the site.
Streamlined Workflow
During out hand-off we covered all the foundational ideas that went into the implementation so their developer team can continue working this way.
Dinghy turned our designs into a beautifully fluid and responsive website, for us to extend. We are thrilled!
I want to express my thanks to Dinghy for their incredible support. Their expertise not only helped us achieve a smooth, responsive design that represents our brand, but also went beyond our expectations.
Together, we’ve created something special that we're proud to launch, and we look forward to enhancing it further.
Project Deliverables
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.
