-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcontent-gibney.php
More file actions
300 lines (255 loc) · 20.3 KB
/
content-gibney.php
File metadata and controls
300 lines (255 loc) · 20.3 KB
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<section id="opportunity" class="page-section">
<div class="outer-container">
<div class="inner-container mt-5">
<h3 class="future-A h3">opportunity</h3>
<p>We’ve worked with Gibney on an ongoing basis since 2014. Over these years we’ve developed a deep relationship with this institution, which defies simple explanation. Most people don't know about—much less understand—all that Gibney is and does.</p>
<p>Founded in 1991, Gibney Dance has long existed at the intersection of dance and social action. These values have remained an integral part of the organization, even as every other aspect of the organization transformed exponentially. In a few short years, Gibney has expanded physically and programmatically—adding 52,000 square feet of space and ever more programs for audiences and artists. At this point of inflection, Gibney approached us to redefine their brand to more accurately and wholly tell their story.</p>
</div>
</div>
<figure class="alignnone mt-5">
<div class="parallax-container">
<blockquote class="parallax-node" data-speed-modifier="0.5">
<p class="bleed"><span class="quote">“</span>You can’t change the world without changing people.<span class="quote">”</span><br/><small>—Gina Gibney, <em>Artistic Director & CEO</em></small></p>
</blockquote>
<img src="<?php echo os_path('parrallax-quote.jpg', 'gibney') ?>" srcset="<?php echo os_path('parrallax-quote.jpg', 'gibney') ?> 1x, <?php echo os_path('parrallax-quote@2x.jpg', 'gibney') ?> 2x" width="1600" height="1008" alt="">
</div>
</figure>
</section>
<section id="process" class="page-section">
<div class="outer-container ">
<div class="inner-container mt-5">
<h3 class="future-A h3">process</h3>
<p>Before beginning the project, we already knew that Gibney’s offer was wide-ranging and complex. This made our research activities critical to establishing a clear and solid strategic foundation upon which all subsequent activities would be based.</p>
<p>In order to deliver a more accurate identity, our priority was to rethink the organization through a deeper understanding of Gibney’s community—all the individuals that contribute to, benefit from, and participate in Gibney activities— and what Gibney means to them. We conducted interviews with Gibney’s dancers, current and former staff, participants to dance classes and domestic violence movement workshops, resident artists, supporters, and board members. We also conducted co-creation workshops with staff to uncover perceptions and insights about Gibney. The brand platform and set of recommendations taken from these activities enabled all future work to be approached from the perspective of Gibney's community.</p>
</div>
<div class="mt-5">
<img src="<?php echo os_path('workshop.jpg', 'gibney') ?>" srcset="<?php echo os_path('workshop.jpg', 'gibney') ?> 1x, <?php echo os_path('workshop@2x.jpg', 'gibney') ?> 2x" width="1600" height="1008" alt="Co-creation workshop with Gibney staff">
<figcaption><div class="inner-container">Co-creation workshop with Gibney staff</div></figcaption>
</div>
<div class="inner-container mt-5">
<p>Internally, Gibney had been using a concept called “the three C’s” to organize and talk about activities: Center, for the physical space; Company, for the dance company; and Community, for its social action work. Gibney relied on these three terms as a shorthand because they were easy to explain. But through the process, we discovered that most of Gibney’s work spans across and blurs these distinctions. From the audience’s perspective, the categories created unnecessary barriers to knowing about the entirety of Gibney’s actions.</p>
<p>We underscored the need to transcend these constraints to find a more flexible, encompassing, and clear way to explain Gibney that would be centered around the user.</p>
</div>
<div class="flex-blocks mt-5">
<div class="column column-span-4 browser ">
<div class="browser-bar"></div>
<div class="browser-window black">
<div class="browser-inner">
<img src="<?php echo os_path('old-website-1.jpg', 'gibney') ?>" srcset="<?php echo os_path('old-website-1.jpg', 'gibney') ?> 1x, <?php echo os_path('old-website-1@2x.jpg', 'gibney') ?> 2x" width="1600" height="1008" alt="Co-creation workshop with Gibney staff">
</div>
</div>
</div>
<div class="column column-span-4 browser">
<div class="browser-bar"></div>
<div class="browser-window black">
<div class="browser-inner">
<img src="<?php echo os_path('old-website-2.jpg', 'gibney') ?>" srcset="<?php echo os_path('old-website-2.jpg', 'gibney') ?> 1x, <?php echo os_path('old-website-2@2x.jpg', 'gibney') ?> 2x" width="1600" height="1008" alt="Co-creation workshop with Gibney staff">
</div>
</div>
</div>
<div class="column column-span-4 browser">
<div class="browser-bar"></div>
<div class="browser-window black">
<div class="browser-inner">
<img src="<?php echo os_path('old-website-3.jpg', 'gibney') ?>" srcset="<?php echo os_path('old-website-3.jpg', 'gibney') ?> 1x, <?php echo os_path('old-website-3@2x.jpg', 'gibney') ?> 2x" width="1600" height="1008" alt="Co-creation workshop with Gibney staff">
</div>
</div>
</div>
</div>
<figcaption><div class="inner-container">Old website featuring “the three C’s:” Center, Company, Community Action</div></figcaption>
</div>
</section>
<section id="solution" class="page-section mt-5">
<div class="outer-container">
<div class="inner-container">
<h3 class="future-A h3">solution</h3>
<p>Though our research uncovered a deep complexity to the organization, one universal understanding was the integrality of movement. Physical movement, naturally, but also emotional, spiritual, and political movement are all manifested through Gibney’s values, programs, and community. We also realized that having the word ‘Dance’ as part of the name provided more limitations than opportunities, and recommended it be dropped to leverage the colloquial name already familiar to the community.</p>
</div>
<blockquote class="inverted" data-speed-modifier="0.5">
<p class=""><span class="quote">“</span>Just as dance is able to capture more than what can be put in words, our new identity allows us to visually distill our powerful message.<span class="quote">”</span><br/><small>—Gina Gibney, <em>CEO and Artistic Director</em></small></p>
</blockquote>
<!-- <div class="flex-blocks mt-3">
<div class="column column-span-3" style="background:black;flex-basis: 22%;margin: 15px;">
<canvas width="194px" height="194px" id="canvas1"></canvas> -->
<!-- change width and heigth based on parent size #2-->
<!-- </div>
<div class="column column-span-3" style="background:black;flex-basis: 22%;margin: 15px;">
<canvas width="194px" height="194px" id="canvas2"></canvas> -->
<!-- change width and heigth based on parent size #2-->
<!-- </div>
<div class="column column-span-3" style="background:black;flex-basis: 22%;margin: 15px;">
<canvas width="194px" height="194px" id="canvas3"></canvas> -->
<!-- change width and heigth based on parent size #2-->
<!-- </div>
<div class="column column-span-3" style="background:black;flex-basis: 22%;margin: 15px;">
<canvas width="194px" height="194px" id="canvas4"></canvas> -->
<!-- change width and heigth based on parent size #2-->
<!-- </div>
</div> -->
<!-- <figcaption><div class="inner-container">Our motion explorations provided an insight to movement with lines</div></figcaption> -->
<div class="inner-container mt-5">
<p>As we approached the visual identity, we wanted to convey the concepts of movement, transformation, and growth that define Gibney. We developed a system based on the flexibility of lines.</p>
</div>
</div>
<figure class="aligncenter mt-5">
<div class="" style="background:black;text-align:center">
<video autoplay poster="http://www.objectivesubject.com/wp-content/uploads/2018/04/gibneyposterimage.jpg" autoplay muted loop preload="preload">
<source src="<?php echo os_path('logoanimnobreak.mp4', 'gibney') ?>" type="video/mp4">
<source src="<?php echo os_path('logoanimnobreak.mov', 'gibney') ?>" type="video">
</video>
</div>
<div class="outer-container">
<figcaption class="inner-container">Gibney’s new logo conveys an agile and elegant visual system. The lines are exible, transforming and responding to different forms of movement.</figcaption>
</div>
</figure>
<figure data-delay="0" data-hold="3000" data-duration="2000" data-type="fadeOutReveal" class="outer-container cycle-each mt-5">
<div class="outer-container">
<img src="<?php echo os_path('GibneyBrandArch-Before.png', 'gibney') ?>" srcset="<?php echo os_path('GibneyBrandArch-Before.png', 'gibney') ?> 1x, <?php echo os_path('GibneyBrandArch-Before@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="Old Architecture">
<figcaption class="inner-container">Gibney’s old brand architecture was a collection of ad hoc identities that bore little relationship to one another, creating confusion for their audiences.</figcaption>
</div>
<div class="outer-container">
<img src="<?php echo os_path('GibneyBrandArch-After.png', 'gibney') ?>" srcset="<?php echo os_path('GibneyBrandArch-After.png', 'gibney') ?> 1x, <?php echo os_path('GibneyBrandArch-After@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="New Architecture">
<figcaption class="inner-container">Gibney’s cohesive brand architecture allows for a more streamlined communication of the institution’s many offerings.</figcaption>
</div>
</figure>
<figure class="alignnone mt-5" style="position:relative;height:568px;">
<div class="gibney__clip-box">
<img src="http://www.objectivesubject.com/wp-content/uploads/2018/04/static-lines.gif" ?> >
</div>
</figure>
<div class="outer-container">
<figcaption class=" inner-container">Parallel lines make for a compelling visual language to convey movements, even in static contexts.</figcaption>
</div>
<figure class="outer-container mt-5">
<img src="<?php echo os_path('ux-design.png', 'gibney') ?>" srcset="<?php echo os_path('ux-design.png', 'gibney') ?> 1x, <?php echo os_path('ux-design@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="Old Architecture">
<figcaption class=" inner-container">Like performance itself, layout concepts need to reflect flexibility to create drama and interaction with space.</figcaption>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>Gibney’s website also hadn’t kept up as the institution’s programs and services expanded, resulting in a disjointed, complicated presentation of the sprawling offerings.</p>
<p>We engaged in an exhaustive content architecture analysis, working together with the Gibney team to sort, categorize, and prioritize content informed by organizational processes but centered foremost around users’ needs. We put actions front and center, anticipating that users would want to engage with Gibney’s programs on the whole, not based on subtle, internal distinctions between program offerings.</p>
<p>Furthering our strategic findings, we thought it important to clearly and succinctly express the full breadth of the institution’s offer. We proposed an “agenda” as a key feature of the homepage, allowing users to see, in a functional way, exactly what Gibney offers at any given time, while simultaneously allowing Gibney to convey a complete representation of its work.</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('desktop-homepage.jpg', 'gibney'); ?>" srcset="<?php echo os_path('desktop-homepage.jpg', 'gibney'); ?> 1x, <?php echo os_path('desktop-homepage@2x.jpg', 'gibney'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption >The website’s homepage puts a given week’s activities front and center, highlighting the hitherto lesser-known offerings.</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('desktop-company.jpg', 'gibney'); ?>" srcset="<?php echo os_path('desktop-company.jpg', 'gibney'); ?> 1x, <?php echo os_path('desktop-company@2x.jpg', 'gibney'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption >Moments of the new website</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('desktop-event.jpg', 'gibney'); ?>" srcset="<?php echo os_path('desktop-event.jpg', 'gibney'); ?> 1x, <?php echo os_path('desktop-event@2x.jpg', 'gibney'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption >Moments of the new website</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('desktop-calendar-upcoming.jpg', 'gibney'); ?>" srcset="<?php echo os_path('desktop-calendar-upcoming.jpg', 'gibney'); ?> 1x, <?php echo os_path('desktop-calendar-upcoming@2x.jpg', 'gibney'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption >Moments of the new website</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('desktop-calendar-monthly.jpg', 'gibney'); ?>" srcset="<?php echo os_path('desktop-calendar-monthly.jpg', 'gibney'); ?> 1x, <?php echo os_path('desktop-calendar-monthly@2x.jpg', 'gibney'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption >Moments of the new website</figcaption>
</li>
</ul>
<?php os_slide_nav("oakland-toolkit-nav"); ?>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p><strong>Implementation</strong></p>
<p style="margin-top:0;">Though our research uncovered a deep complexity to the organization, one universal understanding was the integrality of movement. Physical movement, naturally, but also emotional, spiritual, and political movement are all manifested through Gibney’s values, programs, and community. We also realized that having the word ‘Dance’ as part of the name provided more limitations than opportunities, and recommended it be dropped to leverage the colloquial name already familiar to the community.</p>
</div>
</div>
<figure data-delay="0" data-hold="3000" data-duration="2000" data-type="fadeOutReveal" class="outer-container cycle-each mt-5">
<div class="outer-container">
<img src="<?php echo os_path('brochure-3.png', 'gibney') ?>" srcset="<?php echo os_path('brochure-3.png', 'gibney') ?> 1x, <?php echo os_path('brochure-3@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="Old Architecture">
</div>
<div class="outer-container">
<img src="<?php echo os_path('brochure-1.png', 'gibney') ?>" srcset="<?php echo os_path('brochure-1.png', 'gibney') ?> 1x, <?php echo os_path('brochure-1@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="New Architecture">
</div>
<div class="outer-container">
<img src="<?php echo os_path('brochure-2.png', 'gibney') ?>" srcset="<?php echo os_path('brochure-2.png', 'gibney') ?> 1x, <?php echo os_path('brochure-2@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="Old Architecture">
</div>
</figure>
<div class="outer-container">
<figcaption class="inner-container">We developed a range of design fidelity to allow impactful material to be professionally designed, but also simpler design that can be accomplished by administrative staff, in-house.</figcaption>
</div>
<div data-offset="0.25" class="outer-container mt-5 active-on-inview">
<div class="inner-container gibney__cat--container">
<img class="gibney__cat gibney__cat--right" src="<?php echo os_path('catalogue-performance.png', 'gibney') ?>" srcset="<?php echo os_path('catalogue-performance.png', 'gibney') ?> 1x, <?php echo os_path('catalogue-performance@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="performance catalogue">
<img class="gibney__cat gibney__cat--middle" src="<?php echo os_path('catalogue-training.png', 'gibney') ?>" srcset="<?php echo os_path('catalogue-training.png', 'gibney') ?> 1x, <?php echo os_path('catalogue-training@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="training catalogue">
<img class="gibney__cat gibney__cat--left" src="<?php echo os_path('catalogue-rental.png', 'gibney') ?>" srcset="<?php echo os_path('catalogue-rental.png', 'gibney') ?> 1x, <?php echo os_path('catalogue-rental@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="rental catalogue">
</div>
<figcaption class="inner-container">Using a range of size formats, the reenvisioned catalogue clarifies content based on both Gibney’s offerings and audiences.</figcaption>
</div>
<div class="outer-container">
<figure class="inner-container mt-5">
<img src="<?php echo os_path('spread-1.png', 'gibney') ?>" srcset="<?php echo os_path('spread-1.png', 'gibney') ?> 1x, <?php echo os_path('spread-1@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="rental catalogue">
</figure>
</div>
<div class="flex-blocks outer-container">
<div class="column column-span-6 ">
<img src="<?php echo os_path('spread-2.png', 'gibney') ?>" srcset="<?php echo os_path('spread-2.png', 'gibney') ?> 1x, <?php echo os_path('spread-2@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="Co-creation workshop with Gibney staff">
</div>
<div class="column column-span-6">
<img src="<?php echo os_path('spread-3.png', 'gibney') ?>" srcset="<?php echo os_path('spread-3.png', 'gibney') ?> 1x, <?php echo os_path('spread-3@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="Co-creation workshop with Gibney staff">
</div>
<figcaption class="inner-container">The use of negative space within the interior spreads creates visual tension between image and text. </figcaption>
</div>
<div class="outer-container mt-5 mb-5">
<div class="inner-container">
<p>Acknowledging the opportunity a brand launch offers an organization to reintroduce itself, we developed concepts for and produced two videos that explained the rebrand process and summed up the new Gibney.</p>
</div>
</div>
<div class="outer-container mt-5 mb-5">
<iframe src="https://player.vimeo.com/video/264336408" width="1030" height="580" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<figcaption class="inner-container">Motion Look and feel</figcaption>
</div>
<div class="outer-container mt-5 mb-5">
<iframe src="https://player.vimeo.com/video/264336135" width="1030" height="580" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<figcaption class="inner-container">Anthem Video</figcaption>
</div>
<div class="outer-container mt-5">
<div class="inner-container">
<p>We also continue to work with Gibney to realize the brand, designing a wayfinding and environmental graphics system for its physical space.</p>
</div>
</div>
<div class="outer-container mt-5">
<img src="<?php echo os_path('way-finding-1.png', 'gibney') ?>" srcset="<?php echo os_path('way-finding-1.png', 'gibney') ?> 1x, <?php echo os_path('way-finding-1@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="way-finding">
<img src="<?php echo os_path('way-finding-2.png', 'gibney') ?>" srcset="<?php echo os_path('way-finding-2.png', 'gibney') ?> 1x, <?php echo os_path('way-finding-2@2x.png', 'gibney') ?> 2x" width="1600" height="1008" alt="way-finding" style="margin-top:1rem;">
<figcaption class="inner-container">The system is flexible yet straightforward to help visitors navigate the space.</figcaption>
</div>
</section>
<div class="outer-container mt-5 mb-5">
<div class="inner-container">
<p class="h3 future-A h3"><a href="http://gibneydance.org/" class="cta-link" target="_blank">gibneydance.org <span class="icon arnhem rotate-cc-45">→</span></a></p>
</div>
</div>