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 - 2015 (Dribbble meetup)

12,558 views

Published on

Learn how UI Framework improves design process and why it is helpful for building web software

Published in: Design

How UI Framework improves design process - 2015 (Dribbble meetup)

  1. HOW UI FRAMEWORK IMPROVES DESIGN PROCESS MARIAN MOTA
  2. Designer at SoftServe MARIAN MOTA ua.linkedin.com/in/marianmota dribbble.com/marrimo slideshare.net/motamarian behance.net/Marrimo twitter.com/marrimo ua.linkedin.com/in/marianmota
  3. STORY
  4. DIFFERENT LOCATIONS Miscommunication, frustration, and blame between developers and designers STORY
  5. INCONSISTENT DESIGN Button Button Button Button STORY
  6. DEADLINE STORY
  7. BIG APPLICATION STORY
  8. SOLUTION
  9. SOLUTION I AM UI FRAMEWORK
  10. UI FRAMEWORK IS LIVING LIBRARY OF THE PATTERNS, VISUAL STANDARDS, AND INTERACTION BEHAVIORS
  11. BENEFITS
  12. ALLOWS RE-USE OF ASSETS IN THE APPLICATION BENEFITS
  13. BENEFITS RAPID PROTOTYPING
  14. Visual designer, interaction designer, Front-end dev, QA, Product owner, marketing, Tech support BENEFITS PATTERN LIBRARIES FOR EVERYONE
  15. BENEFITS SUPPORTS THE GROWTH OF THE PRODUCT OVER TIME
  16. BENEFITS ALLOWS YOU TO MOVE AWAY FROM REPETITIVE SPECIFICATION DOCUMENTATION BY JUST REFERENCING YOUR PATTERNS
  17. BENEFITS NEW EMPLOYEE ORIENTATION
  18. BENEFITS CHEAPER DEVELOPMENT
  19. BENEFITS ALLOWS THE DESIGNERS AND DEVELOPERS TO STANDARDIZE A CONSISTENT SET OF ELEMENTS AND PATTERNS THROUGHOUT THE APPLICATION
  20. UI FRAMEWORK ≠ UI KIT
  21. UI KITS FROM DRIBBBLE
  22. UI FRAMEWORK ABOUT USERS, GOALS, TASKS, BRAND
  23. UI FRAMEWORK PATTERNS COMPONENTS FOUNDATION
  24. Overview Grid Colors Typography Layout Animation Icons FOUNDATION
  25. FOUNDATION - OVERVIEW
  26. FOUNDATION - COLORS
  27. FOUNDATION - GRID
  28. FOUNDATION - TYPOGRAPHY
  29. Avatars Badges Buttons Forms Labels Lozenges Messages Modal dialog Navigation Progress indicators Tables Tabs COMPONENTS Hero Banner Preloader Page Title Pagination Picture Price Label Slider Social Buttons Tiles Tooltips Tags Unsocial Buttons
  30. COMPONENTS
  31. COMPONENTS
  32. COMPONENTS
  33. COMPONENTS
  34. PATTERNS How to arrange your components on the screen What problem does this pattern address? When should this pattern be used? Why should this pattern be used? Search Log in Comments Inline Validation Wizards / Stepped Forms Keyboard Shortcuts Default Values & Autocomplete
  35. PATTERNS
  36. PATTERNS
  37. PATTERNS
  38. UI FRAMEWORK + DESIGN PRINCIPLES GUIDELINES WRITING STYLE RESOURCES CODE SNIPPETS BRAND ASSETS
  39. MORE - DESIGN PRINCIPLES
  40. MORE - DESIGN PRINCIPLES
  41. MORE - DESIGN PRINCIPLES
  42. MORE - CODE SNIPPETS
  43. MORE - CODE SNIPPETS
  44. MORE - CODE SNIPPETS
  45. MORE - RESOURCES
  46. MORE - RESOURCES
  47. MORE - RESOURCES
  48. MORE - RESOURCES
  49. MORE - RESOURCES (
  50. MORE - WRITING STYLE
  51. MORE - WRITING STYLE
  52. MORE - WRITING STYLE
  53. MORE - GUIDELINES
  54. MORE - GUIDELINES
  55. MORE - BRAND
  56. FEW MORE THINGS 1.Add the option to link related patterns 2.If you have more than 20 patterns, make sure they are searchable. 3.Add the ability to show dates of recent updates, recent changes, or archived patterns that have been replaced with new ones. 4.Style the UI toolkit the same way that you would style the real application
  57. MORE - SEARCH
  58. MORE - RELATED
  59. MORE - WHATS NEW
  60. RESOURCES INSTRUMENTS BOOKS SITES
  61. RESOURCES - HTTP://STYLEGUIDES.IO
  62. RESOURCES - INSTRUMENTS
  63. 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 RESOURCES - BOOKS Atomic Design Brad Frost The critical components of web ui style guides UX Pin
  64. HTTPS://GOO.GL/2X9TLU
  65. THAT’S ALL FOLKS

×