Style guide creation
A User Interface style and the associated UI style guide are intended to guide and inspire the work of developers involved in the design and production of the products and services for a given platform. Very often companies suffer from non-uniform styles and non-focused user experience in heterogeneous products throughout the product portfolio. The aim of the style guide is to enhance the brand and to a ensure a seamless user experience throughout service/product portfolio, considering the unique user needs and business goals.
Documentation design is one of our areas of expertise. Over the last six years we have done over 200 different user interface and user experience related documents to major mobile manufacturers - from copywriting to style guides and UI specifications, to user experience related articles and columns. For examples of our work, go to Forum Nokia.
In addition to written guidelines, we aim to produce as concrete help for developers as possible. This includes templates for various tools, such as Adobe Illustrator, Photoshop and Flash.
The purpose of the style documentation is to help the development teams create consistent User Interfaces by following a common UI style. Guidelines are used to give instructions on how to use different UI components effectively and consistently.
These guidelines and standards form a baseline from which innovation should grow. Guidelines are not all inclusive.
The UI style is developed based on the following steps:
Step 1: Studying User Needs
- Prioritized needs of specified target group reveals real user requirements for the application and the main use cases
- Interviews and observations
Step 2: Interaction Design I
- Concept workshops (with customers and end users)
- Preliminary interaction design with iteration rounds
Step 3: Paper Prototype Testing
Step 4: Interaction Design II
-
Workshop on user acceptance test results
- Refining Interaction design
Step 5: Visual design I
- Creating alternative visual design directions
- Choosing visual theme
- Visual design for user acceptance testing
- User acceptance testing
- Visual design based on comments from user tests
Step 6: Flash Prototype
- Collecting prototype needs
- Prototype implementation with iteration rounds
Step 7: User Testing
- User acceptance testing
- Modifications to design according to the test results
Step 8: Visual Design II
- Fine-tuning the visual design
- Light documentation
Step 9: Style Guide
- Writing a style guide (interaction)
- Writing a style guide (visual)
