The game

If you live in Austria and are a fellow citizen of the Social Web, then you probably have already heard of The Vienna Project, a LARP spy game which will take place in Vienna on 22^nd of August. Until then, interested parties have to solve a series of riddles in order to be recruited as one of 16 “agents”, who will then participate in the game with the mission to unravel the mystery of a vanished colleague.

The game is mostly organised and promoted via social networks like Twitter and Facebook by its creator Roman Mittermayr and his team, all in their free time. Although I’ve never played a single LARP game, this one kept my interest and I was looking forward to the unveiling of the official website:

I must say, while I really liked the image of the hatted agent, the website just wasn’t what I had expected. But a few minutes later, Roman twittered:

“And pls don’t destroy me on usability, design or the small font-size Do a new awesome design for free and I’ll make you god for a day.”

Having had a few hours on my hands, I didn’t need to be told twice.

The inspiration

To get myself into the right mood, I compiled a playlist of a few suitable film scores and started to scribble.

Being a huge fan of spy movies (especially those with Bond, James Bond), I wrote down a few attributes I like about them in particular: Secrecy, puzzles, suspense, action, deception, … Now I had to decide which ones I could incorporate into the design within the limited time at my disposal.

The design

I wanted to give the viewers the feeling of already being part of the game, so I created a scene, where they slip into the role of an agent who’s browsing through confidental documents in darkness, using a flashlight. To add atmosphere, the light can be moved with the mouse on the start page.

The Austrian passport was added as tribute to another characteristic I love about spy movies: The numerous locations shown. Bond, for example, travels halfway across the world in the course of a single mission.

The resources

Providing a layout for free is one thing, having to pay for the necessary graphical material out of your own pocket is another. Luckily, SXC proved to be a valuable resource for royalty-free photos for this project. A big thank you to:

• slafko for the folder.
• rodnem for the white paper.
• Dippes for the paper with lines.
• Scyza for the Polaroid picture.
• alaahammou for the light effect (used as reflection on the iPhone).

For the moving flashlight on the start page, I used a PNG image, a few lines of JavaScript (on top of jQuery) and CSS. No Flash.

The reactions

I received a lot of positive feedback on the redesign like the one above. Thank you!!

Similar posts:

• Do you speak English?
• Creative business card design
• Creative Commons icons as custom shapes for Photoshop
• My favourite iPhone applications (so far)
• Web-Entwicklung mit Safari