I couldn’t sleep last night, so I fired up GChat and Photoshop, and proceeded to compose an apotheosis to the summer-long, Google-fueled graphic design / web development crash course I’ve been giving myself. The goal? To redesign this site. This is only a little necessary–I’m accumulating some work experience IRL that could be showcased–but mostly, I’m doing it because I’m a self-absorbed, obsessive-compulsive, procrastinating geek.

Here are the 3 ideas so far, the one on the right being the current draft / what I did last night instead of work or sleep.

  

My initial idea on the left, which I actually mocked up a few weeks ago, was to combine my presence on the web into a single entry page. It failed because, well, the layout simply isn’t pretty. (And as one friend points out, putting the picture in the center is a little too egocentric even for a designer’s personal page.)

The second is basically the first but rearranged to break symmetry–a major source of the arrogance/ugliness in the first design. But in the end, it wasn’t the right way to go. Futura–the header font I started with–wasn’t straightforward enough (but don’t worry, I’m not going to use Verdana), and something had to be done about the sea-of-text look.

Of course, I intend the site to be text-centric, and everything from the columns to the black bars under the headers were directly inspired by NYT design director Khoi Vinh’s blog. Thing is, he has that photo of a beautiful dog to break up the monotony of text and rectangles. I have…my Twitter feed.

The page badly needed some graphics. Realizing that old hobbies should be dug up and put to use whenever possible, I dug through some old photos and found this scan of graffiti painted on an electrical box in Somerville. I put this in as a backdrop, and used the font Avenir for the header text, because it’s like Helvetica, but more friendly looking.

I ended up with the mockup on the far right, and this is when I decided to go to sleep. It still looks a bit too busy, and I’m trying to decide whether to remove some text, add whitespace, or go with my idea now which is to use Javascript to make a sort of “whitewash” overlay that reduces the distraction of the sidebar until you put your mouse pointer over it. I tried to convey this in the mockup by doing the “whitewashing” effect over the Twitter feed but showing the Delicious feed in an “active” state. You’ll see also that a mouse cursor is positioned over one of the link items to demonstrate the mouseover effect for that.

Now I know none of the ~5 people who read this blog are going to care whether the typeface is in Futura or Helvetica, or whether the baseline grid is consistent on the whole page, or if the markup degrades gracefully on older systems. But I know there are budding coders who are currently where I was last year, and the frustration when you want to do something but have to figure it out by reading 10 different articles. I’m hoping to document this redesign so that all of the techniques I learned can be found in one place.

Ok, stay tuned for more progress on the redesign, and a few links on specific Photoshop techniques I’ve been picking up!