Learn how UI Framework improves design processn and why it is helpful for building web software products and encouraging rapid prototyping in Agile software enviroments

1. How UI Framework improves
design process

2. Houston, we have a problem

3. Unconsistent Design
FEATURE 1DEV 1
FEATURE 2DEV 2
FEATURE 3DEV 3
FEATURE 4DEV 4
10 2 3 4 5
month

7. Desktop Notebook iPad

10. We need UI Framework

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

12. To Use or Not to Use

13. All Cool Guys use it
Google!
Apple!
Microsoft!
Atlassian!
SAP!
Oracle!

14. Designers, Managers and Developers
- best friends forever

15. Rapid Prototyping

16. Portability: Designers come and go

17. Move away from repetitive
specification documentation by just
referencing your patterns

18. Allows re-use of assets in the
application

19. Supports the growth of the
product over time

20. Cheaper Development

21. UI Framework
UI Library UI Guidelines

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

23. UI Components
Controls
Grid
Colours
Typography
Animation
Icons
Keyboard Shortcuts
!
!

25. Example

26. UI Design Guidelines
Design goal and principles
!
Guidelines
!
Components and Patterns
!
Contextual examples
!
Writing style
!
!

27. 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?
!
!

28. UI Design Guidelines

29. UI Design Guidelines

30. Component
Pattern
Framework
Module
UI Framework
Product

31. How to build

32. Plan Discover Organize Analyze
Coordinate Assemble
Launch Communicate Teach Adopt
Consult Versions Adapt

33. 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

34. Android

35. Microsoft Windows

36. iOS 7

37. BBC

38. Atlassian

39. Mail Chimp

40. 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!