Style Guide tips and Tricks: Finding patterns

Sholom Sandalow, Friday, September 8, 2006 @ 3:01 pm

Building an  Interface Style Guide can be tricky business.  It is often times hard to find the right mix of facts, figures and images to include in a document that will eventually be the blueprint for those developing the interface. 
I have found it extremely helpful to interact with developers as much as is possible, before, during, and after Style Guide production.  However if that is not an option, you want to make sure that your giving the developer not just something (s)he can use, but something that enables them to build the interface you have designed.  One thing you can be sure developers want to see is patterns.
Patterns, in this sense, are rules that map visual attributes onto interface elements (menus, controls, buttons etc.). They can make the developer’s life a lot easier, and mean the difference between an application that mirrors your design, and one that looks vaguely familiar.  A pattern should contain a set of instructions for the production of that visual element—size, position, font, color, etc. and rules for its assignment to the element.
Before getting started on the production of the style guide, go through the interface and locate all the patterns.  Then build the style guide around them…list each pattern, describe what interface element it applies to, and write the rules that govern its creation. 
Most of the time you’ll find that the interface can be broken down almost completely into patterns.  Finding them can be tricky in itself, but the first time you do it, you’ll gain an understanding of the value it contains for the developer.  You’ll also gain an awareness of your own design thinking, and how it can be improved.

Related posts:

1. Using Design Patterns
2. Defining RIA Interaction Patterns on time in Flex Agile Development
3. BRE Patterns II: The Tranformer
4. BRE Patterns III: Collaboration Cop, Part I
5. 8 Tips & Tricks When Starting Objective-C iPhone Apps: [self.paradigm shiftFrom:@"ruby" to:@"objective-c"];

Comments (0)

User Experience Design

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment