Sunday, August 3, 2008

DIY: Blog Design

My friend and fellow blogger, Stuart Lock, was in desperate need of a redesign for his blog, Stuart's Train of Thought. His posts were great, but the layout was far too cluttered and visually confusing. In response, we found ourselves setting up his laptop at my home workstation and spending the better part of the day customizing and tweaking his site to create one more befitting his written content.

In line with my design ethic, we first tried to determine a particular mood before we settled on a color and layout schemes. But once we decided on his ideal, it became clear that we would need more than what was available through the standard blogger templates.


Thus began our DIY blogger day. I worked mainly in Photoshop, creating custom image content to fit the blog. At the same time, Stuart was working directly in HTML to modify the site to make space for the content I was creating for him (Though not crazy difficult, I will say, though, that the clean look of the final product involved far more work than you'd expect). Once our elements were placed, I took a screen capture of the new layout, brought it into Photoshop, and began color concepts.

Seeing as altering colors on the fly is much easier in Photoshop, we tested a number of color combinations in Photoshop before even attempting to implement them through the Blogger template controls. Once settled, we took the hex codes directly out of Photoshop's color picker and copied the values into the HTML to recreate the exact hues.

In the true spirit of DIY goodness, we disabled a number of undesirable layout elements on the base template we chose, and took photos from around my apartment to create the new header. The final step was to reorder the content to create a strong visual information hierarchy to subconsciously lead viewers to the primary content. Now, from the moment the blog loads up, it's clear what's important, what's new, and where to go to find old information.

All in all, I call it a very successful redesign. So... that's coming along.

No comments: