37signals: An Introduction to Using Patterns in Web Design

21 Jul 09

Graham Perrin

design unread 2009

20 Jul 09

A. D.

web-design pattern

Step one: List your bits
Do not prioritize, group, or categorize. If you start by grouping and organizing you'll just end up with your original habits and preferences in the end.
6 more annotations...
- Step two: Figure out which bits relate to each other
- Notice we're not building down from our assumptions. We're building up from what we know for sure.
- Step three: Prioritize
  
  Decide which chunks are most important from a functional perspective. In other words, decide which chunks matter most to people.
  
  It isn't necessary to reorder the whole list. Just figure out which chunks are the most important and group them loosely:
  
  Most important: C, A, G, E
  
  Necessary: B, D, F
  
  Nice to have: H
- Step four: Design each chunk
- Step five: Put the chunks together
- Step six: Make it real

13 May 09

alrasbi alrasbi

webapp patterns webdev design

12 May 09

Richard Baxter

webdesign

07 May 09

Jaro Šatkevič

27 Apr 09

Zavis Pexidr

Web devel

22 Apr 09

Maria Thompson

UI ux architecture 37signals webdev webdesign design web usability

20 Apr 09

Alex Vertiz

design patterns webdesign web usability 37signals webdev ui

superlumina

The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits and traditions to fall back on, but there are literally billions of possible pixel combinations for each page we make.

There is a better way to manage this vast complexity than by making big decisions up front and hoping for the best. To make better sites — sites that are functional, beautiful, and "usable" — we have to break our design problems up into small independent chunks based on the real issues within our requirements. Christopher Alexander, who came up with this stuff, calls these chunks patterns.

UI webdesign design pattern tutorial

10 Apr 09

Maguar Guar

Step one: List your bits
Start by making a list of all the specific bits that must fit together for the web page to succeed as a whole. By "bits" I mean any kind of design consideration. So this includes what info the page should get across, what actions it should support, important attitudes of the users, and so on. Do not prioritize, group, or categorize. If you start by grouping and organizing you'll just end up with your original habits and preferences in the end.
Here are the bits for a "My Account" page that I recently designed:
Company info
Insurance info for company
My (current user) info
Other users on this account
My sales rep contact info
Current account plan
Link to change search preferences
Date account was created
People rarely view or change insurance info
Any user can edit anything except other users' info
Changing password is the most likely action
People might come here to change search preferences (which are on a separate page)
Do this on paper if you're working on your own. It's faster.

design web howto

Step one: List your bits
Start by making a list of all the specific bits that must fit together for the
web page to succeed as a whole. By "bits" I mean any kind of design
consideration. So this includes what info the page should get across, what
actions it should support, important attitudes of the users, and so on. Do not
prioritize, group, or categorize. If you start by grouping and organizing you'll
just end up with your original habits and preferences in the end.
20 more annotations...
- Here are the bits for a "My Account" page that I recently designed:
  
  Company info
  Insurance info for company
  My (current user) info
  Other users on this account
  My sales rep contact info
  Current account plan
  Link to change search preferences
  Date account was created
  People rarely view or change insurance info
  Any user can edit anything except other users' info
  Changing password is the most likely action
  People might come here to change search preferences (which are on a separate
  page)
  
  Do this on paper if you're working on your own. It's faster.
- Step two: Figure out which bits relate to each other
- Put the bits into chunks based on whether they impact each other — not based on
  any conceptual or graphic ideas.
- Notice we're not building down from our assumptions. We're building up
  from what we know for sure.
- Step three: Prioritize
- Decide which chunks are most important from a functional perspective. In other
  words, decide which chunks matter most to people.
- Most important: C, A, G, E
  Necessary: B, D, F
  Nice to have: H
- Step four: Design each chunk
- Since we grouped all the directly related bits into chunks, we can design the
  chunks independently without worrying about conflicts. This idea is the heart of
  Alexander's patterns (which I'm calling chunks). You can get them right on their
  own and then fuse them together.
- Start with the high priority chunks and move down:
- Sketch E
- In my shorthand I've indicated that the link "Show/hide insurance info" will
  show or hide the block below it with Javascript. This satisfies 9 ("People
  rarely view or change insurance info").
- Notice how the above sketches use scale and weight to show priority. These
  decisions will guide you in the next step.
- Step five: Put the chunks together
- After the chunks are sketched, piece them together into a whole. Think about the
  constraints that went into the sketches. Think about priority. Think about
  balance. Do your design thing
- Here I did two phases. First the rough layout:
- Step six: Make it real
- When you build the real thing you sometimes see that what worked on paper just
  isn't quite right on screen. In the final design I shifted the Company data (A)
  around for better balance and switched the sidebar (E,F,H) from the left to the
  right. I could tweak these chunks independently because they were designed
  independently. Have a look at the result:
- See it full size.
- a pattern is a way of dealing with a system of interacting
  forces. When you find that you often design a sidebar for helpful
  notes, details and references, you're using a pattern. The interacting forces
  are the requirements of those little bits and how they relate to the main
  content, and the sidebar is the best way to deal with them.

24 Mar 09

sanbor

readit

18 Mar 09

Vincent Chan

To make better sites — sites that are functional, beautiful, and "usable" — we have to break our design problems up into small independent chunks based on the real issues within our requirements
making a list of all the specific bits that must fit together for the web page to succeed as a whole
21 more annotations...
- includes what info the page should get across, what actions it should support, important attitudes of the users, and so on.
- "My Account" page
- Put the bits into chunks based on whether they impact each other — not based on any conceptual or graphic ideas.
- Let's look at C for example:
- The password (11) is part of the user info (3) and this can all be edited (10).
- We're building up from what we know for sure.
- Decide which chunks are most important from a functional perspective. In other words, decide which chunks matter most to people
- Just figure out which chunks are the most important and group them loosely:
- Since we grouped all the directly related bits into chunks, we can design the chunks independently without worrying about conflicts.
- Sketch C
- Sketch A
- Sketch G
- Sketch E
- Sketch B
- Sketch D
- Sketch F
- Sketch H
- Notice how the above sketches use scale and weight to show priority
- Think about priority. Think about balance
- First the rough layout
- Next I did a loose sketch to guide my HTML prototype:

12 Mar 09

Cathy Booth

webdesign patterns

16 Jan 09

Denis Jacquemin

design patterns webdesign web usability 37signals ui

09 Jan 09

François Parmentier

I'm going to show you how to sidestep your habits and assumptions and use patterns to make better design decisions.

webdesign web webdev

To make better sites — sites that are functional, beautiful, and "usable" — we have to break our design problems up into small independent chunks based on the real issues within our requirements.

22 Dec 08

Jonathan Ellinghaus

web design development IT

05 Aug 08

David Maniega

Usabilidad

04 Aug 08

Kyle Kim

Using Patterns in Web Design

Using Patterns Design

01 Aug 08

Damon Snyder

patterns webdev design usability development 37signals

Amit Bijlani

designpatterns design

kabs

webdesign patterns design

08 Jul 08

Dan O'Brien Muzyka

webdesign patterns design usability 37signals web

29 Jun 08

Chuck Rogers

Unfiled Bookmarks Web Design

14 Jun 08

Garry Jenkin

The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits and traditions to fall back on, but there are literally billions of possible pixe

relationship innovation creativity design mapping problem solving blogging tools

31 May 08

Michal Bigos

usability patterns

24 Mar 08

Rodney Mitchell

design howto html readsoon reference tools web

22 Mar 08

Johan Hammar

37signals design pattern web

20 Mar 08

Ryan Nance

architecture article blogging brainstorming code color content design development patterns usability web webdesign

29 Jan 08

J McCance

design web

14 Oct 07

Kamyar Navidan

design-patterns webdesign

06 Sep 07

palindrome emordnilap

design web

31 Aug 07

Sami Voutilainen

The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem.

webdesign usability tutorial

21 Aug 07

zomigi

article layout patterns process toread webdesign

02 Aug 07

Jérémy Chatard

37signals webdesign design usability patterns web webdev best

18 Jun 07

dean d

designarticle

21 May 07

Lawrence C

design patterns webdesign

02 May 07

v9y tech

chunks design imported furl patterns usability web

14 Jan 07

David Lazar

web design source

Webdesign

03 Dec 06

Shannon Holman

design pattern ui webdev

31 Oct 06

symesc

design imported:del.icio.us patterns

30 Oct 06

jeevs sinclair

37signals advice design patterns simplicity tutorials usability webdesign webdev

25 Oct 06

Stuart Maxwell

brainstorming creativity design development ideas imported:del.icio.us interface layout patterns tips webdesign

pablo

css development imported:del.icio.us rubyonrails webdesign

06 Oct 06

Michael Montgomery

37signals tutorial patterns imported

05 Oct 06

Seuss Metivier

patterns 37signals webdev workflow

19 Sep 06

Mike Howe

pattern tutorial webdesign

I'm going to show you how to sidestep your habits and assumptions and use patterns to make better design decisions. A lot of fancy stuff has been written about patterns. To be simple and clear in this introduction, I'll just call them chunks.

18 Sep 06

morrita

imported:del.icio.us reading

09 Sep 06

Ian Cottee

webdesign patterns

02 Sep 06

Armando Alves

Web Design

Armando Alves

Web Design

16 Aug 06

Perry Branch

art design html interface patterns programming web

Afshin Mehdizadeh

design webdesign designpattern

13 Aug 06

Janne L

web2.0 webdev Usability patterns thesis design

12 Aug 06

Jon Phipps

design html webdesign

There is a better way to manage this vast complexity than by making big decisions up front and hoping for the best. To make better sites — sites that are functional, beautiful, and "usable" — we have to break our design problems up into small independent chunks based on the real issues within our requirements. Christopher Alexander, who came up with this stuff, calls these chunks patterns.

I'm going to show you how to sidestep your habits and assumptions and use patterns to make better design decisions. A lot of fancy stuff has been written about patterns. To be simple and clear in this introduction, I'll just call them chunks.

11 Aug 06

Andy Brudtkuhl

An Introduction to Using Patterns in Web Design

by Ryan Singer, October 5 2004

The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits

designpatterns webdesign design

jingo74

webdesign patterns

Yvonne L

The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem.

Andrew White

Patterns for information architecture

web design

Marc Ordinas i Llopis

pattern web design

Jean-Marc Fontaine

web design

Benedikt Hanswille

37signals patterns webdesign

Andrew Wilson

webdesign

10 Aug 06

alan le

patterns webdesign

Aaron Stockton

design patterns webdev webdesign

Jukkhapong Pliankam

29 Jul 06

Kensuke Sasaki

article design web webdesign

27 Apr 06

netklon

37signals article patterns ui

16 Mar 06

Matt scifo

development patterns

07 Dec 05

osmanizbat

web

26 Nov 05

voidfiles

design web patterns webdesign usability webdev ui

31 Oct 05

wolf hesse

design pattern webdesign webdev online

25 Oct 05

Jeff Kubina

The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits and traditions to fall back on, but there are literally billions of possible pixe

web design

20 Oct 05

xflash Manuel

Un diseÃ±o bien pensado, empezarlo a lapiz y papel.

patterns design used patterns in webdesign Blog Design

11 Jun 05

dogfood

WebDev GTD Design WebDesign

29 Apr 05

Alipasha Foroughi

system:imported Patterns design web webdesign usability

20 Mar 05

Sebastian Geib

design development gui html information internet tips usability webdev

14 Mar 05

arndis

web design interface

13 Mar 05

manolinmx

desarrollo web

11 Mar 05

Will Bolton

Excellent article

information_architecture interface patterns process to_read_again usability web_design wireframes

10 Mar 05

Daniel Steinbock

patterns design web webdev ui usability interface cool architecture inspiration howto tutorial toread

Marion Walton

A guide to using patterns to structure and chunk information for Web design

web information architecture design usability

17 Feb 05

Triple Entendre

"The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem. We usually don't think of this because we have our habits and traditions to fall back on, but there are literally billions of possible pix

*reblog =essay +3 patterns development best-practices software-development

03 Dec 04