How UI Framework improves design process

Houston, we have a problem

Unconsistent Design

FEATURE 1DEV 1

FEATURE 2DEV 2

FEATURE 3DEV 3

FEATURE 4DEV 4

10 2 3 4 5month

Desktop Notebook iPad

We need UI Framework

UI-Framework is living library of the patterns, visual standards, and interaction

behaviors

To Use or Not to Use

All Cool Guys use it

Google!Apple!Microsoft!Atlassian!SAP!Oracle!

Designers, Managers and Developers - best friends forever

Rapid Prototyping

Portability: Designers come and go

Move away from repetitive specification documentation by just referencing your patterns

Allows re-use of assets in the application

Supports the growth of the product over time

Cheaper Development

UI Framework

UI Library UI Guidelines

A library of UI Components,Javascript, CSS, HTML templates and other resources you can include in your projects.

Library of UI controls

UI Components

Controls Grid Colours Typography Animation Icons Keyboard Shortcuts !

!

Example

UI Design Guidelines

Design goal and principles !

Guidelines !

Components and Patterns !

Contextual examples !

Writing style !

!

!

UI Design Guidelines

How to arrange your components on the screen !

What problem does this component/pattern address? !

When should this component/pattern be used? !

Why should this component/pattern be used? !

!

UI Design Guidelines

UI Design Guidelines

Component

Pattern

Framework

Module

UI Framework

Product

How to build

Plan Discover Organize Analyze

Coordinate Assemble

Launch Communicate Teach Adopt

Consult Versions Adapt

Style the UI toolkit the same way that you would style the real application!!If you have more than 20 patterns, make sure they are searchable.!!Add the ability to show dates of recent updates, recent changes, or archived patterns that have been replaced with new ones.!!Add the option to link related patterns!!Design patterns and modular components are effective techniques for designing and building long-lasting, consistent experiences!!You need a deadline!!!!

Few More Things

Android

Microsoft Windows

iOS 7

BBC

Atlassian

Mail Chimp

Search Patterns: Design for Discovery Peter Morville, Jeffery Callender

The Design of Sites: Patterns for Creating Winning Web Sites Douglas K. van Duyne, James A. Landay!

Modular Web Design: Creating Reusable Components for User Experience Design and Documentation Nathan Curtis

Designing Interfaces Jenifer Tidwell

Designing Web Interfaces: Principles and Patterns for Rich Interactions Bill Scott, Theresa Neil

Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience Christian Crumlish, Erin Malone!