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

By John, 7 July, 2011

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?

Topics: Drupal, Zen, Design4Drupal, One Web


The content of this field is kept private and will not be shown publicly.

nigel (not verified)

12 years 9 months ago

nice idea...

Letting go of perfection

Designing in the open is a great approach. It becomes more viable as we let go of the notion that websites need to be pixel perfect across all browsers and just focus on maintaining brand consistency and delivering quality content.

We just launched a redesign of in which we migrated from Wordpress to Drupal using a responsive design. The design we launched with was certainly not perfect and far from finished-- but it was way more usable and informative than what we had. Waiting until we reached design perfection would have been a disservice to our readers. We launched with a solid foundation-- I can go back and tweak the search results and optimize for widescreens later. In the meantime, our users are getting a better experience than what they had.

I'm glad I saw your redesign early in the process. Now I have a chance to follow along.

Sounds good, but how about some nicer typography? A little more padding in the margins, etc. If you're going to step away from Garland (and I applaud that) it would be nice to see a little more sizzle *especially* out of the box. Good defaults are just as easy to override as bad defaults.