All projects

Creating a super fluid website experience

  • Layout
  • UI Prototyping
  • Design System
  • Responsive Layouts

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!

Client PAZE Studios Logo
Cover Image Additional Project ImageAdditional Project ImageAdditional Project Image

Project Details

Duration 8 weeks
Tools
  • HTML Logo
  • null Logo
Project Lead:
Nils Borgböhmer

Nils Borgböhmer

Co-Founder, Head of Interaction Design

Schedule Meeting

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.

Company logo

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.

Play: Testimonial Florian Zeitler from PAZE Studios for implementing the responsive website design

Project Deliverables

The following are some of the deliverables that were created for this project.

  1. 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.

  2. Deliverable

    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.

  3. Deliverable

    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.

Explore Next Project

Modernizing a 6 year old website

Project

Explore Project

Modernizing a 6 year old website