/
cs-folio.html
308 lines (295 loc) · 16.3 KB
/
cs-folio.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
<!doctype html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122458092-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-122458092-1');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Judy S. Wang">
<meta name="description" content="Welcome to the portfolio of Judy S. Wang, UX designer. A creative storyteller, visual strategist, and empathetic advocate of user-centered experiences. Check out my latest projects and drop me a line to say hello.">
<title>Judy S. Wang Portfolio</title>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,400i,600,700" rel="stylesheet">
<!-- CSS -->
<!--<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">-->
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link href="styles/main-styles.css" rel="stylesheet" type="text/css">
<link href="styles/main-v2.css" rel="stylesheet" type="text/css">
<link href="styles/cs-folio.css" rel="stylesheet" type="text/css">
<!-- favicon -->
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="index.html" class="logo-button"><img src="images/graphics/logo-abstract-j-pink.png" alt="navbar logo"></a>
<menu>
<a href="index.html" class="menu-button" id="work"> <span class="menu-text">WORK</span></a>
<a href="about.html" class="menu-button" id="bio"><span class="menu-text">BIO</span></a>
<!--<a href="docs/uxd-resume-judyswang.png" class="menu-button" target="_blank"><span class="menu-text">RESUME</span></a>-->
</menu>
</div>
</nav>
<a name="navbar"></a>
<header>
<section class="spacer-h50px"></section>
<section class="folio-header">
<div class="folio-header-text-wrap">
<p class="folio-header-text"> <HTML><br>
<span class="folio-header-text-pink">CSS GRID</span><br>
<span class="folio-header-text-pink">FLEXBOX</span><br>
</HTML></p>
</div>
<div class="folio-header-octocat">
<div class="octocat-wrap"><img src="images/graphics/octocat-speech.png" alt="github octocat"> </div>
</div>
</section>
</header>
<section class="article-wrap">
<article class="case-study">
<div class="title">
<h2>CASE STUDY</h2>
<h1>CSS LAB: JW FOLIO</h1>
</div>
<!-- UPDATE: Building new homepage layouts (total of 10 designs) -->
<div class="update">
<p><span>UPDATED 11/30/2018</span> (work-in-progress) <br><br>
Inspired by <a href="https://lynnandtonic.com/" target="_blank">Lynn Fisher's work</a>, I'm experimenting with CSS Grid & Flexbox to showcase different homepage layouts as users resize their browser. You can <a href="https://www.figma.com/file/WytZTaUDZtLferHJTrfrmf4D/folio-redesign?node-id=0%3A1" target="_blank">view all ten of my layouts</a> in Figma.</p>
</div>
<!-- Teaser of new layouts -->
<a href="https://www.figma.com/file/WytZTaUDZtLferHJTrfrmf4D/folio-redesign?node-id=0%3A1" class="layouts-link">
<div class="layouts-group">
<div class="layout-img">
<img src="images/cs-folio/inspo/v04-folio-home.png" alt="">
</div>
<div class="layout-img">
<img src="images/cs-folio/inspo/v01-folio-home.png" alt="">
</div>
<div class="layout-img">
<img src="images/cs-folio/inspo/v05-folio-home.png" alt="">
</div>
</div>
</a>
<div class="text-block">
<div id="separator-folio-intro">
<div class="separator"></div>
</div>
<h3>INTRODUCTION</h3>
<p>If you were asked to complete the following analogy, how would you answer?</p><br>
<blockquote id="analogy">
<p>Architect is to engineer,<br>
as web designer is to ___________.</p>
</blockquote>
<p>If you responded with "web developer" (or anything similar), then you understand that these pairings describe the relationship between one who creates a blueprint and one who transforms that blueprint into a tangible final product. </p>
</div>
<div class="text-block">
<h3>ABOUT THIS PROJECT</h3>
<p>Recently, I discovered a <a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIC60856GnLEV5GQXMxc9ByJ" target="_blank">series of YouTube videos</a> by Google Chrome Developers titled, “<a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIC60856GnLEV5GQXMxc9ByJ" target="_blank">Designers vs. Developers</a>.” In each episode, the hosts discuss common industry pain points by opening a conversation between the two sides, providing takeaways, solutions to workflows, tools, and discussions on everyday struggles. <br>
<br>
With these insights into the importance and difficulties in the designer/developer relationship, I felt intrigued to study the development process in converting mockups into a functional website. Inspired to level up my ability to empathize and communicate with others, I challenged myself to (literally!) step into a developer's shoes by hand coding a responsive website of my portfolio from scratch and <a href="https://www.github.com/jayesswang" target="_blank">hosting it on GitHub</a>. <br>
<br>
I’m always open to growing as a designer, so this project gave me the opportunity to try something new, test out ideas, and expand my range of skills. <!--
This article will summarize my discoveries from two seperate tasks:</p>
<div class="ol-wrapper">
<ol>
<li>I challenged myself to (literally!) step into a developer's shoes by hand coding a responsive website of my portfolio from scratch and <a href="https://jayesswang.github.io/">hosting it on GitHub</a>. </li>
<li>I also explored the power of CSS3 by creating a few different layouts of this project — JW Portfolio — with links below under "Select a Design." </li>
</ol>
</div>-->
</p>
</div>
<div class="text-block">
<h3>TECHNICAL INSIGHTS</h3>
<p>Starting with the basics, I studied in-depth how the CSS box model works; essentially, it is a box that wraps around every HTML element and consists of margins, borders, padding, and the actual content. <br>
<br>
I enjoyed reading about the history of HTML/CSS and felt incredible relief to discover CSS Grid and Flexbox, which allows developers an unprecedented level of control. I was amazed to learn of the coding acrobatics developers performed in the past just to create the proper website layout!
<br>
<br>
The HTML below showcases one example of how I applied the box model to create a centered and fixed navigation bar: </p>
<br>
<pre>
<code><nav>
<div class="nav-wrapper">
<a href="#"></a>
<menu>
<a href="#">HOME</a>
<a href="#">PROJECTS</a>
<a href="#">ABOUT</a>
</menu>
</div>
</nav>
</code>
</pre>
<p>The CSS below showcases how I styled the HTML:</p><br>
<pre>
<code>.nav {
height: 40px;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.nav-wrapper {
max-width: 1280px;
width: 100%;
background-color: #303030;
opacity: 0.97;
display: flex;
justify-content: space-between;
}
</code>
</pre>
<p>If you resize your browser window and scroll down, you'll notice how the navigation bar remains visible and centered. (You get double brownie points if you also observed that the code snippets above are responsive.) <br>
<br>Although I'm unable to cover all the topics I studied, as there were just too many, here are some of the major concepts I examined:</p>
<br>
<div class="topics-list">
<ul>
<li>Semantic HTML</li>
<li>The nuances between various CSS properties in terms of their similarities and differences (e.g. <code>display:none</code> vs. <code>visibility:hidden</code>)</li>
<li>The argument for using CSS grid and flexbox vs. frameworks, such as Bootstrap</li>
<li>The hierarchy of the DOM tree</li>
<li>The order in which a browser parses code and renders content in the browser window</li>
<li>When to use CSS vs. JavaScript to build interactive features (simple vs. complex)</li>
<li>How skeleton screens (designing latency stages) improve perceived performance</li>
<li>The schools of thought between graceful degradation vs. progressive enhancement</li>
<li>And many more...</li>
</ul>
</div>
<br>
<p>As I underwent this learning process, I strengthened my ability to find answers quickly and independently. I also grew in my appreciation for and ability to empathize with a developer’s unique perspective, priorities, and challenges in responsive web development. For example, just the other day, when I read the following excerpt:</p>
<br>
<blockquote class="article-quote">
<p><span>"In its infancy, [Instagram] was too computationally expensive to allow for both landscape and portrait mode; instead of limiting the interface to one or the other, Instagram’s designers decided to make every photo a square. By being square, you didn’t have to choose anymore. It was a great design decision." </span><br>
<br>
~John Maeda, <a href="https://www.wired.com/2017/03/john-maeda-want-survive-design-better-learn-code/" target="_blank">Wired Magazine</a></p>
</blockquote>
<p>I realized that development-related concerns had become easier for me to understand and anticipate, which translates into a productive, enjoyable, and expedient collaboration with developers. </p>
</div>
<div class="text-block conclusion">
<h3>WHAT I LEARNED</h3>
<p>When it comes to balancing the "art" and "science" of UX design, Susan Stuart says it best:</p>
<br>
<blockquote class="article-quote">
<p><span>"A UX Designer must have enough technical knowledge to realistically design for the possibilities and limitations of a platform, and knowledge of some scientific principles of how computer interfaces can affect the brain."</span><br>
<br>
~Susan Stuart, <a href="https://blog.prototypr.io/why-creating-a-ux-is-like-writing-often-more-than-art-288efae9523e" target="_blank">Medium</a></p>
</blockquote>
<p>The more I coded, the more comfortable I became around code. Gone were the days when merely <span>*looking*</span> at an HTML or CSS document was enough to overwhelm me. (Well... maybe it still overwhelms me a little, especially JavaScript!) Interestingly, I recently read that research into foreign language speakers shows there are <a href="http://www.bbc.com/future/story/20160811-the-amazing-benefits-of-being-bilingual" target="_blank">numerous benefits in bilingualism</a>, especially in how it improves a person's ability to adapt to change, feel empathy towards others, and creatively solve problems. <br>
<br>
I experienced a similar feeling when switching between designing and coding, like a different part of my brain had been activated and an unexpected creative perspective emerged; the kind where I had the imagination and vision to see alternate approaches and results. <br>
<br>
With this new insight, my world as a designer has become even bigger with unbridled opportunities and greater possibilities. This experience inspires me to continue seeking interesting personal projects and fun experiments in coding. As they say, the sky's the limit.</p>
</div>
</article>
</section>
<section class="solid-wrap">
<div class="case-study">
<div class="text-block" id="fav-links-group">
<h3>FAVORITE LINKS</h3>
<p>I've listed some of my favorite links below, which I consulted frequently during this project for technical questions and inspiration.</p>
</div>
<div class="fav-links-wrap">
<div class="fav-links">
<h4>RESOURCES</h4>
<ul>
<li><a href="https://developer.mozilla.org" target="_blank">MOZILLA - MDN WEB DOCS</a></li>
<li><a href="https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/" target="_blank">SMASHING MAGAZINE</a></li>
<li><a href="https://css-tricks.com" target="_blank">CSS-TRICKS</a></li>
<li><a href="https://stackoverflow.com/tags" target="_blank">STACK OVERFLOW</a></li>
</ul>
</div>
<div class="fav-links">
<h4>CREATIVE JUICE</h4>
<ul>
<li><a href="https://www.behance.net/featured" target="_blank">BEHANCE</a></li>
<li><a href="https://abduzeedo.com/" target="_blank">ABDUZEEDO</a></li>
<li><a href="https://labs.jensimmons.com" target="_blank">JEN SIMMONS LAB</a></li>
<li><a href="http://brutalistwebsites.com/" target="_blank">BRUTALIST</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="bottom-nav">
<h2 id="more-projects">More Projects</h2>
<div class="container-900px projects-springboard">
<a href="cs-boxly.html" class="project-box pink-bkgd">
<div class="project-wrapper">
<p class="project-type">Case Study</p>
<h3 class="project-title capitalize-text bold-text">Boxly</h3>
<p class="project-category">Visual Design • UI/UX • Testing</p>
</div>
</a>
<a href="cs-meme.html" class="project-box pink-bkgd">
<div class="project-wrapper">
<p class="project-type">Case Study</p>
<h3 class="project-title capitalize-text bold-text">What Do You Meme?<br>
Mobile Game</h3>
<p class="project-category">User Research • UX/UI • Testing</p>
</div>
</a>
<a href="cs-folio.html" class="project-box black-bkgd">
<div class="project-wrapper">
<p class="project-type">Project</p>
<h3 class="project-title capitalize-text bold-text">CSS LAB: JW FOLIO</h3>
<p class="project-category">Responsive Design • Frontend</p>
</div>
</a>
<a href="daily-ui.html" class="project-box black-bkgd">
<div class="project-wrapper">
<p class="project-type">Project</p>
<h3 class="project-title capitalize-text bold-text">Daily UI</h3>
<p class="project-category">Design Patterns • Psychology</p>
</div>
</a>
<a href="https://jayesswang.wordpress.com" target="_blank" class="project-box black-bkgd">
<div class="project-wrapper">
<p class="project-type">Collection</p>
<h3 class="project-title capitalize-text bold-text">Untitled 2013-2018</h3>
<p class="project-category">Fashion Photography</p>
</div>
</a>
<div class="project-box gray-border">
<div class="project-wrapper">
<h3 id="coming-soon">Coming Soon!</h3>
</div>
</div>
</div>
</section>
<section class="footer-wrap">
<!--<section class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">MORE PROJECTS <span>▼</span></label>
<div class="down-triangle"></div>
<div class="tab-content">
<a href="cs-meme.html">WHAT DO YOU MEME?</a>
<a href="cs-boxly.html">BOXLY</a>
<a href="cs-folio.html">JW PORTFOLIO</a>
</div>
</section>-->
<footer>
<div class="social-footer-wrap">
<a href="mailto:judyswang@gmail.com" class="social-link" target="_blank"><span class="social-text">EMAIL</span> </a> <span>|</span>
<a href="https://www.linkedin.com/in/judywlee" class="social-link" target="_blank"><span class="social-text">LINKEDIN</span> </a> <span>|</span>
<a href="https://www.github.com/jayesswang" class="social-link" target="_blank"> <span class="social-text">GITHUB</span> </a>
</div>
<p class="copyright">Copyright ©2018-2022 Judy S. Wang <br>
Designed and developed by Judy S. Wang</p>
</footer>
</section>
</body>
</html>
<!--
<div class="social-footer-wrap">
<a href="https://www.instagram.com/jayesswang" class="social-button" target="_blank"> <img src="images/icon-instagram-wht.png" alt="instagram icon link"> </a> <a href="https://www.linkedin.com/in/jayesswang" class="social-button" target="_blank"> <img src="images/icon-linkedin-wht.png" alt="linkedin icon link"> </a> <!--<a href="https://twitter.com/jayesswang" class="social-button" target="_blank"> <img src="images/icon-twitter-wht.png" alt="twitter icon link"> </a>--><!-- <a href="https://github.com/jayesswang" class="social-button" target="_blank"> <img src="images/icon-github-wht.png" alt="github icon link"> </a> </div>
-->