I want to build an app that lets people play a game called Exquisiste Corpse. This was a wonderful game created by the Dadas in the early 20th century. The essential concept is that each participant adds to a drawing or poem that they can only see on line or section of. In my case, I would like users to be able to see one previous line, contribute the next line, and then eventually be able to see the completed poem. This is all for the sake of fun and I was surprised to find that no one had created something like this.
In this post, I want to take you through the steps I’m using to create this app. So far, I only have the front end completed. I’m polishing my back-end programming skills to eventually get this up and running.
First Step: Mockflow
I was introduced to this service by one of my professors and I think it’s a really great tool. There are lots of wire frame apps out there, but I like mockflow because it limits you to information architecture only. Having limitations often really spurs your creativity. Mockflow also gives you the ability to easily share you mock-ups with clients. Exported PDFs have functioning links. Now you even have the option of exporting a wire-frame as HTML5 to help get the design and development moving along more quickly.
Here is a concept wire-frame for the app:
Next Step: HTML and CSS
Normally, I would create a mock up in Photoshop, but I decided to head right to the text editor this time. Why? Well, since the interface was so simple there wasn’t a lot to figure out. Most of the work has been done in Mockflow. I am pleased with it so far. The paper textured background came from Subtle Patterns which is a great resource for backgrounds. The fonts are from Google’s web font service, which I am loving. I built this all on top of the HTML5 boilerplate. My hope is to get this working so that people can play with it and create strange spontaneous poetry. Below is a screen shot and a link to the demo version. Enjoy!