Responses by Raffael Stüken, partner, Humans & Machines.

Background: Swiss type design agency Dinamo offers retail and bespoke typefaces, design software, research, and consultancy. Having outgrown its old website, the agency approached us mid-2018 to help them with a complete redesign. Over the course of almost two years, we not only designed and built a decent home for its digital and physical products, diverse content pieces, and projects. In close collaboration with the team at Dinamo, we also implemented a comprehensive back-end system to streamline its internal workflow.

Design core: Alongside the new design and functionality, Dinamo made a few significant updates to its font licensing model so that it’s fairer to smaller studios, cultural initiatives and agencies. Therefore, we put great emphasis on the user experience and transparency when users purchase typeface licenses. Our Best Deal Robot automatically bundles value packages based on selected single styles and gives hints on potential savings for alternate font combinations.

We also put a lot of thought into the presentation of typefaces to demonstrate their full potential. Instead of stacking several type testers and scroll bars on top of one another, we found a way to integrate large-to-small and one-to-three-column designs within our unified infinity tester. A variable font player lets users sit back and watch any chosen font animate and stretch across various axes.

Favorite details: Our CMS comes with an extensive content builder tool. The Dinamo team can choose from a variety of almost 20 different modules to design and build complex, content-heavy pages. The type teaser builder empowers the editor to use all Dinamo typefaces to easily create accessible type layouts or variable font animations. On top of that, there are 113 interface colors for both the light and dark themes that can be defined globally or on a per-page basis.

Challenges: In terms of product and price modeling, Dinamo’s needs were very complex. Although we have vast experience in creating e-commerce solutions for various clients, we stepped onto new grounds with this project. We had to tackle variable prices based on a custom license matrix, combined with discounts for multilicense and multistyle selections. European tax laws, combined with the mixture of digital and physical cart products, added up to the complexity and led into more than 20 different tax scenarios to be dealt with. Because of these requirements, we ended up writing a lot of custom plugins to extend the functionality of the chosen system to our needs.

Navigation structure: All main pages can be navigated through the menu. Subpages and feature modules open within modals to increase navigation speed and provide context. This leads to an app-like feel and intuitive user flows, especially on mobile.

On the typeface pages, the user experience varies between mobile and desktop. While on larger devices, everything is laid out generously. For mobile, we opted for an accordion approach to emphasize a greater overview and prevent extensive scrolling.

Technology: We used Craft CMS and Craft Commerce. For the front end, we chose Vue.js for some components and cash-dom as a small jQuery alternative. Most animations were created with CSS3 animations and transitions. The variable font animations are based on a JavaScript library by Dinamo’s own Robert Janes.

Since creating various font file formats by hand is a hassle for every type designer, we implemented Dinamo’s font formatter tool directly into our system. Based on OTF master fonts, the tool creates bespoke font assets for all use cases: subsetted trial fonts for testing; UI fonts to be used on the website; print and web fonts to be downloaded after purchase; and even font assets with custom name options, as defined by the customer during checkout.