Kia ora. Hello.

Information

The Klim Type Foundry launched a completely redesigned site to put the designer at the heart of the type browsing, buying, and learning experience. An integral part of the redesign is Söhne, a collection of new typefaces described as “the memory of Akzidenz-Grotesk framed through the reality of Helvetica”.

Inspiration for the redesign came from mainly places, but primarily classic Swiss design principles as well as practitioners Josef Müller-Brockmann, Wim Crouwel, Romek Marber and Karl Gerstner.

Inspecting the browser console reveals an homage to Josef Müller-Brockmann’s book Grid Systems in Graphic Design. Ctrl+Alt+Shift+g displays the underlying grid of the site, and on type specimen pages you can toggle page colour by the icon in the navigation or with Ctrl+Alt+Shift+t. Experimenting with these commands results in recreating the book cover if you can find the right specimen and theme.

“Ahhh this JMB throwback theme + grid easter egg on the @klimtypefoundry Klim/Söhne website is awesome (as is the typeface)!”
— Thomas Lowry

Alongside the inspiration for the site, the redesign was further informed by extensive research into other type foundries as well as interviews with existing and potential customers. It also included usability testing of the old site and prototypes of initial concepts (in design software and code) to validate numerous design details and approaches. This research and testing helped to discover what challenges people face when licensing fonts and the expectations they have of a foundry site.

After a year of near constant design and development the new site showcases the breadth of Klim’s work in type design, but also the foundry’s gallery exhibitions, collaborations, publications, goods, photography, animations and videos that have been created to take type to wider audiences.

A personal highlight and somewhat hidden detail of the redesign is the random generation of type specimens. Each time a page loads a set of predefined rules for how typefaces should be presented is parsed over a corpus looking for words, sentences, and paragraphs to programatically display as unique specimens. The redesigned specimens encourage experimentation before purchasing; people can view OpenType features, change alignment, add columns, adjust line-height and letter-spacing with an interactive type tester, and review and test full character sets in the form of a glyph inspector with a ‘bézier view’.

Speaking of specimens, after much hard work it has been humbling to see the response and feedback from the design community.

“The Söhne type specimen from @klimtypefoundry is a delight. A masterclass in considered interaction design, usefulness, and inspiration.”
— Mark Boulton

The site’s writing sections have also been brought to the fore and extended. The blog aggregates and displays the word count for each category currently on the site. For example, there are 27,544 words about letters in the interview category and 25,386 words in the font information category. The in use section, which shows the extent of Klim typefaces ‘in the wild’, has an improved filter to allow design work to be reviewed by typeface, and by category, and retail font specimen pages also now display related in-use examples.

“The new @klimtypefoundry website is a thing of beauty. Simple, highly functional and so much polish. Fonts are pretty good too.”
— Thomas Williams

Finally, under the hood there is a statically-generated Gatsby Web App front-end and a GraphQL API back-end as well as a custom e-commerce experience that connects with Stripe for transactions, Django for managing fonts, orders, and upgrades, and Wagtail for content management.

Credits

• Kris Sowersby (Client)
• Dan Newman, Zak Brown (Design)
• Peter Dekkers, Mitch Ryan, Katie Day, Dean Oemcke, Juliet Brown, Matthew Holloway, Eugene Dementiev, Calin Dale (Development)
• Kanhika Nikam (Research)
• DIA, Alt Group (Collaborators)

Awards

• Certificate of Typographic Excellence from the Type Directors Club (2020)
• Red Dot Award, Best of the Best: Typography (2020)
• Red Dot Award, Best of the Best: Website (2020)
• AGDA Design Awards: Pinnacle & Judge’s Choice, Website (2020)
• AGDA Design Awards: Distinction, Design Craft, Typography (2020)
• AGDA Design Awards: Distinction, UX, Interface & Navigation (2020)
• AGDA Design Awards: Distinction, Digital & Mobile (2020)
• DINZ Best Awards: Gold, Large Scale Websites (2020)
• DINZ Best Awards: Silver, User Experience (2020)
• DINZ Best Awards: Silver, Digital Products (2020)
• DINZ Best Awards: Bronze, Digital Campaigns (2020)
• Communication Arts Award of Excellence Winner: Typography Annual (2020)
• D&AD Shortlist: Digital Design, Digital Products (2020)
• Webby Awards Nominee: Best Visual Design (2020)

“An impeccable grid structure, stunning visuals, and an interface that lets you test every detail of the expertly crafted typography. Every interaction state and responsive break-point has been considered, the site performs fast, and delivers true function and form to the user. The checkout and account creation experience is extremely intuitive and does not break out of the conventions of the design aesthetic the user is familiar with through the course of their journey.”
— Ahmed Meer (AGDA Juror)

“Typefaces are not just products they are tools, therefore an entirely different approach is required, when it comes to selling them. This approach has never been better exemplified than in Klim Type Foundry's new website. The site is the clear culmination of in-depth research, technical knowledge, and masterful design.”
— Luke Scott (AGDA Juror)

Featured

It's Nice That, Communication Arts, Muzli By InVision, AIGA: Eye On Design, Creative Boom, AGI, The FWA, CSSDSGN, CSS Tricks, CSS Winner, CSS Boutique, Type Wolf, The Gallery, Httpster, The FWA, Awwwards, SiteInspire, North East, The Brand Identity, UI Jar, Mindsparkle Mag, Design Assembly, Crafted By Code

Information

I currently lead a talented team of pragmatic problem solvers at Springload, an independent design and development agency. We’re a team of 70-ish (plus a dog or two) who work with clients like ACC, DIA, Klim Type Foundry, Museum of New Zealand Te Papa Tongarewa, and NZ On Air.

Previously I was Head of Design at Koordinates where I obsessed over contours, maps, and geospatial data from the likes of LINZ and Stats NZ. With the team in Wellington, Auckland, and Edinburgh, we helped people around the world “Discover Earth’s Data”, or more close to home, the Wellington Wind Zones (it’s called the ‘windy city’ for a reason).

Prior to Koordinates I was Creative Director at Xero where I led the design of xero.com, Xerocon, and all things brand. With a team spread around the world in New Zealand, Australia, England, and the United States, we helped convince hundreds of thousands of small businesses to “Try Xero for Free”.

Before all that, I designed skeuomorphic mobile and tablet applications for clients like The Economist, Al Jazeera, and American Express at Tigerspike in London. Even longer before that, I was creating sites for clothing made from merino sheep and interactives for museums with colossal squids while at Flightless in Wellington. Finally, right back at the beginning I ran a little design company, The D.A., while studying in Whanganui.

I have a Masters Degree in Computer Graphic Design from the Whanganui School of Design and the University of Waikato where I also gained a scholarship to study abroad as a visiting researcher at FH Oberösterreich in Austria and Nottingham University in England.

I’ve previously been a judge for the Best Awards, I’ve also been a guest lecturer for universities, and I’m a member of the Green Party, Forrest & Bird, and donate to the 1% Collective.

When I’m not working, I’m most likely taking photos on my iPhone & GF1, walking my fantastic floof, Ada, or perpetually weeding my garden.

I still use capital letters and full stops.

Work

• Springload, Creative Director (2017—Present)
• Koordinates, Head of Design (2015—2017)
• Xero, Creative Director (2012—2015)
• Tigerspike, Creative Director (2010—2012)
• Flightless, Designer / Front-end Developer (2007—2009)
• The D.A., Founder (2004—2007)
• Misc., Designer (2000—2004)

Volunteering

• Lighting Lab, Startup Mentor (2013—2014)
• BGI, Youth Mentor (2008—2009)

Education

• Whanganui School of Design & Waikato University, Masters Degree (2001—2006)
• Nottingham University & FH Oberösterreich, Scholarship (2005—2006)

Awards

• DINZ Best Awards: Silver, User Experience — Austin Assement (2020)
• DINZ Best Awards: Finalist, Public Good — Austin Assement (2020)
• DINZ Best Awards: Gold, User Experience — MyACC (2019)
• DINZ Best Awards: Silver, User Experience — MyACC (2019)
• DINZ Best Awards: Silver, Large Scale Websites — MyACC (2019)
• AGDA Design Awards: Finalist, Website — MyACC (2019)
• AGDA Design Awards: Finalist, UX, Interface & Navigation — MyACC (2019)
• DINZ Best Awards: Bronze, User Experience — NZ On Air (2019)
• AGDA Design Awards: Finalist, Website — NZ On Air (2019)
• DINZ Best Awards: Bronze, Digital Products — NZGDS (2019)
• AGDA Design Awards: Merit, UX, Interface & Navigation — NZGDS (2019)
• AGDA Design Awards: Finalist, Technological Innovation — NZGDS (2019)
• New Zealand Cartographic Society Award for Best Map Design — Te Papa (2019)
• DINZ Best Awards: Finalist, User Experience — Te Papa (2019)
• DINZ Best Awards: Finalist, Digital Products — Te Papa (2019)
• AGDA Design Awards: Merit, Digital / Kiosk — Te Papa (2019)
• DINZ Best Awards: Finalist, Large Scale Websites — Springload (2018)
• DINZ Best Awards: Finalist, Digital Campaigns — Klim (2018)
• DINZ Best Awards: Finalist, Large Scale Websites — Xero Features (2015)
• DINZ Best Awards: Finalist, Large Scale Websites — Xero Guides (2015)
• DINZ Best Awards: Silver, Small Scale Websites — Xerocon (2014)
• DINZ Best Awards: Bronze, Large Scale Websites — Xero TV (2014)
• DINZ Best Awards: Finalist, Digital Campaigns — Xero Touch (2014)
• DINZ Best Awards: Finalist, Digital Campaigns — Xero & Square (2014)
• DINZ Best Awards: Finalist, Large Scale Websites — Xero (2014)

Talks

• Under The Hood, Design Assembly (2020)
• Pioneer, Creative Mornings (2017)
• Geospatial Design, Tech Week (2017)
• World of VexilLOLogy, Design Meetup (2015)
• Science of Design, Gather (2014)
• Buy Experiences Not Things, UX Design Day (2014)
• Design Decisions, Design Meetup (2012)

Interested in hearing a few words and seeing a few pictures. Get in touch.

Details

• Written in iA Writer.
• Designed in Figma & Safari.
• Built in Atom.
• Hosted on Github.
• Fonts by Rasmus Andersson.