Designing systems not pages

Having been through the re-development process quite recently I have walked away with the notion that it could have been done better. Not that the design could have been better or that the build could have been done better, but the process could have been easier. Communication could have been more fluid and guesswork and follow up discussions could have been reduced if the transfer of ideas had been more robust.

I have had a look into some of the concepts kicking about and have had discussions with the designer as well regarding frustrations from both our sides of the process and some of the ideas we came up with and touched on, it seems have already been fleshed out a bit more.

I came across a couple of slideshows that seem to encapsulate the ideas

www.slideshare.net/waako/styleguide
waako.github.io/stop-designing-pages/#/

both by by Tom Bamford a British drupal themer

The concept is basically that you design systems not pages, do away with the psd and transfer more information about what is being built using something else.

24ways.org/2012/design-systems/ and cognition.happycog.com/article/sweet-systems help to highlight the idea. These articles provide a number of ways a designer can help get involved in the development process to help ease the development process using style guides and style tiles that allow the concepts of the design system to be shared. Pattern libraries can also work well.

These could easily include the actual css and html to be used in each of the ingredients that combined make up a website page. I'd love to see the designers get more involved in the development process by providing css snippets or html code that would show exactly how things should work on the live site rather than providing a one page psd, that has a limited way of showing dropdowns, hover states, expanding and collapsing areas, etc.

Using sass and compass through mixins and variables styling up a site becomes a vastly improved experience and a unified brand can easily be ensured.

For designers starting to design for a drupal site there is already a style guide framework that helps make sure all the components have been accounted for:
reload.dk/drupalstyleguide