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!!

Do you Poken?

The upcoming 3.5 version of Firefox will feature a revised logo, which I just love. It was created by Anthony Piraino, icon artist at The Iconfactory, and is based on conceptual artwork by Stephen Horlander and sketches by Jon Hicks, who created the original logo in 2004.

Don’t you just love the smoother fox and the 3D effect on its tail? I could look at it all day!

For more information about the design process and the creative brief (worth seeing!), read the blog of Alex Faaborg, principal designer at Mozilla. You can download the new logo in various formats at the Mozilla Wiki.

The visual editor of WordPress (TinyMCE) loooves to remove iframes from the content. This can be extremely annoying when you want to add Google Maps or other iframe-based widgets to your post. There are several approaches to a solution:

• Turn off the visual editor
  No problem for someone who has a good grasp of HTML. Not quite a solution, more of a workaround.
• Edit the TinyMCE configuration files
  The required changes are simple but could be lost with the next update of the editor.
• Use plugins
  I’m sure, there are tons of WordPress plugins which address exactly this issue but more plugins also mean more maintenance. Especially, when there is a much simpler solution.

Add the following code to the functions.php file of your theme:

function field_func($atts) {
   global $post;
   $name = $atts['name'];
   if (empty($name)) return;

   return get_post_meta($post->ID, $name, true);
}

add_shortcode('field', 'field_func');

Now you can display the value of a custom field in your post by adding the shortcode [field name=name-of-your-custom-field] to your content at the position where you would like it to be shown. Just make sure that the shortcode stands alone on a line, otherwise WordPress would wrap it in a paragraph, which would result in invalid HTML.

To add an iframe, simply paste the HTML code into the ”value” area of your custom field, like shown here:

Voilá. Your iframe (or any other HTML code for that matter) will not be removed from your post and you can edit the code without having to switch to the HTML mode.

Update: You’ll need at least WordPress 2.5 to be able to use shortcodes.