FontWalk Microsite Wins Gold at Annual Multimedia Award 2014
FontWalk is a fabulous new take on the concept of the type catalogue / specimen / newsletter from FontShop AG, launched in June 2013 with a second “episode” going live in October. It won Gold in the category Microsite at the Annual Multimedia Award 2014 – a competition for digital brand communication that defines the state of the art and highlights the trends in digital marketing and multimedia design. The concept for FontWalk is a collaboration between moniteurs and null2. I talked to Heike Nehl from moniteurs who were responsible for the design and overall look, and to Andi Pieper’s null2 who took care of the programming aspect.
Heike Nehl | “First FontShop AG asked us to do a digital version of the FONTS catalogue / magazine. As you may know, we designed the original print version for many years and we enjoyed it very much. When we were thinking of ways to turn it into a digital publication we suggested a completely new concept, one that really would benefit from the possibilities of digital media – movement, screen size, not being limited to defined sizes like half page, quarter page and so on. It gave us the opportunity for having generous, glorious space. For being surprising and more emotionally involving than in the printed FONTS.”
Andi Pieper | “We settled on scrolling as the interaction principle pretty early. It encourages a lean-back experience as opposed to a click-navigation where you really have to be pretty precise with your mouse movements. Scrolling also translates very well to touch-based devices.”
“Content-wise we agreed to tailor the amount of information we want to get across to the web medium, which is usually shorter and more focused. On the one hand we wanted to keep the strengths of the printed FONT, like the hand-tuned type samples. On the other hand we cut loose some excess baggage like font format, price, packaging and other technical information by simply linking to the FontShop site where all of this can easily be found.”
Andi Pieper | “On a basic level, we settled on using primarily SVG for display, so everything would scale up or down effortlessly without losing quality on all possible screen sizes. Also, there is no server-side code nor database, it’s all plain HTML and SVG. That saved us from the tedious task of shoehorning everything into a database structure and gave us the freedom to change the microsite completely from one issue to the next, should we feel the need.”
“What I did not anticipate in the beginning was the more film-like format – it’s moving! It really helps to think in terms of a narrative, when scribbling down story boards and getting the timing right. It is still far from perfect, but we learned a lot while doing this project. I am pretty confident that the best is still to come.”
Heike Nehl | “Claudia and Jürgen from FontShop selected the fonts. We suggested to show not just typefaces and type families, but also themed collections focused on a specific style, like the script fonts in the last issue. For us it is always rewarding to show the visitors of the microsite a variety of type designs while at the same time guiding them through the font jungle.”
The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.
- DINfont.com is – after metaserif.com and trixiefont.com – the third “FontFontFocus” website, entirely dedicated to Albert-Jan Pool’s insanely popular information…Read more
- FontShop launched the third instalment of their scrolltastic interpretation of the type catalogue / specimen / newsletter with FontWalk 3. This award-winning microsite – nominated…Read more
- Earlier today a brand new website entirely dedicated to a single typeface family went live. Erik Spiekermann’s FF Meta Serif…Read more
- Forty9 is a PDF magazine that can be viewed on screen, but was also designed to be printed, showcasing the…Read more
- To mark the end of the aughts New York Magazine invited a number of designers to create a cover image…Read more