Cooking for Nerds – Preliminaries

It's no secret that I happen to have a little bit of ADD when it comes to personal projects. As of this entry, I have 4 projects running: 2 comics, a portfolio redesign, and a cooking site. The comics are interesting challenges – I'm a decent illustrator, but I've never done anything besides one–offs or short series, and never had to maintain a consistent style. Also, I haven't drawn regularly since college. My portfolio redesign is an experiment building a site optimized for iPhone/iPad-style touchscreen browsing using jqTouch and my current site's portfolio assets. The cooking site is a larger endevour into content creation.

The new site, temporarily named Cooking for Nerds is focused on reformatting and representing recipes with an eye towards information design and logical workflow, as well an explanation of techniques using clear, concise visual language, which is the long way of saying, “I'm going to make it look pretty.”

Currently, I'm working on wireframes. For those who are unfamiliar, these are essentially undesigned blueprints which allow designers and programmers to see the pieces of a site they need to create and how everything works together. You can see the wireframes for the index and a content page below. For visual reference, I'm looking towards sites like Huge and JasonSantaMaria.com as inspiration for how large pieces of artwork and careful use of style sheets make pages built off a small number of templates feel unique.

One of the main design challenges I'm facing right now is how exactly I will treat the recipes. I don't think it's enough to list ingredients, the order you put things together, and the cooking time. Even simple recipes involve prep work, and when you have a recipe such as chili that cooks for hours, it's important to know that not everything needs to be prepared ahead of time. To that end, I'm working to design the information around the recipes I feature. One thought was a sort of bar chart.

Essentially, you list the steps in order, but the chart on the left helps you visualize where you are in the process. In this excerpt from a pasta puttanesca recipe, the first thing to do is boil the water. This takes a while, and you have a small number of ingredients which cook quickly, so taking your time to cut and measure your ingredients while the water is heating up makes it easier. As a visual representation, the green bar spans all three steps, showing that you should focus on your prep work while the water is heating. The blue bars represent single sequential steps, so they span only one paragraph each.

In my experiments, this has been painful to achieve, and I would appreciate suggestions on how to implement this if anyone finds this idea interesting and has some knowledge. My first thought was to create a DIV for each bar, and use CSS to set colors and styles, but I'm unsure how to set the height of each dynamically and provide the proper alignment (this would actually be easy for me to accomplish in Flash, but this wouldn't be an appropriate use for that plugin). I also considered using vertically-tiled background images showing the various combinations of visual bars, but that forces me to do some code gymnastics with padding and margins in CSS, and caused problems when I wanted to incorporate the horizontal dotted lines and proper alignment.

This has me thinking that it will be easiest to simply create a static graphic for each instance. It won't exactly be efficient, but the the results will at least be predictable and allow me to concentrate on the content. Still, I would love advice or leads on implementing the timelines dynamically.

So, that's the state of things. Comments? Encouragement? Cease & desist letters? Send them my way.