The rectangle behind you
Build two awesome slides
There’s nothing wrong with a good gimmick, as the saying goes. Or maybe there’s no saying. But the point remains.
I often approach my slide decks with two objectives:
- put a crazy amount of effort into making one awesome slide or feature that will be noticed
- put a crazy amount of effort into making one awesome slide or feature that no one will ever know about, but me
It’s the second one that’s not meant to ever be noticed, but even if the first one is not — it doesn’t matter. The journey is the reward. I love knowing that there are some slides that seem masterpieces, even if just to me alone.
Of course, the usual caveats apply. I don’t want to make slides that overshadow what I’m talking about. The purpose of a slide is to reinforce, illustrate, enhance what I’m saying — never the other way around.
Examples (most, but not all, done in HTML):
Big things meant to be seen
Some years ago, I wanted to explain how we layer rectangles to do animations on Google’s homepage (I called this technique “The Crushinator.”). Then, kind of randomly, I added a 3D mode using then-nascent CSS3 features. That mode would illustrate how the layers affect one another.
Play with the live demo · Check out the code at GitHub
It felt very powerful. (It’s even gotten applause a few times.)
Interactive, live annotation of running software could be very fun. I built an extra mode into Google Pac-Man that could slow it down or pause it, show how the spriting works, and what the Pac-Man ghosts were thinking at any given moment.
Then, I used secret keyboard shortcuts to control it as I went along.
Once, I wanted to illustrate how old-school CRT display operates, so I built a complicated animation to illustrate electron beam moving around, first slowly… then faster and faster.
For a Pac-Man talk, I made my slide deck resemble an old, broken down display with all sorts of analogue flaws. This turned out to lead to a really interesting end result.
On a few occasions, I glued an iPod Touch to the Nintendo Power Glove, and then transmitted the accelerometer data via Node to the talk to fake me pointing at things.
It was so bad.
During my Golden Gate Bridge Ignite talk, I mentioned the proposed alternate colour schemes for that bridge. I thought it’d be very powerful to actually see those colour schemes, so I spent tons of time in Photoshop “repainting” the bridge:
Big things meant to disappear
For a talk about typography and underlines, I kept coming back and building up on one visualization. I could customize the text on one slide, and once changed, I wanted it to be the same for other slides. I needed to build a function that propagates the events from any of the slides to the other two.
In the same talk, I wrote a routine to programmatically improve punctuation in the text by replacing certain glyphs with others.
During one talk, as I was explaining how I connected two computers together, and drew an iPhone on the screen, I made sure that the time at the top of the fake iPhone screen matched the current time.
At one of my talks, I wanted to jump to Mac OS Finder to show how you with modern JavaScript you can drag any file onto a website and use it. However, I learned that if you run an HTML presentation in full-screen mode on Mac OS, you cannot easily switch to another program without the annoying sliding desktop transition.
To solve this, I basically recreated Finder in HTML, with just enough functionality to drag something out of it, and onto my page:
For my Fronteers 2012 talk, you can see that the little antenna in the corner of the slide actually activates when it’s receiving signals from my remote.
(This was a little detail that also happened to be useful for debugging. I have no idea how many people noticed this.)
For my Ignite talk about Golden Gate Bridges, I wanted part of the title to disappear behind the ship. This required cutting the image carefully, placing it on top of another one, and matching the movement precisely across two layers.
But, the biggest invisible thing I ever built was a network of six computers tied together to control a presentation that didn’t look like anything special. Which was the point all along.
If you have any examples from your work, I would love to hear them.
The rectangle behind you, a series of articles about interactive presentations.
By Marcin Wichary (@mwichary)
