Page 114

217

Designing for the Web ~ Layout

218

Drupal.org – a redesign process using Blueprint I’ve seen great value in Blueprint when using it for rapid prototyping. Specifically, Mark Boulton Design, the small design studio I run, used Blueprint to build the prototypes for the redesign of Drupal.org. The process for the redesign of Drupal.org was a twelve week exercise. We released weekly prototype designs based on information architecture, user testing and feedback, community feedback, and revised business goals. With such tight timeframes, we needed to focus on the user experience and design of the site, rather than worrying about fixing IE 6 bugs. We needed a CSS framework. We started out using Blueprint to create quick lo fi HTML prototypes. These were essentially wireframes created using the various classes and styles available with Blueprint. As time went on, we needed to create more and more plugins for Blueprint for things like tabs, buttons, tables etc. When the prototype reached a certain point — iteration 6 — we needed to start applying a visual design to the completed wireframes. This is where Blueprint came into its own. With minimal changes to the HTML documents, we were able to add a Drupal.css stylesheet to override a lot of the default styles and start to apply a Drupal design. Through the iterative process, we were able to build upon this to produce quite different looking designs from release to release. All the while, the Blueprint core css files remained the same. That way, we could ensure that if we needed to upgrade Blueprint for whatever reason, we’d be able to do so without breaking the site. The final version of the redesigned Drupal.org, in all likelihood, will not use Blueprint as its CSS framework. Whilst the various templates look great, the HTML in the background is bloated, and could be dramatically improved. If you plan on using Blueprint for a production environment, or on a live site, make sure that you pay particular attention to this. Make sure you keep your HTML nice and trim.

Right: Drupal.org redesign Left: Drupal.org wireframes created using Blueprint

licensed to Denis (1 user license)

Profile for anh7

Five simple steps designing for the web  

Designing for the web

Five simple steps designing for the web  

Designing for the web

Profile for anh7
Advertisement