Notable Experiments

The lab is a work in progress. Please bear with me.


The Fight for Better Presentations
fundamentals of presentation design
With some wonderful feedback from Garr Reynolds (Presentation Zen) and Nancy Duarte (Duarte Design) I set out to push the limits of presentation software to create a memorable short video about presentation design. I distilled my core ideas about presentations into a few key messages and wrapped them in a design language that references some of my greatest inspirations. Thank you all! I want to give back to the community (and promote sound presentation design principles) by making the Keynote source file public for all to download and inspect closely.
The making of is described in this blog post: I used only Keynote to create the animations, exported to iMovie and added a soundtrack. Get the source file here.
Presentation Quest
a concise slide deck tutorial
I think my point is still valid, if academic. Calling a standalone slide deck a presentation is fair and well, that’s just the way semantic extension works. No matter what we call it, though, for those of us who want to craft effective communication we need to understand the conceptual difference. Different concepts amount to choices that we can make when it comes to crafting either a speech and some visual props to enhance it, or a slide deck for a web audience. Using the principles of the latter I tried to craft a makeshift story to inform the reader about the former. Plus, I got to feel like a child again when I framed the event of conceptual choice in the metaphor of a nineties rpg video game.
I tried to bring my presentation design tutorials to a broader audience at slideshare and make a case not to confuse slide design with presentations.

Information Architecture

Prezi Interface
(flash required)
In a large client project I was brought on to create a Prezi as an interactive element on a web page, allowing visitors to explore a lot of backstory and information. In testing we found that we could not rely on our target audience to intuitively grasp the interface of Prezi. So I came up with a way to include a quick tutorial how to use our Prezi. The animations zoom, pan, click and follow the path were placed right at the starting view to help new visitors find their way through the information. I created this proof of concept to showcase the design techniques I used for other Prezi designers.
This Prezi showcases interface design techniques for Prezi as an exploration tool of visualizations. I'm giving the animations zoom, pan, click and follow the path away so you can improve the usability of your own Prezis on the web.
Scaling Information
(flash required)
The design was featured on the how-to section of (thank you guys!). The subsequent blog post spawned a nice discussion on the IxA forums about how to port the ideas of information architecture across different media. I’ll surely visit the topic again. Moreover, I already have a few ideas for follow ups with Prezi in particular. A notable blog post elaborates on the idea of leveraging the affordances that Prezi as a medium provides.
This Prezi breaks down the paradigm of presentation design for the infinite canvas. I used concepts from information architecture to inform the design decisions: Prezi is all about scaling, so how can we arrange information in meaningful patterns to scale? Get it at

Information Visualization

Not An Infographic
from slide deck to video
The porting of the design was the part I liked best. I love to experiment with cross media applications and see how the same basic information takes different shapes and patterns, and in effect slightly altered meaning each time. Analyzing the functional elements that trigger subtle changes in meaning is a great method to find new angles for media innovation.
I pondered the semantics of infographics on the web and turned it into an experiment in trans-media content strategy. More thoughts on the evolution of design patterns can be found in another blog post which in turn led to me writing a feature about the semantics of information graphics at
Liquid Democracy
an “explainy” web video
I created the video when I started out experimenting with animated web videos to explain complex concepts in simple terms. At the time I was attending a class on democratic theory in political science. Liquid Democracy was a brand new concept in select political circles for which not a single academic paper had been written, so when I took the notes I prepared to present to our class and turned them into a video I happened to create the first publication on the subject. I have since gotten quite a few requests for the German video to be published in different languages for education purposes, so here it finally is in English. Tanslate away. The few instances of text should be easy enough to mask with text in your own languages in a video editor.
I consider explainy videos a particular genre of information visualization that follows established conventions by now. The video here is actually somewhat old, and yet I find it still works quite well as an example of many of these conventions. A voiceover narration is being enhanced through simple motion graphics to illustrate complicated concepts and break them down into more easily comprehensible chunks. I published this particular example because of popular demand for the original video file. Download it here. The script can be found at this blog post.

Web Publishing

On The Pitch
(example designed for 500px width)
Picking up earlier experiments with visualizing football tactics and data I became co-founder of On The Pitch. Of note, albeit invisible, is our workflow that allows us to produce interactive animations within the hour of an event. That’s the kind of online journalism I want to see as a customer, so I try my best to help make it happen. And if the business ideas we have in mind don’t pan out, there may still be use for the experience with creating the publishing workflow. We’ll be investing more time again when the season starts. Let’s do this Johan!
On The Pitch is both a passion of mine and an attempt to test potential business models in publishing. There is not much of the latter to be seen, yet, but I am quite proud with the inception already. To my knowledge we are the only place in the web where you can find mobile ready interactive football visualizations like the example I present here. screenshot Kontextschmiede
the place where it all started
This was my first semi-professional attempt at creating something, anything really, on the web. I dug through tutorials of graphic design, html, php and css for months. We originally had plans to establish an authoring platform with editorial supervision, writing tutelage and more, but facing an overwhelming workload with no financial compensation in sight we soon decided against turning it into a professional venture and it became a bit of a playground for various publishing ideas. In fact, there are several notable experiments still buried in there that I have yet to translate and update. Some of those ideas caught the eyes of people who liked them enough to ask me to work with them. Yeah, I was stoked, too. And that is the story of how I entered freelancing.
The Kontextschmiede is a German authoring platform I created with some friends from school who went into Journalism. We have all since become too busy to continue with it, but some of the work we did there has become the foundation for other projects.

Thank you for reading this far. That is all for now. If you are so inclined, stay tuned. There is more to come.