-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathS.html
More file actions
390 lines (322 loc) · 17.2 KB
/
S.html
File metadata and controls
390 lines (322 loc) · 17.2 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
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
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shelf</title>
<link rel="stylesheet" href="CaseStudy.css">
<link rel="icon" href="favicon.webp" type="image/webp">
<meta name="theme-color" content="#c4e8ef">
</head>
<body>
<div class="background" style="background: linear-gradient(to bottom, #c4e8ef, #A1BDD1);"></div>
<style>
.box-title {
color: #226a6b;
}
</style>
<main class="main-container">
<div class="footer">
<div class="sidebar" style="background: rgba(42, 93, 113, 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/S.webp');"></div>
<div class="icon-title">Shelf</div>
<div class="main-title">A new frontier of<br>self expression.</div>
<img src="Im/S-Key.webp" class="key-image">
<div class="main-title">Furniture for your Mind.</div>
<div class="main-text">Shelf seamlessly integrates your content with the software that organizes it. Navigate effortlessly by swiping through spaces or tapping through tunnels. Experience your ideas, mood boards, and late-night musings in vivid color and exciting new forms. And in a spatial computer, just reach for the note you're looking for.</div>
<div class="light-text">In Development</div>
<div class="subtitle">Research</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Introduction</div>
<div class="small-text">
Jotting down notes and keeping photos on iPhone isn't hard or time consuming. But it does feel aesthetically unthoughtful.<br><br>
Our home walls hold our memories and say so much about us—yet our virtual spaces remain sterile and cold.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">In a Nutshell</div>
<div class="small-text">
Shelf brings personality and color to organizing your digital life.<br><br>
It makes organizing your thoughts an exciting new experience—inspired by the very walls of our homes.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">A Minecraft Chest</div>
<div class="small-text">
This case is an exploration of organized clutter.<br><br>
I wanted it to feel as capable, fun, and timeless as chests in Minecraft.<br><br>
For those who haven't played, I wanted a place designed to take inventory of your digital artifacts, notes, photos, or voice memos, and encourage organization styles beyond the simple list view.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Iconography</div>
<div class="small-text">
I studied iconic representations of software tools, all the way from MacPaint to macOS Sonoma.<br><br>
Dozens of iterations distilled artifacts down to their essence—all personalized with just two colors.<br><br>
Shelf's financial model is designed around artifact skins, with unqiue, yearly updates that reimagine how items are represented and function.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Introspection</div>
<div class="small-text">
Started as a project into personal journaling, Shelf at its core is made for introspection. <br><br>
The time capsule artifact, for example, locks away items with time. This encourages one to leave notes for their future self—a reminder of how far they've come.<br><br>
And tunnels help create organized labrynths of self-expression, getting darker and more limited as you progress deeper into a space, encouraging more thoughtful use.
</div>
</div>
</div>
<div class="subtitle">Shelf</div>
<div class="box-row">
<div class="box">
<div class="box-title">Spaces</div>
<div class="focus-row">
<div class="focus-text">A new kind of note taker.</div>
<img src="Im/S-Cover.webp" class="iPhone">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Items</div>
<div class="focus-column">
<div class="focus-text-center">Filled with your mind.</div>
<img src="Im/S4-Items.webp" class="Evolution" style="margin-bottom: 0%; margin-top:0px;">
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Design</div>
<div class="small-text">
Inspired by the beauty and simplicity of shelves in our homes, Shelf feels familiar yet utterly unique. Its smooth, rounded edges and brilliant color invite you rethink, reshape, and reorganize.<br><br>
This is notes elevated to an art form—a powerful intersection of form and medium. A place that is actually a part of creative conversation.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">A Sterile Landscape</div>
<div class="small-text">
The most fertile creative spaces feel alive—walls painted in vibrant hues, shelves packed with inspirations, people, memories. There's energy in the air. Yet so many of our digital spaces feel cold and sterile by comparison.<br><br>
I envisioned something different. A space with personality. Color with purpose. Objects placed with intention, that live on their own.
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Magic Cabinet</div>
<div class="focus-row">
<div class="focus-text">Add anything.</div>
<img src="Im/S2-Add.webp" class="iPhone-2">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Tunnels</div>
<div class="focus-column">
<div class="focus-text-center">With room to grow.</div>
<img src="Im/S4-Tunnels.webp" class="Evolution" style="margin-top:0px;">
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Magic Cabinet</div>
<div class="small-text">
Magic Cabinet makes trying out new colors a breeze. And because it's built into every shelf, it can add items as fast as you think of them.<br><br>
As your shelves overflow, excess items waterfall gently into the cabinet for safekeeping. Or use it to move many items between shelf spaces.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Tunnels</div>
<div class="small-text">
Imagine shelves that expand infinitely, tunneling deeper in any direction you desire. Tunnels add more space as your needs and collections grow.<br><br>
Lighting becomes more intimate, improving your sense of focus. And personalized titles help you engage in thoughts buried deep in your mind.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Focus In</div>
<div class="focus-column">
<div class="focus-text-center">A gorgeous viewing experience.</div>
<img src="Im/S-View.webp" class="iPhone-3">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Time Capsules</div>
<div class="focus-row">
<div class="focus-text">Lock away things with time.</div>
<img src="Im/S-Search.webp" class="iPhone">
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Artifact Viewing</div>
<div class="small-text">
Recall those moments of discovery—a seashell pulled from the sand, its ridges and swirls illuminated in your hand. I sought to recreate that tactile joy, that focused fascination, in a digital space.<br><br>
They adapt to your aesthetic, only needing the two primary colors from your shelf space.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Time Capsules</div>
<div class="small-text">
What if we kept up a tradition of patience and anticipation? In times past, people buried collections in the earth—to be unearthed years later, when we had grown far from where we began.<br><br>
With Time Capsules, securely seal pieces of you away in indestructable letters, for days, weeks, months or even seasons. Just set your duration, let anticipation build, and give future you a portal into the past.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Make it Yours</div>
<div class="focus-row">
<div class="focus-text">Color code your creativity.</div>
<img src="Im/S-6.webp" class="iPhone-6" style="margin-left: -7%;">
</div>
</div>
</div>
<div class="subtitle">Dreaming in VisionOS</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Make it Yours</div>
<div class="focus-column">
<img src="Im/SV-Home.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Tunnels</div>
<div class="focus-column">
<img src="Im/SV-Tunnels.webp" class="Full">
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Exploring digital interaction</div>
<div class="small-text">
Could Shelf decorate our homes? With the right scale and customization, it just might.<br><br>
What if you could write a hand written letter on a desk and walk it over to its right place? Could you just rip up a note to delete it? What if when you put your ear to a voice memo, it starts to play? Welcome to spatial computing.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Organize in new ways</div>
<div class="small-text">
Could you knock over a shelf in purposeful frustration?<br><br>
Maybe you pick up a fallen artifact out of the pile, turning it over in your hands, studying its content. Then place it back on a shelf, just like cleaning your room.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title" style="color: white;">Magic Cabinet</div>
<div class="focus-column">
<img src="Im/SV-add.webp" class="Full">
</div>
</div>
</div>
<div class="subtitle">Across the Ecosystem</div>
<div class="box-row">
<div class="box">
<div class="box-title">MacOS</div>
<div class="focus-column">
<div class="focus-text-center">Up to four shelves at once.</div>
<img src="Im/S-Mac.webp" class="Mac">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">iPadOS</div>
<div class="focus-column">
<div class="focus-text-center">Just like Mac.</div>
<img src="Im/Shelf-iPad.webp" class="iPad">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">WatchOS</div>
<div class="focus-column">
<div class="focus-text-center">Shelf on a wrist.</div>
<img src="Im/S-Watch.webp" class="iPhone" style="margin-top: 2%;">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">WatchOS</div>
<div class="focus-column">
<div class="focus-text-center">Match colors to Shelf or your watch band.</div>
<img src="Im/S-Pick.webp" class="iPhone-2" style="margin-top: 0%;">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">WatchOS</div>
<div class="focus-column">
<div class="focus-text-center">Color New Worlds.</div>
<img src="Im/S-ColorNew.webp" class="iPhone-3" style="margin-top: 2%;">
</div>
</div>
</div>
<div class="subtitle">Lessons Learned</div>
<div class="box-row">
<div class="box">
<div class="box-title">Dreams & Iterations</div>
<div class="focus-column">
<img src="Im/S-Dreams.webp" class="Evolution">
</div>
</div>
</div>
<div class="box-row" style="margin-bottom: 84px;">
<div class="box-text">
<div class="box-title">Timeless Design</div>
<div class="small-text">
A lot of time was spent with iconic shapes and timeless mediums, deliberately selecting each curve, material, and shadow. I looked at as many shelves as I could, studying how and why people put things where they do.<br><br>
Shelf's iconic shape was modeled after the Arc de Triomphe. In many ways, I wanted a place that felt enormous yet friendly, an entranceway to discovery and intention.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text" style="width: 100%;">
<div class="box-title">Dream within a dream</div>
<div class="small-text">
The project was born when a friend asked me to dream up a more aesthetic journaling app. I drew the app icon first and simply let the interface creatively emerge out of it.<br><br>
It's almost like a second homescreen. A lot of features, like nesting, color changing, and notetaking are already done quite well elsewhere. But Shelf feels more friendly and approachable than anything I've ever seen. <br><br>
</div>
</div>
</div>
</main>
</body>