-
Notifications
You must be signed in to change notification settings - Fork 0
/
case-study-borsen.html
284 lines (260 loc) · 13.9 KB
/
case-study-borsen.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>marci papineau | design & code </title>
<meta name="description"
content="Marcipapineau.com – Design, Product Development and Code for the digital world." />
<!-- general og:tags -->
<meta property="og:title" content="Marci Papineau – Making Digital Products" />
<meta property="og:url" content="https://www.marcipapineau.com/">
<meta property="og:image" content="http://marcipapineau.com/images/marcipapineaudocom.jpg" />
<meta property="og:description"
content="The place to go in Copenhagen for quick websites, and startup prototypes. Always mobile friendly webdesign." />
<meta property="og:site_name" content="www.marcipapineau.com" />
<!-- twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@marcipapineau" />
<meta name="twitter:title" content="marci papineau | design & code" />
<meta name="description" content="Marcipapineau.com Design, Product Development and Code for the digital world." />
<meta name="twitter:creator" content="@MarciPapineau" />
<meta name="twitter:image:src" content="https://marcipapineau.com/images/marcipapineaudocom.jpg">
<meta name="format-detection" content="telephone=no">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" sizes="16x16" type="image/png" href="images/favicon.png">
</head>
<body>
<a name="navbar"></a>
<div class="navbar-wrapper">
<div class="navbar-logo-container">
<a href="index.html"><img src="images/logo.png" id="logo" alt=""></a>
</div>
<div class="links-container flex-end">
<ul>
<a href="index.html" class="nav">
<li>home</li>
</a>
<a href="#contact" class="nav">
<li>contact</li>
</a>
</ul>
</div>
</div>
<!-- below spacer above image -->
<div style="height: 60px;"> </div>
<div class="case-text-header">
<h5 class="">Børsen</h5>
<div class="subhead">Business and finance newspaper headquartered in Copenhagen, Denmark</div>
</div>
<!-- Below top image -->
<div class="banner-case-borsen" style=" background-image: url('images/borsen-2.jpg');">
</div>
<div class="portfolio-banner">
<div class="case-text-box">
<div class="headlines-in-banner">
Business Case
</div>
<p class="p-margin-top-none">
Børsen is read by industry leaders, and used to make
actionable decisions. Their need was to improve the usability of their information graphics by making them easier to understand in a shorter period of time.
</p>
<div class="headlines-in-banner" style="margin-top: 35px;">
The Challenge
</div>
<p class="p-margin-top-none">
Børsen’s readers are busy. They don’t have a lot of time to read the paper, yet it is an important part of their day. Information needs to be understood quickly.
The paper uses information graphics to add supporting or extra information. They can sometimes tell the story of one thousand words in five to ten seconds.
</p>
<p>
The graphics at the time were difficult to understand. They were sometimes represented in units that didn't match,
units of measure were hard to find and, information was not always represented in the correct graphic form. At worst, the story was confused by the graphic.
</p>
<div class="spacing-35px"></div>
<div class="borsen-bubble" style="background-image: url('images/borsen-bubble.jpg');">
</div>
<div class="spacing-20px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Bubble Graphic </span> <br>
The bubble graphic is a great form to use because it can show more levels of data than possible with a table, bar chart or fever graphic.
</div>
<div class="spacing-50px"></div>
<div class="borsen-lollipop" style="background-image: url('images/lollipop.jpg');">
</div>
<div class="spacing-20px"></div>
<div class="caption"">
<span class=" bold" style="text-transform: uppercase;">Lollipop Chart</span> <br>
The lollipop chart uses the circle size to represent the amount of kroner that can be earned within each country– the larger circle, the more money could be made.
The x axis shows how many jobs can come from this growth.
</div>
<div class="headlines-in-banner">
Project Scope & Objectives
</div>
<p class="p-margin-top-none">A review of the process in place was needed. There would need to be new guidelines and workflow
changes to improve upon the readability and usability of the graphics.
</p>
<p>
The ultimate goal was to find a way to make sure the graphic was written and designed with information that made sense,
and followed a set of rules for creating the graphic in a consistent design style.
</p>
</div>
</div>
<div class="spacing-50px"></div>
<div class="two-col-grid-container">
<div class="sample-box">
<div class="headlines-in-banner">
The Solution
</div>
<p>
After evaluations and meetings with top management in both editorial and design departments, created
guidelines and processes to aid in the creation of a graphic–
from the starting stage of a writer requesting a graphic to it being proofread before publication.
</p>
<p> ✓ Improved communication and working processes between art and editorial departments. </p>
<p> ✓ Reworked paper’s information graphics and created a style guide.</p>
<p> ✓ Laid out new rules and guidelines on how to: </p>
<div style="margin-left: 30px;">
<p> <span class="bold">1.</span> Create a good information graphic.</p>
<p> <span class="bold">2.</span> Choose the correct graphic form to communicate the core message.</p>
<p> <span class="bold">3.</span> Present graphics that are quick and easy to understand.</p>
</div>
<p> ✓ Use typography and line styles and weights to communicate multiple levels of information.</p>
<div class="headlines-in-banner">
The Contributors
</div>
<p><span class="semi-bold">Managing Editor </span> Jørgen Andresen </p>
<p><span class="semi-bold">Art Director </span> Marianne Bahl</p>
<p><span class="semi-bold">Design & Concept Development </span>Marci Papineau Gottlieb</p>
</div>
<div class="sample-box-b">
<div class="headlines-in-banner">
My Role
</div>
<p>
I spent the first days watching the work of the graphics department and how they interacted with the other departments within paper.
I reviewed the contents of the graphics, and made notes on where improvements were needed.
Meetings were then held with the senior levels of the art and editorial departments to discuss my findings.
I then worked on creating new design guidelines– both visually and editorially.
There were meetings back and forth to discuss progress.
</p>
<p>
The project was completed by my delivery of a detailed style guide and Illustrator files that could be used as a skeleton for creating graphics.
</p>
<div class="headlines-in-banner">Skills Utilized</div>
<p class="medium">
<span>»</span> Information Graphic Design <br>
<span>»</span> Graphic Design <br>
<span>»</span> Mediator improving communication and understanding between departments <br>
</p>
<div class="headlines-in-banner" style="margin-top:30px;">Tech Used</div>
<p class="medium">
<span>»</span> Adobe Creative Cloud <span>»</span>
Deltagraph <span>»</span>
Excel <span>»</span>
Illustrator
</p>
</div>
</div>
<div class="portfolio-banner">
<div class="case-text-box">
<div class="headlines-in-banner">
Processes
</div>
<p>The final product was delivered with a PDF and Illustrator files to assist in creating future graphics. It included guidelines for designers, writers and editors.</p>
<div>
<!-- <div class="spacing-20px"></div> -->
<!-- sample spread from guide -->
<div class="borsen-goodInfo" style="background-image: url('images/borsen-spread-2.jpg');">
</div>
<div class="spacing-20px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Anatomy of a Graphic </span> <br>
The guide was started with guidelines to follow at the start of creating a graphic. It also contained a list of what needed to be
included in every graphic (A-E).
For example it is very important that the graphic had a headline and sub-head. It is also important to write the
unit of measure in a consistent place for all graphics
There were also visuals for how to design numbers, charts, and chart lines. In addition to the PDF style guide, there was an Illustrator file
to use to help start a graphic.
</div>
<div class="spacing-50px"></div>
</div>
<!-- sample spread from guide -->
<div class="borsen-goodInfo-2" style="background-image: url('images/borsen-spread.jpg');">
</div>
<div class="spacing-20px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Typography, spacing and line weights </span> <br>
A graphic uses many tools to convey the story. These tools are not necessarily noticed by the reader,
but they help guide them. Things such as line weights and styles, colors,
spacing and font weights all help in making a graphic that is easily understood.
</div>
<div class="spacing-50px"></div>
<!-- <div class="headlines-in-banner">
Process of change
</div>
<p>It's not enough to make a pretty graphic. The graphic must tell the story too. </p> -->
<section>
<div class="borsen-renault" style="background-image: url('images/borsen-renault.png');">
</div>
<div class="spacing-20px"></div>
<div class="caption" style="text-align: left;">
<span class="bold" style="text-transform: uppercase;">A new way to tell a story</span> <br>
The older graphic (above left) was eye-catching but it didn't help explain the main point of the story. It showed there had been some ups and downs–
ending high,
but the fact that the end of the graphic is only a projection is not apparent. <br>
<br> The new style (above right) is quick and easy to understand.
The key on the bottom shows the quantity of one circle represents 1000 Euro of profit in 2012. By 2017
"financiell mål" (financal goal) (where there are 50 circles) it is easy to understand the
amount of growth expected.
</div>
</section>
<div class="spacing-50px"></div>
<section>
<div class="borsen-deltaG" style="background-image: url('images/borsen-datagraph.jpg');">
</div>
<div class="spacing-20px"></div>
<div class="caption" style="text-align: left;">
<span class="bold" style="text-transform: uppercase;">Above preliminary bubble chart work </span> <br>
Drawing upon information from an Excel table visualized information in a new way using the software, Deltagraph.
There were multiple levels of data to be visualized. (final chart higher up on page "BUBBLE GRAPHIC").
</div>
</section>
<div class="spacing-50px"></div>
<div>
</div>
<!-- below end of case text box -->
</div>
<!-- below div closing to portfolio-banner -->
</div>
</div>
<a name="contact"></a>
<div class="footer">
<div class="footer-wrapper">
<div>
<a href="index.html"> <img src="images/logo.png" id="logo" alt="" style="margin-left: -8px; margin-top:10px;"> </a>
<div class="samplename infoleft">
<p class="medium">Marci Papineau Gottlieb <br>
+45 2447 3457 <br>
<a style="color: #fc4827;" href="mailto:marcidenmark@me.com "> marcidenmark@me.com</a></p>
</div>
</div>
<div class="footer-social">
<ul style="padding-left:0px;">
<li><a href="https://dribbble.com/marci_papineau" target="_blank "><i class="nav fab fa-dribbble fa-1x" style="color:#fc4827;"> </i></a></li>
<li><a href="https://www.github.com/marcidenmark" target="_blank "><i class="nav fab fa-github fa-1x" style="color:#fc4827;"> </i></a></li>
<li> <a href="https://www.linkedin.com/in/marcidenmark/" target="_blank"><i class="fab fa-linkedin fa-1x" style="color:#fc4827;"> </i></a></li>
<li> <a href="https://twitter.com/marcipapineau" target="_blank"><i class="fab fa-twitter fa-1x" style="color:#fc4827;"> </i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </script> empty closing tag? -->
</body>
</html>