-
Notifications
You must be signed in to change notification settings - Fork 1
/
content-city-of-oakland.php
190 lines (171 loc) · 11.1 KB
/
content-city-of-oakland.php
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<section id="opportunity" class="page-section">
<div class="outer-container">
<h3 class="future-A h3 inner-container mt-5">opportunity</h3>
<p class="inner-container">Oakland, California is a diverse and dynamic community, with rapid change nearly a constant throughout its storied history. In order to deliver better services to that community, and clarify the services it provides, the City government worked with <a href="https://www.codeforamerica.org/our-work/" target="_blank" class="cs-body-link">Code for America</a> to define an ownable look and feel for all of its strategies and actions.</p>
</div>
<figure class="alignnone mt-5">
<div class="parallax-container">
<blockquote class="parallax-node" data-speed-modifier="0.5">
<p><span class="quote">“</span>Oakland is like a tree. The trunk full of businesses with branches stretching into their own communities with their own cultures.<span class="quote">”</span><br/><small>— Kayla, Oakland Native, Chapter 510 Writing Project</small></p>
</blockquote>
<img src="<?php echo os_path('CoO-TreeB-min.jpg', 'oakland') ?>" srcset="<?php echo os_path('CoO-TreeB-min.jpg', 'oakland') ?> 1x, <?php echo os_path('CoO-TreeB@2x-min.jpg', 'oakland') ?> 2x" width="1600" height="1008">
</div>
<figcaption class="outer-container"><div class="inner-container">Big Trees Trail at Joaquin Miller Park, Oakland (Photo credits: Greg Linhares / City of Oakland)</div></figcaption>
</figure>
<div class="outer-container">
<p class="inner-container mt-5">
<strong>A Symbol</strong><br/>
For many decades, a stylized oak tree has represented the city and its intertwined citizenry. In fact, the symbol has become so popular that many in the community embrace it to brand their store, organization, and <a href="https://www.flickr.com/photos/rebeccacbrown13/4935745171" target="_blank" class="cs-body-link">even bodies</a>. While such a wellspring of adoption is any community’s dream, this widespread use exposed the need to create a differentiated interpretation of the symbol, so it can be made clear when the government is communicating.
</p>
<p class="inner-container">In the past, the City never had a concerted approach to visual communication. The resulting cacophony of symbols across city departments did not connote the clarity and simplicity that should be the hallmark of any experience with a large organization. </p>
</div>
<figure class="aligncenter mt-5" style="background-color: white;">
<img src="<?php echo os_path('oakland-cacophony.png', 'oakland'); ?>" srcset="<?php echo os_path('oakland-cacophony.png', 'oakland'); ?> 1x, <?php echo os_path('oakland-cacophony@2x.png', 'oakland'); ?> 2x" width="1193" height="200"/>
<!-- <figcaption>explanatory caption</figcaption> -->
</figure>
</section>
<section id="process" class="page-section " style="padding-bottom: 50px;">
<figure class="alignnone mt-nudge">
<img src="<?php echo os_path('artifacts.jpg', 'oakland') ?>" width="1212" height="978">
<div class="outer-container">
<figcaption class="inner-container">Artifacts from Oakland's Archives</figcaption>
</div>
</figure>
<div class="outer-container">
<h3 class="future-A h3 inner-container mt-5">process</h3>
<p class="inner-container">We first performed in-depth research and a far-reaching visual audit. Immersed in the City’s Archives, we traced the original use of the symbol to the early 1970s. Throughout its history, it has received few tweaks, and retains a special kind of beauty which we were keen to preserve. But with its high recognition and unique properties, there were still various issues with the mark, especially how it rendered in smaller contexts. We collaborated with type designer <a href="http://jesseragan.com" target="_blank" class="cs-body-link">Jesse Ragan</a> to treat the symbol as we would from a typeface glyph, to give it better optical legibility, especially on-screen and at small sizes.</p>
<!-- [ANIMATED EVOLUTION OF TREE GRAPHIC: .MOV ELLIOT PREPARED] -->
</div>
<figure class="oakland-tree">
<div class="labels outer-container">
<div class="inner-container mt-5">
<em class="pull-left text-muted" style="width: 50%; color: #376FFF; ">Before</em>
<em class="pull-right text-muted text-right" style="width: 50%; color: #376FFF; ">After</em>
</div>
</div>
<div class="slider-row oakland-tree-large">
<img src="<?php echo os_path('CoO-Tree2.svg', 'oakland'); ?>" class="large top" width="640" height="438" />
<img src="<?php echo os_path('CoO-Tree1.svg', 'oakland'); ?>" class="large bottom" width="640" height="438" />
<div class="slider">
<div class="slider-track"></div>
<div class="slider-thumb"></div>
<input type="range" name="tree-slider-lg" class="slider-input tree-slider-lg" value="50" min="0" max="100">
</div>
</div>
<div class="slider-row oakland-tree-small">
<img src="<?php echo os_path('CoO-Tree2.svg', 'oakland'); ?>" class="small top" width="116" height="119" />
<img src="<?php echo os_path('CoO-Tree1.svg', 'oakland'); ?>" class="small bottom" width="116" height="119" />
<div class="slider">
<div class="slider-track"></div>
<div class="slider-thumb"></div>
<input type="range" name="tree-slider-sm" class="slider-input tree-slider-sm" value="50" min="0" max="100">
</div>
</div>
</figure>
<div class="outer-container">
<figcaption class="inner-container">Oakland’s tree</figcaption>
<p class="inner-container mt-5">As we defined the color scheme, we wanted to help Oakland break through the clutter of commercial activity by giving it a clear and bold look. We paired a dominant color, an energetic green hue, to a rich range of complimentary hues, and created a typographic system that emphasizes clarity and lack of ornament.</p>
</div>
<figure class="aligncenter mt-5" style="background-color: #E4F1CF;">
<img src="<?php echo os_path('CoO-Brochure-lowsrc.png', 'oakland') ?>" class="lazy-load" data-src="<?php echo os_path('CoO-Brochure.png', 'oakland'); ?>" data-src2x="<?php echo os_path('CoO-Brochure-@2x.png', 'oakland'); ?>" width="1025" height="690" />
</figure>
<div class="outer-container">
<figcaption class="inner-container">City of Oakland Brochures</figcaption>
</div>
<div class="outer-container mt-5">
<p class="inner-container">The City should be able to modulate its expression without always employing a blunt use of the logo. We created a pattern that, while related to the tree logo, grows it into a full root system, as complex and rich as the communities and network that support the city. This pattern can be applied to elements in overt or subtle ways, based on the context.</p>
</div>
</section>
<section class="page-section " >
<figure class="alignnone mt-nudge oakland-pattern mt-5"></figure>
<div class="outer-container">
<figcaption class="inner-container">Root system</figcaption>
</div>
</section>
<section id="solution" class="page-section " >
<div class="outer-container">
<div class="inner-container mt-5">
<h3 class="future-A h3">solution</h3>
</div>
</div>
<figure class="os-slideshow-container mt-5">
<div id="oakland-website-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#oakland-website-nav .prev", "nextArrow": "#oakland-website-nav .next", "appendDots": "#oakland-website-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CoO-Homepage-min.png', 'oakland'); ?>" srcset="<?php echo os_path('CoO-Homepage-min.png', 'oakland'); ?> 1x, <?php echo os_path('CoO-Homepage-@2x-min.png', 'oakland'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>City of Oakland Homepage</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CoO-Landing-min.png', 'oakland'); ?>" srcset="<?php echo os_path('CoO-Landing-min.png', 'oakland'); ?> 1x, <?php echo os_path('CoO-Landing-@2x-min.png', 'oakland'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Landing Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CoO-Parks-min.png', 'oakland'); ?>" srcset="<?php echo os_path('CoO-Parks-min.png', 'oakland'); ?> 1x, <?php echo os_path('CoO-Parks-@2x-min.png', 'oakland'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Parks and Recreation</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CoO-Terminal-min.png', 'oakland'); ?>" srcset="<?php echo os_path('CoO-Terminal-min.png', 'oakland'); ?> 1x, <?php echo os_path('CoO-Terminal-@2x-min.png', 'oakland'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Terminal page</figcaption>
</li>
</ul>
<?php os_slide_nav("oakland-website-nav"); ?>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>In this same spirit of open development, the portfolio library is publicly available, along with a design toolkit created to support designers, agencies and civil servants in creating material to fit the new visual identity.</p>
</div>
</div>
<figure class="os-slideshow-container mt-5">
<div id="oakland-toolkit-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#oakland-toolkit-nav .prev", "nextArrow": "#oakland-toolkit-nav .next", "appendDots": "#oakland-toolkit-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CoO-PatternPortfolio-1-min.png', 'oakland'); ?>" srcset="<?php echo os_path('CoO-PatternPortfolio-1-min.png', 'oakland'); ?> 1x, <?php echo os_path('CoO-PatternPortfolio-1-@2x-min.png', 'oakland'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>City of Oakland Design Toolkit</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CoO-PatternPortfolio-2-min.png', 'oakland'); ?>" srcset="<?php echo os_path('CoO-PatternPortfolio-2-min.png', 'oakland'); ?> 1x, <?php echo os_path('CoO-PatternPortfolio-2-@2x-min.png', 'oakland'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Toolkit – Visual Identity</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CoO-PatternPortfolio-3-min.png', 'oakland'); ?>" srcset="<?php echo os_path('CoO-PatternPortfolio-3-min.png', 'oakland'); ?> 1x, <?php echo os_path('CoO-PatternPortfolio-3-@2x-min.png', 'oakland'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Toolkit – Pattern Portfolio</figcaption>
</li>
</ul>
<?php os_slide_nav("oakland-toolkit-nav"); ?>
</figure>
</section>