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 MARIAN MOTA
Designer at SoftServe MARIAN MOTA ua.linkedin.com/in/marianmota dribbble.com/marrimo slideshare.net/motamarian behance.net...
STORY
DIFFERENT LOCATIONS Miscommunication, frustration, and blame between developers and designers STORY
INCONSISTENT DESIGN Button Button Button Button STORY
DEADLINE STORY
BIG APPLICATION STORY
SOLUTION
SOLUTION I AM UI FRAMEWORK
UI FRAMEWORK IS LIVING LIBRARY OF THE PATTERNS, VISUAL STANDARDS, AND INTERACTION BEHAVIORS
BENEFITS
ALLOWS RE-USE OF ASSETS IN THE APPLICATION BENEFITS
BENEFITS RAPID PROTOTYPING
Visual designer, interaction designer, Front-end dev, QA, Product owner, marketing, Tech support BENEFITS PATTERN LIBRARIE...
BENEFITS SUPPORTS THE GROWTH OF THE PRODUCT OVER TIME
BENEFITS ALLOWS YOU TO MOVE AWAY FROM REPETITIVE SPECIFICATION DOCUMENTATION BY JUST REFERENCING YOUR PATTERNS
BENEFITS NEW EMPLOYEE ORIENTATION
BENEFITS CHEAPER DEVELOPMENT
BENEFITS ALLOWS THE DESIGNERS AND DEVELOPERS TO STANDARDIZE A CONSISTENT SET OF ELEMENTS AND PATTERNS THROUGHOUT THE APPLI...
UI FRAMEWORK ≠ UI KIT
UI KITS FROM DRIBBBLE
UI FRAMEWORK ABOUT USERS, GOALS, TASKS, BRAND
UI FRAMEWORK PATTERNS COMPONENTS FOUNDATION
Overview Grid Colors Typography Layout Animation Icons FOUNDATION
FOUNDATION - OVERVIEW
FOUNDATION - COLORS
FOUNDATION - GRID
FOUNDATION - TYPOGRAPHY
Avatars Badges Buttons Forms Labels Lozenges Messages Modal dialog Navigation Progress indicators Tables Tabs COMPONENTS H...
COMPONENTS
COMPONENTS
COMPONENTS
COMPONENTS
PATTERNS How to arrange your components on the screen What problem does this pattern address? When should this pattern be ...
PATTERNS
PATTERNS
PATTERNS
UI FRAMEWORK + DESIGN PRINCIPLES GUIDELINES WRITING STYLE RESOURCES CODE SNIPPETS BRAND ASSETS
MORE - DESIGN PRINCIPLES
MORE - DESIGN PRINCIPLES
MORE - DESIGN PRINCIPLES
MORE - CODE SNIPPETS
MORE - CODE SNIPPETS
MORE - CODE SNIPPETS
MORE - RESOURCES
MORE - RESOURCES
MORE - RESOURCES
MORE - RESOURCES
MORE - RESOURCES (
MORE - WRITING STYLE
MORE - WRITING STYLE
MORE - WRITING STYLE
MORE - GUIDELINES
MORE - GUIDELINES
MORE - BRAND
FEW MORE THINGS 1.Add the option to link related patterns 2.If you have more than 20 patterns, make sure they are searchab...
MORE - SEARCH
MORE - RELATED
MORE - WHATS NEW
RESOURCES INSTRUMENTS BOOKS SITES
RESOURCES - HTTP://STYLEGUIDES.IO
RESOURCES - INSTRUMENTS
Modular Web Design: Creating Reusable Components for User Experience Design and Documentation Nathan Curtis Designing Inte...
HTTPS://GOO.GL/2X9TLU
THAT’S ALL FOLKS
Upcoming SlideShare
Loading in …5
×

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

13,788 views

Published on

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

Published in: Design
License: CC Attribution License
no profile picture user
  • Sex in your area is here: www.bit.ly/sexinarea
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ★★★ http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Boost your brainpower with brain pill! find out more... ➤➤ https://bit.ly/2GEWG9T
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unique Acne System, How to get lasting acne freedom clear skin e-book reveals all ➤➤ http://t.cn/AiWGkfAm
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
Show More

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

×