-
Notifications
You must be signed in to change notification settings - Fork 0
/
dsgn266.html
226 lines (208 loc) · 13.3 KB
/
dsgn266.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
<!DOCTYPE html>
<html id="gestalt">
<head>
<!-- TAB SHIT -->
<link rel="shortcut icon" href="images/aj.png?v=2">
<title>Anna Jiang</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="uikit-3.5.7/css/uikit.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page"> -->
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&family=Mukta&display=swap" rel="stylesheet">
</head>
<body id="traditional">
<header>
<!-- DESKTOP NAV -->
<div id="navbar-desktop">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#about">ABOUT</a></li>
<li><a href="index.html#demo-reel">DEMO REEL</a></li>
<li>
<a href="index.html#portfolio">PORTFOLIO</a>
<div class="uk-navbar-dropdown" uk-drop="animation: uk-animation-slide-top-small; duration: 500;">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="traditional.html">TRADITIONAL</a></li>
<li><a href="digital.html">DIGITAL</a></li>
<li class="uk-active"><a href="design.html">DESIGN</a></li>
<li><a href="modeling.html">3D MODELING</a></li>
<li><a href="animation.html">ANIMATION</a></li>
<li><a href="labs.html">PENN LABS (UI/UX)</a></li>
<li><a href="fun.html">JUST FOR FUN!</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- MOBILE NAV -->
<div id="navbar-mobile">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar="mode: click; boundary-align: true; align: center; dropbar: true">
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#about">ABOUT</a></li>
<li><a href="index.html#demo-reel">DEMO REEL</a></li>
<li><a href="index.html#portfolio">PORTFOLIO</a></li>
<li class="uk-nav-divider"></li>
<div class = "sublink">
<li><a href="traditional.html">TRADITIONAL</a></li>
<li><a href="digital.html">DIGITAL</a></li>
<li class="uk-active"><a href="design.html">DESIGN</a></li>
<li><a href="modeling.html">3D MODELING</a></li>
<li><a href="animation.html">ANIMATION</a></li>
<li><a href="labs.html">PENN LABS (UI/UX)</a></li>
<li><a href="fun.html">JUST FOR FUN!</a></li>
</div>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="main">
<div class="artabout">
<h5>THE 8TH CLIMATE</h5>
<p>One of my design classes was based on a semester long project that involved curating all of the design and marketing around a biennale—essentially creating a brand identity for the exhibit. I chose the <a href="http://www.the8thclimate.org/" target="_blank">11th Gwangju Biennale</a>: The 8th Climate (What Does Art Do?). The 8th Climate refers to a state, or inter-world, one might reach using imaginative capacities. In essence, it is an imaginative plane that transcends the originally proposed 7 earthly climates. This is my portfolio, built using Adobe Illustrator, Photoshop, Premiere, and InDesign along with HTML/CSS/JavaScript!</p>
</div>
<div class="dsgn">
<h5>I. POSTER</h5>
<p>The first piece was a poster. I went back and forth between projects a lot, and even though the poster was assigned at the beginning of the semester, I found myself still tweaking it throughout the semester in order to create a more cohesive brand.</p><br>
<p>These are some of my first designs. In the first iteration, I drew inspiration from topographical maps in order to incorporate the base "earthliness" of the original 7 climates, but abstracted for the 8th climate. However, I ended up scrapping this and focusing more on the imaginative aspect, and started turning more towards gradients (while keeping a sense of topography within the 8 icon).</p>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/266/poster/iter1.1.png">
</div>
<div class="dsgn-column">
<img src="images/266/poster/iter1.2.png">
</div>
<div class="dsgn-column">
<img src="images/266/poster/iter1.3.png">
</div>
</div>
<br>
<p>These are some of my final iterations. My inspiration really struck after discussing with my professor potential overarching themes. We decided that auras were a perfect metaphor for the 8th climate, as they were both these extra/imaginative planes that transcended the Earth/humans. Using auras as my base design idea, I created a set of unique mesh gradients. The idea for the poster campaign would be to have various gradient background for posters to convey this idea of unique auras.</p>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/266/poster/iter2.1.png">
</div>
<div class="dsgn-column">
<img src="images/266/poster/iter2.2.png">
</div>
<div class="dsgn-column">
<img src="images/266/poster/iter2.3.png">
</div>
</div>
<div uk-slideshow="ratio: 8:5" style="padding: 10px">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<ul class="uk-slideshow-items">
<li><img src="images/266/poster/mockup1.1.png"></li>
<li><img src="images/266/poster/mockup1.2.png"></li>
<li><img src="images/266/poster/mockup1.3.png"></li>
<li><img src="images/266/poster/mockup1.4.png"></li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
<br>
<p>Later on, I went back and added actual aura photographs as backgrounds to bring in a more human elememt and hone in on the design idea. It also gave me a chance to play with using white text (since most of my other pieces used white text).</p>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/266/poster/iter3.1.png">
</div>
<div class="dsgn-column">
<img src="images/266/poster/iter3.2.png">
</div>
<div class="dsgn-column">
<img src="images/266/poster/iter3.3.png">
</div>
</div>
<div uk-slideshow="ratio: 8:5" style="padding: 10px">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<ul class="uk-slideshow-items">
<li><img src="images/266/poster/mockup2.1.png"></li>
<li><img src="images/266/poster/mockup2.2.png"></li>
<li><img src="images/266/poster/mockup2.3.png"></li>
<li><img src="images/266/poster/mockup2.4.png"></li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div><br>
<h5>II. MOTION PIECE</h5>
<p>The second part of the project was a motion piece. Luckily, I had found the background music early on that gave me a space/other-worldy feel. My goal for the motion piece was to illustrate how the 8th climate is an extension of the earth. I achieved this by starting with clips of physical landscapes (and added little background sounds such as birds chirping and fire cackling) and then transitioning to abstract imagery. The transition point was marked by the eye opening, which in essence was the "opening of the imagination." Finally, I added some moving gradients at the end of the video in order to tie it back to my posters.</p>
<video controls style="padding: 10px">
<source src="images/266/motion/motion.mp4" type="video/mp4">
</video> <br><br>
<h5>III. PUBLICATION</h5>
<p>The third piece was a publication related to the gallery. I decided to keep the book as a whole more minimalistic in design, as the art in the biennale was more complex and contemporary. In keeping with the aura concept, I wanted to create various covers that used the background gradients from the posters.</p>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/266/pub/cover1.png">
</div>
<div class="dsgn-column">
<img src="images/266/pub/cover2.png">
</div>
<div class="dsgn-column">
<img src="images/266/pub/cover3.png">
</div>
</div>
<p>For the pages, I wanted to incorporate the idea of auras for the images. In keeping the design more minimalist, I was able to come up with a concept of a transparent insert in between spreads that would sample the colors from the images and blur them to create a unique "aura" for the artist pages.</p>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/266/pub/spread1.png">
</div>
<div class="dsgn-column">
<img src="images/266/pub/spread2.png">
</div>
<div class="dsgn-column">
<img src="images/266/pub/spread3.png">
</div>
</div>
<br><br>
<h5>IV. WEBSITE</h5>
<p>The final part was to construct a beta website for the biennale. I wanted to create a very dream-like feeling to the website, so I incorporated a moving gradient background and hover effects. When you over over headings or images, they will both blur. For images, this blur will essentially correspond to the "aura" of the photo by abstracting the colors of the image. Hovering over an image also reveals the title of the work and artist. In addition, I added a snapping effect to the scroll so that the gallery of featured images has a cleaner effect. Finally, I tied in the 8 logo again by adding it as a cursor!<br><br>
Unfortunately, since this was the last project, I did not have nearly as much time to work on this as I would have liked. If I had more time, I would have created sample artist pages so that when you click on an image or a name in the artist section, it will take you to a profile of that artist.<br><br>
You can check out the demo website <a href="images/266/web/dsgn266-index.html" target="_blank">here</a> or simply view the video below!</p>
<video controls style="padding: 10px">
<source src="images/266/web/web-demo.mp4" type="video/mp4">
</video>
</div>
<br><br>
</div>
<footer>
<h4>
<a href="mailto: [email protected]" target="_blank">EMAIL</a>
•
<a href="https://www.linkedin.com/in/annasjiang/" target="_blank">LINKEDIN</a>
•
<a href="https://github.com/annasjiang">CODE</a>
</h4>
</footer>
<script src="scriptittyscript.js"></script>
</body>
</html>