-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·657 lines (639 loc) · 64.4 KB
/
index.html
File metadata and controls
executable file
·657 lines (639 loc) · 64.4 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
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
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
<!DOCTYPE html>
<!--
_____ _ _ _
/ ___| (_) | | | |
\ `--. ___ _ __ _ __ _ | | __ _| |__ ___ ___ _ __ ___
`--. \/ _ \| '_ \| |/ _` | | | / _` | '_ \ / __/ _ \ '_ \ / _ \
/\__/ / (_) | | | | | (_| | | |___| (_| | | | | (_| __/ | | | __/
\____/ \___/|_| |_|_|\__,_| \_____/\__,_|_| |_|\___\___|_| |_|\___|
-->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" prefix="og: http://ogp.me/ns#"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" prefix="og: http://ogp.me/ns#"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sonia Lahcene - Graphic Designer in London</title>
<meta name="description" content="Freelance Graphic Designer based in London, available for print and digital work">
<meta name="keywords" content="Illustrator, Designer, Graphic Design, Illustrator London, Graphic Designer, Visual Designer, Designer London, Sonia Lahcene, Integrated Designer">
<meta property="og:type" content="website" />
<meta property="og:title" content="Sonia Lahcene - Graphic Designer in London" />
<meta property="og:url" content="https://sonialahcene.com/" />
<meta property="og:image" content="https://sonialahcene.com/assets/doodle17.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="827" />
<meta property="og:image:height" content="755" />
<meta property="og:description" content="Integrated Graphic Designer based in London" />
<meta property="og:locale" content="en_GB" />
<meta name="google-site-verification" content="f72VXv6zW42nDYtx7VGSsB1rqikMreJm-oaY8cvPALo" />
<!-- All the favicons, Mooooaaaaarrr -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="assets/favicons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/favicons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/favicons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/favicons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="assets/favicons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="assets/favicons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="assets/favicons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="assets/favicons/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="assets/favicons/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="assets/favicons/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="assets/favicons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="assets/favicons/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="assets/favicons/favicon-128.png" sizes="128x128" />
<meta name="Sonia L. Illustration" content="Sonia Lahcene"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="assets/favicons/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="assets/favicons/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="assets/favicons/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="assets/favicons/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="assets/favicons/mstile-310x310.png" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.5.0/base-min.css&pure/0.5.0/grids-min.css&pure/0.5.0/grids-responsive-old-ie-min.css&pure/0.5.0/menus-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/pure.css">
<!--<![endif]-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<link rel="stylesheet" href="css/vectorfont.css">
<link href='//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700,300,400|Reenie+Beanie|Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.min.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<header class="header-fixed">
<nav class="pure-menu pure-menu-open pure-menu-horizontal nav-shadow">
<a href="https://sonialahcene.com" class="pure-menu-heading"><span id="moving-colibri" class="moving-colibri icon-colibri"></span></a>
<a href="https://sonialahcene.com" class="pure-menu-heading sonial">Sonia Lahcene Graphic Design</a>
<ul id="menu-items">
<li id="menu-item-portfolio"><a href="/#portfolio" title"Portfolio">Portfolio</a></li>
<li id="menu-item-about"><a href="/#about" title="About me">About</a></li>
<li id="menu-item-contact"><a href="/#contact" title="Contact me">Contact</a></li>
<li id="menu-item-cv"><a href="/cv" title="My CV">CV</a></li>
<li id="menu-item-store"><a href="https://society6.com/sonialahcene" target="blank" title="My store" class="item-store">Store</a><div class="new-feature">new</div></li>
</ul>
<div class="contact-icons">
<a href="mailto:contact@sonialahcene.com" target="blank" title="Email Sonia Lahcene" class="icon-email"></a>
<a href="http://uk.linkedin.com/in/sonialahcene" target="blank" title="LinkedIn Sonia Lahcene" class="icon-linkdn"></a>
<a href="https://www.behance.net/sonialahcene" class="icon-behance" target="blank" title="Behance Sonia Lahcene" ></a>
</div>
</nav>
<div id="sticky-header" class="filter-options sticky-header">
<h3 class="category-title active all-categories" data-group="all">All</h3>
<h3 class="category-title" data-group="UI">UI/digital</h3>
<h3 class="category-title" data-group="brand">Brand identity</h3>
<h3 class="category-title" data-group="illustration">Illustrations</h3>
<h3 class="category-title" data-group="comm">Communications & events</h3>
</div>
</header>
<section id="doodle" class="doodle">
<div id="doodle-image" class="doodle-image"></div>
<div class="doodle-clouds">
<div id="cloud-left" class="cloud cloud-left"></div>
<div id="cloud-right" class="cloud cloud-right"></div>
</div>
</section>
<div id="home">
<main>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an outdated browser. Please <a href="http://browsehappy.com/" class="browsehappy-link" target="blank">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Anchor for the menu-->
<span id="portfolio"></span>
<div class="filter-options filter-mobile">
<h3 class="category-title active all-categories" data-group="all">All</h3>
<h3 class="category-title" data-group="brand">Brand identity</h3>
<h3 class="category-title" data-group="UI">UI/digital</h3>
<h3 class="category-title" data-group="illustration">Illustrations</h3>
<h3 class="category-title" data-group="comm">Communications & events</h3>
</div>
<section id="image-grid" class="image-grid pure-g">
<!-- Mediablaze -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration","brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/mediablaze.jpg" title="<span class='icon-info'></span>Office mural for London-based agency Mediablaze. See more pictures <a href='https://www.behance.net/gallery/43396231/Mural-Doodle-Skyline-of-London' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_mediablaze.jpg" data-src-retina="img/thumbnails/th_mediablaze@2x.jpg" alt="Infographics for mediablaze " title="mediablaze office mural" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Office mural</figcaption>
</a>
</figure>
<!-- Arup -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/arup.jpg" title="<span class='icon-info'></span>Infographics for Arup on the benefits of more walkable cities.">
<img src="assets/loader.gif" data-src="img/thumbnails/th_arup.jpg" data-src-retina="img/thumbnails/th_arup@2x.jpg" alt="Infographics for arup" title="Infographics for Arup" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Infographics for Arup</figcaption>
</a>
</figure>
<!-- GE -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/ge.jpg" title="<span class='icon-info'></span>Infographics for General Electric published on <a href='https://www.facebook.com/GeneralElectricPower/posts/540506059472341:0' target='blank'>Facebook</a> and <a href='https://www.linkedin.com/company/gepowerandwater/comments?topic=6158998657350852610&type=U&scope=1021&stype=C&a=q3jH&showModal=true' target='blank'>Linkedin</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_ge.jpg" data-src-retina="img/thumbnails/th_ge@2x.jpg" alt="Infographics for GE" title="Infographics for GE" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Infographics for GE</figcaption>
</a>
</figure>
<!-- Linkedin APAC -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/linkedin.jpg" title="<span class='icon-info'></span>Infographics for Linkedin to celebrate 100 million users in APAC. See full infographics <a href='https://www.behance.net/gallery/43542623/Linkedin-Infographics' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_linkedin.jpg" data-src-retina="img/thumbnails/th_linkedin@2x.jpg" alt="Infographics for Linkedin" title="Infographics for Linkedin" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Infographics for Linkedin</figcaption>
</a>
</figure>
<!-- BluRay -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/bluray.jpg" title="<span class='icon-info'></span>Full-width video desktop website mock-up for Blu-ray. See more screens <a href='https://www.behance.net/gallery/43429063/Full-Width-Video-Website-Mockup' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_bluray.jpg" data-src-retina="img/thumbnails/th_bluray@2x.jpg" alt="Full Width Video Website Mockup" title="Full Width Video Website Mockup" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Full Width Video Website Mockup</figcaption>
</a>
</figure>
<!-- SST -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/sst.jpg" title="<span class='icon-info'></span>UI concept for an Android Quizz app that helps you learn the essential of health and safety at work. See more screens <a href='https://www.behance.net/gallery/39687355/UI-Android-Quiz-App-Material-Design' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_sst.jpg" data-src-retina="img/thumbnails/th_sst@2x.jpg" alt="Android Quiz App - Material Design" title="Android Quiz App - Material Design" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Android Quiz App</figcaption>
</a>
</figure>
<!-- VMWare -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI","comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/vmware.jpg" title="<span class='icon-info'></span>Mailer for VMWare's VIP contacts. See more screens <a href='https://www.behance.net/gallery/43832715/Mailer-for-VMWare' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_vmware.jpg" data-src-retina="img/thumbnails/th_vmware@2x.jpg" alt="Mailer for VMWare" title="Mailer for VMWare" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Mailer for VMWare</figcaption>
</a>
</figure>
<!-- Timberland -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/timberland.jpg" title="<span class='icon-info'></span>Timberland infographics to celebrate Earth Day 2016. Check it out on Timberland's <a href='https://www.instagram.com/p/BEgPWRsnPr4/' target='blank'>Instagram</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_timberland.jpg" data-src-retina="img/thumbnails/th_timberland@2x.jpg" alt="Infographics for Timberland " title="Timberland infographics to celebrate Earth Day 2016" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Infographics for Timberland </figcaption>
</a>
</figure>
<!-- Ladbrokes ISC -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI","brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/ladbrokes.jpg" title="<span class='icon-info'></span>Design and development of a Google Site for Ladbrokes. <a href='https://www.behance.net/gallery/35140427/Cyber-Security-Intranet-for-Ladbrokes' target='blank'>More</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_ladbrokes.jpg" data-src-retina="img/thumbnails/th_ladbrokes@2x.jpg" alt="Security Awareness Intranet" title="Design and development of a Google Site for Ladbrokes" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Web Design - Google Site</figcaption>
</a>
</figure>
<!-- Ladbrokes ISC -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["brand","comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/ladbrokes_brand.jpg" title="<span class='icon-info'></span>Design and development of a Google Site for Ladbrokes. <a href='https://www.behance.net/gallery/35140427/Cyber-Security-Intranet-for-Ladbrokes' target='blank'>More</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_ladbrokes_brand.jpg" data-src-retina="img/thumbnails/th_ladbrokes_brand@2x.jpg" alt="Security Awareness Intranet Promotion" title="Design and development of a Google Site for Ladbrokes" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Intranet Branding and Promotion</figcaption>
</a>
</figure>
<!-- Ladbrokes AE -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI","brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/ladbrokes2.jpg" title="<span class='icon-info'></span>Team Intranet for Ladbrokes. <a href='https://www.behance.net/gallery/35202851/Team-Intranet-for-Ladbrokes' target='blank'>More</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_ladbrokes2.jpg" data-src-retina="img/thumbnails/th_ladbrokes2@2x.jpg" alt="Security Awareness Intranet" title="Team Intranet for Ladbrokes" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Web Design - Google Site</figcaption>
</a>
</figure>
<!-- Theresa May -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/theresa.gif" title="<span class='icon-info'></span>Cartoon of UK Prime Minister Theresa May to illustrate potential financial outcomes of Brexit.">
<img src="assets/loader.gif" data-src="img/thumbnails/th_theresa.jpg" data-src-retina="img/thumbnails/th_theresa@2x.jpg" alt="Theresa May Cartoon Illustration" title="Theresa May Cartoon Illustration" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Theresa May Cartoon Illustration</figcaption>
</a>
</figure>
<!-- Hootsuite -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/hootsuite.jpg" title="<span class='icon-info'></span>Infographic on Instagram for Hootsuite. See it <a href='https://blog.hootsuite.com/fr/instagram-le-roi-de-lengagement-digital-infographie/'> here</a> ">
<img src="assets/loader.gif" data-src="img/thumbnails/th_hootsuite.jpg" data-src-retina="img/thumbnails/th_hootsuite@2x.jpg" data-src-retina="img/thumbnails/hootsuite.jpg" alt="Hootsuite Infographic" title="Infographic on Instagram for Hootsuite" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Infographics for Hootsuite</figcaption>
</a>
</figure>
<!-- Wickes -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/wickes.jpg" title="<span class='icon-info'></span>Infographics - DIY Instruction Illustrations for Wickes. See full infographics <a href='https://www.behance.net/gallery/43427605/Infographics-DIY-Instruction-Illustrations' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_wickes.jpg" data-src-retina="img/thumbnails/th_wickes@2x.jpg" alt="Infographics for Wickes" title="Infographics for Wickes" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Infographics for Wickes</figcaption>
</a>
</figure>
<!-- DAE -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/app_defib.jpg" title="<span class='icon-info'></span>UI of an Android application. Based on Google Material Design guidelines. <a href='https://play.google.com/store/apps/details?id=com.fablap.defib&hl=fr' target='blank'>Download DAE68 on Google Play</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_app_defib.jpg" data-src-retina="img/thumbnails/th_app_defib@2x.jpg" data-src-retina="img/thumbnails/th_app_defib@2x.jpg" alt="Ninja Orange Labs" title="UI of an Android application. Based on Google Material Design guidelines. <a href='https://play.google.com/store/apps/details?id=com.fablap.defib&hl=fr' target='blank'>Download DAE68 on Google Play</a>" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">UI of an Android application</figcaption>
</a>
</figure>
<!-- Brox -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/brox.jpg" title="<span class='icon-info'></span>Custom labels and branding for homemade ale. Check out the <a href='https://www.behance.net/gallery/34959991/Craft-Beer-Labels'>video</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_brox.jpg" data-src-retina="img/thumbnails/th_brox@2x.jpg" alt="Craft Beer Label" title="Custom labels and branding for homemade ale." class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Craft Beer Labels</figcaption>
</a>
</figure>
<!-- Hugo -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/hugo.jpg" title="<span class='icon-info'></span>Birth Announcement Card">
<img src="assets/loader.gif" data-src="img/thumbnails/th_hugo.jpg" data-src-retina="img/thumbnails/th_hugo@2x.jpg" alt="Birth Announcement Card" title="Birth Announcement Card" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Birth Announcement Card</figcaption>
</a>
</figure>
<!-- B2L -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/b2l.jpg" title="<span class='icon-info'></span>Mockup of pages for the new website of the London-based agency Brands2Life. See more screens <a href='https://www.behance.net/gallery/43508361/Website-pages-mockups' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_b2l.jpg" data-src-retina="img/thumbnails/th_b2l@2x.jpg" alt="Agency Website Pages Mockups" title="Agency Website Pages Mockups" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Agency Website Pages Mockups</figcaption>
</a>
</figure>
<!-- Nominet -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/nominet.jpg" title="<span class='icon-info'></span>Nominet infographics to celebrate their 20 years of activity. See more <a href='https://www.behance.net/gallery/43543843/Nominet-infographics' target='blank'>here</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_nominet.jpg" data-src-retina="img/thumbnails/th_nominet@2x.jpg" alt="Nominet infographics" title="Nominet infographics" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Nominet infographics</figcaption>
</a>
</figure>
<!-- Labs website -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI","brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/icons.jpg" title="<span class='icon-info'></span>Design of a set of icons used on <a href='http://labs.orange.com/uk' target='blank'>Orange Labs website</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_icons.jpg" data-src-retina="img/thumbnails/th_icons@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Sets of icons for a website</figcaption>
</a>
</figure>
<!-- leRobert -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI","brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/robert.jpg" title="<span class='icon-info'></span>Set of icons used on <a href='lerobert.com/dictionnaires-numeriques.html' target='blank'>Le Robert</a> e-store (French publisher of dictionaries)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_robert.jpg" data-src-retina="img/thumbnails/th_robert@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Sets of icons for a website</figcaption>
</a>
</figure>
<!-- ninja -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["brand","comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/ninja.jpg" title="<span class='icon-info'></span>Design of a company mascot used on various communication supports">
<img src="assets/loader.gif" data-src="img/thumbnails/th_ninja.jpg" data-src-retina="img/thumbnails/th_ninja@2x.jpg" alt="Ninja Orange Labs" title="Design of a company mascot used on various communication supports" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Design of a company mascot</figcaption>
</a>
</figure>
<!-- Dungeon Hero -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/launcher.jpg" title="<span class='icon-info'></span>Launcher of an Android game, <a href='https://play.google.com/store/apps/details?id=com.glevel.dungeonhero' target='blank'>Dungeon Hero</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_launcher.jpg" data-src-retina="img/thumbnails/th_launcher@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Game application launcher</figcaption>
</a>
</figure>
<!-- Upcommunication infographic-->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/infographics1.jpg" title="<span class='icon-info'></span>Infographic to illustrate the results of a survey">
<img src="assets/loader.gif" data-src="img/thumbnails/th_infographics1.jpg" data-src-retina="img/thumbnails/th_infographics1@2x.jpg" alt="icons asset website" title="Infographic to illustrate the results of a survey" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Data visualisation</figcaption>
</a>
</figure>
<!-- Upcommunication Data visualisation -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/infographics2.jpg" title="<span class='icon-info'></span>Infographics to illustrate the results of a surve">
<img src="assets/loader.gif" data-src="img/thumbnails/th_infographics2.jpg" data-src-retina="img/thumbnails/th_infographics2@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Data visualisation</figcaption>
</a>
</figure>
<!-- Upcommunication brochure -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/report.jpg" title="<span class='icon-info'></span>Proposal for a company's survey report">
<img src="assets/loader.gif" data-src="img/thumbnails/th_report.jpg" data-src-retina="img/thumbnails/th_report@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Report brochure</figcaption>
</a>
</figure>
<!-- Heisenbear -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/hb.jpg" title="<span class='icon-info'></span>Illustrations for a t-shirt">
<img src="assets/loader.gif" data-src="img/thumbnails/th_hb.jpg" data-src-retina="img/thumbnails/th_hb@2x.jpg" alt="HeisenBear" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustrations for a t-shirt</figcaption>
</a>
</figure>
<!-- Greta-Sonia -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/greta_and_sonia.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (1/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_greta_and_sonia.jpg" data-src-retina="img/thumbnails/th_greta_and_sonia@2x.jpg" alt="Greta and Sonia" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (1/13)</figcaption>
</a>
</figure>
<!-- Julie-Ricardo -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/julie_and_ricardo.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (2/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_julie_and_ricardo.jpg" data-src-retina="img/thumbnails/th_julie_and_ricardo@2x.jpg" alt="Julie and Ricardo" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (2/13)</figcaption>
</a>
</figure>
<!-- Charlotte-Sonia -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/charlotte_at_biarritz.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (3/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_charlotte_at_biarritz.jpg" data-src-retina="img/thumbnails/th_charlotte_at_biarritz@2x.jpg" alt="Charlotte and Sonia in Biarritz" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (3/13)</figcaption>
</a>
</figure>
<!-- Cat Power -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/cat_power.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (4/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_cat_power.jpg" data-src-retina="img/thumbnails/th_cat_power@2x.jpg" alt="Cat Power" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (4/13)</figcaption>
</a>
</figure>
<!-- Greta -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/greta.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (5/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_greta.jpg" data-src-retina="img/thumbnails/th_greta@2x.jpg" alt="Greta" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (5/13)</figcaption>
</a>
</figure>
<!-- Josh -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/josh.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (6/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_josh.jpg" data-src-retina="img/thumbnails/th_josh@2x.jpg" alt="Josh" title="" class="thumbnail pure-img" data-no-retina /><figcaption class="thumbnail-caption">Illustration series (6/13)</figcaption>
</a>
</figure>
<!-- Stacey-Scotty -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/stacey_scotty.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (7/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_stacey_scotty.jpg" data-src-retina="img/thumbnails/th_stacey_scotty@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (7/13)</figcaption>
</a>
</figure>
<!-- Burlington -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/burlington_beach.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (8/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_burlington_beach.jpg" data-src-retina="img/thumbnails/th_burlington_beach@2x.jpg" alt="Burlington Beach" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (8/13)</figcaption>
</a>
</figure>
<!-- couple on couch1 -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/couple_on_couch.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (9/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_couple_on_couch.jpg" data-src-retina="img/thumbnails/th_couple_on_couch@2x.jpg" alt="Couple on a couch" title=""class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (9/13)</figcaption>
</a>
</figure>
<!-- couple on couch 2 -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/couple_on_couch_2.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (10/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_couple_on_couch_2.jpg" data-src-retina="img/thumbnails/th_couple_on_couch_2@2x.jpg" alt="Couple on a couch bis" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (10/13)</figcaption>
</a>
</figure>
<!-- girl in London -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/girl_in_london.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (11/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_girl_in_london.jpg" data-src-retina="img/thumbnails/th_girl_in_london@2x.jpg" alt="girl in London" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (11/13)</figcaption>
</a>
</figure>
<!-- Tueuse -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/tueuse.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (12/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_tueuse.jpg" data-src-retina="img/thumbnails/th_tueuse@2x.jpg" alt="killeuse/tueuse" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (12/13)</figcaption>
</a>
</figure>
<!-- Colibri -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/colibri.jpg" title="<span class='icon-info'></span>Illustration series - Mix of personal work and private orders (13/13)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_colibri.jpg" data-src-retina="img/thumbnails/th_colibri@2x.jpg" alt="Colibri" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration series (13/13)</figcaption>
</a>
</figure>
<!-- RRE -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/rre.jpg" title="<span class='icon-info'></span>Set of cards used as communication materials for an event">
<img src="assets/loader.gif" data-src="img/thumbnails/th_rre.jpg" data-src-retina="img/thumbnails/th_rre@2x.jpg" alt="Ninja Orange Labs" title="Set of cards used as communication materials for an event" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Communication materials</figcaption>
</a>
</figure>
<!-- My website -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI", "brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/site.jpg" title="<span class='icon-info'></span>Conception and design of my own website - Wireframes, HTML, CSS, design of assets and content management">
<img src="assets/loader.gif" data-src="img/thumbnails/th_site.jpg" data-src-retina="img/thumbnails/th_site@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">My website</figcaption>
</a>
</figure>
<!-- CV template -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/cv.jpg" title="<span class='icon-info'></span>CV design project - 2 examples including my own CV (CSS version <a href='/cv' target='blank'>here</a>)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_cv.jpg" data-src-retina="img/thumbnails/th_cv@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">CV templates</figcaption>
</a>
</figure>
<!-- Pulp -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["UI","brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/pulp.jpg" title="<span class='icon-info'></span>Design and development of Orange Labs intranet. Wordpress based. HTML, CSS, design of assets and content management">
<img src="assets/loader.gif" data-src="img/thumbnails/th_pulp.jpg" data-src-retina="img/thumbnails/th_pulp@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Web design</figcaption>
</a>
</figure>
<!-- Wedding Bruno Marion -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration","comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/invitation.jpg" title="<span class='icon-info'></span>Bespoke wedding invitation. See <a href='http://bit.ly/MarBruWedd' target='blank'>more</a>">
<img src="assets/loader.gif" data-src="img/thumbnails/th_invitation.jpg" data-src-retina="img/thumbnails/th_invitation@2x.jpg" alt="Wedding invitation" title="Wedding invitation" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Bespoke wedding invitation</figcaption>
</a>
</figure>
<!-- Wedding Sandrine Aurélien -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration","comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/wedding_illustration.jpg" title="<span class='icon-info'></span>Wedding Invitation Illustration">
<img src="assets/loader.gif" data-src="img/thumbnails/th_wedding_illustration.jpg" data-src-retina="img/thumbnails/th_wedding_illustration@2x.jpg" alt="Wedding wedding_illustration" title="Wedding illustration" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Wedding Invitation Illustration</figcaption>
</a>
</figure>
<!-- Skyline -->
<!-- <figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/skyline.jpg" title="<span class='icon-info'></span>Asset for Orange International Centres. Skyline representing the international innovation labs part of the network">
<img src="assets/loader.gif" data-src="img/thumbnails/th_skyline.jpg" data-src-retina="img/thumbnails/th_skyline@2x.jpg" alt="icons asset website" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Skyline asset</figcaption>
</a>
</figure> -->
<!-- pwak -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/pwak.jpg" title="<span class='icon-info'></span>Character design research for a game application">
<img src="assets/loader.gif" data-src="img/thumbnails/th_pwak.jpg" data-src-retina="img/thumbnails/th_pwak@2x.jpg" alt="mignons pweek pwak" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Character design</figcaption>
</a>
</figure>
<!-- huntress -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/huntress.jpg" title="<span class='icon-info'></span>Character design (research)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_huntress.jpg" data-src-retina="img/thumbnails/th_huntress@2x.jpg" alt="Huntress/chasseuse" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Character design</figcaption>
</a>
</figure>
<!-- Christmas cards -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm","illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/snowman.jpg" title="<span class='icon-info'></span>Illustration used for a Christmas card">
<img src="assets/loader.gif" data-src="img/thumbnails/th_snowman.jpg" data-src-retina="img/thumbnails/th_snowman@2x.jpg" alt="snowman and pingouin christmas" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Christmas card</figcaption>
</a>
</figure>
<!-- VI dame miroir -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm","illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/VI_old_lady.jpg" title="<span class='icon-info'></span>Illustration for an exhibition: Voyage Intergénérationnel (1/4)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_VI_old_lady.jpg" data-src-retina="img/thumbnails/th_VI_old_lady@2x.jpg" alt="Voyage Intergénérationnel old lady" title="Illustration for an exhibition: Voyage Intergénérationnel (1/4)" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration for an exhibition (1/4)</figcaption>
</a>
</figure>
<!-- VI papi skateboard -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm","illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/VI_old_man.jpg" title="<span class='icon-info'></span>Illustration for an exhibition: Voyage Intergénérationnel (2/4)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_VI_old_man.jpg" data-src-retina="img/thumbnails/th_VI_old_man@2x.jpg" alt="Voyage Intergénérationnel old man" title="Illustration for an exhibition: Voyage Intergénérationnel (2/4)" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration for an exhibition (2/4)</figcaption>
</a>
</figure>
<!-- VI Island -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm","illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/VI_island.jpg" title="<span class='icon-info'></span>Illustration for an exhibition: Voyage Intergénérationnel (3/4)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_VI_island.jpg" data-src-retina="img/thumbnails/th_VI_island@2x.jpg" alt="Voyage Intergénérationnel lonely island" title="Illustration for an exhibition: Voyage Intergénérationnel (3/4)" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration for an exhibition (3/4)</figcaption>
</a>
</figure>
<!-- VI Familly -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm","illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/VI_picnic.jpg" title="<span class='icon-info'></span>Illustration for an exhibition: Voyage Intergénérationnel (4/4)">
<img src="assets/loader.gif" data-src="img/thumbnails/th_VI_picnic.jpg" data-src-retina="img/thumbnails/th_VI_picnic@2x.jpg" alt="Voyage Intergénérationnel picnic" title="Illustration for an exhibition: Voyage Intergénérationnel (4/4)" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Illustration for an exhibition (4/4)</figcaption>
</a>
</figure>
<!-- Welcomebook -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["brand","comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/welcome_book.jpg" title="<span class='icon-info'></span>Branded welcome book - design of the brochure following company's branding guidelines">
<img src="assets/loader.gif" data-src="img/thumbnails/th_welcome_book.jpg" data-src-retina="img/thumbnails/th_welcome_book@2x.jpg" alt="Ninja Orange Labs" title="Branded welcome book - design of the brochure following company's branding guidelines" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Branded welcome book</figcaption>
</a>
</figure>
<!-- Cooking school -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/summer_feast_challenge.jpg" title="<span class='icon-info'></span>Event merchandising: Orange Labs corporate event">
<img src="assets/loader.gif" data-src="img/thumbnails/th_summer_feast_challenge.jpg" data-src-retina="img/thumbnails/th_summer_feast_challenge@2x.jpg" alt="Orange Summer feast Challenge" title="Event merchandising: Orange Labs corporate event" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Event merchandising: Orange Labs corporate event</figcaption>
</a>
</figure>
<!-- Warnode -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/warnode.jpg" title="<span class='icon-info'></span>Illustrations used in a web application game">
<img src="assets/loader.gif" data-src="img/thumbnails/th_warnode.jpg" data-src-retina="img/thumbnails/th_warnode@2x.jpg" alt="Warnode Gouchon" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Game assets</figcaption>
</a>
</figure>
<!-- Baby Ninja -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration","brand"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/baby_ninja.jpg" title="<span class='icon-info'></span>Variation of Orange Labs mascot for their intranet">
<img src="assets/loader.gif" data-src="img/thumbnails/th_baby_ninja.jpg" data-src-retina="img/thumbnails/th_baby_ninja@2x.jpg" alt="baby ninjas orange" title="" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Set of illustrations</figcaption>
</a>
</figure>
<!-- Ninja Xmas -->
<figure class="image-block pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box" data-groups='["illustration","comm"]'>
<a data-effect="mfp-fade-in" class="keep-ratio" href="img/ninja_Xmas.jpg" title="<span class='icon-info'></span>Event merchandising: Orange Labs Christmas cards">
<img src="assets/loader.gif" data-src="img/thumbnails/th_ninja_Xmas.jpg" data-src-retina="img/thumbnails/th_ninja_Xmas@2x.jpg" alt="Ninja Xmas Christmas Orange Labs" title="Event merchandising: Orange Labs Christmas cards" class="thumbnail pure-img" data-no-retina />
<figcaption class="thumbnail-caption">Branded Christmas cards</figcaption>
</a>
</figure>
<div id="shuffle_sizer" class="shuffle_sizer pure-u-1 pure-u-sm-1-4 pure-u-md-1-6 pure-lrg-1-8 l-box"></div>
</section>
<hr>
<!-- Anchor for the menu-->
<span id="about"></span>
<section id="about-me" class="about">
<img src="assets/soso2.png" alt="Photo Sonia Lahcene" title="Photo Sonia Lahcene" class="about-img"/>
<h2>Hi there. I'm Sonia Lahcene, freelance Graphic Designer based in London</h2>
<p>All in all I have quite a traditional Graphic Designer CV: after 7 years of hard-doodling practice on notebooks and school tables, drawing was definitely my passion. Therefore after high school, I naturally studied economics and attended a business school... But this is about the time when I started doing some illustrations and designs that would be used in communications for student events. Further non-art-related jobs brought me to work on various communications materials and I developed in parallel a real taste for vector illustrations.</p>
<p>Long story short, since 2014 I'm a freelance Graphic Designer. I'm based in London and I'm available for any types of work from print to digital. Wanna get in touch with me? Discuss about your project? Please feel free to get in touch with me! You'll find my contact details <a href="#contact">below</a>. Cheers!</p>
<div class="client">
<h3>My clients</h3>
<p>Some of the brands and agencies I've worked for:</p>
<div class="list-client">
<div>
<span class="icon-client_linkedin"></span>
</div>
<div>
<span class="icon-client_ladbrokes"></span>
</div>
<div>
<span class="icon-client_hootsuite"></span>
</div>
<div>
<span class="icon-client_timberland"></span>
</div>
<div>
<span class="icon-client_mediablaze"></span>
</div>
<div>
<span class="icon-client_ge"></span>
</div>
<div>
<span class="icon-client_storylab"></span>
</div>
<div>
<span class="icon-client_brands2life"></span>
</div>
<div>
<span class="icon-client_orange"></span>
</div>
<div>
<span class="icon-client_lerobert"></span>
</div>
<div>
<span class="icon-client_kaplan"></span>
</div>
</div>
</div>
</section>
<hr>
<!-- Anchor for the menu-->
<section id="contact" class="contact">
<h2>Now, let's get in touch</h2><div id="contact-speaker" class="contact-speaker icon-speaker-l"></div>
<p><a href="mailto:contact@sonialahcene.com" class="icon-email" target="blank" title="Contact Sonia Lahcene"></a> Contact me at <a href="mailto:contact@sonialahcene.com" title="Contact Sonia Lahcene" target="blank">contact@sonialahcene.com</a></p>
<p><a href="http://uk.linkedin.com/in/sonialahcene" class="icon-linkdn" title="LinkedIn Sonia Lahcene" target="blank"></a> Find me on <a href="http://uk.linkedin.com/in/sonialahcene" title="LinkedIn Sonia Lahcene" target="blank">LinkedIn</a></p>
<p><a href="https://www.behance.net/sonialahcene" class="icon-behance" title="Behance Sonia Lahcene" target="blank"></a> Check out my <a href="https://www.behance.net/sonialahcene" title="Behance Sonia Lahcene" target="blank">Behance</a></p>
<p><a href="https://sonialahcene.com/cv" class="icon-cv" title="CV Sonia Lahcene"></a> Download <a href="https://sonialahcene.com/cv">my CV</a></p>
</section>
</main>
<footer>
<p class="title-footer"><span class="icon-colibri2 icon-footer"></span>SONIA LAHCENE GRAPHIC DESIGN </p>
<p class="rights"> ©2014 - All rights reserved</p>
<p class="squeezer">Handmade by <a href="https://www.linkedin.com/in/fabiendemangeat/en" target="blank" title="LinkedIn Fabien Demangeat">Fabien Demangeat</a> and myself</p>
</footer>
</div>
<!-- <a class="download-portfolio" href="documents/portfolio_Sonia_Lahcene.pdf" target="blank" alt="pdf portfolio">
<div class="download-text">pdf</div>
<div><span class="icon-download"></span></div>
</a> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/retina.js/1.3.0/retina.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/1.4.13/jquery.scrollTo.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.3.5/jquery.localScroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="js/vendor/vunits.min.js"></script>
<script src="js/vendor/jquery.shuffle.min.js"></script>
<script src="js/vendor/animation-frame.min.js"></script>
<script src="js/vendor/60fps-scroll.min.js"></script>
<script src="js/vendor/jquery.unveil.min.js"></script>
<!-- Do not load fastclick, embedded in magnific-popup -->
<script src="js/main.min.js"></script>
<!-- Google Analytics -->
<script>
(function(s,o,n,i,a,l){s.GoogleAnalyticsObject=i;s[i]||(s[i]=
function(){(s[i].q=s[i].q||[]).push(arguments)});s[i].l=+new Date;
a=o.createElement(n);l=o.getElementsByTagName(n)[0];
a.src='//www.google-analytics.com/analytics.js';
l.parentNode.insertBefore(a,l)}(window,document,'script','ga'));
ga('create','UA-55025126-1');ga('send','pageview');
</script>
<script type="text/javascript">
// Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always.
(function(con) {
'use strict';
var prop, method;
var empty = {};
var dummy = function() {};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) con[prop] = con[prop] || empty;
while (method = methods.pop()) con[method] = con[method] || dummy;
})(this.console = this.console || {}); // Using `this` for web workers.
</script>
<script>
console.log('Hey %cdeveloper%c, contact me at %ccontact@sonialahcene.com%c ;) I could help you, I am an illustrator and do vector icons, logos, etc.', 'font-weight: bold; font-size: 1.5em;', 'font-weight: normal; font-size: normal;', 'font-weight: bold; font-size: 1.5em;', 'font-weight: normal; font-size: normal;');
</script>
</body>
</html>