Thursday, March 22, 2007

Wireframing With Patterns

The benefit of wire framing with patterns ...

"When you’re starting out as an information architect (IA), being part of a strong community of fellow practitioners helps immensely. A little over a year ago, on Sunday, February 22, 2006, I participated in an informal workshop on wireframing techniques that took place here in Toronto. Bryce Johnson, Director of User Experience Design at Navantis Inc., facilitated and hosted the workshop at his workplace. The knowledge sharing and the wireframing best practices that emerged from the workshop, plus the sense of community I experienced there, helped me build a foundation as an information architect and got me started on developing my own design workflow. Now, I’d like to share the techniques I’ve learned with a broader community of information architects.

... "A strong sense of community among IA practitioners was the most significant thing that emerged from the workshop. People shared some wireframing techniques and tricks that I’ll discuss in more detail later. First, here are some highlights from the wireframing workshop:

Distinguish the role of wireframes early in a project. Who is your audience? Who will see and use the wireframes and how? Are they a client deliverable or solely for use in an internal design process?

Use high-fidelity wireframes to provide precise design direction; low-fidelity wireframes to allow more design interpretation. When there is the opportunity to collaborate with a design team, it is wise to create low-fidelity wireframes that designers can interpret and easily modify as work progresses.

To maintain consistency, create a branded Visio stencil for a project that you can use for all wireframes. Use the same shapes to communicate common interactions across wireframes and across different projects for the same client.

Visio offers lots of shortcuts—use them. At the beginning of our wireframe workshop, the facilitator handed out a tip-sheet of Visio shortcuts.

A year has passed since our wireframing workshop, and I have developed many a wireframe since then. With the foundation I gained during the workshop, I was able to build my own wireframing model. Because I needed both flexibility in design and the ability to reuse interactions across many different projects, I have developed the beginnings of a pattern-based design system. I started to see that I could use patterns many times over with just simple modifications. Wireframing in patterns does away with the necessity of reinventing the wheel each time and brings greater consistency to our designs. Thus, I began to understand the role of wireframes in the larger design process, which Figures 1–5 depict."    (Continued via UXmatters)    [Usability Resources]

A Design Workflow - Usability, User Interface Design

A Design Workflow


Post a Comment

<< Home

<< Home