-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcontent-associated-press.php
More file actions
192 lines (170 loc) · 10.7 KB
/
content-associated-press.php
File metadata and controls
192 lines (170 loc) · 10.7 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
<?php
$color = get_field('case_study_color');
?>
<section id="opportunity" class="page-section">
<div class="outer-container">
<div class="inner-container mt-5">
<h3 class="future-A h3">opportunity</h3>
<p>As the largest news organization in the world, the Associated Press (AP) is dedicated to reporting and delivering breaking news from the most remote corners of the globe. Recent upheaval in the media world has forced many news organizations to close their doors. A not-for-profit cooperative of American newspapers, AP saw an opportunity to revise its approach to address an evolving world.</p>
<p>Over the last decade, the organization made strides to strengthen its position as a leading provider of photo and video content. By 2009, AP was a new organization, albeit one that lacked strategic cohesion and market differentiation.</p>
</div>
</div>
<figure class="alignnone mt-5">
<div class="parallax-container">
<blockquote class="parallax-node" data-speed-modifier="0.5" style="background-color:<?php echo $color; ?>; color: white; ">
<p><span class="quote">“</span>With 170 years of illustrious history and with its content reaching 2 billion people every day, AP is the definitive source for trusted news.<span class="quote">”</span></p>
</blockquote>
<img src="<?php echo os_path('AP-Parallax.jpg', 'ap') ?>" srcset="<?php echo os_path('AP-Parallax.jpg', 'ap') ?> 1x, <?php echo os_path('AP-Parallax@2x.jpg', 'ap') ?> 2x" width="1600" height="1008" alt="Journalist capturing photographs for Associated Press">
</div>
</figure>
<div class="outer-container">
<p class="inner-container mt-5">
To address these realities, AP turned to the expertise of the <a href="http://fromclarity.co/" class="cs-body-link" target="_blank">Schroeder Group</a>, a New York-based brand consultancy. Following exhaustive interviews and research, AP developed a masterbrand strategy to drive distinction, clarify its values, and serve as a guide for business decisions.
</p>
</div>
<figure class="active-on-inview mt-5" data-offset="0.5" style="background-color: white;">
<ul class="ap-historical-logos list-unstyled clearfix">
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">1900</em>
</li>
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">1933</em>
</li>
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">1942</em>
</li>
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">1945</em>
</li>
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">1955</em>
</li>
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">1961</em>
</li>
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">1981</em>
</li>
<li class="ap-historical-logo">
<div class="logo"></div>
<em style="<?php echo "color: {$color};" ?>">2012</em>
</li>
</ul>
</figure>
<div class="outer-container">
<p class="inner-container mt-5">
Describing itself as gutsy, resourceful and connected, and with core values of integrity, action and independence, the AP engaged Objective Subject to develop a visual identity system reflective of a dynamic news organization competing in the digital age.
</p>
</div>
<figure class="ap-logo-issues">
<ul class="list-unstyled outer-container mt-5">
<li class="ap-logo-issue issue-legibility">
<div class="issue-image"></div>
<em style="<?php echo "color: {$color};" ?>">Issue: Legibility</em>
</li>
<li class="ap-logo-issue issue-balance">
<div class="issue-image"></div>
<em style="<?php echo "color: {$color};" ?>">Issue: Balance</em>
</li>
<li class="ap-logo-issue issue-proportions">
<div class="issue-image"></div>
<em style="<?php echo "color: {$color};" ?>">Issue: Proportions</em>
</li>
<li class="ap-logo-issue issue-drawing-quality">
<div class="issue-image"></div>
<em style="<?php echo "color: {$color};" ?>">Issue: Drawing Quality</em>
</li>
</ul>
</figure>
</section>
<section id="process" class="page-section">
<div class="outer-container">
<div class="inner-container mt-5">
<h3 class="future-A h3 mt-3">process</h3>
<p>We began the design process by interviewing key stakeholders to understand the critical issues with the existing system. Dominant feedback noted a lack of flexibility with the existing mark, a dated aesthetic and the impression of an overly-American feel.</p>
<p>In our initial design assessment, Objective Subject determined that the existing letterforms hindered legibility and reproduction across mediums. Our team initially explored minimal tweaks to the logo with an aim to modernize, address legibility and improve the craft of the letterforms.</p>
</div>
</div>
<figure class="aligncenter mt-5">
<img src="<?php echo os_path('AP-Collateral.png', 'ap') ?>" srcset="<?php echo os_path('AP-Collateral.png', 'ap') ?> 1x, <?php echo os_path('AP-Collateral-@2x.png', 'ap') ?> 2x" width="1200" height="797" />
<div class="outer-container">
<figcaption class="inner-container" style="<?php echo "color: {$color};" ?>">Associated Press Collateral</figcaption>
</div>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>Our iterative process generated an option with a red underscore, which we dubbed ‘the prompt,’ that evokes AP’s emphasis on editorial rigor and precise and accurate approach. Setting the letterforms in black on a white backdrop proved to further highlight these values, while improving contrast and legibility. Using a consistently white backdrop further improved the strength of the mark in the variety of environments it needs to live in.</p>
<div class="responsive-media-16x9 mt-5">
<iframe src="https://player.vimeo.com/video/37266155?autoplay=1&loop=1&color=ffffff&title=0&byline=0&portrait=0" width="635" height="357" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</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>
<p>We retained the original logo’s stencil lettering, which embody the gutsy and adventurous personality of an international news organization. Redrawing the letters upright speaks to AP’s integrity, while lending a more contemporary feel to the mark.</p>
<p>Our team recommended a cooler, bolder, and truer red hue that both represents the dynamic nature of the news company, and allows a much-needed flexibility to reflect AP’s diverse array of products and services.</p>
</div>
</div>
<figure class="aligncenter mt-5">
<img src="<?php echo os_path('AP-Brand-Voice-Mockup.png', 'ap'); ?>" srcset="<?php echo os_path('AP-Brand-Voice-Mockup.png', 'ap'); ?> 1x, <?php echo os_path('AP-Brand-Voice-Mockup-@2x.png', 'ap'); ?> 2x" width="1160" height="774" alt="AP Brand Voice" />
<div class="outer-container">
<figcaption class="inner-container" style="<?php echo "color: {$color};" ?>">AP's Brand voice</figcaption>
</div>
</figure>
<figure class="aligncenter mt-5">
<img src="<?php echo os_path('AP-Brand-Guidelines-Mockup.png', 'ap'); ?>" srcset="<?php echo os_path('AP-Brand-Guidelines-Mockup.png', 'ap'); ?> 1x, <?php echo os_path('AP-Brand-Guidelines-Mockup-@2x.png', 'ap'); ?> 2x" width="1160" height="774" alt="AP Brand Voice" />
<div class="outer-container">
<figcaption class="inner-container" style="<?php echo "color: {$color};" ?>">AP's Brand guidelines</figcaption>
</div>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>We defined a dynamic visual system to support the new mark. A range of deep colors supplement the mark’s dominant red, and selected typography offers further complement. A new visual element, called watermarks, drawn from the outline of the AP letterforms, intertwines to connote the strength of AP’s network of people, bureaus and technology.</p>
</div>
</div>
<figure class="os-slideshow-container mt-5">
<div id="ap-environment-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#ap-environment-nav .prev", "nextArrow": "#ap-environment-nav .next", "appendDots": "#ap-environment-dots" }'>
<li>
<img src="<?php echo os_path('AP-slideshow-1.png', 'ap'); ?>" srcset="<?php echo os_path('AP-slideshow-1.png', 'ap'); ?> 1x, <?php echo os_path('AP-slideshow-1.png', 'ap'); ?> 2x" width="850" height="567">
<figcaption style="<?php echo "color: {$color};" ?>">AP identity applied to microphone</figcaption>
</li>
<li>
<img src="<?php echo os_path('AP-slideshow-2.png', 'ap'); ?>" srcset="<?php echo os_path('AP-slideshow-2.png', 'ap'); ?> 1x, <?php echo os_path('AP-slideshow-2-@2x.png', 'ap'); ?> 2x" width="850" height="567">
<figcaption style="<?php echo "color: {$color};" ?>">AP office interiors</figcaption>
</li>
<li>
<img src="<?php echo os_path('AP-slideshow-3.png', 'ap'); ?>" srcset="<?php echo os_path('AP-slideshow-3.png', 'ap'); ?> 1x, <?php echo os_path('AP-slideshow-3-@2x.png', 'ap'); ?> 2x" width="850" height="567">
<figcaption style="<?php echo "color: {$color};" ?>">Associated Press President and CEO Gary Pruitt</figcaption>
</li>
<li>
<img src="<?php echo os_path('AP-slideshow-4.jpg', 'ap'); ?>" srcset="<?php echo os_path('AP-slideshow-4.jpg', 'ap'); ?> 1x, <?php echo os_path('AP-slideshow-4-@2x.jpg', 'ap'); ?> 2x" width="850" height="567">
<figcaption style="<?php echo "color: {$color};" ?>">POTUS at AP luncheon</figcaption>
</li>
</ul>
<?php os_slide_nav("ap-environment-nav"); ?>
</figure>
<div class="outer-container mt-2">
<div class="inner-container">
<div class="responsive-media-16x9 mt-5">
<iframe src="https://player.vimeo.com/video/37635453?autoplay=1&loop=1&color=ffffff&title=0&byline=0&portrait=0" width="635" height="357" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="responsive-media-16x9 mt-5">
<iframe src="https://player.vimeo.com/video/37269528?color=ffffff&title=0&byline=0&portrait=0" width="635" height="357" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="outer-container">
<p class="h3 future-A h3 inner-container"><a href="http://ap.org/" class="cta-link cs-body-link" target="_blank">ap.org <span class="icon arnhem rotate-cc-45">→</span></a></p>
</div>
</section>