Pulcher Sentio’s 2007 Spring redesign was, without question, the most extensive design process I’ve put the blog through. It may very well also be the most extensive design project I’ve undertaken to date. Here’s how it all went down.

Back story

The ball got rolling on this design long before I ever realized it. A visit to The Design Museum in London back in November, with its exhibition on the iconic Underground design, followed by an extensive discussion of the merits of Hoefler Text, among other things, with Adam Prizio, was probably the start. Sometime later, I came across, then read and re-read (though I’m not sure how well the authors would say I have applied their principles) Oliver Reichenstein’s “Web Design is 95% Typography” and its sequel, and pored over the notes from Richard Rutter and Mark Boulton’s “Web Typography Sucks.” I’d tried to pay attention to the typography in the prior design, completed in the summer of 2005, but there were a lot of aspects I’d simply ignored. Combined with the fact that I hadn’t actually looked like the logo image of the old design for well over a year, it was time for a change.

I approached the design with several specific goals, several questions to be answered, regarding continuity.

• What, if any, were the underlying elements that either I or you, the readers, had come to associate closely with the site?

• Were there any elements of the previous design that were adversely affecting the readers’ ability to navigate the site or read the posts?

• What elements were present but completely superfluous, and what, if anything, should be done about them?

Bearing those questions (and answers) in mind, I set about trying to meet my other general goals:

• Make the site generally more accessible, legible, and navigable, even if it was already sufficiently so.

• Make the look more modern without creeping too far into the dark heart of Web 2.0 territory.

• Create a more open, less pretentious/Starbucks-y feel to both the appearances and the set copy on the nested pages.

• Give myself a challenge, and do something I’d never seen done.

These goals were broken down into more particular elements, but when combined with the questions about the old design, they form the basis of the project.

It begins

I started mocking up design ideas in Photoshop at the end of March, but it was mostly just dabbling. Some of the initial concepts were rather huge departures from any previous design, essentially neglecting all of the questions I was asking about continuity. They had single-column streams of text, no images, and background blocks of color as the only differentiation of function. They were interesting, they were modern, and they would have been challenging, but they were all wrong. I started factoring in what people have come to expect out of a Pulcher Sentio design, and remembered the public backlash the last time I tried to implement an entirely type-based design, and started working on another here’s-a-picture-of-me-in-the-header style of design. I recalled the old “Demon on the shoulder” and “Frank Zappa’s Hot Rats” headers I’d worked with when I first started the blog, and decided to go for something that was halfway between those and the previous image.

Soon, I had a rough source image relegated to a square in the corner of several blocks of colors borrowed from the previous design. The text was arranged with margins squared around the central meeting point of the image and the three blocks of color. As soon as I began this design, I realized that a two-column (a kind of minimalist “Empire of Japan/Iconographic Nimbus” from mid-2004 layout) was what I should have been using all along: Why had I had three columns in the previous design, when there were only two columns of data?

Hurdling

With the initial setup marked out, I got into the thick of it. How was I going to make the design new and intriguing, in a way that would present me with not only a departure from the old designs, but with an actual design challenge? The answer came when I began considering legibility and organization: I would only allow myself one typeface and two font sizes (aside from the header), and only one alignment for each column of text. Weighting, decoration and coloring (within the established scheme) were fair game, but I would have to find a way to clearly delineate the function of the various bodies/lines of text without using any of the conventions I’d used so extensively in the previous design. Horizontal lines were also out. The previous design had used two typefaces (so long, Georgia; I shall miss your quirks and serifs, but it was time) and five font sizes in every manner of alignment/justification available, save centered, not to mention fairly extensive use of horizontal borders. This might have seemed almost insurmountable, save for the fact that by now, most of my regular readers do so via the RSS feed (and that there are now even some who simply read it via Facebook Notes). Since most readers aren’t relying on the front page for their content needs anyhow, I could eliminate the need for horizontal date markers, drastically set-off titles, and almost inscrutably small permalinks and category data: I could set the main page to display one post at a time.

The decision to only display one post per page (with the exception of the category archives) lent itself well to not only clearing the “challenge myself” hurdle, but also the legibility hurdle. I could increase the font sizes and line height to establish better vertical rhythm so content could be more easily read from any distance, and not have to worry about the front page scrolling on endlessly (though allowances are made in case of particularly long posts, not to be self-referential).

Nitty-gritty

Even though the cosmetic changes are substantial, it’s been said that design is not making the logo bigger, and I was out to really redesign the site. I went through my design templates and stripped out the code that had been leftover from the initial Movable Type default templates but hadn’t been used in years. I changed some of my tagging nomenclature to better reflect location and function. I added a new archive structure to form permanent links that actually give some clue as to the content of the page, rather than simply being a number (old permalinks still function as they should, fret not). I redirected comment links from a dedicated pop-up to the permanent archive page of the given post, so comments could be viewed and written entirely in context without any window-switching. I edited the archive lists to include the month posts were written to add greater context and increase ease of archive navigation.

A wrap

Thanks to everyone who helped out with the new design:

• Justin and Matt, for consistent debugging and CSS help;

• Peter, for, as ever, hosting it, and also for installing the Markdown and Smartypants plugins for Movable Type to help in my quest for better typography;

• Roy for a fresh pair of eyes on the project, and;

• TKP, for not getting jealous of all the time I spent with Lucille and the blog rather than her the past few weeks.

The drastic font and layout changes have elicited critique of various sorts throughout the process. When I asked Roy for some initial feedback, he said, “Hrm. The text is so big,” and little more. In the same conversation I said, “I’ve… never seen another blog set in 18pt anything.” “Neither have I,” he replied. “So long as we’re agreed on that.” When Valk got a look at the front page in its near-completed form, his assumption was that I’d simply not hashed out any of the style sheet parameters, when in fact I’d spent probably almost a total of 24 hours doing just that. Feel free to leave your own opinions in the comments, as usual. I think it’ll grow on you, if it hasn’t already.

PS

Will thinks this post is rather creative and musing and random and technophilic.