It’s been just a little over a year now since we received our Microsoft Surface at Teehan+Lax. While it did sit a little idle for some of last year’s busy winter, as people started to free up, ideas for surface experimentation started to bounce around. One cool project that some of our guys came out with is the Hungry Hungry Hippos game. Seeing this had me chomping at the bit to think of another killer Surface idea, but it wasn’t until last summer that I had some time to start brainstorming. As with most design problems, I naturally started off by just sketching and story boarding out some ideas. However with the Surface, this wasn’t as simple as you’d think.

See, the first problem is that unlike websites, the Surface has a set screen ratio and size. Plus it has 4 corner zones that are generally meant to be off-limits since the Surface uses them for its own functions. (Although perhaps these can be overridden). This means that you really need to constrain yourself to these specs to make sure you aren’t designing an interface that simply won’t fit into the space. The second problem is that people will be using their hands on the surface. We’re talking multiple hands, which can get crowded especially when people need to reach over to touch things on screen. I initially found I was drawing the hands way too small, giving me a false sense of how many people could interact at once. Oh yeah, hands are also a total bitch to draw.

I was thinking it would be nice to have a library of assets that could both speed up the story boarding process, and ensure I was using the correct ratio and dimensions of the Surface screen. Much like the infamous iPhone GUI PSD I went about making some Microsoft Surface assets in vector format to address these needs:

It covers all the basics:

• A work area grid template, and complete surface tabletop. All made to the correct aspect ratios.
• Hand illustrations for 1, 2 and 5 finger touches, a blob shape, and a pointer device. Remember that the surface can distinguish between fingers and ‘blobs’ which is pretty cool.
• Gesture movements for both finger and blob touches. These can be used in conjunction with the hands to show how they are moving.
• Some different physical objects with barcodes on them, so they can be recognized by the Surface.

Now by no means should this be considered an exhaustive list of Surface assets. They’re really just a few of the basics to get you started. So with all that said, please feel free to download them in PDF format here. Have any ideas for additions or changes? Let me know, and we’ll see if we can’t work them into version 2.0!