37signals Paper: An Introduction to Using Patterns in Web Design | Hacker News Reader

37signals Paper: An Introduction to Using Patterns in Web Design

37signals.com

45 pointsnreece7 comments

"Christopher Alexander, who came up with this stuff, calls these chunks patterns."

In design school, we called this design & layout.

I have followed this technique to the letter several times when I need to get away from the computer and flesh things out more succinctly. It really does work wonders, because it keeps you moving along instead of getting hung up on some minor detail.

Is their a link for their paper repository? I tried going one directory back and it gave me a 404

No, this is the only standalone article from them I've seen over the years and I assume it was the prototype form of what became the Getting Real series of essays:

http://gettingreal.37signals.com/toc.php

This particular approach (design all the UI "bits" first, then glue them together like legos) is a classic and I return back to it about annually. I use it in combination with another great bit of advice, Cameron Moll's "Nodes of design inspiration", which is to break down a UI into its component parts and then go looking around the web for good examples of each component:

http://www.cameronmoll.com/archives/000016.html

Using both of these techniques in combination is the single best way I know for busting designer's block when you're making a site or app from scratch, rather than redesigning or iterating an existing one. Those are the main tools I used last year to come up with the branding, site design and Flash UI for this interactive video startup:

http://asterpix.com

The video player got a bit cluttered since I left, but enough design elements remain to demonstrate the process in action. The top row of buttons on the video player, for example, were directly inspired by Flickr's strip of controls above their photographs. All the other annotation-centric video sites try to cram similar functionality into the same area as the playback controls or shove it off to the side where people ignore it. The sliding drawer of annotations on the left was inspired by google maps, etc.

The closest Getting Real article to this design patterns essay and most directly relevant to hackers is probably Epicenter Design - design the core functionality and most visually important element of a page first, then add in all the administrative debris around it afterwards:

http://gettingreal.37signals.com/ch09_Epicenter_Design.php

That advice holds true just as much for programming an interface as it does for designing it.

So putting all three of these techniques together, you end up with:

1) decide what is the single most important thing on any given page (epicenter design) 2) break it down into its component pieces and group related bits together (pattern design) 3) go looking around the web for good and bad examples (nodes of inspiration)

Good piece.

Thanks, there's a surprisingly high number of design-related conversations on HN and I'm glad there's a good home for them. It reminds me of what 37signal's blog comments used to be like while they were still a design firm and making a name for themselves - now the discussions after each post are almost Youtube-level bad.

Thanks.

Reply on news.ycombinator.com