Video

This is the new Design Process I’ve been trying to use lately. Skipping Wireframes and Photoshop comps! This video shows all the different design steps needed to create the Shitty Day site. As you can see, I tried to implement some principles I picked up during the years:

• Getting Real: Create a working prototype first, worry about Design later.
• Design from the inside-out (can’t remember the link): Concentrate first on the content (Tweets), then the things around it.
• KISS: Keep it simple..

So, where are all the wireframes and Photoshop comps? They got skipped..!! no wait.. actually you could say that the wireframe (basic layout at the beginning) and the Photoshop comp got created straight with HTML/CSS and then constantly changed and refined.

The tools I used for this project were Espresso for the HTML markup and then CSSEdit for styling. Later in the process I used Photoshop to create single images like the background tile, paper holder and so on, but never for the layout.

It all seems pretty easy and straightforward, but I think this process works best for smaller simple sites. For bigger and more complex projects, the traditional approach might still be better. Also before I started I had sketched out the idea on a notebook and had already a pretty clear picture in mind how everything should look and work. If you would ask the client for feedback during the process, they would probably tell you nonstop how ugly it looks. ;-)