It all started with a Moleskine.

I’m a big fan of brainstorming, so naturally I got to thinking. I wrote down what I wanted to communicate, what elements and pages I needed to have, etc.

Next came the grid. I decided to give 960.gs a try, first starting off with the 12-column grid. After a couple hours of playing around, I ended up switching over to the 16-column and came up with this first design:

#2

After showing it to a few people and taking it all in, the generally consensus I heard from people was that they all hated the red. Eventually, I decided that I hated it as well. Enter design #2:

#2

I liked the darker color in the header, but it just didn’t seem to fit with the rest of the design. So, I changed the rest of the design:

#3

I had gotten rid of all the serif fonts and dulled out the top of the header. Everything flowed much more smoothly, and it was at this point that I started coding it out.

While hacking out the code, I ended up making quite a few changes to the design. I realized it was still just way too busy. So, I cleaned up the header, moved the search bar, and changed up a few of the colors and padding.

Eventually, it came to what I’ve got here now.