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!
Top Related