Responses by Jingqi Fan, designer and developer.

Background: Nikolas Type is a Cologne-based type foundry established by Nikolas Wrobel in 2019. The site was designed to portray the newly launched foundry in its best light and promote its typeface catalog, as well as act as an e-commerce channel for all Nikolas Type products. The site aims to appeal to fellow designers and, more importantly, help attract potential customers and clients both within and beyond the type industry.

Design core: At first glance, the design style of the site is quite sterile with its use of grotesque sans-serif. However, since the foundry specializes in display typefaces, the base type is treated in a minimal, almost recessive manner, so visitors aren’t distracted from appreciating the expressive sensibilities of each Nikolas Type font. The overall style echoes the clean aesthetics of print design with high attention placed on typography because, ultimately, it’s a type foundry platform.

While the site has all the common type foundry features, like the type tester and glyph palette, I also focused on designing the site’s buy flow to ensure a smooth shopping experience. A buy button is accessible wherever you are on the page, and the checkout flow can be completed on the same screen as the site itself to maximize conversions.

Favorite details: I’m quite proud of the cursor states and microinteractions I built for the site. The cursor—a key feature for the site—transforms between a small diamond and a larger circle, exemplifying the duality of sharp edges and soft curves in every typeface from Nikolas Type. The microinteractions of the site on elements, like the letters shifting on the buy button, add levels of warmth and playfulness that break the stark visual language of the site, making it welcoming and engaging.

Process: The entire site was designed and prototyped right in the browser. I found it easier to test out layouts and animations in code rather than in a UI design tool. Still, the most challenging part of developing the site was ensuring cross-browser compatibility and consistent browser rendering for site layouts and animations.

Navigation design: The foremost philosophy both Nikolas and I agreed on when starting this project was to ensure that the site was incredibly functional and a breeze to navigate. Nothing should be overengineered to complicate an experience that could have been simple. We organized the site’s content into three sections: Typefaces, Souvenirs and Information. All secondary categories are gathered in the site footer for easy access.

Technology: The site was built using ES6 vanilla JavaScript with Vue.js. Animations were created with GSAP, while e-commerce is handled securely through Snipcart.

Anything else? For ease of use in terms of site maintenance, the In Use section on each font page automatically filters any Instagram post from @nikolastype with specific #inuse hashtags so any posted cases can be publicized simultaneously on both platforms right away.