A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 57KB

4 jaren geleden
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>iPhone Killer: The Secret History of the Apple Watch (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.wired.com/2015/04/the-apple-watch/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. iPhone Killer: The Secret History of the Apple Watch (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.wired.com/2015/04/the-apple-watch/">Source originale du contenu</a></h3>
  445. <section>
  446. <span data-chapter="1" data-js="chapter" class="chapter" id="chapter-1"></span>
  447. <p class="dek"><span class="lede">In early 2013</span>, Kevin Lynch accepted a job offer from Apple. Funny thing about the offer: It didn’t say what he would be doing. So intense is Apple’s secrecy that all Lynch knew was his vague title, vice president of technology, and that he’d be working on something completely new. ¶ It was odd that Apple even offered him a job. During his eight years at Adobe, most recently as chief technology officer, he was best known as the only person dumb enough to publicly fight Steve Jobs over the iPhone’s lack of support for Flash videos. When Lynch announced his move, the reaction was immediate: They want <em>this guy</em>? Apple blogger John Gruber called Lynch “a bozo, a bad hire.”</p>
  448. <div data-js='fader' class="inset carve fader inset-image render-layer left fader">
  449. <img src="http://www.wired.com/wp-content/uploads/2015/04/kevin_400.jpg">
  450. <p class="caption marg-b-med">
  451. Kevin Lynch was responsible for turning the Watch from an idea into a product. <span class="credit">
  452. <img class="photo" src="/wp-content/themes/wired/assets/images/gallery-cam@2x.png"> Riccardo Vecchio </span>
  453. </p>
  454. </div>
  455. <p>Lynch had a lot to prove—and, apparently, a lot to do. When he showed up at 1 Infinite Loop on his first day, he was instructed to skip the usual new-employee orientation. His boss at the time, hardware czar Bob Mansfield, said to head straight to the design studio and get to work. He could learn about his 401(k) later.</p>
  456. <p>As soon as he walked into the studio, he found out the project he’d been hired to run was already on deadline. In fact, it was behind schedule. There was a design review in two days, he was told, with the Apple brass. Lynch had better be ready.</p>
  457. <p>There were no working prototypes; there was no software. There were just experiments—the iPod crew had made something with a click wheel—and lots of ideas. The expectations, however, were clear: Apple’s senior vice president of design, Jony Ive, had tasked them with creating a revolutionary device that could be worn on the wrist.</p>
  458. <p>It was either hubris or an entirely justifiable expectation. Or both. After all, over the past 15 years, Apple has upended three major categories of consumer electronics and, in the process, become the most valuable company on Earth. There were MP3 players before the iPod, but Apple made you want one. The iPhone transformed the smartphone from business gear into pop culture. The iPad brought tablets in from the fringes, blowing past years of work by the likes of Nokia and Microsoft. For its fourth act, Apple chose a watch. This was to be the next step in a dynasty—the first without the guidance of Steve Jobs. Expectations and scrutiny would be impossibly high; the watch had to be, in the company’s parlance, insanely great.</p>
  459. <p>No pressure, Kevin.</p>
  460. </div>
  461. </section>
  462. <section id="section-1427740599724" class="big-marg-t-50 med-marg-t-50 sm-marg-t-50 mob-marg-t-25 row relative builder-section-image parallax bg-black " data-js='parallaxRow'>
  463. <img class='render-layer' id="image-1761382" data-js='parallaxTarget' data-width="2880" data-height="1800" src="http://www.wired.com/wp-content/uploads/2015/04/FINAL_150331_Gold-and-Black-2_v12RGB-BlackBG_JMO_W-EH1.jpg" />
  464. <div class="hide">
  465. <img src="https://www.wired.com/wp-content/plugins/feature-story-builder/builder-frontend/assets/images/arrow.png"/>
  466. <span>SCROLL DOWN</span>
  467. </div>
  468. </section>
  469. <section id="section-1427741131616" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-image builder-section-text builder-section-next-gallery builder-text-columns-1">
  470. <div class='exchange fsb-content'>
  471. <span data-chapter="2" data-js="chapter" class="chapter" id="chapter-2"></span>
  472. <p class="dek"><span class="lede">Apple decided to</span> make a watch and only then set out to discover what it might be good for (besides, you know, displaying the time). “There was a sense that technology was going to move onto the body,” says Alan Dye, who runs Apple’s human interface group. “We felt like the natural place, the place that had historical relevance and significance, was the wrist.”</p>
  473. <div data-js='fader' class="inset carve fader inset-image render-layer right fader">
  474. <img src="http://www.wired.com/wp-content/uploads/2015/04/alan_400.jpg">
  475. <p class="caption marg-b-med">
  476. Alan Dye is the designer in charge of how we interact with Apple devices. <span class="credit">
  477. <img class="photo" src="/wp-content/themes/wired/assets/images/gallery-cam@2x.png"> Riccardo Vecchio </span>
  478. </p>
  479. </div>
  480. <p>The purpose of the wrist-mounted technology, what problems it might solve—that was something the Watch team would come up with slowly, during the process of inventing a bunch of new ways to interact with the device. But one thing was clear from the start: The Watch would succeed or fail on the strength of what’s prosaically called the user interface. The interface would determine whether the Watch ended up displayed in a dozen museums or remembered as Apple’s biggest flop since the Newton.</p>
  481. <p>That’s where Alan Dye comes in. As chief of Apple’s human interface group, he’s in charge of creating the ways you tell your device what to do and how that device responds. Those cool little experiences you have with your laptop and phone and tablet, like when the app icons quiver because they’re ready to move around your screen? That’s the human interface team. </p>
  482. <p>A graphic designer by training, Dye is much more Burberry than BlackBerry: With his hair swept deliberately to the left and a Japanese pen clipped to the inside of his gingham shirt just so, he’s clearly not leaving any details to chance. He came to Apple in 2006 with a résumé that included stints as design director at fashion house Kate Spade and as a heavy hitter at Ogilvy &amp; Mather doing branding work for the likes of Miller and Levi’s. After working in Apple’s marketing division, helping design the company&#8217;s now-iconic product boxes, Dye was handed the reins to the human interface group. </p>
  483. <p>Ive began dreaming about an Apple watch just after CEO Steve Jobs’ death in October 2011. He soon brought the idea to Dye and a small group of others in the design studio. At the time, they were in the midst of a marathon push to overhaul Apple’s mobile operating system. “We were literally living in the design studio,” Dye says, “a small group of us, working on iOS 7.” The seventh iteration of the iPhone’s operating system, iOS 7 was much more than a redesign of smartphone and tablet software: It was an inflection point at the company, marking the ascendance of Jony Ive to the throne atop all Apple design. Dye and the human interface crew had to rethink every interaction, every animation, every function.</p>
  484. </div>
  485. </section>
  486. <section id="section-1427741281874" class="big-marg-t-50 med-marg-t-50 sm-marg-t-50 big-marg-b-50 med-marg-b-50 sm-marg-b-50 no-marg-sm relative bg-white builder-section builder-section-prev-text builder-section-gallery builder-section-next-text builder-gallery-columns-1">
  487. <div class="center fsb-content full">
  488. <div id="f-gallery" class="wired-gallery overflow-hide flex-box justify-c align-m" data-js="fGallery" data-gallery='slideshow|fullscreen' data-ui=fullClose>
  489. <i aria-hidden="true" class="border-darker opacity-5 ui ui-arrow absolute ui-big left hide-mob" data-js="arrow"></i>
  490. <i aria-hidden="true" class="border-darker opacity-5 ui ui-arrow absolute ui-big right hide-mob" data-js="arrow"></i>
  491. <i aria-hidden="true" class="ui ui-close-circ reverse opacity-5 absolute top-25 right-25 hide-mob" data-ui="fullClose"></i>
  492. <!-- adding this for mobile swiping -->
  493. <div role='listbox' data-js='gallerySlides'>
  494. <figure data-js="slide" class="slide center active" data-slide-number="1" data-order="0">
  495. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-18-1024x691.jpg">
  496. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  497. <div class="slide-count absolute top-nano left meta" data-js="slideCount">1 / 19</div>
  498. <p><span class="marg-r-sm">The Solar watch face is a beautiful digital sundial, a modern twist on ancient timekeeping methods.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  499. </figcaption>
  500. </figure>
  501. <figure data-js="slide" class="slide center " data-slide-number="2" data-order="1">
  502. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-19-1024x691.jpg">
  503. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  504. <div class="slide-count absolute top-nano left meta" data-js="slideCount">2 / 19</div>
  505. <p><span class="marg-r-sm">A time-lapse illustration of the Solar face, showing the sun’s relationship to where you are on Earth at any time of day.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  506. </figcaption>
  507. </figure>
  508. <figure data-js="slide" class="slide center " data-slide-number="3" data-order="2">
  509. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-20-1024x691.jpg">
  510. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  511. <div class="slide-count absolute top-nano left meta" data-js="slideCount">3 / 19</div>
  512. <p><span class="marg-r-sm">With lots of respect for the iconic 1933 Mickey Mouse watch from Ingersoll, Apple tried to improve upon it.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  513. </figcaption>
  514. </figure>
  515. <figure data-js="slide" class="slide center " data-slide-number="4" data-order="3">
  516. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/150401-AppleWatch_Process_Book_HI_updates3-1024x691.jpg">
  517. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  518. <div class="slide-count absolute top-nano left meta" data-js="slideCount">4 / 19</div>
  519. <p><span class="marg-r-sm">The Watch has four different chronograph faces: three-, six-, 30-, and 60-second timers.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  520. </figcaption>
  521. </figure>
  522. <figure data-js="slide" class="slide center " data-slide-number="5" data-order="4">
  523. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/150401-AppleWatch_Process_Book_HI_updates2-1024x691.jpg">
  524. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  525. <div class="slide-count absolute top-nano left meta" data-js="slideCount">5 / 19</div>
  526. <p><span class="marg-r-sm">Dye was fascinated by the mechanical choreography of a chronograph and how to show that digitally. </span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  527. </figcaption>
  528. </figure>
  529. <figure data-js="slide" class="slide center " data-slide-number="6" data-order="5">
  530. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/150401-AppleWatch_Process_Book_HI_updates1-1024x691.jpg">
  531. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  532. <div class="slide-count absolute top-nano left meta" data-js="slideCount">6 / 19</div>
  533. <p><span class="marg-r-sm">The Watch’s three-second face, designed to look as intricate as a physical chronograph.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  534. </figcaption>
  535. </figure>
  536. <figure data-js="slide" class="slide center " data-slide-number="7" data-order="6">
  537. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/AppleWatch_Process_Book_HI-kwc01-24-2_1440-1024x691.jpg">
  538. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  539. <div class="slide-count absolute top-nano left meta" data-js="slideCount">7 / 19</div>
  540. <p><span class="marg-r-sm">The team designed an entirely new typeface, San Francisco, for the Watch’s tiny screen.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  541. </figcaption>
  542. </figure>
  543. <figure data-js="slide" class="slide center " data-slide-number="8" data-order="7">
  544. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/150401-AppleWatch_Process_Book_HI_updates5-1024x691.jpg">
  545. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  546. <div class="slide-count absolute top-nano left meta" data-js="slideCount">8 / 19</div>
  547. <p><span class="marg-r-sm">The new font’s job is to show a lot of text really small and a little bit of text very beautifully.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  548. </figcaption>
  549. </figure>
  550. <figure data-js="slide" class="slide center " data-slide-number="9" data-order="8">
  551. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/AppleWatch_Process_Book_HI-kwc01-27b-2_1440-1024x691.jpg">
  552. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  553. <div class="slide-count absolute top-nano left meta" data-js="slideCount">9 / 19</div>
  554. <p><span class="marg-r-sm">The Watch&#8217;s complications reference a watchmaking term for any function beyond hour and minute. </span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  555. </figcaption>
  556. </figure>
  557. <figure data-js="slide" class="slide center " data-slide-number="10" data-order="9">
  558. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/150401-AppleWatch_Process_Book_HI_updates6-1024x691.jpg">
  559. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  560. <div class="slide-count absolute top-nano left meta" data-js="slideCount">10 / 19</div>
  561. <p><span class="marg-r-sm">A complication can be anything that’s quickly digestible. It doesn’t just have to be the date or the weather.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  562. </figcaption>
  563. </figure>
  564. <figure data-js="slide" class="slide center " data-slide-number="11" data-order="10">
  565. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/04/Rose_gold_certificate-2_1440-1024x691.jpg">
  566. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  567. <div class="slide-count absolute top-nano left meta" data-js="slideCount">11 / 19</div>
  568. <p><span class="marg-r-sm">When you first pair your Watch with your phone, you see a unique certificate of authenticity. </span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  569. </figcaption>
  570. </figure>
  571. <figure data-js="slide" class="slide center " data-slide-number="12" data-order="11">
  572. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-31-1024x691.jpg">
  573. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  574. <div class="slide-count absolute top-nano left meta" data-js="slideCount">12 / 19</div>
  575. <p><span class="marg-r-sm">You can use your Watch to send a tap or a heartbeat to someone else’s. This is what they&#8217;ll see on the screen.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  576. </figcaption>
  577. </figure>
  578. <figure data-js="slide" class="slide center " data-slide-number="13" data-order="12">
  579. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-32-1024x691.jpg">
  580. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  581. <div class="slide-count absolute top-nano left meta" data-js="slideCount">13 / 19</div>
  582. <p><span class="marg-r-sm">Siri works the same but looks different on the Watch, her trademark sound waves made more visible.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  583. </figcaption>
  584. </figure>
  585. <figure data-js="slide" class="slide center " data-slide-number="14" data-order="13">
  586. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-33-1024x691.jpg">
  587. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  588. <div class="slide-count absolute top-nano left meta" data-js="slideCount">14 / 19</div>
  589. <p><span class="marg-r-sm">The human interface team tried to come up with as many different ways as possible of displaying your activity. </span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  590. </figcaption>
  591. </figure>
  592. <figure data-js="slide" class="slide center " data-slide-number="15" data-order="14">
  593. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-34-1024x691.jpg">
  594. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  595. <div class="slide-count absolute top-nano left meta" data-js="slideCount">15 / 19</div>
  596. <p><span class="marg-r-sm">The goal was to elicit a visceral reaction when you finally hit your activity goals and complete the circle.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  597. </figcaption>
  598. </figure>
  599. <figure data-js="slide" class="slide center " data-slide-number="16" data-order="15">
  600. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-35-1024x691.jpg">
  601. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  602. <div class="slide-count absolute top-nano left meta" data-js="slideCount">16 / 19</div>
  603. <p><span class="marg-r-sm">It has become normal for Apple employees to randomly stand during meetings because their Watch told them to.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  604. </figcaption>
  605. </figure>
  606. <figure data-js="slide" class="slide center " data-slide-number="17" data-order="16">
  607. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-36-1024x691.jpg">
  608. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  609. <div class="slide-count absolute top-nano left meta" data-js="slideCount">17 / 19</div>
  610. <p><span class="marg-r-sm">You can earn virtual medals by achieving fitness goals for days, weeks, or months in a row.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  611. </figcaption>
  612. </figure>
  613. <figure data-js="slide" class="slide center " data-slide-number="18" data-order="17">
  614. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-37-1024x691.jpg">
  615. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  616. <div class="slide-count absolute top-nano left meta" data-js="slideCount">18 / 19</div>
  617. <p><span class="marg-r-sm">The Watch’s fitness medals are intentionally made to look like ornate Olympic medals. </span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  618. </figcaption>
  619. </figure>
  620. <figure data-js="slide" class="slide center " data-slide-number="19" data-order="18">
  621. <img class="center" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-38-1024x691.jpg">
  622. <figcaption class="relative center marg-t-med marg-b-med mob-pad-l-50 pad-l-huge right bottom left link-underline-sm opacity-0">
  623. <div class="slide-count absolute top-nano left meta" data-js="slideCount">19 / 19</div>
  624. <p><span class="marg-r-sm">Since you can&#8217;t type on the Watch, the team came up with other ways to communicate: lots of animated emoji.</span><span class="credit"><span class="ui-illo inline-block ui-credit relative opacity-5 marg-r-micro reverse"></span> Apple</span></p>
  625. </figcaption>
  626. </figure>
  627. </div>
  628. </div>
  629. <div id="f-launch" data-js='fLaunch'>
  630. <img height="437" src="http://www.wired.com/wp-content/uploads/2015/03/AppleWatch_Process_Book_HI-kwc01-38-1024x691.jpg">
  631. <div id='launch-gallery' class='bg-white absolute bottom-med left-med flex-box align-m'>
  632. <i class='ui ui-full opacity-5 marg-r-sm'>
  633. <span class='visually-hidden'>Launch Slideshow</span>
  634. </i>
  635. <span id='launch-txt' class='meta'>Launch Slideshow</span>
  636. </div>
  637. <div class='absolute top right left bottom flex-box justify-c align-m loading' data-js='loadingGallery'>
  638. <i class="ui ui-loading">
  639. <span class='visually-hidden'>Loading</span>
  640. </i>
  641. </div>
  642. </div>
  643. </div>
  644. </section>
  645. <section id="section-1427741687435" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-gallery builder-section-text builder-section-next-image builder-text-columns-1">
  646. <div class='exchange fsb-content'>
  647. <p><em>Saturday Night Live</em> producer Lorne Michaels famously encourages his staff to work crazy hours because, he maintains, people tend to be most creative and most fearless when they’re deliriously tired. So it went in the Apple design studio: As the team worked away on app-launch animations and the new iOS 7 Control Center, daytime conversations about smartphone software led to late-night discussions about other devices. Questions started coalescing around the idea of a watch: What could it add to people’s lives? What new things could you do with a device that you wear? Around this time, Ive began a deep investigation of horology, studying how reading the position of the sun evolved into clocks, which evolved into watches. Horology became an obsession. That obsession became a product. </p>
  648. <p data-js='fader' class="pullquote marg-b-50 carve fader ">&#8220;We didn&#8217;t want to have three variations, we wanted to have millions of variations. Through hardware and software, we could do that.&#8221;</p>
  649. <p>Along the way, the Apple team landed upon the Watch’s raison d’être. It came down to this: Your phone is ruining your life. Like the rest of us, Ive, Lynch, Dye, and everyone at Apple are subject to the tyranny of the buzz—the constant checking, the long list of nagging notifications. “We’re so connected, kind of ever-presently, with technology now,” Lynch says. “People are carrying their phones with them and looking at the screen so much.” They’ve glared down their noses at those who bury themselves in their phones at the dinner table and then absentmindedly thrust hands into their own pockets at every ding or buzz. “People want that level of engagement,” Lynch says. “But how do we provide it in a way that’s a little more human, a little more in the moment when you’re with somebody?” </p>
  650. <p>Our phones have become invasive. But what if you could engineer a reverse state of being? What if you could make a device that you wouldn’t—couldn’t—use for hours at a time? What if you could create a device that could filter out all the bullshit and instead only serve you truly important information? You could change modern life. And so after three-plus decades of building devices that grab and hold our attention—the longer the better—Apple has decided that the way forward is to fight back. </p>
  651. <p>Apple, in large part, created our problem. And it thinks it can fix it with a square slab of metal and a Milanese loop strap.</p>
  652. </div>
  653. </section>
  654. <section id="section-1427741878516" class="big-marg-t-50 med-marg-t-50 sm-marg-t-50 mob-marg-t-25 row relative builder-section-image parallax bg-black " data-js='parallaxRow'>
  655. <img class='render-layer' id="image-1761383" data-js='parallaxTarget' data-width="2880" data-height="1800" src="http://www.wired.com/wp-content/uploads/2015/04/FINAL_150331_White__v12RGB-BlackBG_JMO_W-EH1.jpg" />
  656. <div class="hide">
  657. <img src="https://www.wired.com/wp-content/plugins/feature-story-builder/builder-frontend/assets/images/arrow.png"/>
  658. <span>SCROLL DOWN</span>
  659. </div>
  660. </section>
  661. <section id="section-1427741904715" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-image builder-section-text builder-section-next-ad builder-text-columns-1">
  662. <div class='exchange fsb-content'>
  663. <p><span data-chapter="3" data-js="chapter" class="chapter" id="chapter-3"></span><br />
  664. <p class="dek"><span class="lede">The goal was</span> to free people from their phones, so it is perhaps ironic that the first working Watch prototype was an iPhone rigged with a Velcro strap. “A very nicely designed Velcro strap,” Lynch is careful to add.</p>
  665. <p>The team built a simulator that displayed a life-size image of an Apple Watch on the screen. Software was moving much more quickly than hardware, and the team needed a way to test how it worked on your wrist. There was even an onscreen digital crown—a facsimile of a watch’s classic knob—that you could swipe to spin, but it hardly replicated the feeling of twisting a real crown. Swiping, after all, is what the knob was supposed to replace. So they made a custom dongle, an actual watch crown that plugged into the bottom of the phone through the cord jack. In a sense the first true Apple Watch prototype was, like 10,000 Kickstarter projects, just a weird iPhone case with a strange accessory sticking out of it. </p>
  666. <p>Clumsy prototype in hand—well, on wrist—the Watch team could start testing some of the core functions they hoped the device would take over from the phone. Figuring out how to send a text was illuminating. Initially the process was a lot like texting on an iPhone: addressee here, message here, confirm message. Tap to send. “It was all very understandable, but using it took way too long,” Lynch says. Also, it hurt. Seriously: Try holding up your arm as if you’re looking at your watch. Now count to 30. It was the opposite of a good user experience. “We didn’t want people walking around and doing that,” Dye says.</p>
  667. </div>
  668. </section>
  669. <section id="section-1427741925666" class="big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25">
  670. <div class="ad-wrap pad-t-big pad-b-big bg-gray-2">
  671. <div class="advertisement"><div id="mango-1728x90_frame" class="displayAd displayAd728x90Js" data-cb-ad-id="mango-1728x90_frame"></div><div id="mango-1320x50_frame" class="displayAd displayAd320x50Js" data-cb-ad-id="mango-1728x90_frame"></div></div> </div>
  672. </section>
  673. <section id="section-1427741946234" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-ad builder-section-text builder-section-next-image builder-text-columns-1">
  674. <div class='exchange fsb-content'>
  675. <p>So they came up with what they call Quickboard, basically a robot that reads your messages and suggests a handful of possible responses. When your date asks if you want to do Mexican or Chinese for dinner, “Mexican” and “Chinese” automatically show up in the list—tap one and you’ve replied. “We were like, OK, you don’t really need to see another confirmation screen and press another button to send the thing,” Lynch says. “You’re in the moment; just send it.” For more complicated communication, the team equipped the watch with a microphone for dictating a message or command using Siri. Too complex for voice control? At that point, use your phone. </p>
  676. <p>As the testing went on, it became evident that the key to making the Watch work was speed. An interaction could last only five seconds, 10 at most. They simplified some features and took others out entirely because they just couldn’t be done quickly enough. Lynch and team had to reengineer the Watch’s software twice before it was sufficiently fast. An early version of the software served you information in a timeline, flowing chronologically from top to bottom. That idea never made it off campus; the ideas that will ship on April 24 are focused on streamlining the time it takes a user to figure out whether something is worth paying attention to. </p>
  677. <p>Take the feature called Short Look: You feel a pulse on your wrist, which means you’ve just received a text message. You flick your wrist up and see the words “Message from Joe.” If you put your wrist down immediately, the message stays unread and the notification goes away. If you keep your wrist up, the message is displayed on the Watch’s screen. Your level of interest in the information, as demonstrated by your reaction to it, is the only cue the Watch needs to prioritize. It’s interactions like this that the Watch team created to get your face out of your tech.</p>
  678. </div>
  679. </section>
  680. <section id="section-1427741972561" class="big-marg-t-50 med-marg-t-50 sm-marg-t-50 mob-marg-t-25 row relative builder-section-image parallax bg-black " data-js='parallaxRow'>
  681. <img class='render-layer' id="image-1761724" data-js='parallaxTarget' data-width="2880" data-height="1800" src="http://www.wired.com/wp-content/uploads/2015/04/Applewatch2-copy.jpg" />
  682. <div class="hide">
  683. <img src="https://www.wired.com/wp-content/plugins/feature-story-builder/builder-frontend/assets/images/arrow.png"/>
  684. <span>SCROLL DOWN</span>
  685. </div>
  686. </section>
  687. <section id="section-1427742002144" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-image builder-section-text builder-section-next-ad builder-text-columns-1">
  688. <div class='exchange fsb-content'>
  689. <p>And so it went: The team developed notifications that let you see information and take action without opening apps. They built a screen called Glances: a single place for quick hits like sports scores and news. “We rethought the UI,” Lynch says. “We rebuilt the apps—messaging, mail, calendar—more than once, to really get it refined.” </p>
  690. <p>The team had to build software that presented everything you needed without being overwhelming. Fall short of that goal and users might start taking their Watches off, annoyed by the incessant buzzing, at which point the Apple Watch becomes the most personal device you ever bought and then immediately returned. By the time Lynch and his team had finished their third round of software, Ive, Dye, and everyone else believed that they’d nailed the balance. </p>
  691. <p>But if the software was complicated, the hardware was straight-up alien; the human interface team had latched on to the watch’s ability to vibrate on your wrist and was working with engineers to create a new kind of interactivity. The so-called Taptic Engine was designed to feel like a finger tapping on your wrist. Because our bodies are enormously sensitive to taps and buzzes, the Watch can deliver rich information with only slight variations in pace, number, and force of vibrations. One sequence of taps means you’re getting a phone call; a subtly different one means you have a meeting in five minutes. </p>
  692. <p data-js='fader' class="pullquote marg-b-50 carve fader ">One sequence of taps means you&#8217;re getting a phone call. A subtly different sequence means you have a meeting.</p>
  693. <p>Apple tested many prototypes, each with a slightly different feel. “Some were too annoying,” Lynch says. “Some were too subtle; some felt like a bug on your wrist.” When they had the engine dialed in, they started experimenting with a Watch-specific synesthesia, translating specific digital experiences into taps and sounds. What does a tweet <em>feel</em> like? What about an important text? To answer these questions, designers and engineers sampled the sounds of everything from bell clappers and birds to lightsabers and then began to turn sounds into physical sensations.</p>
  694. </div>
  695. </section>
  696. <section id="section-1427742231439" class="big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25">
  697. <div class="ad-wrap pad-t-big pad-b-big bg-gray-2">
  698. <div class="advertisement"><div id="mango-2728x90_frame" class="displayAd displayAd728x90Js" data-cb-ad-id="mango-2728x90_frame"></div><div id="mango-2320x50_frame" class="displayAd displayAd320x50Js" data-cb-ad-id="mango-2728x90_frame"></div></div> </div>
  699. </section>
  700. <section id="section-1427933396922" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-ad builder-section-text builder-section-next-image builder-text-columns-1">
  701. <div class='exchange fsb-content'>
  702. <p>There were weekly meetings where the software and interface teams would test out, say, the sound and feeling of receiving a phone call. Ive was the decider and was hard to please: Too metallic, he’d say. Not organic enough. Getting the sounds and taps to the point where he was happy with them took more than a year. </p>
  703. <p>The taps weren’t the only expression of such maniacal attention to detail. On such a small display, small things assume outsize importance, and the human interface team designed some novel ways of interacting with the device. There’s the digital crown, of course, and also the so-called Force Touch that lets you press a little harder on the screen to access hidden menus. They also designed an entirely new typeface, called San Francisco, which is more readable on a small display than Apple’s standard Helvetica. The letters are more square, Dye says, “but with gentle, curved corners,” mimicking the Watch’s case. It’s wide and legible at small sizes, but when it gets larger the letters tighten up a little more. “We just find it more beautiful,” he adds.</p>
  704. </div>
  705. </section>
  706. <section id="section-1427742061605" class="big-marg-t-50 med-marg-t-50 sm-marg-t-50 mob-marg-t-25 row relative builder-section-image parallax bg-black " data-js='parallaxRow'>
  707. <img class='render-layer' id="image-1761384" data-js='parallaxTarget' data-width="2880" data-height="1800" src="http://www.wired.com/wp-content/uploads/2015/04/FINAL_GoldAngle_v11RGB-BlackBG.jpg" />
  708. <div class="hide">
  709. <img src="https://www.wired.com/wp-content/plugins/feature-story-builder/builder-frontend/assets/images/arrow.png"/>
  710. <span>SCROLL DOWN</span>
  711. </div>
  712. </section>
  713. <section id="section-1427742091052" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-image builder-section-text builder-section-next-ad builder-text-columns-1">
  714. <div class='exchange fsb-content'>
  715. <span data-chapter="4" data-js="chapter" class="chapter" id="chapter-4"></span>
  716. <p class="dek"><span class="lede">Everyone involved with</span> the project seems to take seriously the difficulty of making a machine that people will strap to their arms. But maybe that’s not asking so much: Swiss watch designers do it all the time. Taking cues from them, the Apple team broke away from the company’s long-standing practice of offering a narrow range of options. Instead they made three very different levels of Watch: Sport, Watch, and Edition. The aluminum $349 Sport may perform exactly the same functions as the gold $17,000 Edition, but Dye maintains that they’re very different products.</p>
  717. <p>That’s what he learned from the watch industry: Personalization and beauty are everything, and the only way to get one company’s product onto different people’s wrists is to offer options—sizes, materials, bands—for a wide range of tastes and budgets. “If you’re going to put something on your body and wear it and it’s going to be on your wrist, we can’t <em>not</em> pay attention to that,” Dye says. </p>
  718. <p>Options were central to the plan from the beginning: two sizes, three tiers, easily interchangeable straps, and tons of watch faces and so-called complications, digital add-ons that show relevant information like the weather and your activity level, to make your Watch uniquely yours. (The term <em>complication</em> is a nod to high-end watchmaking and refers to a function a watch performs beyond telling the hour and minute.) “We didn’t want to have three variations, we wanted to have millions of variations,” Dye says. “Through hardware and software, we could do that.”</p>
  719. </div>
  720. </section>
  721. <section id="section-1427933411266" class="big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25">
  722. <div class="ad-wrap pad-t-big pad-b-big bg-gray-2">
  723. <div class="advertisement"><div id="mango-3728x90_frame" class="displayAd displayAd728x90Js" data-cb-ad-id="mango-3728x90_frame"></div><div id="mango-3320x50_frame" class="displayAd displayAd320x50Js" data-cb-ad-id="mango-3728x90_frame"></div></div> </div>
  724. </section>
  725. <section id="section-1427742251182" class="flex-row justify-c bg-white relative big-pad-t-50 med-pad-t-50 sm-pad-t-50 mob-pad-t-25 big-pad-b-50 med-pad-b-50 sm-pad-b-50 mob-pad-b-25 section builder-section-prev-ad builder-section-text builder-section-next-footer builder-text-columns-1">
  726. <div class='exchange fsb-content'>
  727. <span data-chapter="5" data-js="chapter" class="chapter" id="chapter-5"></span>
  728. <p class="dek"><span class="lede">With the Watch</span>, Apple takes the next logical step toward status as a maker of premium products, even in an era of ubiquitous technology. Because the Watch is more than just a cool way to get notifications and make phone calls: It’s a fashion statement. Now Apple has to persuade users, who are drowning in a sea of commoditized gadgets, that this thing is worth adding to their lives. The stakes are huge: If Apple can establish itself as a company that sells $17,000 watches, it will be positioned to conquer other luxury markets. Like cars.</p>
  729. <p>Ben Bajarin, an analyst at the Silicon Valley–based market research firm Creative Strategies, thinks the company could pull it off. “Apple has the most profitable, high-spend customer base on the planet,” he says. “That’s essentially who watch companies are already trying to sell to: more affluent customers.” The luxury watch industry generates more than $20 billion a year in revenue, money that comes from the same kind of customer already drawn to Apple. And Apple is targeting those people, likely spending more on creating its new Watch than has been spent to make even the most extravagant Patek Philippe.</p>
  730. <p>The business implications are important to Apple, of course, but the problem the Watch aims to solve is legitimately important outside of Cupertino. If the Watch is successful, it could impact our relationship with our devices. Technology distracts us from the things we should pay the most attention to—our friends, moments of awe, a smile from across the room. But maybe a technology can give those moments back. Whether Apple is the company to make that technology is the three-quarters-of-a-trillion-dollar-market-cap question. </p>
  731. <p>Lynch is leaning forward in his chair, telling me about his kids: about how grateful he is to be able to simply glance at his Watch, realize that the latest text message isn’t immediately important, and then go right back to family time; about how that doesn’t feel disruptive to him—or them. </p>
  732. <p>A moment later, he stands up. He has to leave; he owes Dye and Ive an update on something important. In all the time we’ve been talking, he’s never once looked at his phone.<i class="end-bug inline-block marg-l-sm"></i></p>
  733. </div>
  734. </section>
  735. </article>
  736. </section>
  737. <nav id="jumpto">
  738. <p>
  739. <a href="/david/blog/">Accueil du blog</a> |
  740. <a href="http://www.wired.com/2015/04/the-apple-watch/">Source originale</a> |
  741. <a href="/david/stream/2019/">Accueil du flux</a>
  742. </p>
  743. </nav>
  744. <footer>
  745. <div>
  746. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  747. <p>
  748. Bonjour/Hi!
  749. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  750. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  751. </p>
  752. <p>
  753. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  754. </p>
  755. <p>
  756. Voici quelques articles choisis :
  757. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  758. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  759. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  760. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  761. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  762. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  763. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  764. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  765. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  766. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  767. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  768. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  769. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  770. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  771. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  772. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  773. </p>
  774. <p>
  775. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  776. </p>
  777. <p>
  778. Je ne traque pas ta navigation mais mon
  779. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  780. conserve des logs d’accès.
  781. </p>
  782. </div>
  783. </footer>
  784. <script type="text/javascript">
  785. ;(_ => {
  786. const jumper = document.getElementById('jumper')
  787. jumper.addEventListener('click', e => {
  788. e.preventDefault()
  789. const anchor = e.target.getAttribute('href')
  790. const targetEl = document.getElementById(anchor.substring(1))
  791. targetEl.scrollIntoView({behavior: 'smooth'})
  792. })
  793. })()
  794. </script>