
37signals Paper: An Introduction to Using Patterns in Web Design - nreece
http://37signals.com/papers/introtopatterns/
======
radley
"Christopher Alexander, who came up with this stuff, calls these chunks
patterns."

In design school, we called this design & layout.

------
nertzy
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.

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

~~~
alabut
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)

~~~
greev
Good piece.

~~~
alabut
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.

