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

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