Download - How UI Framework improves design process
![Page 1: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/1.jpg)
How UI Framework improves design process
![Page 2: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/2.jpg)
Houston, we have a problem
![Page 3: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/3.jpg)
Unconsistent Design
FEATURE 1DEV 1
FEATURE 2DEV 2
FEATURE 3DEV 3
FEATURE 4DEV 4
10 2 3 4 5month
![Page 4: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/4.jpg)
![Page 5: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/5.jpg)
![Page 6: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/6.jpg)
![Page 7: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/7.jpg)
Desktop Notebook iPad
![Page 8: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/8.jpg)
![Page 9: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/9.jpg)
![Page 10: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/10.jpg)
We need UI Framework
![Page 11: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/11.jpg)
UI-Framework is living library of the patterns, visual standards, and interaction
behaviors
![Page 12: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/12.jpg)
To Use or Not to Use
![Page 13: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/13.jpg)
All Cool Guys use it
Google!Apple!Microsoft!Atlassian!SAP!Oracle!
![Page 14: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/14.jpg)
Designers, Managers and Developers - best friends forever
![Page 15: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/15.jpg)
Rapid Prototyping
![Page 16: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/16.jpg)
Portability: Designers come and go
![Page 17: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/17.jpg)
Move away from repetitive specification documentation by just referencing your patterns
![Page 18: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/18.jpg)
Allows re-use of assets in the application
![Page 19: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/19.jpg)
Supports the growth of the product over time
![Page 20: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/20.jpg)
Cheaper Development
![Page 21: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/21.jpg)
UI Framework
UI Library UI Guidelines
![Page 22: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/22.jpg)
A library of UI Components,Javascript, CSS, HTML templates and other resources you can include in your projects.
Library of UI controls
![Page 23: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/23.jpg)
UI Components
Controls Grid Colours Typography Animation Icons Keyboard Shortcuts !
!
![Page 24: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/24.jpg)
![Page 25: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/25.jpg)
Example
![Page 26: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/26.jpg)
UI Design Guidelines
Design goal and principles !
Guidelines !
Components and Patterns !
Contextual examples !
Writing style !
!
!
![Page 27: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/27.jpg)
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? !
!
![Page 28: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/28.jpg)
UI Design Guidelines
![Page 29: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/29.jpg)
UI Design Guidelines
![Page 30: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/30.jpg)
Component
Pattern
Framework
Module
UI Framework
Product
![Page 31: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/31.jpg)
How to build
![Page 32: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/32.jpg)
Plan Discover Organize Analyze
Coordinate Assemble
Launch Communicate Teach Adopt
Consult Versions Adapt
![Page 33: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/33.jpg)
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
![Page 34: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/34.jpg)
Android
![Page 35: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/35.jpg)
Microsoft Windows
![Page 36: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/36.jpg)
iOS 7
![Page 37: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/37.jpg)
BBC
![Page 38: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/38.jpg)
Atlassian
![Page 39: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/39.jpg)
Mail Chimp
![Page 40: How UI Framework improves design process](https://reader033.vdocuments.us/reader033/viewer/2022051314/54c76eaa4a79597f648b4697/html5/thumbnails/40.jpg)
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!