-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
264 lines (240 loc) · 12.5 KB
/
index.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
<!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.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,400&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Interactive III - Documentation</title>
</head>
<body>
<div class="section title">
<h1>DC COMICS</h1>
<p>Micro Interactions</p>
</div>
<div class="section globalinfo">
<div class="projectinfo">
<span>
<h3>Role</h3>
<p>Visual Design, Motion</p>
</span>
<span>
<h3>Duration</h3>
<p>14 weeks, Spring 2021</p>
</span>
<span>
<h3>Client</h3>
<p>Class Project: Interactive III</p>
</span>
</div>
<div class="process_button">
<a href="assets/AnthonyHo_ProcessDOCv2.pdf" target="_blank" rel="noopener noreferrer">Process DOC</a>
</div>
</div>
<hr>
<!-- -------------------------------Goal + Purpose--------------------------------->
<!-- -------------------Goal of assignment------------------ -->
<div class="Goal_Purpose">
<div class="section purpose">
<div class="goalinfo">
<h2>Goal</h2>
<p>Design interactions that go well beyond ‘usable’ to achieve ‘delight’ based on a brand.</p>
<p>These interactions will be used on a kiosk.</p>
</div>
<div class="Smallsection requirements">
<h3>Requirements</h3>
<ul>
<li>Clarity of purpose</li>
<li>Discoverability and Affordance</li>
<li>Status and Feedback</li>
<li>Differentiated Functional States</li>
<li>Suitable target size for mode of interaction</li>
</ul>
</div>
</div>
<!-- -------------------Purpose of assignment------------------ -->
<div class="section mood+styles">
<div class="DC">
<h3>About the Brand</h3>
<p>An American comic book publisher that features iconic heroes such as Superman, Batman and Wonder
Woman.
</p>
</div>
<div class="Smallsection targetaudience">
<h3>Target Audience</h2>
<p>DC COMICS customers and those who are fans of the brand</p>
</div>
</div>
</div>
<!-- -------------------------------Moodboard+Style--------------------------------->
<hr>
<div class="moodboard">
<!-- <h2>Moodboard</h2> -->
<img src="assets/Moodboard.png" alt="moodboard">
<p>I wanted to my mood to be Exciting and Grandiose. The designs and animations will be loud, detailed, and
sophisticated.</p>
</div>
<div class="styleboard">
<!-- <h2>Styleboard</h2> -->
<img src="assets/Styleboardv2.png" alt="styleboard">
<p>The overall style will be bold and simple. I wanted the animations to show all the zaniness of the
moodboard, so to keep it uniform, I went with a simple style.</p>
</div>
<!-- -------------------------------Interaction--------------------------------->
<div class="Interactions">
<h1>Interactions</h1>
</div>
<div class="InteractionSection basicbutton">
<div>
<h2>Basic Buttons</h2>
<p>I wanted to basic button to have different hover states show the diversity of characters in DC Comics.
The company is more well known for their characters rather than their brand.</p>
<p>The characters I chose were Batman, Superman, and Wonder Woman. This is because they are the most well
characters in the DC universe. The hover states represents their villain counterparts.</p>
<div class="threeButtons">
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/1-BasicButton/Batman-V1.mp4" type="video/mp4">
</video>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/1-BasicButton/Superman-V1.mp4" type="video/mp4">
</video>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/1-BasicButton/Wonderwoman-V1.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="InteractionSection toggle_Slider_Multi">
<div class="InteractionSection toggle-one">
<h2>Toggle</h2>
<p>Based on the character Shazam, when the user clicks on the UI, the slider transform into the Shazam.</p>
<p>I wanted to keep the change simple while also showcasing as many DC characters as I possibility can.</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/2-Toggle/Toggle-1.mp4" type="video/mp4">
</video>
</div>
<div class="InteractionSection BothSliders">
<div class="slider1">
<h2>Slider</h2>
<p>Based on the character Firestorm, as the slider moves, the fire on his head gets larger</p>
<p>I do think that the head feels out of place compared to the other UI. The fire getting taller makes
it
harder to place to the UI that’s high up on the screen.</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/2-Toggle/Slider.mp4" type="video/mp4">
</video>
</div>
<div class="DoubleSlider">
<h2>Double Slider</h2>
<p>Based on the character Firestorm, the sliders can be used as both a range slider and a regular
slider.
The character Firestorm is made of two people and combing them to transform a double slider into a
regular slider was an interesting idea.</p>
<p>I do think that the default states should be more generic to fit in wit the other UI elements.</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/2-Toggle/SliderDouble.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="InteractionSection">
<h2 class="multiselect">Multi Selector</h2>
<p>Inspired by DC’s always changing branding, I wanted to allow the user to choose between each era.</p>
<p>One thing that could be improved would be to show how the UI interacts the other UI on screen. This
element is decently big and I’m worried about how reusable it is.</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/2-Toggle/Multi Switch-1.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="InteractionSection Radio_Checkbox_Tool">
<div class="Radio_Check">
<div class="radio1">
<h2>Radio Button</h2>
<p>Based on the character Cyborg, I like the idea of his uses of BOOM tubes as a potential hover state,
His
logo was in the shape of a radio button, making him the perfect fit.</p>
<p>The states and animations have to be keep simple since these UI elements are so information heavy.
</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/3-Radio/Radio.mp4" type="video/mp4">
</video>
</div>
<div class="checkbox">
<h2>Checkbox</h2>
<p>Based on the character Darkseid, his Omega beams had great potential to be used as a hover state. His
logo was also simple and a similar color to Cyborg’s, that it group these elements with each other
nicely.</p>
<p>The states and animations were kept simple since these UI elements are also really information heavy.
</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/3-Radio/Checkbox.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="InteractionSection Toolbar">
<h2 class="tool1">Toolbar</h2>
<p>Based on the characters from the Green Lanturn series, each icon represents one of the lanturn corps.
Text was placed under the icons to make it easier to understand where each icon will lead the user.</p>
<p>In hindsight, the icons might have been too unusual which may make it harder for the user to navigate.
</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/3-Radio/Toolbar.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="InteractionSection Menu">
<div class="menu1">
<h2>Menu</h2>
<p>Since this will be information heavy, I wanted to keep the design simple and subtle. The only thing that
will be embellished is the hover states.</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/4-Menu/AnthonyHo-Menu.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="InteractionSection BigButton">
<div class="bigBUtton1">
<h2>Big Button</h2>
<p>The big button will be similar to the basic button at the start for consistency purposes. I wanted it to
act as the gateway to DC Comic world.</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/5-BigButton/AnthonyHo-BigButton.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="InteractionSection Progress_Wait">
<div>
<h2 class="progress">Progress Bar</h2>
<p>Based on the character Flash, the progress bar shows the character running to get to the Speed Force. To
indicate the progress bar speeding up or slowing down, the character will change how he runs.</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/6-Wait/Anthonyho-Progress.mp4" type="video/mp4">
</video>
</div>
<div class="wait">
<h2 class="wait1">Wait Indicator</h2>
<p>Using the current DC logo, the Wait indicator takes inspiration from comic’s use of halftones. By combing
that idea with an LED design, it keeps the indicator simple enough to not be too distracting but also
interesting enough to notice.</p>
<p>The logo was used to enforce the branding since the wait indicator will be used a lot through out the UI.
</p>
<video id="videoplayer" width="1920" height="1080" controls loop autoplay muted>
<source src="VID/6-Wait/AnthonyHo-Wait.mp4" type="video/mp4">
</video>
</div>
</div>
<!-- -------------------------------Thanks--------------------------------->
<hr>
<h1 class="Thanks">Thanks for checking out my work!</h1>
<!-- -------------------footer------------------ -->
<footer>
<p>Anthony Ho</p>
<p>New Media Design</p>
</footer>
</body>
</html>