-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgestalt.html
More file actions
163 lines (144 loc) · 7.98 KB
/
gestalt.html
File metadata and controls
163 lines (144 loc) · 7.98 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
<!DOCTYPE html>
<html id="dsgn266">
<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/uikit@3.5.7/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.7/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>GESTALT</h5>
<p>The Gestalt project involved taking a field recording and using that sound to design an abstract or non-representational composition using the Gestalt principles. These pieces were all created using Adobe Illustrator.</p>
</div>
<div class="dsgn">
<h5>I. SOUND</h5>
<p>For the sound recording, I walked to a busy bridge over the Schuylkill River in Philadelphia. There were many passing cars and pedestrians walking on the bridge, which created a dynamic recording to take inspiration from. There was also a mom wheeling a stroller on the sidewalk, which created a crinkling sound that I would use in some of my pieces.</p><br>
<div align="center">
<audio controls>
<source src="images/264/gestalt/sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div> <br>
<h5>II. FIRST ITERATION</h5>
<p>Using the sound recording, I created the first three studies. I mainly wanted to capture the sounds of the cars fading in and out while keeping elements that still related back to the fact that the sound was captured in a city. One of my friends once told me that if they closed their eyes by the highway, the cars sounded like ocean waves (so they jokingly called the highway by their school "the beach"). So, I using the idea of waves combined with some bulkier designs for the city element. </p><br>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/264/gestalt/gestalt-01.png">
</div>
<div class="dsgn-column">
<img src="images/264/gestalt/gestalt-02.png">
</div>
<div class="dsgn-column">
<img src="images/264/gestalt/gestalt-03.png">
</div>
</div>
<br>
<h5>III. SECOND ITERATION</h5>
<p>After a round of critiques, I went back to the drawing board to make these next three studies. I combined some elements that I liked from the previous elements, but I also added new designs with abstract lines that correlated to different types of movement: from the wind to the cars.</p><br>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/264/gestalt/gestalt-04.png">
</div>
<div class="dsgn-column">
<img src="images/264/gestalt/gestalt-05.png">
</div>
<div class="dsgn-column">
<img src="images/264/gestalt/gestalt-06.png">
</div>
</div>
<br>
<h5>IV. FINAL PIECE</h5>
<p>In my final piece, I took a lot of elements from previous pieces to capture everything I wanted to highlight from the sound recording. The spiral in the middle has a white and black element and can be seen as coming or going, which illustrates the feeling of the cars. The rectangles hone back to the city's buildings and also have matching inverted qualities. The dots on them relate to the crinkle of the stroller on the sidewalk and add an extra dimension of background noise. Finally, the lines on the bottom add more motion to the piece, which captures the nature of the sound recording being on a busy bridge in the city.</p><br>
<div align="center">
<img src="images/264/gestalt/gestalt-07.png" style="width: 60%">
</div>
<br><br>
</div>
<footer>
<h4>
<a href="mailto: annashijiang@gmail.com" 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>