An Event Apart: Patterns in the Process

by Luke Wroblewski August 18, 2008

At An Event Apart in San Francisco, Jeremy Keith walked through the process used by Clearleft, his Web design & development company, to make Web experiences in his Patterns in the Process talk:

  • Clearleft uses several “steps” to develop Web products: discovery, content, information architecture, visuals, and templates.
  • Discovery: utilize client worksheet and meetings to get upfront information from potential employers.
  • Content: tone of voice can influence the first experience with a site by setting appropriate expectations. Don’t let developers write the text that users see.
  • Information Architecture: most important step in the process. Start limiting possibility space to determine what the site is about.
  • Post-it notes are hard to get attached to –can be easily moved around.
  • Information architecture is represented by wireframes made with HTML, CSS, Javascript so you can interact with them in order to see states and interactions. This code is not intended for public use but rather for rapid prototyping.
  • User testing: the best time to get feedback is when you have interactive prototypes.
  • Visuals: the most important aspect of wireframes is the hierarchy of elements that needs to be reflected. Wireframes should not be prescriptive of visual layout. Its usually too early to limit visual design options.
  • Templates: Begin process with grid paper to get a sense of basic proportions. Then move on to development decisions: HTML vs. XHTML, liquid vs. fluid, supporting IE6.
  • Your style sheets suggest what your site will look like. Your users decide what your site will look like based on their browser choices, platform choices, etc.
  • Patterns really start to form when coding HTML, CSS, and Javascript: forms, tables, and microformats.
  • Some tips: specify a min & max width but set max-width in ems; in reset style sheets set radio buttons & checkboxes to 1em; wherever you set hover pseudo-class, also set focus.
  • Progressive Enhancement: HTML is most important, CSS secondary, and Javascript is last.
  • Things need to flow between portions of the process. Patterns are useful for keeping things flowing.