-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
92 lines (82 loc) · 5.65 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>What Screens Want</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="container">
<!-- Start of navigation element -->
<header class="site-header">
<div class="logo">
<h1 class="logo-text">
<a href="index.html">Site Logo</a>
</h1>
</div>
<nav>
<ul class="navigation">
<li class="navigation-item"><a href="#design">Design</a></li>
<li class="navigation-item"><a href="#writing">Writing</a></li>
<li class="navigation-item"><a href="#illu">Illo</a></li>
<li class="navigation-item"><a href="#about">About</a></li>
</ul>
</nav>
</header>
<!-- Start of article body -->
<div class="article">
<header Class="splash-graphic">
<div class="splash-graphic-text">
<h1>What<br>Screens<br>Want</h1>
</div>
</header>
<p>
The past two years were a wild chase for answers. I read books, looked at art, listened to my heroes, and sketched out scratchy thoughts of my own to search for any sensible response to a question that had been lodged in my head for months.
</p>
<p>
What does it mean to natively design for <a href="https://en.wikipedia.org/wiki/Screen">screens</a>?
</p>
<p>
I couldn’t get the question out of my head. I tried to find its contours, and just as I thought I had made some progress on a response, a new part of the picture appeared and showed I only had a shadow of an answer. After many failures, I began to see which approaches worked better. The way toward an answer is never what you expect, so I was surprised that mine began with a routine trip to the pharmacy.
</p>
<div class="gradient-moment">
<h2>The<br>Volume<br>of<br>Dancing<br>Light</h2>
</div>
<div class="image-container">
<div class="image-wrapper">
<img class="pill-image" src="images/aspirin.png" alt="Image of Aspirin">
</div>
</div>
<p>
These are <a href="https://en.wikipedia.org/wiki/Aspirin">aspirin pills</a>. I’m not big on medicating, so my aspirin purchase was the first in a long time. When I rattled a few of the pills out of the bottle, I noticed they seemed to be a lot smaller than I remembered.
</p>
<h2 class="heading">Another Section</h2>
<p>
I went online to see what was going on. It seems pharmaceutical companies have been able to make the active drug in aspirin more effective in the past few decades. The tiny aspirin pills are hardly aspirin at all, and the drug’s current version is so potent and physically minuscule that it must be padded with a filler substance to make the pill large enough to pick up and put in your mouth. Literally, you couldn’t grasp it without the padding.
</p>
<p>
When I read that, it occurred to me that we’ve been living through a similar situation with computers. I mean, have you looked at technology recently and taken stock? Things have changed under us. We take it for granted, because the transition was so fast and thorough.
</p>
<h3 class="subheading">Sub Section</h3>
<div class="two-columns">
<div class="left-column">
<img class="caption-image" src="images/1.jpg" alt="Image of a device">
<p class="small-text">Choosing the proper amount of abstraction is tricky, because each user comes to what you’re making with their own amount of experience. Experience gaps are not unique to computing, but I think it matters more here than in many other situations.</p>
</div>
<div class="right-column">
<img class="caption-image" src="images/2.jpg" alt="Person in front of a computer">
<p class="small-text">Computers, after all, are just shaky towers of nested abstractions: from the code that tells them what to do, to the interfaces that suggest to the user what’s possible to do with them. </p>
</div>
</div>
<p>The best way to understand why is to look at the differences between your hands and your brain. Your hands can’t change size, but your mind can: if you’re paying attention, your brain becomes more keen to experiences over time. So while the size of an aspirin pill is constrained by your stubby little fingers, your brain can normalize the patterns of an interface and make way for more nuanced abstractions. With enough time and exposure, a user can shed the padding and metaphors that become dead weight, like taking the training wheels off a bike.</p>
<p>We’ve been living through that shedding process, and the interfaces of iOS 7 and Windows Metro suggest the keenness of our minds and our adeptness at navigating interfaces. Like them or not, Metro and iOS7 are major touchstones in our relationship to computing, because they signify that we’re beginning to accept a flexible medium on its own terms.</p>
<div class="image-background">
<p class="image-background-caption">Do you want to experience the excitement of standing on the launch pad beneath NASA’s massive new rocket, the Space Launch System? The “NASA SLS VR Experience” is a free, virtual reality software program that is available for anyone with an Oculus Rift to download.</p>
</div>
<p>But it’s not the first time we’ve done this. Let’s go back 35 years.</p>
</div>
</div>
<!-- End of article body, start of footer -->
<script src="js/main.js"></script>
</body>
</html>