Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Building a modular front-end framework
and style guide for a large organization
Scott Cranfill and Mollie Bates
OSCON – Ju...
2
Overview
 Problem: How do you keep design and code consistent
with a large, remote team working across disciplines and
...
CFPB Design Manual:
cfpb.github.io/design-manual
Capital Framework
cfpb.github.io/capital-framework
3
5
CFPB’s mission
The CFPB is a 21st century agency that helps consumer
finance markets work by making rules more effective...
This is the footer
7
Our core functions
 Write rules, supervise companies and enforce federal
consumer financial protection laws
 Restrict ...
8
Our core functions
 Research consumer behavior
 Monitor financial markets for new risks to consumers
 Enforce laws th...
9
We achieve our mission through
 Data-driven analysis
 Innovative use of technology
 Valuing the best people and great...
This is the footer
11
Technology and Innovation Fellowship
 30 fellows hired in January 2013 from all over the country
• Quadrupled the size...
12
Our team today
1 creative director
7 managers/producers
11 graphic designers
9 UX designers
13 front-end developers
20 ...
13
Our team today
1 creative director
7 managers/producers
7 4 graphic designers
8 1 UX designers
11 2 front-end developer...
14
Project teams
 Teams are mostly remote
 1–2 each of UX, graphic design, front-end development, back-end
development
...
This is the footer
This is the footer
17
CFPB design principles
1. Public service, public trust
2. Aesthetic integrity
3. Coherent end-to-end user experience
4....
This is the footer
19
20
This is the footer
This is the footer
This is the footer
This is the footer
25
26
Coding standards
 No standard build process
 Mixture of Less and straight CSS
 Wild west of JavaScript library usage...
27
Why we needed shared standards
 Large group of designers and developers working on
separate projects, across the count...
This is the footer
This is the footer
30
Design Manual goals
 Establish an empirical source of the latest standards
 Ensure that employees and contract agenci...
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
Join the conversation!
github.com/cfpb/design-manual/issues
42
43
“A framework, you say?”
44
45
What is it?
1. A collection of modular HTML/CSS/JavaScript
components
2. A build process that brings them together
3. A...
“You’ve heard of Bootstrap, right?”
46
Because government.
47
Because government usability.
48
49
Why build our own?
 Browser support
 Accessibility
• Section 508
• WCAG 2.0 Level AA
 Effort
 Modularity
Modularity
51
Advantages of a modular structure
 Ease of updating
 Use only what you need
 Encourages contributions
52
Workflow for an existing project
edit project source
edit
component
source
rebuild
component
push
component to
remote r...
This is the footer
54
Workflow for an existing project
edit project source
edit
component
source
rebuild
component
push
component to
remote r...
Component update workflow in detail
cf-buttons
1.1.0
cf.gov hmda-site future-project
Component update workflow in detail
cf-buttons
1.1.0
cf-buttons
1.1.0
Component update workflow in detail
cf-buttons
new-feature
future-project
58
Modifying dependency version for testing
Component update workflow in detail
cf-buttons
1.1.0
cf-buttons
new-feature
60
Component update workflow in detail
cf.gov hmda-site future-project
cf-buttons
1.2.0
cf.gov hmda-site future-project
This is the footer
This is the footer
This is the footer
64
Capital Framework/Design Manual integration
 Design Manual is built on Capital Framework
 When design standard is upd...
This is the footer
This is the footer
This is really hard.
67
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
Give it a try!
78
79
Getting started docs:
cfpb.github.io/capital-framework
80
Contribute!
github.com/cfpb/capital-framework
81
This is the footer
83
In summary
 Problem: How do you keep design and code consistent
with a large, remote team working across disciplines a...
scott.cranfill@cfpb.gov, @scott_ish
mollie.bates@cfpb.gov, @mebates
Thank you! Questions?
84
CFPB Design Manual & Capital Framework at OSCON
Prochain SlideShare
Chargement dans…5
×

CFPB Design Manual & Capital Framework at OSCON

980 vues

Publié le

http://www.oscon.com/open-source-2015/public/schedule/detail/42014

Keeping code and design in sync across large teams and multiple projects can be a big challenge. At the Consumer Financial Protection Bureau, a new federal agency, the in-house design and development team has created its own modular front-end framework and style guide. Team members will talk about how this has fostered cross-team collaboration and improved the consistency of their products.

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

CFPB Design Manual & Capital Framework at OSCON

  1. 1. Building a modular front-end framework and style guide for a large organization Scott Cranfill and Mollie Bates OSCON – June 22, 2015
  2. 2. 2 Overview  Problem: How do you keep design and code consistent with a large, remote team working across disciplines and different projects?  Our solution, in one sentence: Design and publish your standards in the open, and build a front-end framework that enables developers to easily implement and maintain them.
  3. 3. CFPB Design Manual: cfpb.github.io/design-manual Capital Framework cfpb.github.io/capital-framework 3
  4. 4. 5 CFPB’s mission The CFPB is a 21st century agency that helps consumer finance markets work by making rules more effective, by consistently and fairly enforcing those rules, and by empowering consumers to take more control over their economic lives.
  5. 5. This is the footer
  6. 6. 7 Our core functions  Write rules, supervise companies and enforce federal consumer financial protection laws  Restrict unfair, deceptive or abusive acts or practices  Take consumer complaints  Promote financial education
  7. 7. 8 Our core functions  Research consumer behavior  Monitor financial markets for new risks to consumers  Enforce laws that outlaw discrimination and other unfair treatment to consumers
  8. 8. 9 We achieve our mission through  Data-driven analysis  Innovative use of technology  Valuing the best people and great teamwork
  9. 9. This is the footer
  10. 10. 11 Technology and Innovation Fellowship  30 fellows hired in January 2013 from all over the country • Quadrupled the size of the Design & Development Team  Second class began in January 2015; 15 retained from original class and 23 new fellows added
  11. 11. 12 Our team today 1 creative director 7 managers/producers 11 graphic designers 9 UX designers 13 front-end developers 20 back-end developers 2 multimedia
  12. 12. 13 Our team today 1 creative director 7 managers/producers 7 4 graphic designers 8 1 UX designers 11 2 front-end developers 9 11 back-end developers 2 multimedia
  13. 13. 14 Project teams  Teams are mostly remote  1–2 each of UX, graphic design, front-end development, back-end development  Plus a product owner and scrum master, Agile methodology  Develop in the open whenever possible • cfpb.github.io/source-code-policy
  14. 14. This is the footer
  15. 15. This is the footer
  16. 16. 17 CFPB design principles 1. Public service, public trust 2. Aesthetic integrity 3. Coherent end-to-end user experience 4. Give the user control 5. Design with data 6. Inclusion and accessibility
  17. 17. This is the footer
  18. 18. 19
  19. 19. 20
  20. 20. This is the footer
  21. 21. This is the footer
  22. 22. This is the footer
  23. 23. This is the footer
  24. 24. 25
  25. 25. 26 Coding standards  No standard build process  Mixture of Less and straight CSS  Wild west of JavaScript library usage  Coding style anarchy
  26. 26. 27 Why we needed shared standards  Large group of designers and developers working on separate projects, across the country  Off-site contractors working on web products, print collateral, and marketing  Consistent branding and user experience builds trust with consumers
  27. 27. This is the footer
  28. 28. This is the footer
  29. 29. 30 Design Manual goals  Establish an empirical source of the latest standards  Ensure that employees and contract agencies understand how to use our brand and UI patterns effectively, and in a way that is consistent with existing work  Enable other government agencies to use or learn from our standards
  30. 30. This is the footer
  31. 31. This is the footer
  32. 32. This is the footer
  33. 33. This is the footer
  34. 34. This is the footer
  35. 35. This is the footer
  36. 36. This is the footer
  37. 37. This is the footer
  38. 38. This is the footer
  39. 39. This is the footer
  40. 40. This is the footer
  41. 41. Join the conversation! github.com/cfpb/design-manual/issues 42
  42. 42. 43
  43. 43. “A framework, you say?” 44
  44. 44. 45 What is it? 1. A collection of modular HTML/CSS/JavaScript components 2. A build process that brings them together 3. A recommended workflow that eases the burden of keeping the front end in sync across multiple projects with different developers
  45. 45. “You’ve heard of Bootstrap, right?” 46
  46. 46. Because government. 47
  47. 47. Because government usability. 48
  48. 48. 49 Why build our own?  Browser support  Accessibility • Section 508 • WCAG 2.0 Level AA  Effort  Modularity
  49. 49. Modularity
  50. 50. 51 Advantages of a modular structure  Ease of updating  Use only what you need  Encourages contributions
  51. 51. 52 Workflow for an existing project edit project source edit component source rebuild component push component to remote repo clone install Grunt dependencies install cf or third-party components build project test in browser
  52. 52. This is the footer
  53. 53. 54 Workflow for an existing project edit project source edit component source rebuild component push component to remote repo clone install Grunt dependencies install cf or third-party components build project test in browser
  54. 54. Component update workflow in detail cf-buttons 1.1.0 cf.gov hmda-site future-project
  55. 55. Component update workflow in detail cf-buttons 1.1.0 cf-buttons 1.1.0
  56. 56. Component update workflow in detail cf-buttons new-feature future-project
  57. 57. 58 Modifying dependency version for testing
  58. 58. Component update workflow in detail cf-buttons 1.1.0 cf-buttons new-feature
  59. 59. 60 Component update workflow in detail cf.gov hmda-site future-project cf-buttons 1.2.0 cf.gov hmda-site future-project
  60. 60. This is the footer
  61. 61. This is the footer
  62. 62. This is the footer
  63. 63. 64 Capital Framework/Design Manual integration  Design Manual is built on Capital Framework  When design standard is updated, to see in the manual, must be updated in the framework  Interdependency keeps designers and developers in sync
  64. 64. This is the footer
  65. 65. This is the footer
  66. 66. This is really hard. 67
  67. 67. This is the footer
  68. 68. This is the footer
  69. 69. This is the footer
  70. 70. This is the footer
  71. 71. This is the footer
  72. 72. This is the footer
  73. 73. This is the footer
  74. 74. This is the footer
  75. 75. This is the footer
  76. 76. This is the footer
  77. 77. Give it a try! 78
  78. 78. 79
  79. 79. Getting started docs: cfpb.github.io/capital-framework 80
  80. 80. Contribute! github.com/cfpb/capital-framework 81
  81. 81. This is the footer
  82. 82. 83 In summary  Problem: How do you keep design and code consistent with a large, remote team working across disciplines and different projects?  Our solution, in one sentence: Design and publish your standards in the open, and build a front-end framework that enables developers to easily implement and maintain them.
  83. 83. scott.cranfill@cfpb.gov, @scott_ish mollie.bates@cfpb.gov, @mebates Thank you! Questions? 84

×