Building in the buff the developer’s “designing in the open”

Steve Fisher and I have talked about “designing in the open” on our Using Blue video podcast. The current design on that website is a work in progress; as we figure out how users are interacting with the content, we’ll tweak and refine the design. The concept is particularly useful in combating “the perfect is the enemy of the good.”

With my personal website, I’d like to extend the designing in the open concept right down to the roots. This site needs to be upgraded to Drupal 7, so I’ve decided to document and illustrate the entire process of rebooting my website.

This will not be a simple upgrade. I’ll be re-thinking the purpose and goals of my site and rebuilding it from the ground up. And I’ll be attempting to incorporate a myriad of design principles and best practices as I go.

• Drupal 7 upgrade process
• Content strategy
• HTML5
• Sass
• Zen 7.x-5.x
• Design techniques in this order: typography, color, composition
• Mobile first
• Responsive Design
• Flexible grids
• Flexible images + Drupal magic
• Front-end performance

I’ve actually been meaning to re-design my site since reading Mark Boulton’s Designing for the Web almost two years ago. But, if you’ve listened to Episode 3 of Using Blue, you’ll already know that I think the web is about to undergo a profound shift in the way we build sites. So now’s the time to stop listening and discussing and to start building and discussing.

Sounds good, but what’s with the crappy design?

Some of you are asking “Why should I bother following this discussion when your site looks like a time traveler from Netscape 1.0?” A fair question, actually.

Most designers would be horrified to present something so unpolished and lacking in any good design principles. (And to add insult to injury for many designers, I’ve added Photoshop-nauseu-inducing blue guide lines to the background.) But I am unafraid. Or rather, I’m shameless.

The current “design” is a mixture of:

1. Browser defaults
2. Drupal 7 defaults
3. Zen 7.x-5.x-dev defaults
4. A very minimally tweaked Zen sub-theme (Adding support for my blog posts’ title/tagline combo.)

Since I’ve had a hand in creating many of the defaults in Drupal 7 and in Zen, I should own them.

The markup and sytling you currently see is the Pǔ (樸), or the “uncarved block”. It has no right or wrong, no beauty or ugliness. It is markup in the receptive state, ready to become.

Or to put it in site builder terminology: One of the purposes of Drupal’s and Zen’s default markup and CSS is to be easy to alter and extend. And to be a reasonable starting point. But it’s just a starting point, you will need to alter it to meet the needs of your site.

What’s next?

As you can see from the site, I’ve already done some of the work. In fact, you’re looking at a brand spankin’ new Drupal 7 site. The next post in this series will describe the upgrade process I used to get my site off of Drupal 6.

When are you rebooting?