This link has been bookmarked by 110 people . It was first bookmarked on 02 Mar 2006, by Matt scifo.
-
21 Jul 09
-
20 Jul 09
-
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
-
12 May 09
-
07 May 09
-
27 Apr 09
-
22 Apr 09
-
20 Apr 09
-
superluminaThe 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. -
10 Apr 09
Maguar GuarStep 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.-
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...
-
-
- 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)
Here are the bits for a "My Account" page that I recently designed:
Do this on paper if you're working on your own. It's faster.
- Company info
-
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: -
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.
-
-
-
18 Mar 09
-
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
-
16 Jan 09
-
09 Jan 09
François ParmentierI'm going to show you how to sidestep your habits and assumptions and use patterns to make better design decisions.
-
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
-
05 Aug 08
-
04 Aug 08
-
01 Aug 08
-
08 Jul 08
-
29 Jun 08
-
14 Jun 08
Garry JenkinThe 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
-
24 Mar 08
-
22 Mar 08
-
20 Mar 08
-
29 Jan 08
-
14 Oct 07
-
06 Sep 07
-
31 Aug 07
Sami VoutilainenThe biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem.
-
21 Aug 07
-
02 Aug 07
-
18 Jun 07
-
21 May 07
-
02 May 07
-
14 Jan 07
-
03 Dec 06
-
31 Oct 06
-
30 Oct 06
-
25 Oct 06
-
06 Oct 06
-
05 Oct 06
-
19 Sep 06
-
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
-
09 Sep 06
-
02 Sep 06
-
16 Aug 06
-
13 Aug 06
-
12 Aug 06
-
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 BrudtkuhlAn 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 -
-
The biggest challenge for web designers is the unthinkably huge number of possible ways to solve any given problem.
-
-
-
10 Aug 06
-
29 Jul 06
-
27 Apr 06
-
16 Mar 06
-
30 Dec 05
Benjamin Reitzammergood read, presents an easy to follow pattern when developing single pages.
-
10 Dec 05
-
07 Dec 05
-
26 Nov 05
-
31 Oct 05
-
25 Oct 05
Jeff KubinaThe 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
-
20 Oct 05
-
11 Jun 05
-
29 Apr 05
-
20 Mar 05
-
14 Mar 05
-
13 Mar 05
-
11 Mar 05
Will BoltonExcellent article
information_architecture interface patterns process to_read_again usability web_design wireframes
-
10 Mar 05
-
Marion WaltonA guide to using patterns to structure and chunk information for Web design
-
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
-
09 Oct 04
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.