/
case-study-editorial.html
370 lines (330 loc) · 16.6 KB
/
case-study-editorial.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
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!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>
<!-- Top banner -->
<div class="case-text-header">
<h5 class="">Magazines & newspapers headquartered in New York City and Copenhagen</h5>
<div class="subhead">Ingeniøren, Modern Bride, Money, New York, Oprah, Penge & Privatøkonomi, Teen People, Vogue
Knitting, YM, YM Prom, and more
</div>
<div class="mag-new" style="background-image: url('images/mag-new.png');">
</div>
</div>
<div class="portfolio-banner">
<div class="case-text-box">
<div class="headlines-in-banner">
Business Case
</div>
<p class="p-margin-top-none">
Listed above is a sampling of some of the newspapers and magazines I have worked for.
Target groups may vary, but publications share a common goal of conveying information that is
specifically tailored to their audience’s interests.
</p>
<div class="headlines-in-banner">
The Challenge
</div>
<p class="p-margin-top-none">
In order for a publication to be profitable, it needs to be able to get users/readers to want to read, and
become involved with the content
for a period of time. It is best if they want to read more than one issue. It has to look like itself but different in every issue. Things
such as colors, fonts and layout styles
need to be in the same style in order to create unity.
It needs to be visually interesting for its target group. It also has a very firm deadline. Printers do not
wait.
</p>
<div style="height: 50px;"></div>
<!-- money -->
<div class="mag-money"
style="background-image: url('images/money-fpo.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Money Magazine– New York City, New York </span> <br>
Examples of making finance inviting. Stories of dotcom companies crashing, car safety,
all star investors, "spring cleaning" your investments, top company CEOs, and investing in a bear market.
</div>
<div style="height: 50px;"></div>
<!-- ingenioren -->
<div class="mag-ing" style="background-image: url('images/ing-fpo.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Ingeniøren newspaper– print and digital editions– Copenhagen, Denmark </span> <br>
Making engineering stories interesting to read. Cover stories with compelling images, information graphics used
to tell stories. Online graphics gave a measurable increase in online readers.
</div>
<div class="spacing-50px"></div>
<!-- ym -->
<div class="mag-ym" style="background-image: url('images/ym-fpo.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Modern Bride, YM, YM Prom and Vogue Knitting– New York City, New York </span> <br>
These magazines focused on fashion, beauty, entertainment, and knitting. In most of them, the photography was shot specifically
for the publication using models and including hair and makeup artists at the photoshoot. There were celebrities photos that were bought from photo agencies.
There was a lot of work that went into the typography adding more depth to the story.
</div>
<div style="height: 50px;"></div>
<!-- penge -->
<div class="mag-penge"
style="background-image: url('images/penge-test-2.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Art Director at Penge og Privatøkonomi Magazine– Copenhagen, Denmark </span> <br>
Penge is a Danish magazine about personal finance. I brought the user through the magazine from the cover to the
final investment pages. We often needed to use stock photography, and a lot of time went into finding unique images.
I completed a redesign when I arrived at the publication boosting its readership and circulation.
</div>
<!-- <div style="height: 40px;"></div> -->
<div class="headlines-in-banner">
Project Scope & Objectives
</div>
<p class="p-margin-top-none">Magazines have a lot in common even when they have very different readers. They all
need:</p>
<p class="bold">
<span class="red dingbat">
»
</span> Design and content that engages users.
</p>
<p class="bold">
<span class="red dingbat">
»
</span> Covers that make you want to open the magazine.
</p>
<p class="bold">
<span class="red dingbat">
»
</span> To create a desire for readers to pick up and purchase the magazine.
</p>
<p class="bold">
<span class="red dingbat">
»
</span> To be easy to navigate.
</p>
<p class="bold">
<span class="red dingbat">
»
</span> To keep a user engaged.
</p>
<p class="bold">
<span class="red dingbat">
»
</span> To be sent to the printer on time.
</p>
<p class="">
By achieving these objectives the reader should want to come back again when the next issue becomes available, thus
keeping advertisers involved in the publication.
</p>
<div style="height: 40px;"></div>
<!-- profile -->
<div class="mag-profil" style="background-image: url('images/ing-2.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Profil Magazine– published once a year by Ingeniøren– Copenhagen, Denmark </span> <br>
The magazine is created with a small staff and a quick turn around time. Design was made stringent with sharp colors and infographics.
Cover was shot for the issue. The Kloakkerne (sewer system) story with it's amazing image took use of these principles.
</div>
<div style="height: 70px;"></div>
</div>
</div>
<div class="two-col-grid-container">
<div class="sample-box">
<div class="headlines-in-banner">
The Solution
</div>
<p class="">
✓ Magazines and newspapers successfully published in New York City and Copenhagen.
</p>
<p>
✓ At Penge og Privatøkonomi, after a redesign circulation increased by 10.5%.
</p>
<p>
✓ At Ingeniøren, lead the process to get graphics taken out of Flash and instead into HTML5
for viewing on mobile devices.
</p>
<p>
✓ Money Magazine had a readership of over 1 million readers,
and a lot of advertising making it an extremely successful magazine.
</p>
<p>
✓ Money and YM had award winning design that was included in the yearly book
by the Society of Publication Designers.
</p>
<p>
✓ YM Had a readership of just under 1 million and included a lot of advertising.
Users gave it high ratings.
</p>
<div class="headlines-in-banner">
The Team
</div>
<p><span class="semi-bold"> Art Directors, Photo Editors, Editors and Writers</span> From New York, Singapore
and Copenhagen</p>
<p><span class="semi-bold"> Designer, Art Directer and Design Director </span>Marci Papineau Gottlieb</p>
<div class="headlines-in-banner" style="margin-top:30px;">Tech Used</div>
<p class="medium">
<span>»</span>
Adobe Creative Cloud <span>»</span>
Delta Graph <span>»</span>
Excel <span>»</span>
Illustrator <span>»</span>
InDesign <span>»</span>
Photoshop
</p>
</div>
<div class="sample-box-b">
<div class="headlines-in-banner">My Role</div>
<p class="medium">
<span class="bold">»</span> Review reader surveys on a weekly and monthly basis and use as a guide in content creation. <br>
<span class="bold">»</span> Create style sheets in InDesign to insure a cohesive look and facilitate in the creation of
new layouts. <br>
<span class="bold">»</span> Make sure that the publications are easy to navigate. <br>
<span class="bold">»</span> Have files ready to be sent to the printer on time. <br>
<span class="bold">»</span> Color correct photography. <br>
<span class="bold">»</span> Create digital illustrations. <br>
<span class="bold">»</span> Art Direct illustrators and photographers. <br>
<span class="bold">»</span> Choose typography. <br>
<span class="bold">»</span> Choose color palletes. <br>
<span class="bold">»</span> Collaborate with all departments including, writers, editors, designers,
art directors, publishers, illustrators and photographers. <br>
<span class="bold">»</span> Create an issue from the cover to the last page. The contents page is the start of the
journey.
There are sections that are in every issue that need to be in the same place each time. <br>
<span class="bold">»</span> Design and create data visualizations. <br>
</p>
<div class="headlines-in-banner">Skills Utilized</div>
<p class="medium">
<span>»</span> Art Direction <br>
<span>»</span> Design <br>
<span>»</span> Digital Design <br>
<span>»</span> Illustration <br>
<span>»</span> Information Graphic Design <br>
<span>»</span> Photo Editing <br>
<span>»</span> Photo retouching <br>
</p>
</div>
</div>
<!-- above closing div to 2 col container for 2 colored boxes -->
<div class="portfolio-banner">
<div class="case-text-box">
<!-- <div style="height: 70px;"></div> -->
<!-- Process -->
<div class="headlines-in-banner">The Process of creating a magazine or newspaper</div>
<p> <span class="bold">Step 1</span> Meet with editors and writers, learn about the stories coming up, and start
the process of what visual will be used. Things considered: Photography (stock photo, or a hired photographer)?
Illustration (self-made or needs to hire an illustrator)? Type-only design? <br>
In financial stories, are the numbers ready to be made into a graphic? Is there more data that needs to be acquired to
help tell the story?
</p>
<p> <span class="bold">Step 2</span> After initial meetings, start looking for what to use to visualize the story.
</p>
<p> <span class="bold">Step 3</span> Commission art for photographers, illustrators.
</p>
<p> <span class="bold">Step 4</span> Start to layout the story (in InDesign).
</p>
<p> <span class="bold">Step 5</span> Show layout to managing editor.
<p> <span class="bold">Step 6</span> Make changes as needed.
<p> <span class="bold">Step 7</span> Sign off on the design.
</p>
<p> <span class="bold">Step 8</span> Send to editors to edit the story to fit.
</p>
<p> <span class="bold">Step 9</span> Make color tests of the photographs.
</p>
<p> <span class="bold">Step 10</span> Cover design. Decide on image. Get headlines. Place them in the file.
See if they fit in a visually pleasing way. Make edits. This is an iterative process.
</p>
<p> <span class="bold">Step 11</span> Send to the printer.
</p>
<p>
In addition to the above process style sheets and templates are created in InDesign to keep a cohesive look,
and make it easier to make layouts.
</p>
<div class="headlines-in-banner">Rationale for Design Solutions</div>
<p>Designs are based on the users. Colors and typography vary greatly in accordance with specific target audiences.
A sampling of users I have designed for are: teens, family financial planning, investors, knitters, brides, and engineers.
</p>
</div>
</div>
<div style="height: 70px;"></div>
<!-- below end of case text box -->
</div>
<!-- below div closing to portfolio-banner -->
</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://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>
<!-- <li> <a href="#navbar"> <i class="nav fas fa-angle-double-up" style="font-size: 30px; color: #f0ffff;"> </i> </a> </li> -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </script> empty closing tag? -->
</body>
</html>