-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
463 lines (450 loc) · 20.3 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Patrick Rushton - UX/UI Designer based in Amsterdam</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Portfolio for Amsterdam-based UX/UI designer Patrick Rushton, skilled in interaction design, rapid-prototyping and product development" />
<link href="css/normalize.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
/>
<link href="css/glider.css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-7367689-2"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-7367689-2");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/glider-js/1.7.7/glider.min.js"></script>
<script src="js/global.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<header id="intro">
<h1>
Hi, I’m Patrick
<span>A user-experience designer based in Amsterdam</span>
</h1>
</header>
<nav></nav>
<main>
<section id="what-i-do" class="inverse">
<h2>What I do</h2>
<p class="section-description">
I work together with clients and (agile) development teams to create
the best possible digital experiences for their users.
</p>
<div class="skills">
<div class="skill">
<img
src="images/what-ux.svg"
alt="Illustration of a flow diagram"
/>
<h3>Mobile & web UX</h3>
<p>
Understanding users and translating insights into exceptional digital products and services.
</p>
</div>
<div class="skill">
<img
src="images/what-prototyping.svg"
alt="Illustration of a hand-cursor"
/>
<h3>Rapid prototyping</h3>
<p>
Creating interactive front-end models to help explore and validate design approaches.
</p>
</div>
<div class="skill">
<img
src="images/what-wireframing.svg"
alt="Illustration of a wireframe"
/>
<h3>Wireframing & specification</h3>
<p>
Communicating design solutions through clear schematics and
detailed functional descriptions.
</p>
</div>
<div class="skill">
<img
src="images/what-visual.svg"
alt="Illustration of a pencil and ruler"
/>
<h3>UI design</h3>
<p>
Designing clean, clear user-interfaces, design systems and
meaningful animations that enhance the UX.
</p>
</div>
</div>
</section>
<section id="selected-work" class="inverse">
<h2>Selected work</h2>
<p class="section-description">
My portfolio embraces web, mobile apps and visual UI design. To
respect client privacy, the following is only a selection of projects.
I would be delighted to meet in person and present a wider selection
of recent work.
</p>
<div class="work-carousel"></div>
</section>
<section id="tools">
<h2>Tools</h2>
<p class="section-description">
I have mastered several tools that play a role in defining and
communicating the user-experience. Based on the project and team, I am
able to adapt my process and choose the best tools for the job.
</p>
<div class="tools-grid">
<div class="tool">
<img src="images/tool-figma-logo.svg" alt="Figma logo" />
<div>
<h3>Figma</h3>
<p>
I have extensive experience using Figma for user-interface
design and setting up and maintaining design systems.
</p>
</div>
</div>
<div class="tool">
<img src="images/tool-sketch-logo.svg" alt="Sketch logo" />
<div>
<h3>Sketch</h3>
<p>
As an early adopter of Sketch I have used it extensively on a
range of projects from mobile apps to complete design systems.
</p>
</div>
</div>
<div class="tool">
<img src="images/tool-axure-logo.svg" alt="Axure logo" />
<div>
<h3>Axure RP</h3>
<p>
I am familiar with many prototyping tools, and Axure has a nice
balance of power and speed which are essential for getting early
feedback on designs.
</p>
</div>
</div>
<div class="tool">
<img src="images/tool-html-5-logo.svg" alt="HTML 5 logo" />
<div>
<h3>HTML & CSS</h3>
<p>
An understanding of modern front-end helps me create feasible
designs and collaborate with developers. I will often code
specific behaviours such as responsive scaling.
</p>
</div>
</div>
</div>
</section>
<section id="recommendations" class="inverse">
<h2>Recommendations</h2>
<p class="section-description">
These are some recommendations from colleagues and clients via
LinkedIn. Formal references can be provided on request.
</p>
<div class="carousel-container">
<div class="carousel">
<div class="recommendation">
<img
src="images/recommendation-mathias.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Not only is he immensely talented as a UI/Interaction Designer, Patrick is also a great professional and team player. He can place himself in users’ shoes and through a methodical process deliver innovative solutions - which turn into products users love. Patrick also helped me organise and structure the project efficiently: he selected the appropriate tools, implemented design workflows and mentored Junior Designers.
<cite>Mathias Peterschmitt, Product Owner</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-tonny.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Any team would be lucky to have a Senior UX Designer such as
Patrick. He’s brought a wealth of knowledge and experience into
the company. As his manager, I can tell that he is very
dedicated and passionate about his work. As a designer he’s very
organized and thorough. Patrick’s passion has helped the company
to improve the product and design processes using best practice.
<cite>Tony Phan, former manager</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-navneet.jpeg"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick is a top-notch product designer. His skills in design,
prototyping and his thoughtful approach results in fantastic
products. He empathizes with users and creates problem-solving
interfaces. Most importantly, Patrick is an excellent friend,
mentor and a great inspiration to me. If I need to describe
Patrick in one word: he’s SOLID.
<cite>Navneet Ratheen, former colleague</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-hayo.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick is a senior interaction designer with a great feeling for detail, visual design and human-scale interaction. Patrick always knows about cutting edge applications to help his workflow and his team-workflow. Patrick is also involved in informing his colleagues about these applications.
<cite>Hayo Wagenaar, former manager</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-sitan.png"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick has the quality to think very user-centralised and has a
nice graphical design 'signature' throughout all his work. He
has the ability to understand and adapt to new technologies
quickly and is also critical in what technique works best to the
get the best result. Open minded, nice to discuss work-related
challenges with and thorough in evaluating work, with good, to
the point and secure feedback. Nice person to work with!
<cite>Sitan van Sluis, former colleague</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-jasper.png"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick translated the proposition excellently into an effective
interactive concept for our target students. He is open to
difficult questions and knows how to translate that into
improvements of the concept. The world needs more interaction
designers like Patrick, who are able to translate strategy into
effective and distinctive artwork. Great work, great results!
<cite>Jasper van Zanten, client</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-jo.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick is a talented Producer who has a professional and
enthusiastic approach. He has a can-do attitude and is
comfortable working to tight deadlines. I am happy to recommend
him.
<cite>Jo Parkinson, former colleague</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-johnd.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick worked for me as an interactive producer whilst at Chellomedia. He had a strong design background and was quick to pick up ideas and run with them. His work covered both creative and technical projects which he dealt with equally well. I would highly recommend him for work in the new media space.
<cite>John Denton, former manager</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-dean.png"
alt="Recommendation profile photo"
/>
<blockquote>
Although I didn’t manage Patrick directly, as a small group I regularly had the pleasure of working closely with him on several creative projects. He is a multi-talented individual, who focuses 100% on delivering excellence in everything he produces. He will be sorely missed.
<cite>Dean Stockton, former colleague</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-simon.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick always provided an excellent common sense view of the
problems we were trying to solve or the features we were trying
to make. Patrick makes excellent storyboards, which greatly help
in the technical design process. While he can visualise a great
product, he can also tackle technically complex ideas and tools.
It was a pleasure to work with him.
<cite>Simon Elliot, former colleague</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-peters.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick has been very creative and extremely efficient when we created and when we put EuroNews' Interactive TV service up to date. His work was very professional and he showed a deep and detailed knowledge - and furthermore he is fun to work with!
<cite>Peter Schmitz, client</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-charles.png"
alt="Recommendation profile photo"
/>
<blockquote>
I worked with Patrick on a number of award winning interactive applications including Sport1 Interactive. Patrick has always been easy to work with and willing to go the extra mile to get things completed on time.
<cite>Charles Dawes, former colleague</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-neil.png"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick is a highly capable and reliable Producer. In my experience, customers endorsed the quality and timeliness of his work, supported by a great attitude. I could always trust Patrick with clients to see jobs through to completion and build good relationships. Moreover, Patrick is the ultimate team player and a thoroughly nice bloke!
<cite>Neil Meadows, former colleague</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-paul.png"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick is a very talented designer that was responsible for our interactive TV user interfaces. He has an impressive knowledge of usability and understanding of how viewers engage with interactive services.
<cite>Paul Tarplee, former manager</cite>
</blockquote>
</div>
<div class="recommendation">
<img
src="images/recommendation-simonh.jpg"
alt="Recommendation profile photo"
/>
<blockquote>
Patrick was conscientious, diligent and very talented graphic and interactive designer, working with multiple technologies in what was, at times, a pressurised environment. Patrick was a key member of the founding team at Multimedia Television and was instrumental on some our pioneering projects
<cite>Simon Hall, former manager</cite>
</blockquote>
</div>
</div>
<div role="tablist" class="dots"></div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</section>
<section id="clients">
<h2>Clients</h2>
<p class="section-description">
I work with clients from a range of sectors, from creative agencies to
corporations, growing start-ups to well known brands. The best results come
from working with a team that recognises the value of design and is
able to balance the needs of the business and its users.
</p>
<div class="carousel-container">
<div class="carousel">
<div class="clients-grid">
<img src="images/logo-lbi.png" alt="Digitas LBi logo" />
<img src="images/logo-heineken.png" alt="Heineken logo" />
<img src="images/logo-backbase.png" alt="Backbase logo" />
<!-- <img src="images/logo-ijsfontein.png" alt="IJsfontein logo" /> -->
<img src="images/logo-holland.png" alt="Holland Tourism logo" />
<img src="images/logo-malmberg.svg" alt="Malmberg logo" />
<img src="images/logo-nickelodeon.png" alt="Nickelodeon logo" />
<img src="images/logo-discovery.png" />
<img src="images/logo-achmea.png" alt="Achmea logo" />
</div>
<div class="more-clients-grid">
<img src="images/logo-bbc.png" alt="BBC logo" />
<img src="images/logo-kpn.svg" alt="KPN logo" />
<img src="images/logo-vpro.png" alt="VPRO logo" />
<img src="images/logo-nhs.svg" alt="NHS logo" />
<img src="images/logo-audi.png" alt="Audi logo" />
<img src="images/logo-bnn.png" alt="BNN logo" />
<img src="images/logo-interpolis.svg" alt="Interpolis logo" />
<img src="images/logo-mtv.svg" alt="MTV logo" />
<img
src="images/logo-rpo.png"
alt="Rotterdams Philharmonisch logo"
/>
<img src="images/logo-ns.png" alt="NS logo" />
<img src="images/logo-tommy.png" alt="Tommy Hilfiger logo" />
<img src="images/logo-radboudumc.svg" alt="Radboud UMC logo" />
</div>
</div>
<div role="tablist" class="dots"></div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</section>
<section id="contact" class="inverse">
<h2>Contact</h2>
<p class="section-description">
It would be great to hear from you and discuss whether I can be a good
match for your team and projects.
</p>
<img
class="profile-photo"
src="images/contact-photo.jpg"
alt="Photo of me"
/>
<div class="contact-links">
<p>
<a href="mailto:[email protected]"
><i class="fas fa-envelope"></i>[email protected]</a
>
</p>
<p>
<a href="tel:+31624340435"
><i class="fas fa-phone-alt"></i>+31 624 340 435</a
>
</p>
<p>
<a href="https://github.com/patrickrushton"
><i class="fab fa-github"></i>GitHub profile</a
>
</p>
<p>
<a href="https://www.linkedin.com/in/patrickrushton"
><i class="fab fa-linkedin-in circle-icon"></i>LinkedIn profile</a
>
</p>
</div>
<div class="copyright">
<p>Hand-crafted using HTML 5 & CSS 3 © 2021</p>
</div>
</section>
</main>
</body>
</html>