Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How UI Framework improves design process


Published on

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

  • Be the first to comment

How UI Framework improves design process

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