Account
SpringloadKlim
-
2020
Submission # 147
-
Output
Digital Design – Toi Matihiko
-
Kaupapa
Innovation – Technical
Wildcard – Unique Projects
-
Location
International
Project Overview:
Klim’s objectives for the redesign was for visitors and customers to be able to play with type, test it and read about it. They wanted the experience to be effortless, informative and interesting, and for buyers to encounter a straight-forward and direct purchasing and licensing process. Aesthetically, they wanted the redesign to elevate their signature style and complement their new brand font Söhne — released at the same time as the new site.
This new site better showcases the breadth of Klim’s work in type design and takes their type to a wider audience.
Kaupapa:
The redesign of the Klim website aimed to share the love of typography with a wide audience, getting people to think about the importance of how the words and letters they choose to use look, as well as what they say.
It also intended to provide a seamless and easy buying experience. The new site extends the popular features of the existing site and introduces new ones that give people more options to test and research fonts prior to purchase.
The site represents Klim’s style and values: elegant, professional, and contemporary.
Response:
The highly crafted combination of design and technical expertise resulted in an innovative, successful website. It has been well received across the world, and resulted in many awards.
We were inspired by Swiss and mid-century typographic design. The visual design is minimal and bold, with a grid structure made with CSS grids. The grid structure better showcases the breadth of Klim’s work — from their typefaces to gallery exhibitions, articles and design thinking.
We went with white type on black, referencing the dramatic contrasts of Swiss design, and making the letters stand out. We embedded video animations by DIA. To keep the site fast we used Gatsby to generate a static site with a GraphQL API loading data from the headless Wagtail CMS.
There are colour themes on the type pages, and the ability to toggle on a grid. We created a hidden easter egg on the Söhne font collection page — by changing the colour to orange and adding in the grid, the well-known book cover for ‘Grid Systems in Graphic Design’ by Joseph Müller-Brockmann can be recreated.
Experimenting on-screen with new fonts is now easy, and full character sets can be tested. We also brought the blog to the homepage menu, and gave it grid styling. The heading has a dynamic word-counting function that adds up the total number of words in the entire blog.
The new website combines usability with delightful design, immersing people in the world of typography in every aspect of the experience.
Archiver’s Response:
"A gorgeous banquet of shapes and forms, laid out for easy digestion. This site achieves everything it was set out to do, allowing designers to fall in love with a typeface by inspecting or understanding it deeper rather than showing it in predetermined ways. The structure that showcases each type really is the powerhouse of the website.
The emotive abstract animations are a great first impression into each, not to mention they are long and sharp in detail showing these have been optimised for a quick site with full immersion. But when you want to analyse the nitty gritty of the forms it seamlessly allows you to do so. The design isn't so much reflective of the current times, as it's inspired by typography through the ages making it timeless. A masterful stroke of design."
"This website is beautiful and is an excellent representation of craft and design"
Credits & Collaborators: Blank - Kris Sowersby & Dan Newman (Creative Directors), Zak Brown (Designer) Developer - Peter Dekkers, Mitch Ryan, Katie Day, Dean Oemcke, Juliet Brown, & Matthew Holloway Developer - Eugene Dementiev, John Anderson, & Calin Dale Account manager - Thomas Ronan & Jess Kennair Blank - Kanhika Nikam (Experience research), DIA (Söhne animations and campaign), Jess Sowersby (marketing)
More by Springload