-
Notifications
You must be signed in to change notification settings - Fork 0
/
airPortfolioPage.html
305 lines (299 loc) · 13.7 KB
/
airPortfolioPage.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/Images/main/logoFavicon.ico">
<title>AIR - Mathew Morse - Web Designer</title>
<link href="css/reset.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:800,700,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Gentium+Basic:400,700italic,400italic' rel='stylesheet' type='text/css'>
<link href="css/responsiveslides.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/work.css" rel="stylesheet">
</head>
<body>
<nav>
<div class="contain">
<a href="index.html"><img class="logo" src="assets/Images/main/logo.svg"/></a>
<div class="nav-btn">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</div>
</nav>
<section class="slide-out">
<div class="contain">
<ul>
<li id="aboutButton"><a href="aboutme.html">About</a></li>
<li id="workButton"><a href="index.html#work">Work</a></li>
<li id="blogButton"><a href="Blog.html">Blog</a></li>
<li id="resumeButton"><a href="assets/resume2016.pdf">Resume</a></li>
<li id="contactButton"><a href="#contact">Contact</a></li>
</ul>
</div>
</section>
<div class="jumper">
<ul>
<li class="section">
<a href="#project-description">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Description</p>
</div>
</a>
</li>
<li class="section">
<a href="#user">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>User Persona</p>
</div>
</a>
</li>
<li class="section">
<a href="#sketches">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Sketches</p>
</div>
</a>
</li>
<li class="section">
<a href="#wireframes">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Wireframes</p>
</div>
</a>
</li>
<li class="section">
<a href="#interaction">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Interactions</p>
</div>
</a>
</li>
<li class="section">
<a href="#moodboard">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Moodboards</p>
</div>
</a>
</li>
<li class="section">
<a href="#comps">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Final Designs</p>
</div>
</a>
</li>
<li class="section">
<a href="#prototype">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Prototype</p>
</div>
</a>
</li>
<li class="section">
<a href="#final">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Final Thoughts</p>
</div>
</a>
</li>
</ul>
</div>
<section class="hero project-page">
<div class="title-holder">
<h1 class="name">AIR</h1>
<h1 class="second-line">Application & Service Concept</h1>
</div>
<img src="assets/Images/airProject/airHero2.jpg"/>
</section>
<section class="project-details">
<div class="contain">
<div class="details">
<ul>
<li><span>Client:</span> Class Project</li>
</ul>
<ul>
<li><span>Role:</span> UI/UX Design & Front-end Dev</li>
</ul>
<ul>
<li><span>Timeline:</span> 2 Months, 2014</li>
</ul>
</div>
</div>
</section>
<section class="project-goal box white" id="project-description">
<div class="contain">
<div>
<h1>About The Project</h1>
<p>How can we organize the air quality data within a home in a clear and visually interesting way? In the exploration and understanding of the data and the users we can create an application that takes the houses air quality data and presents it in a clear and meaningful way. My solution to this problem was to design an application that organized the home air quality and allowed the user to protect their family.</p>
<img src="assets/Images/airProject/splashPagePhone.png"/>
</div>
</div>
</section>
<section class="user-contain box dark-blue" id="user">
<div class="contain">
<div class="user-description">
<h1>User Persona</h1>
<img src="assets/Images/airProject/family.png"/>
<p>Katie & Robert recently bought a home to move their family into. They have two young children that they want to keep safe by monitoring the air quality.</p>
</div>
</div>
</section>
<section class="project-sketches box grey" id="sketches">
<div class="contain">
<div>
<h1>Sketches</h1>
<p>I worked through multiple ideas on the UI, layout and flow of the application, trying to find the best possible way to attempt to solve the problem.</p>
<img src="assets/Images/airProject/airSketches.jpg"/>
</div>
</div>
</section>
<section class="project-wireframes box white" id="wireframes">
<div class="contain">
<div>
<h1>Wireframes</h1>
<p>With the wire-frames I was trying to get an understanding of how the app flowed and how some of the animations happen. After doing this I had a solid idea of how everything worked.</p>
<img src="assets/Images/airProject/wires2.png"/>
</div>
</div>
</section>
<section class="project-interaction box grey" id="interaction">
<div class="contain">
<div>
<h1>Interaction Design</h1>
<p>I worked through all of the possible interactions to make sure that the system made sense and that it would be intuitive to the user.</p>
<div class="rslides-container">
<ul class="rslides" id="slider1">
<li class="slide">
<p>Gesture for switching between any icon array page and the timeline / chart view of the data.</p>
<img src="assets/Images/airProject/airGestures1.png" alt="">
</li>
<li class="slide">
<p>Gesture for selecting the floor you want more information on and how to get back.</p>
<img src="assets/Images/airProject/airGestures2.png" alt="">
</li>
<li class="slide">
<p>Gesture for selecting the data that you want more information on and how to get back.</p>
<img src="assets/Images/airProject/airGestures3.png" alt="">
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="project-moodboards box dark-blue" id="moodboard">
<div class="contain">
<div>
<h1>Moodboard</h1>
<p>With the mood board I was going for a comfortable, homey, and simple feeling. I wanted the user to feel safe and comfortable.</p>
<img src="assets/Images/airProject/moodboard.png"/>
</div>
</div>
</section>
<section class="project-comps box white" id="comps">
<div class="contain">
<div>
<h1>Final Design</h1>
<div class="rslides-container">
<ul class="rslides" id="slider1">
<li class="slide"><img src="assets/Images/airProject/airHeroPhone.png" alt=""></li>
<li class="slide"><img src="assets/Images/airProject/airHeroPhone2.png" alt=""></li>
<li class="slide"><img src="assets/Images/airProject/airHeroPhone3.png" alt=""></li>
</ul>
</div>
</div>
</div>
</section>
<section class="project-prototype box dark-blue" id="prototype">
<div class="contain">
<div>
<h1>Prototype</h1>
<p>For this project we were tasked to create a prototype to show how the application flowed. I decided that I wanted to program my app with html,css, and javascript. I was unable to finish the prototype completely but I learned a lot. Looking back on it now I wished I had used Jquery and that I used a mobile framework. But I am glad that I attempted it, this helped me better understand javascript. <a href="http://mrm1779.cias.rit.edu/smartAIR/">Link to the prototype</a></p>
<a href="http://mrm1779.cias.rit.edu/smartAIR/" target="_blank"><img src="assets/Images/airProject/prototype.png"/></a>
</div>
</div>
</section>
<section class="project-finalthoughts box grey" id="final">
<div class="contain">
<div>
<h1>Final Thoughts</h1>
<p>This project was a long and hard process that challenged me to think about the user and how the interactions would happen. In the end I was happy with the way the data was presented in a more interesting way.</p>
</div>
</div>
</section>
<section class="change-project box">
<a href="ghgPage.html" class="next-project project-button">
<img src="assets/Images/main/arrow-01.svg"/>
<p>Next</p>
</a>
<a href="VRPage.html" class="previous-project project-button">
<img src="assets/Images/main/arrow-01.svg"/>
<p>Previous</p>
</a>
</section>
<footer>
<div class="contain">
<div class="top-footer">
<h1>Say Hi To Me!</h1>
<h2>I'd Love to Hear From You!</h2>
<div class="link-holder">
<a class="" href="mailto:[email protected]?Subject=You're%20Awesome!"><img src="assets/Images/main/mail-01-01.svg"/></a>
<a class="" href="https://www.pinterest.com/MathewMorse/" target="_blank"><img src="assets/Images/main/Pin-01.svg"/></a>
<a class="" href="https://www.behance.net/mrm1779af59" target="_blank"><img src="assets/Images/main/behanced-01.svg"/></a>
<a class="" href="https://www.linkedin.com/in/mathewmorse" target="_blank"><img src="assets/Images/main/Linkedin-01.svg"/></a>
<a class="" href="https://github.com/mat148" target="_blank"><img src="assets/Images/main/Github-01.svg"/></a>
<a class="" href="http://codepen.io/mat148/" target="_blank"><img src="assets/Images/main/codePen-01.svg"/></a>
</div>
<p class="email"><a href="#">[email protected]</a></p>
<p class="email">+1 315 382 8467</p>
</div>
<div class="bottom-footer">
<p>© 2014 Mathew Morse</p>
</div>
</div>
</footer>
</body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60488291-1', 'auto');
ga('send', 'pageview');
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/responsiveslides.min.js"></script>
</html>