The last time I built a site for myself, I started off by designing a theme. It consisted of hand-written messages on napkins, bits of tape for navigation, and other bits of visual sugar to add personal touches to the site.

It was a lot of fun to draw out and implement, though it was extremely onerous to maintain. I had trouble getting my blog content to fit in to the spaces that looked good on paper, but weren’t workable in practice. In the end, only the front landing page was released. The blog remained in the default WordPress template throughout its short life.

Three years have passed since then. During that time, I’ve spent a lot of time thinking about information, especially about how it’s organized. When it came time to design this site’s theme, I embarked on a much different approach. Themes set the tone of a site. They provide flair and splendor, make the ordinary extraordinary, and other clichés. On blogs, theming often includes boilerplate material like a banner and global navigation at the top of pages, sidebars of auxiliary content and options, footers of legal notices, statistics, and other trivia, and a spot in between it all for the actual content. The theme is primary; content is secondary.

Recently on A List Apart, Keith LaFerriere penned an article describing the value of information architecture (IA) to site building. IA is about discovering the purpose of a site. It details the requirements, goals, and user paths of a site, validates a site’s purpose, and mitigates scope creep. Visual design should come after, and is informed by, the outputs of IA. Content maps, navigation schemas, and persona definitions describe what is in a site, how the material is going to be found, and the users that will be interacting with the site. These are just some of the deliverables from IA that are instrumental to designing the visual aspects of the site. Far too often, site builders will jump right to the end, designing the look of a site, and then shoe-horn content into the spots filled with placeholders. Unbeknownst to many, every time lorem ipsum appears on a design mockup, an information architect chokes on a chicken wing.

Content precedes design. Design in the absence of content is not design, it’s decoration

Jeffrey Zeldman, via Twitter

Creating the new WiredFlux started with IA. What am I going to put on the site? How will it be organized? What materials do I already have, and what will I need to create? Instead of lorem ipsum, I made up sample content representative of what I intend on creating in the future. Only after going through the deliverables outlined in the article did I set out on the design. The result, you see before you. Here are some of the thoughts behind it.

1. Maintainability

One of the lessons I learned from last time, was that it takes a lot of effort to do custom everything. Without an art department to back me up, or turning this into a full time job, it is impractical to design a template that requires a lot of upkeep. The template is stark and utilitarian, and that means I’ll need to stay on my toes on creating and presenting compelling content.

2. Focus

A pitfall of designing page templates in the absence of content is that it is very easy to create something that focuses on the template itself, and does not serve to highlight or support the content. Decorations take over, and you think, “wow, that’s a good looking template!” Without content, it is very tempting to populate the template with bits of informational snacks all around the content area to give it the appearance of substance. This only serves to overload the page, filling up users with useless information, ruining their appetite for the main course. This is not an argument against dense pages with a variety of peripheral content. This is an argument against designing such elements into templates that are repeated across every page of a site.

3. The Absolute Least

Figure out the absolute least you need to do to implement the idea, do just that, and then polish the hell out of the experience.

John Gruber on iPhone application design

In creating the WordPress theme for this blog, I thought hard about every single element in the templates. For example, as the only author on this blog, it doesn’t need to say “written by: King Chung Huang” on every post. When an anonymous user posts a comment, everything but a web URL is optional, so that one field is tagged optional instead of displaying required on all the other fields. A lot of stuff has been thrown out, reducing blog pages to only the most relevant and important elements. Over time, some pieces may be added back in (most notably tags). But, it’s an exercise in restraint.

4. Identity

Many PLE diagrams that I’ve seen have some concept of “me” at the center. Cole Camplese recently posted a community question about identity, asking readers to define identity, especially in the context of the digital world. I responded with the idea that identity provides the context for our activities in the modern web. To realize the power and possibilities of this fully, I believe identity needs to be expressible independently of any specific tool. I see many examples of PLEs with blogs serving as the “me” point; I don’t agree with that practice. So, like the last WiredFlux, this blog is just one aspect of the site, and is not the hub of the site itself.

Welcome

Since this is the first official post, I’ll end with a “welcome” to anyone who’s managed to survive to this portion of the post! I hope its length hasn’t scared anyone away permanently.

1 2

This entry was published on Thursday, January 1st, 2009 at 8:00 am. Both comments and pings are currently closed, but you can follow any responses to this entry through the RSS 2.0 feed.