Liveblogging AEASF: Patterns in the Process – Jeremy Keith

Patterns in the Process

Clearleft
This is the way we do things

Discovery!
Content!
IA
Visual Design
Templates
(They don’t do backend work)

Client Worksheet download.
Serves as a barrier to entry, (Kelly Goto? Web workflow redesigned?)

@rellyab freelance copywriter
Copywriting IS interface design

Websites (chalkboards) are people too.

Edenbee:
The signup process is the first interactive experience.

They wireframe with html/css. Page interaction has changed so much that HTML/css is the best tool for that. Css frameworks incredibly useful at this sstage.

elfcartel.clearleft.com

Polypage jquery extension (Dev by Andy Kent)

It’s like product design. So, do your user testing now.
Each stage limits the possibilities. Game designers do “possibility spaces” rather than narrative stories.

User testing with Silverback. User testing from here on out.

Visual design

Take the html/css and create a visual design from it. The hierarchy is preserved (important stays emphasized, layout may change).
Wireframe is too early for deciding on the layout.

Go to the wireframes to answer questions.

http://www.alistapart.com/articles/dao/

IE6 : You need to allow people access to your content, but it doesn’t need to look the same in every browser. Dean edwards works.

Recurring patterns: forms, tables, microformats, etc

Page-specific css pages uses increasing

CSS Tips:
Specify min-width in px and max-width in ems

input radio and checkboxes need width and height 1em;

Wherever you set the :hover class, define :focus (for keyboard tabbing!)

Javascript: bastard stepchild

When you dont want to show everything all at once, but those without javascript need to be able to complete their task. Starting with Javascript instead of the other way around is building on sand.

wiki + svn sandbox for keeping track of cool design patterns.
or blog them

Questions:

During the build phase hand-off, how do you maintain the integrity of your markup?
That is the hard part. I can’t slap the developer on the head and tell him to fix the markup. It’s tough, you could provide a style guide, but you have to learn to live with it. I haven’t though.

Do you find doing the user testign on the wireframe stage
The biggest changess happen on the wireframe stage, but it’s inportant to test on the visual desing phase. OFten the budget dictates cuts and the testing at the visual can get cut. As yo get further down the line, the possibilities are narrowing and it becomes more expensinve to make changes.
The layout may vay on designs, but he hierarchy does not, whether thru size, emphasis, position, etc. Wrieframes shouldn’t dictate the visual design.