An Introduction to Using Patterns in Web Design Jason 10 Aug 2006

17 comments Latest by MH

Here’s an oldie but very goodie from Ryan back from Oct 2004: An Introduction to Using Patterns in Web Design. If you haven’t seen it yet it’s new to you.

17 comments so far (Jump to latest)

shane 10 Aug 06

Ryan, great write up! Thanks for taking the time to share your systematic thought process with us… Great insight there and it shows in the 37s apps!

Jason, thanks for pointing it out to those of us who have never seen it.

FredS 10 Aug 06

Ok, but how does it look when the “edit my info” button is pushed - is it a separate page or some prototype unhide-the-form action?

STe 10 Aug 06

I have never seen it before. It does, however, ask one question. How much design and thought goes into developing a 37Signals application before you actually start to do the html interface?

This was two years ago, and you have three steps before you even get onto sketching your pages on paper. Step six is �making it real�. Based on what you preach in �getting real�, Ryan�s methods in this article seem to contradict working practices you so fiercely defend.

Can you shed light on this, and how have your working practices in particular, Ryan, changed over the last two years to reflect a more simplified and streamlined work method?

JF 10 Aug 06

How much design and thought goes into developing a 37signals application before you actually start to do the html interface?

We don’t do any of this *formally* but the fundamental approach is useful when we’re stuck on something. It’s a good way to think about how page elements relate and correspond to one another.

95% of the time we just dig in. Sketch on paper for a few minutes and then dive into HTML. A lot of the thinking happens naturally now since we’ve been doing this for so long. Our apps all look alike now so we’ve solved the bigger structural issues already.

But the ideas themselves are still strong. We design from the epicenter. We design UI nuggets, not pages. Then we piece the stuff together until a “page” is formed.

Experience replaces process and formality. We’ve been doing this for so long that we just know what’s going work or not work before we even get started. We don’t have think about it or try a lot of things to see if they work because we already know. Sometimes we’re wrong and we make changes, but we rely on our experience, not formal process, to guide most of our decisions.

STe 10 Aug 06

A lot of the thinking happens naturally now since we�ve been doing this for so long. Our apps all look alike now so we�ve solved the bigger structural issues already.

Experience replaces process and formality

You talk a lot about designing through experience and instinct; about knowing what will and will not work.

Designing pages in this fashion will work well if done correctly and by those who know how to do it. Ryan�s approach is more of a way of thinking rather then a way of doing. Based on what you have written, not everyone is going to be able to use this method or fully utilize its capabilities.

A small part of your getting real process involves slowly removing documentation that is supplied to the client. Those without years of experience will need to start slowly and make sure they apply your design methods correctly.

What advice would you give someone who wanted to use this approach, but lack the experience to apply the technique effectively?

JF 10 Aug 06

Based on what you have written, not everyone is going to be able to use this method or fully utilize its capabilities.

It’s not written for everyone. It’s written for anyone that wants to try it, experiment with it, and think about it. Your mileage may vary. I can’t give you advice beyond that.

Jos� Bonnet 11 Aug 06

Hm…
Two questions:
#1: how would you cope with ‘new people’ (i.e., someone who’s not worked with you)? You’d need more ‘formal’ communication, right?
#2: how do you manage ‘common code’ (between applications)? I.e., if you extract a ‘feature’ from an application, say Calendar, do you create a new ‘repository’ with this common feature, and then create an instance per application? Or do you just replicate, and then manually manage it (like correcting a bug in the original, when the bug was found in the copy)…

Tks,
jb

Kenny 11 Aug 06

Needed this right now!

New to me :)

Gordon 11 Aug 06

“If you haven�t seen it yet it�s new to you.”

You know, where I’m from, that’s called stating the obvious… ;-)

Clair 11 Aug 06

I am new to web design. Thanks for the link! I have been looking for resources lately and I am glad I saw one here.

gwg 11 Aug 06

Jason, I appreciate the uptick in the number of comments you’ve been responding too in the past couple of weeks. It gives SvN more personality. Hopefully, by replying to useful comments, it will spawn more usefuly comments.

I love these insights into how other people work(ed) through their problems. These are some of my favorite posts on SvN.

Jaime Macias 11 Aug 06

It is new to me and very relevant to the work i have to get done today, thanks for highlighting this.

bodoro 11 Aug 06

Eine wirklich super Seite!

MH 11 Aug 06

I recently used this technique on part of a project and found it pretty useful. Based on the reference in the article, I picked up Christopher Alexander’s Notes on the Synthesis of Form, started reading it, got bored, picked it up again a few months later, read it, and it blew my mind. Made me think about design in a whole new way.

I still have a zillion questions in my mind about how to apply it to web app design. I’d love to read another article going more in depth about this technique (hint, hint)

Gary R Boodhoo 12 Aug 06

MH, my experience is very similar to yours, although I’d suggest that rather than waiting for an article about this technique (more of a mindset than a technique, IMO), you might instead consider writing one! After all, teaching is the highest form of learning, just as application is the highest form of theory

One aspect of “getting real” that I rarely see mentioned is that talk is cheap. Design patterns are krazy useful, but let us not confuse them with Design itself!

Scott Teger 14 Aug 06

Great tip for graphically thinking through form layout. Sometimes we have admin sections or miscellaneous parts of the site that our designers dont get involved with, so its a good tool for us analytic developers! In addition to this, we also like to see what the big websites and software apps are doing with their forms and layouts, because you know they version tested them.

MH 16 Aug 06

Excellent suggestion, Gary.

Once I get some more experience applying the method, I may just do that.