-
Notifications
You must be signed in to change notification settings - Fork 0
/
cfpb-brand.html
165 lines (147 loc) · 7.46 KB
/
cfpb-brand.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
---
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include head.html %}
</head>
<body>
{% include header.html %}
<div class="jumbotron" style="background-color:#f8f8f8; padding-top:0; padding-bottom:0;">
<div class="container">
<img src="./img/design-manual/[email protected]" alt="...">
</div>
</div>
<div id="portfolio" class="container">
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="row">
<div class="col-xs-12 col-sm-12">
<h1>CFPB Design Manual</h1>
<h4>Developing a consistent identity and brand resources for the CFPB</h4>
</div>
<div class="col-xs-4 col-sm-6 meta-entry">
<h6>Project Date</h6>
<h5>2013 - 2014</h5>
</div>
<div class="col-xs-4 col-sm-6 meta-entry">
<h6>Organization</h6>
<h5>CFPB</h5>
</div>
<div class="col-xs-12 meta-entry">
<h6>Project Team</h6>
<h5>CFPB Design & Technology Fellows</h5>
</div>
<div class="col-xs-12 meta-entry">
<h6>See the work</h6>
<h5><a href="http://cfpb.github.io/design-manual/index.html" target="_blank">Visit the Design Manual</a> <span class="glyphicon glyphicon-link"></span></h5>
</div>
</div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-sm-8 col-md-9">
<h3>The Design Manual is an open-source resource built to help employees and contractors produce effective and visually-consistent print and digital products on behalf of the Bureau. The Manual includes our design principles, guidelines for user experience, identity standards, and code snippets for common user interface elements. The Manual will continue to evolve as we learn what works best for the CFPB and the people we serve.</h3>
<div class="row">
<div class="col-sm-6">
<p>The CFPB brand helps to cultivate a trusted relationship with consumers and enable them to live better financial lives. These guidelines represent the most up-to-date visual expression of the CFPB brand, also known as identity.</p>
</div>
<div class="col-sm-6">
<p>When used as the building blocks for visual communication, we can be confident the final output will be consistent and recognizable as a CFPB production.</p>
</div>
</div>
</div>
</div>
<div class="clearfix visible-md-block visible-lg-block"></div>
<hr id="guidelines">
<div class="row">
<div class="col-sm-4 col-md-3">
<h2>Identity Components & UI Guidelines</h2>
<p>These are the strategic underpinnings for the CFPB’s design and development standards. They serve as the backbone for the user experience, ensuring that the standards we set enable products that are easy to use and understand for consumers.</p>
</div>
<div class="col-sm-8 col-md-9">
<img style="background:#f8f8f8;" src="./img/design-manual/[email protected]" alt="...">
</div>
<div class="clearfix"></div>
<div class="col-sm-6">
<hr>
<img style="border: 1px solid #e6e6e6" src="./img/design-manual/design-manual_05.png" alt="...">
<h3>Accessibility Standards</h3>
<p>As a federal entity, we strive to comly with <a href="http://www.section508.gov/" target="_blank">Section 508</a> guidelines for web accessibility. These standards ensure that content is accessible by everyone, regardless of any disability or user device.</p>
</div>
<div class="col-sm-6">
<hr>
<img style="border: 1px solid #e6e6e6" src="./img/design-manual/design-manual_06.png" alt="...">
<h3>UX Guidelines</h3>
<p>We provide guidelines for common user interface features like web forms, which should be designed with potential users in mind. Typically we outline several ways to ensure the best possible user experience.</p>
</div>
</div>
<div class="clearfix visible-md-block visible-lg-block"></div>
<hr id="icons">
<div class="row">
<div class="col-sm-4 col-md-3">
<h2>Icon Libraries</h2>
<h4>Building a visual language for communicating about financial products, processes, and information.</h4>
<p>Our icons are used to quickly convey complicated financial topics to consumers from a broad range of backgrounds, helping us overcome language and cultural communication barriers. Consistent iconography helps visually reinforce interface actions, communicate file types and status indicators, and improve readability for key topics throughout our web applications and print materials.</p>
</div>
<div class="col-sm-8 col-md-9">
<img style="background:#f8f8f8;" src="./img/design-manual/[email protected]" alt="...">
<img style="background:#f8f8f8;" src="./img/design-manual/[email protected]" alt="...">
</div>
</div>
<div class="clearfix visible-md-block visible-lg-block"></div>
<hr id="icons">
<div class="row">
<div class="col-sm-4">
<h2>Internal Iconathon</h2>
<h4>This past January, we hosted our inaugural iconathon, a half-day workshop to brainstorm and sketch new icon ideas.</h4>
<p>Subject matter experts from throughout the Bureau overcame their fears of sketching and joined our user experience and graphic designers to generate ideas for nearly forty financial concepts.</p>
<h5>Read the full article <a href="https://cfpb.github.io/articles/collaborating-on-civic-symbols/" target="_blank">"Collaborating on Civic Symbols"</a> on CFPB Open Tech.</h5>
</div>
<div class="col-sm-8">
<img src="./img/design-manual/iconathon_00.jpg" alt="...">
</div>
<div class="col-sm-4">
<img src="./img/design-manual/iconathon_01.jpg" alt="...">
</div>
<div class="col-sm-4">
<img src="./img/design-manual/iconathon_02.jpg" alt="...">
</div>
<div class="col-sm-4">
<img src="./img/design-manual/iconathon_03.jpg" alt="...">
</div>
<div class="clearfix"></div>
<hr>
<div class="col-sm-6 col-md-3">
<p>They were tasked with representing challenging topics like “payday lending,” “getting out of debt,” and even the seemingly insurmountable “resources for intermediaries.”</p>
</div>
<div class="col-sm-6 col-md-3">
<img src="./img/design-manual/iconathon_04.png" alt="...">
</div>
<div class="col-sm-6 col-md-3">
<img src="./img/design-manual/iconathon_05.png" alt="...">
</div>
<div class="col-sm-6 col-md-3">
<img src="./img/design-manual/iconathon_06.png" alt="...">
</div>
<div class="clearfix"></div>
<hr>
<div class="col-sm-6 col-md-3">
<p>By the end of a morning packed with sharpies and post-its, teams had sketched nearly 400 different ideas. We held a critique to discuss which approaches provided the best conceptual representation rather than visual polish. Favorite sketches included solutions for “credit card fraud,” “digital currency,” and “building credit.” The leading approaches were recorded for our design team to execute as final icons for our library.</p>
</div>
<div class="col-sm-6 col-md-4">
<img src="./img/design-manual/iconathon_07.jpg" alt="...">
</div>
<div class="col-sm-6 col-md-5">
<img src="./img/design-manual/iconathon_08.jpg" alt="...">
</div>
<div class="col-xs-12">
<img src="./img/design-manual/iconathon_09.jpg" alt="...">
</div>
</div>
<div class="clearfix visible-md-block visible-lg-block"></div>
<hr>
</div> <!-- /container -->
{% include footer.html %}
</body>
</html>