-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinvis-cities.html
157 lines (139 loc) · 7.59 KB
/
invis-cities.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
<!DOCTYPE html>
<html id="invis-cities">
<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>INVISIBLE CITIES</h5>
<p>This project involved using Italo Calvino’s book, <a href="https://addc401fall2018.files.wordpress.com/2018/08/calvino_italo_invisible_cities.pdf" target="_blank"><i>Invisible Cities</i></a>. I chose a city and created a graphic image of the concepts embedded in the description of the city using Adobe Illustrator.</p>
</div>
<div class="dsgn">
<h5>I. THE CITY</h5>
<p>The city I chose to base my studies on was the city Andria. Andria was built to follow a planet's orbit and everything is calculated accordingly. The residents of Andria are convinced that every change in the city incluences the sky, so before they make any changes they calculate risks and advantages. Yet, despite having such a calculating nature, life still flows calmly in the city. Below is the chapter on Andria from <i>Invisible Cities</i>.</p><br>
<div align="center">
<img src="images/264/invis-cities/inspo.png">
</div> <br>
<h5>II. FIRST ITERATION</h5>
<p>I wanted to illustrate the contrast between the free flowing nature and the rigid calculations of the city, so my first studies feature a lot of gradients and linear patterns using the blend tool in Illustrator.</p><br>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/264/invis-cities/invisible cities-01.png">
</div>
<div class="dsgn-column">
<img src="images/264/invis-cities/invisible cities-02.png">
</div>
</div>
<br>
<h5>III. SECOND ITERATION</h5>
<p>In my second iteration, I wanted to add more motion to the piece, as the city still makes progressions. I still kept the same gradient and line pattern ideas, but instead used them in elements that had a more forward motion the mimic the city's calculated innovation.</p><br>
<div class="dsgn-row">
<div class="dsgn-column">
<img src="images/264/invis-cities/invisible cities-03.png">
</div>
<div class="dsgn-column">
<img src="images/264/invis-cities/invisible cities-04.png">
</div>
</div>
<br>
<h5>IV. FINAL PIECE</h5>
<p>In my final piece, I took the elements I liked best from previous iterations. I also added a grid to give a more "calculated" look along with the orbs that represented their connection to the stars and space. The orbs are blurred to give a sense of depth and some of them are also splitting to portray the expansion of both space and their city.</p><br>
<div align="center">
<img src="images/264/invis-cities/invisible cities-05.png" style="width: 60%">
</div><br>
<p>Finally, I created a mockup of the cover on a book. It does have a bit of a "math textbook" feel, but I think it suits the overall feelings of Andria.</p><br>
<div align="center">
<img src="images/264/invis-cities/mockup.png" style="width: 60%">
</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>