-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathR-1.html
More file actions
244 lines (202 loc) · 10.1 KB
/
R-1.html
File metadata and controls
244 lines (202 loc) · 10.1 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raums-1</title>
<link rel="stylesheet" href="CaseStudy.css">
<link rel="icon" href="favicon.webp" type="image/webp">
<meta name="theme-color" content="#E7E7E7">
</head>
<body>
<div class="background" style="background: linear-gradient(to bottom, #E7E7E7, #D4D4D4);"></div>
<style>
.box-title {
color: #526560;
}
</style>
<main class="main-container">
<div class="footer">
<div class="sidebar" style="background: rgba(82, 101, 96, 0.8);">
<a href="index.html" class="button">
<img src="Im/i-values.webp">
Home
</a>
<a href="work.html" class="button" style="opacity: 1;">
<img src="Im/i-work.webp">
Work
</a>
<a href="about.html" class="button">
<img src="Im/i-about.webp">
About
</a>
<a href="audio.html" class="button">
<img src="Im/i-audio.webp">
Audio
</a>
</div>
</div>
<div class="icon" style="background-image: url('Im/R-Blue.webp');"></div>
<div class="icon-title">The Raums-1</div>
<div class="main-title">The best display is in your pocket.</div>
<img src="Im/R1-Key.webp" class="key-image" style="margin-bottom: -6%;">
<div class="main-title">Designed to blend in.</div>
<div class="main-text">Raums-1 brings the best picture to sound. It's immersive audio, the best alarm clock, an intelligent assistant—everything your iPhone is plus room-filling sound.</div>
<div class="light-text">Made November 2023</div>
<div class="subtitle">Research & Production</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Introduction</div>
<div class="small-text">
This project was undertaken to learn design principles in a physical environment.<br><br>
It creates an audio accessory for Standby, an iOS 17 feature that makes viewing information easy while charging and at a distance.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Production</div>
<div class="small-text">
Everything from wood material, thickness, color, charging method, and connectivity was designed for iPhone.<br><br>
It takes inspiration from the simplicity of Braun radios, delivering a seamless audio visual experience without sacrificing aesthetics.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">StandBy</div>
<div class="small-text">
StandBy's multiple views, from Now Playing and Clock, to Photos and widgets come alive on R-1s warm front plate.<br><br>
StandBy only activates when charging, so R-1 features a MagSafe fast-charger that holds iPhone front and center.<br><br>
And because StandBy adapts to light, it doubles as the perfect place to put your iPhone before bed, helping to reduce nighttime screen time.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Viewing Angle</div>
<div class="small-text">
R-1 features two viewing angles.<br><br>
One parallel with the surface, and another that makes tapping, swiping, and viewing easy when standing.<br><br>
The viewing angle was positions the display and sound toward at your face, featuring a 25 degree angle common amongst other home audio products.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Sound</div>
<div class="small-text">
R-1 features six-inch, two-way drivers, perfect for everyday listening, from music to podcasts.<br><br>
It's compatible with AirPlay and Bluetooth, and uses iPhone microphones when FaceTiming or controlling your home with Siri.<br><br>
Sound is crisp and clear, with an amplifyer that generates enormous, room-filling sound.
</div>
</div>
</div>
<div class="subtitle">Raums-1 Prototype: Construction</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Plywood</div>
<div class="focus-column">
<img src="Im/R1-Ply.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Assembly</div>
<div class="focus-column">
<img src="Im/R1-Assembly.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Glue</div>
<div class="focus-column">
<img src="Im/R1-Glue.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Front View</div>
<div class="focus-column">
<img src="Im/R1-Front.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Sanding</div>
<div class="focus-column">
<img src="Im/R1-Sand.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Test</div>
<div class="focus-column">
<img src="Im/R1-Test.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Fill</div>
<div class="focus-column">
<img src="Im/R1-Fill.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Assembly</div>
<div class="focus-column">
<img src="Im/R1-Assembly2.webp" class="Full">
</div>
</div>
</div>
<div class="subtitle">Raums-1 Prototype</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">In a Room</div>
<div class="focus-column">
<img src="Im/R1-Tame.webp" class="Full">
</div>
</div>
</div>
<div class="subtitle">Lessons Learned</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Take More Photos</div>
<div class="small-text">
The physical environment is much more difficult to capture than digital.<br><br>
Taking product photos is a craft of mine in need of practice. Bad shots hinder understanding process, and you cannot unbuild a prototype like you can in software.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Prototype the Prototype</div>
<div class="small-text">
Hours were spent figuring out the logics of cutting and assembling plywood at an angle.<br><br>
Waste was avoided by roughly assembling pieces right after cuts. This enables updates to design to be made in real time and helps to build a conceptual model of the product before it's complete. <br><br>
</div>
</div>
</div>
<div class="box-row" style="margin-bottom: 84px;">
<div class="box-text">
<div class="box-title">Viewing Angle & FaceID</div>
<div class="small-text">
The viewing angle on R-1 is not steep enough to enable FaceID sensors in iPhone to catch your face.<br><br>
R-2 will thus feature a steeper 35 degree angle, a more optimal angle that better enables interacting with and unlocking iPhone.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Glossy Amplifies Imperfection</div>
<div class="small-text">
R-1 was finished with polyacrylic, a substance that protects the surface of the pain from wear and tear.<br><br>
Even when using non-glossy polyacrylic, there is a glare that makes imperfections more visible. Stick with matte paint without polyacrylic, especially since R-1 is likely to be stationary throughout its lifetime.<br><br>
</div>
</div>
</div>
</main>
</body>