-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
435 lines (426 loc) · 24.1 KB
/
portfolio.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Primary Meta Tags -->
<title>Portfolio Case Study</title>
<meta name="title" content="Shardé Heim - Portfolio Case Study"/>
<meta name="description" content="Branding, design (UX/UI) and development of my portfolio" />
<meta name="keywords" content="Portfolio, Design Portfolio, Product Designer, UX Designer, UI Designer, Interface Designer, London Designer, Branding, Case Study">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.shardeheim.com/portfolio" />
<meta property="og:title" content="Shardé Heim - Portfolio Case Study" />
<meta property="og:description" content="Branding, design (UX/UI) and development of my portfolio" />
<meta property="og:image" content="images/metaphoto7.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.shardeheim.com/portfolio" />
<meta property="twitter:title" content="Shardé Heim - Portfolio Case Study" />
<meta property="twitter:description" content="Branding, design (UX/UI) and development of my portfolio" />
<meta property="twitter:image" content="images/metaphoto7.jpg" />
<!-- Links -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,500,500i,700,800" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript" defer></script>
</head>
<body>
<!-- nav one for web -->
<nav>
<div class='fade-in-element'>
<div class="topnav">
<div class="topNavLeft">
<div class="navleftwidth1"> <a href="/#work">Work</a> </div>
<div class="navleftwidth2"> <a href="/#experience">Experience</a></div>
</div>
<div class="logo">
<div class="LogoIcons">
<a href="/"><img class="activeLogoIcons" src="images/logo.svg" alt="Logo"></a>
<a href="/"><img class="hoverLogoIcons" src="images/HLogo2.png" alt="HLogo"></a>
</div>
</div>
<div class="topNavRight">
<div class="navrightwidth3"><a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a></div>
<div class="navrightwidth4"><a href="about">About</a> </div>
</div>
</div>
</div>
</nav>
<!-- nav two for mobile -->
<div class="topMobilelNav fade-in-element">
<nav class="mobile-nav">
<a href="/#work">Work</a> <a href="/#experience">Experience</a> <a href="about">About</a> <a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a>
</nav>
<div class="mobileNavbLogo">
<a href="/"><img height="40" src="images/logo.svg" alt="moiblelogoimage"></a>
</div>
<button class="hamburger" aria-label="Hamburger Menu">
<div class="bar"></div>
</button>
</div>
<!-- above fold content -->
<div class="caseStudyTopContainer fade-in-element">
<div class="companyInfo">
<h1>Portfolio and Branding</h1>
<img height="40" src="images/logo.svg" alt="personallgo">
</div>
<div class="caseStudyDescription">
<p>My design process: Branding, design (UX/UI) and development of my portfolio</p>
</div>
<div class="rollandtimeleft">
<h3>Roles</h3>
<div class="roleTags">
<div class="UXTag">
UX Design
</div>
<div class="UITag">
UI Design
</div>
<div class="DevTag">
Front End Development
</div>
<div class="BrandTag">
Identity Branding
</div>
</div>
</div>
<div class="rollandtimeright">
<h3>Time</h3>
<div class="tableDate">
May 2023 - Jun 2023
</div>
</div>
</div>
<!-- image swivel -->
<div class="imageSwivelPortfolio fade-in-element">
<div class="imageSwivelWrapperPortfolio">
<h1 class="SwivelTopImagePortfolio">
<img src="images/PortfolioRowTop.png" height="370" alt="VoiceAiHeaderTop">
</h1>
<h1 class="SwivelDownImagePortfolio">
<img src="images/PortfolioRowBottom.png" height="370" alt="VoiceAiHeaderTop">
</h1>
</div>
</div>
<!-- Entire Wrapper-->
<div class="container-wrapper fade-in-element">
<nav class="sidebarNav">
<div class="container">
<div class="sidebar">
<li class="section-1-smaller">
<img src="images/book.svg" width="17"height="17" alt="Context"/>
<a href="#section-1-smaller">Context</a>
</li>
<li class="section-2">
<img src="images/search-status.svg" alt="Research" width="17" height="17"/>
<a href="#section-2">Research</a >
</li>
<li class="section-3">
<img src="images/user-square.svg" alt="DefiningRequiremnts" width="17" height="17"/>
<a href="#section-3">User personas</a>
</li>
<li class="section-4">
<img src="images/pen-tool.svg" width="17"height="17" alt="Wireframe"/>
<a href="#section-4" >Early design sketches</a>
</li>
<li class="section-5">
<img src="images/brush copy.svg" alt="UserFeedback" width="17" height="17"/>
<a href="#section-5">Branding</a>
</li>
<li class="section-6">
<img src="images/additem.svg" alt="DefiningRequiremnts" width="17" height="17"/>
<a href="#section-6">Mockups</a>
</li>
<li class="section-7">
<img src="images/glass.svg" alt="testing" width="17" height="17"/>
<a href="#section-7" >First testing round</a>
</li>
<li class="section-8">
<img src="images/figma.svg" alt="Design" width="17" height="17"/>
<a href="#section-8">High fidelity design</a>
</li>
<li class="section-9">
<img src="images/data.svg" alt="Implementation" width="17" height="17"/>
<a href="#section-9">Development</a >
</li>
<li class="section-10">
<img src="images/glass.svg" alt="testing" width="17" height="17"/>
<a href="#section-10" >Second testing round</a>
</li>
<li class="section-11">
<img src="images/teacher.svg" alt="Learnings" width="17" height="17"/>
<a href="#section-11" >Learnings</a >
</li>
<li class="section-12">
<img src="images/arrow-up.svg" alt="Top" width="17" height="17"/>
<a href="#section-1-smaller" >Top</a >
</li>
</div>
</div>
</nav>
<!-- content-->
<section id="section-1-smaller" class="sectionImage">
<div class="container-content">
<h4>Context</h4>
<p> In this portfolio, I have put together some of the key projects I have worked on in the last few years.
<br><br>
I decided to treat the process like I would any other product problem: with research, early stage design, testing, and mockups. I built my website using HTML, CSS and Javascript. Because it highlights both my front-end development skills and my design process, I chose to include it as one of my portfolio’s case studies.
<br><br>
<b> The Team </b> Shardé on visual design, Shardé on UX and starring (surprise) Shardé on front end development
<br>
<br>
<br>
</p>
</div>
</section>
<section id="section-2" class="sectionImage">
<div class="container-content">
<h4>Research</h4>
<p>
I sought inspiration from some of the top portfolios by designers at Meta, Spotify, Google etc. on <a href="https://pafolios.com/" target="_blank">pafolios.com</a>.
I found particular inspiration from <a href="https://www.jonnyczar.com/" target="_blank">jonnyczar.com</a>, <a href="https://www.buenmakes.com//" target="_blank">buenmarkes.com</a> and <a href="https://www.pratibhajoshi.com/" target="_blank">pratibhajoshi.com</a> as their work spanned not just beautiful visuals, but case studies that communicated their design processes very clearly.
<br><br>
I noticed two main homepage layout themes, individual cards in a grid format, or large, full-width scroll cards displaying their work.
</p>
<div><img src="images/PortfolioResearchImage.jpg" width="100%" alt="placeholderimage"></div>
<p>
I also read lots of articles on <a href="https://dribbble.com/resources/product-design-case-study" target="_blank">how to write narrative driven product design case studies</a>. After looking at a number of different case studies and making notes on what I like/didn’t like, I had enough knowledge to start putting ideas to paper.
</p>
<br> <br><br>
</div>
</section>
<section id="section-3" class="sectionImage">
<div class="container-content">
<h4>User personas</h4>
<p> Who is going to be looking at my portfolio? It’s all well and good if I design something beautiful that I love, but the purpose of this website is to communicate my design process to someone important (someone like you, dear reader). Someone who wants to understand in two minutes or less how I work and gain a little insight into my personality. (and to get me an interview 🤞🏻)
<br>
<br>
This led me to two user personas that I would design with in mind:
</p>
<div>
<img src="images/Personas2.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-4" class="sectionImage">
<div class="container-content">
<h4>Early design sketches</h4>
<p>I started sketching the layout of the two different portfolio homepage styles I researched above. I conducted a light round of testing with some fellow designers on which design they liked the most and found the card design was the most popular. I narrowed down my work to five case studies which best represented my skills.
</p>
<div>
<img src="images/PortfolioEarlyDesignSketches.jpg" width="100%" alt="placeholderimage">
</div>
<p>I wanted an interesting above-the-fold photo/graphic that was eye catching, conveyed my personality and set the tone for my portfolio. I loved <a href="https://www.instagram.com/burnttoast/" target="_blank">@burntoast's</a> style and got an idea from one of their posts to do a rapid shuffle of all the “many faces of Shardé”. I have a broad range of skills and wanted to showcase that (with some flare) straight away.
</p>
<div>
<img src="images/PortfolioSketchesManyFaces.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-5" class="sectionImage">
<div class="container-content">
<h4>Branding</h4>
<p>Before I could start with the higher fidelity designs, I needed some branding. What was my style, what did I want people to feel when they interacted with my portfolio? I conducted a mini branding workshop, Google’s three hour brand sprint (but in 30 mins) with myself and my husband, going through some typical branding exercises to narrow down my style.
</p>
<div>
<img src="images/BrandingWorkshop.jpg" width="100%" alt="placeholderimage">
</div>
<p>Now that I had my look and feel, I needed a logo. I did some rough sketches of variations of my initials ‘SH’ and my name.
</p>
<div>
<img src="images/ManyLogoOption.jpg" width="100%" alt="placeholderimage">
</div>
<p>A round of testing with Graphic and UI Designers identified two logos as clear favourites: my full name in cursive, and the logo circled in blue. After mocking up both I settled on the simple ‘S’ as it took up less space and looked more professional overall.
</p>
<div class="SmallerSectionImage">
<img src="images/LogoOutline.jpg" width="100%" alt="placeholderimage">
</div>
<p>Next I put together the colours and typography that I felt suited my style. I wanted to use pastel colours for the fun, friendly vibe I was going for, contrasted with strong fonts and tones for professionalism and punch. This is how the logo and colour pallet came together.
</p>
<div>
<img src="images/brandingImage.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-6" class="sectionImage">
<div class="container-content">
<h4>Mockups</h4>
<p>
Next it was time to open up Figma and start mocking up some designs and layouts. Because I had in mind building my portfolio from scratch, I was mapping out the responsiveness (@media px) of the pages and different layouts as well.
<div class="SmallerSectionImage">
<img src="images/MockupsPortfolio.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-7" class="sectionImage">
<div class="container-content">
<h4>First round of testing</h4>
<p>
I really wanted to challenge myself and treat this project like I would any other UX problem. And that meant lots and lots of user testing. I sent a link to my Figma page to recruiter friends and other designers, asking for feedback on the layout. I received two main points of feedback.
</p>
<br><br>
<div class="subHeading">
<img src="images/routing.svg" alt="testing" width="17" height="17"/> Site navigation
</div>
<p>
There needed to be a way to navigate to the next/previous project at the bottom of each case study.
</p>
<br><br>
<div class="subHeading">
<img src="images/ruler.svg" alt="testing" width="20" height="20"/> Image size
</div>
<p>
The images on mobile needed to be larger.
</p>
<br>
<br>
<br>
</div>
</section>
<section id="section-8" class="sectionImage">
<div class="container-content">
<h4>High fidelity designs</h4>
<p>
With that feedback in mind, I started with my high fidelity designs. Using Figma, I went through many home page designs, titles and layouts. I also tested out different text for the header, different shades of colours and styles.
</p>
<div>
<img src="images/HighFidelityDesigns3.jpg" width="100%" alt="placeholderimage">
</div>
<p>
I was struggling on what imagery to settle on. I could have gone with the trendy, isometric illustration style that is popular at the moment, or something a bit simpler, classic and flatter. I ultimately chose the more classic design as it better aligned with my overall branding.
</p>
<div>
<img src="images/CompareDesigns.jpg" width="100%" alt="placeholderimage">
</div>
<p>
Through the process of refining I settled on what you see as my final look.
</p>
<div>
<img src="images/HighFideltiyDesigns4.jpg" width="100%" alt="placeholderimage">
</div>
<p>
I also created each variations of the many faces of Sharde using Adobe Illustrator, and animated them shuffling using javascript.
</p>
<div class="SmallerSectionImage">
<img src="images/SmallManyFacesofSharde.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-9" class="sectionImage">
<div class="container-content">
<h4>Development </h4>
<p>
I hosted my site on Github Pages which made setup easy. I didn’t use a portfolio template as I wanted the ability to create exactly what I had in mind and showcase my coding skillset at the same time. I used HTML, CSS and JavaScript to build each page.
<br><br>
The tasks that consumed the most time were making everything responsive on all different devices, and building the side bar nav you see on each case study page.
</p>
<div>
<img src="images/Portfoliogif.gif" width="100%" alt="placeholderimage">
</div>
<p>
I wanted my site to perform well, so I tested it using Google’s <a href="https://pagespeed.web.dev/" target="_blank">Page Insights</a>for page load time, accessibility, SEO index ect. I kept tweaking and improving my code until I was happy and my performance score was 99%.
</p>
<div>
<img src="images/GoogleInsights.jpg" width="100%" alt="placeholderimage">
</div>
</div>
</section>
<section id="section-10" class="sectionImage">
<div class="container-content">
<h4>Final round of testing</h4>
<p>
Once I was finished with my portfolio, I sent the URL to my recruiter friends and other designers for feedback. I also sent it to some developer friends so they could test my page. I created a <a href="https://docs.google.com/spreadsheets/d/1Dm5jTfd3SqFGXezY8yequtefu2BB9G0ObQdiD0xXx5c/edit?usp=sharing" target="_blank">Google feedback sheet </a>to document all of my user feedback and assigned it low to high priority for fixes. The main feedback I received was.
<br><br><br>
</p>
<div class="subHeading">
<img src="images/firstline.svg" alt="testing" width="17" height="17"/> Too many words
</div>
<p>
I needed to cut down on the amount of copy. While I have a lot of images, Recruiters only spend on average 2 mins looking at a portfolio. I needed to cut down on words so it was more consumable at a glance. This is a struggle for a girl who puts over communicate everything in her top 3 values.
<br><br><br>
</p>
</div>
</section>
<section id="section-11" class="sectionImage">
<div class="container-content">
<h4>Learnings</h4>
<p>
I am delighted with how my portfolio turned out. I feel it walks a fine line between professionalism and showcasing my personality. Some of my key leanings from going through this process are.
<br><br><br>
</p>
<div class="subHeading">
<img src="images/colorfilter.svg" alt="testing" width="17" height="17"/> Consistency
</div>
<p>
Using elements like the glass effect throughout my portfolio helps keep everything together and give it a sense of consistency that it might not otherwise have.
<br><br>
</p>
<div class="subHeading">
<img src="images/data.svg" alt="testing" width="17" height="17"/> Update as I go
</div>
<p>
For the love of all that is good Shardé, write your case studies after you finish that bit of work. Trying to write, design and build in one go was a lot of work and next time I would definitely tackle it in smaller chunks.
<br><br>
</p>
<div class="subHeading">
<img src="images/eye.svg" alt="testing" width="17" height="17"/> Design for a glance
</div>
<p>
The average person spends 2-3 min on a portfolio, and this exercise was a reminder to design for those who are going to consume your product. I spent a lot of time on my graphics to make sure users who aren’t reading the entire case study can still get an idea of my work at a glance. For instance, the side bar nav functions not only as site navigation, but succinctly describes my design process.
<br><br>
Feel free to give me feedback on your experience, I am always looking to improve my website.
</p>
</div>
</section>
</div>
<div class="prevnextwrapper fade-in-element">
<div class="prev">
<a href="scrunch"><img height="13" src="images/blue-arrow-left.svg" alt="BlueArrowLeftImage"> Scrunch project</a>
</div>
<div class="next">
<a href="sunbrella">Sunbrella project <img height="13" src="images/blue-arrow.svg" alt="BlueArrowRightImage"></a>
</div>
</div>
<!-- full width photo -->
<div class="fullwidthphoto fade-in-element"><img src="images/shardeportfolioimage.jpg" width="100%" alt="placeholderimage"></div>
<!--Footer-->
<footer>
<div class="footerwrapper fade-in-element">
<a href="mailto:%[email protected]">
<h2>Say hi, don't be shy <img height="30" src="images/arrow-right.svg" alt="ArrowRightImage"></h2>
<p>Feel free to reach out for collaborations or just a friendly hello 🚀 <b>Let's chat.</b></p>
</a>
</div>
<div class="socials fade-in-element">
<div class="footerIcons">
<div class="EmailIcons">
<a href="mailto:[email protected]" target="_blank">
<img class="activeEmailImage" src="images/emailicon.svg" alt="EmailIconLight"></a> <a href="mailto:[email protected]" target="_blank">
<img class="hoverEmailImage" src="images/emailicondark.svg" alt="EmailIcondDark"></a>
</div>
<div class="CameraIcons">
<a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="activeCameraImage" src="images/camericon.svg" alt="CameraIconLight"></a> <a href="https://www.shardeheimphotography.com/" target="_blank">
<img class="hoverCameraImage" src="images/camericondark.svg" alt="CameraIconDark"></a>
</div>
<div class="InstagramIcons">
<a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="activeInstagramImage" src="images/instagramicon.svg" alt="InstagramIconLight"></a> <a href="https://www.instagram.com/shardeheim/" target="_blank">
<img class="hoverInstagramImage" src="images/instagramicondark.svg" alt="InstagramIconDark"></a>
</div>
<div class="LinkedinIcons">
<a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="activeLinkedinImage" src="images/linkedinicon.svg" alt="LinkedinIconLight"></a> <a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
<img class="hoverLinkedinImage" src="images/linkedinicondark.svg" alt="LinkedinIconDark"></a>
</div>
</div>
</div>
<div class="madeBy">
Designed and built by Shardé Heim © 2023
</div>
</footer>
</body>
</html>