-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathR-2.html
More file actions
141 lines (111 loc) · 5.81 KB
/
R-2.html
File metadata and controls
141 lines (111 loc) · 5.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raums-2</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: #243945;
}
</style>
<main class="main-container">
<div class="footer">
<div class="sidebar" style="background: rgba(36, 57, 69, 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-2</div>
<div class="main-title">No bigger than a coffee maker.</div>
<img src="Im/R2-Key.webp" class="key-image" style="margin-bottom: 2%;">
<div class="main-title">Designed to Fit.</div>
<div class="main-text">Raums-2 brings the same audio visual experience as R-1 to your kitchen, bathroom, or desk. Hear and see recipes on YouTube while cooking. Play music or watch makeup tutorials while getting ready. And give your phone a place to be on your desk.</div>
<div class="light-text">In Development</div>
<div class="subtitle">Design & Purpose</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Introduction</div>
<div class="small-text">
Why smaller? Because space is limited.<br><br>
R-1 is too large to frequenly move from room to room, and it's far too loud for an intimate space, like at a bathroom or desk.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Design</div>
<div class="small-text">
Raums-2 builds upon R-1 in material design, but positions iPhone higher, making viewing video and quick interactions easier.<br><br>
It has a steeper viewing angle built in, with a form factor designed for mobility.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">The Kitchen</div>
<div class="small-text">
Hearing recipe instructions over a frying pan is tough.<br><br>
And repeatedly picking up your phone to squint at subtitles is not ideal.<br><br>
R-2 provides a great place to both hear and see instructions or even watch shows while cooking.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">The Bathroom</div>
<div class="small-text">
Bring high quality audio to your bathroom counter.<br><br>
Watch make-up tutorials at the same height as your face in the mirror.<br><br>
And turn up the volume to listen so music or podcasts over the shower.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">The Desk</div>
<div class="small-text">
Raums-2 fits better on your desk at home.<br><br>
Notifications surface at the height of your eyes, keeping iPhone high enough to keep your hands on your keyboard.<br><br>
Set a pomodoro timer or a playlist, and just get to work.
</div>
</div>
</div>
<div class="subtitle">Raums-2 Prototype Currently Being Constructed</div>
<div class="box-row" style="margin-bottom: 84px;">
<div class="box-text">
<div class="box-title">Prototyping Use Cases</div>
<div class="small-text">
The design of R-2 looks visually striking, but it struggles to find a firm use case.<br><br>
It's existence and purpose is significantly exploratory, helping me learn how to build on a smaller scale and think through usability issues which require updates to design.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Material</div>
<div class="small-text">
The thickness, or rather thinness, of wood presents difficulties in construction.<br><br>
R-2's front plate requires thinner plywood to scale R-1's look down. Thinner plywood, while lighter, is harder to cut precicely, and it makes for a more fragile assembly.<br><br>
</div>
</div>
</div>
</main>
</body>