Jon22: The Website of Jonathan Dobres

I don’t know about you, but I’m rather enjoying the site’s recent redesign. This redesign is unique for being one of the few to involve extensive planning in Photoshop. This has the added bonus of acting as a trail that documents my bizarre mental processes. The trouble is that I often want two different and completely opposite things from a new design. Some ideas will give me a good vibe, some other ideas will give me another good vibe, and the trick is selecting out what’s actually, physically possible from my menagerie of conflicting visual fantasies. So, here’s where things started:

The thought process was something like this. John Gruber already has dibs on the perfect shade of blue, but I’ll bet I could find something nice in the eggplant range. I further bet that I can find some complementary colors that create a twilight/sunset feeling, simultaneously cool and warm. I rather liked the text treatment in the header, a bit like a shadow box, and I figured I could stick interesting images in there if I felt the urge. The large header text is set in the extremely satisfying Legato Semibold, which will be with us for some time. Note the incorporation of a sidebar, which was a must for this design. I closed Photoshop confident that I had found The One. A week later, I hated it. Bland, dark, and dull, and why did I think this pseudo-3D header was a good idea? Still, I believed firmly in this purple thing. So:

This one didn’t last all that long. It’s brighter than the first run, and visually simpler, trading artificial depth for background texture. Still not the one. I had accidentally restricted myself to a monochromatic color palette, and the header just doesn’t feel right. This brought me quickly to attempt number three:

I liked this one. I really, really liked this one. I went with an even simpler header that really makes the Legato pop off the page. Purple has been officially abandoned for a much lighter background. Since this changed the contrast, I could drop the size of the body text a bit. Paint splashes and weathering made their first appearances here as well. I stared at this thing for a long time trying to come up with a complementary color for the green. It was then that I realized that the design looked awfully familiar.

Whoops. This is the first design I ever used on this site. Simple, bold black text with a green accent, displayed on a subtle white damask-patterned background. They are, in fact, the same damask pattern, and virtually the same contrast and color. In preparing this screenshot, I had to load the design onto my local copy of the site. I still love it, though the central column is now too narrow to accommodate many of the images that I’ve used in posts. With a little modification it could be awesome once again, but I wanted to avoid repeating the past so explicitly. Hmm. I wonder if I have anything else in my Photoshop folders that never saw the light of day…

As it turns out, I did. I found a very old design mock-up from 2004, which I then recombobulated to fit the width I was after. I had to abandon Legato, much to my chagrin, since it just didn’t look right. I liked the colors in this design–warm, but not overwhelmingly so. The muted reds and blues made for a nice contrast, and the shots of black ink gave it some punch. However, I didn’t like the boxed-in look. Columns of text create their own distinct borders as they flow down the page. No need to emphasize them even more. And drop shadows are so 2001. It was at this point that I accidentally hit the Invert button, leading to:

Interesting, right? A distinct but unobtrusive background texture, vibrant colors for accent, and even a hint of purple! Still, the white text on black background felt a bit cold. Reverting the background color to something closer to woodgrain or paper got me the warmth I wanted, but the accent colors no longer worked. Thus the muted blues and greens, and brown body text just to see if I could pull it off. And there you have it.

If you compare where I started to where I ended up, the difference is pretty hilarious. It’s all about the journey.