-
Notifications
You must be signed in to change notification settings - Fork 0
/
VRPage.html
285 lines (278 loc) · 14.3 KB
/
VRPage.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
<!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>Elementarium - 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="#project-sketches">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Sketches</p>
</div>
</a>
</li>
<li class="section">
<a href="#project-workflow">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Workflow</p>
</div>
</a>
</li>
<li class="section">
<a href="#project-wireframes">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Wireframes</p>
</div>
</a>
</li>
<li class="section">
<a href="#project-prototype">
<div class="tab">
<div class="circle"></div>
</div>
<div class="slider">
<p>Prototype</p>
</div>
</a>
</li>
<li class="section">
<a href="#project-finalthoughts">
<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">Elementarium</h1>
<h1 class="second-line">A Virtual Reality Advertising Experience</h1>
</div>
<img src="assets/Images/shoe/elementHero.jpg"/>
</section>
<section class="project-details">
<div class="contain">
<div class="details">
<ul>
<li><span>Client:</span> Senior Project</li>
</ul>
<ul>
<li><span>Role:</span> Three.js Development & UX Design</li>
</ul>
<ul>
<li><span>Timeline:</span> 3 months, 2014</li>
</ul>
</div>
</div>
</section>
<section class="project-description white box" id="project-description">
<div class="contain">
<div>
<h1>About the Project</h1>
<p>What if there was a more engaging way to reach consumers that would increase brand awareness. Combining experimental browser-based 3D and Interaction Design to create engaging advertisement. There has been some exploration into VR advertisements with the a VR headset such as oculus but that requires consumers to either own a VR headset or to go to a physical location. With my solution I wanted to create a phone based VR that is accessible to everyone, wherever they are. I also wanted to think about moving from a Graphical User Interface to a Natural User Interface.</p>
<img src="assets/Images/shoe/elementariumDef.png"/>
</div>
</div>
</section>
<section class="project-sketches dark-blue box" id="project-sketches">
<div class="contain">
<div>
<h1>Sketches</h1>
<p>These are my initial sketches, I was trying not to erase and to let things overlap to help creativity. I sketched the scene, some interactions, feelings, and descriptions.</p>
<img src="assets/Images/shoe/sketches.png"/>
</div>
</div>
</section>
<section class="project-workflow grey box" id="project-workflow">
<div class="contain">
<div>
<h1>Workflow</h1>
<p>Working through the workflow to create an easy and natural way for user to flow through the application. As well as help me visualize the application.</p>
<div class="rslides-container">
<ul class="rslides" id="slider1">
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow1.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow2.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow3.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow4.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow5.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow6.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow7.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow8.png" alt=""></li>
<li class="slide"><img src="assets/Images/shoe/Elementarium-Workflow9.png" alt=""></li>
</ul>
</div>
</div>
</div>
</section>
<section class="project-wireframes white box" id="project-wireframes">
<div class="contain">
<div>
<h1>Interactions</h1>
<p>With the Interaction model I was trying to figure out a natural way that the user can interact with the content within the application.</p>
<div class="rslides-container">
<ul class="rslides" id="slider2">
<li class="slide">
<p>Navigation that allows the user see the world.</p>
<img src="assets/Images/shoe/gesture1.png" alt="">
</li>
<li class="slide">
<p>Move phone towards the pillar you are looking at to move closer, pull phone away to exit.</p>
<img src="assets/Images/shoe/gesture2.png" alt="">
</li>
<li class="slide">
<p>Navigation that allows the user to navigate around the pillar.</p>
<img src="assets/Images/shoe/gesture3.png" alt="">
</li>
<li class="slide">
<p>Wave your phone back and fourth over the Fire pillar to activate it.</p>
<img src="assets/Images/shoe/gesture4.png" alt="">
</li>
<li class="slide">
<p>Blow on your phone on the Air pillar to activate it.</p>
<img src="assets/Images/shoe/gesture5.png" alt="">
</li>
<li class="slide">
<p>Shake phone on the Earth pillar to activate it.</p>
<img src="assets/Images/shoe/gesture6.png" alt="">
</li>
<li class="slide">
<p>Tip your phone over on the Water pillar to activate it.</p>
<img src="assets/Images/shoe/gesture7.png" alt="">
</li>
<li class="slide">
<p>Drag shoe to rotate the shoe in 3D.</p>
<img src="assets/Images/shoe/gesture8.png" alt="">
</li>
<li class="slide">
<p>Two finger Expand on the shoe to enter exploded view.</p>
<img src="assets/Images/shoe/gesture9.png" alt="">
</li>
<li class="slide">
<p>Click on a piece of a shoe to see more information about that piece.</p>
<img src="assets/Images/shoe/gesture10.png" alt="">
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="project-prototype dark-blue box" id="project-prototype">
<div class="contain">
<div>
<h1>Demo</h1>
<p>This demo is a work in progress but it shows the scene working on a mobile phone as well as some animations. I still want to take this farther and try to incorporate the gestures and pillar interaction. Make sure you try this with a Chrome browser and turn up your sound.</p>
<p>Open this link on your smart phone or tablet chrome browser: <a href="http://goo.gl/wYgV6W" target="_blank">http://goo.gl/ZGJv1e</a></p>
<a class="prototype" href="http://goo.gl/wYgV6W" target="_blank"><img src="assets/Images/shoe/shoeHero.png"/></a>
</div>
</div>
</section>
<section class="project-finalthoughts grey box" id="project-finalthoughts">
<div class="contain">
<div>
<h1>Final Thoughts</h1>
<p>I'm really excited to keep moving forward with this project. I learned quite a lot about Natural User Interfaces, Interactions, thinking deeply about design and the design workflow, as well as developing with wegGL. I had a lot of problems I had to overcome on both the design and development side but thinking through my problems made me a better designer and developer. My final take away is that I highly suggest everyone try something they have never done before, it might just turn out awesome.</p>
</div>
</div>
</section>
<section class="change-project box">
<a href="airPortfolioPage.html" class="next-project project-button">
<img src="assets/Images/main/arrow-01.svg"/>
<p>Next</p>
</a>
<a href="Archive.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>