-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (193 loc) · 11.5 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
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
<!-- website: Artful Design (http://artful.design/)
author: Ge Wang (http://www.gewang.com/ | http://ccrma.stanford.edu/~ge/) -->
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<!-- HTML head -->
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125238768-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-125238768-1');
</script>
<!-- character set -->
<meta charset="utf-8">
<!-- responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<meta name="keywords" content="Artful Design, Technology in Search of the Sublime,
A MusiComic Manifesto, Ge Wang, Stanford University Press, Stanford University, CCRMA,
ChucK, Ocarina, Smule, Stanford Laptop Orchestra, design, art, computer, music,
technology, aeshetics, philosophy, engineering, ethics, comic book, textbook, education" />
<meta property="og:url" content="https://artful.design/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Artful Design: Technology in Search of the Sublime" />
<meta property="og:description" content="A book about how we shape technology, and how technology shapes us.
It was created in the medium of a full-color, 488-page photo comic." />
<meta property="og:image" content="https://ccrma.stanford.edu/~ge/artfuldesign/images/full/artful-design-full-1u.jpg" />
<meta property="og:image" content="https://ccrma.stanford.edu/~ge/artfuldesign/images/full/artful-design-full-2op.jpg" />
<meta property="og:image" content="https://ccrma.stanford.edu/~ge/artfuldesign/images/book/artful-design-book-1.jpg" />
<meta property="fb:app_id" content="966242223397117" /> <!--default app id-->
<!-- file-specific style and overrides -->
<style>
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-ocarina {
position: relative;
opacity: .95;
background-position: center;
background-size: cover;
}
.bgimg-1 {
background-image: url("images/full/artful-design-full-1op.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/full/artful-design-full-2op.jpg");
min-height: 182%;
}
.bgimg-3 {
background-image: url("images/full/artful-design-full-3op.jpg");
min-height: 100%;
}
.bgimg-ocarina {
background-image: url("images/main/o2-play-11op.jpg");
min-height: 65%;
}
</style>
<!-- include bootstrap CSS file -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- include artful.design CSS file -->
<link rel="stylesheet" type="text/css" href="css/artful-design.css">
<!-- page icons-->
<link rel="apple-touch-icon" sizes="180x180" href="images/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icon/favicon-16x16.png">
<link rel="manifest" href="images/icon/site.webmanifest">
<link rel="mask-icon" href="images/icon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="canonical" href="https://artful.design/" />
<!-- page title -->
<title>Artful Design: Technology in Search of the Sublime — a book by Ge Wang</title>
<!-- header end -->
</head>
<!-- content body -->
<body>
<!--
<center>
<img width="1" src="images/full/artful-design-full-2.jpg">
</center>
-->
<!-- main navbar was: navbar-expand-md -->
<nav class="navbar navbar-light navbar-expand-custom fixed-top d-print justify-content-end">
<!-- BRAND -->
<a class="navbar-brand mr-2" href="./">
<img src="images/title/artful-design-title-logo-b-sm.png" alt="Artful Design logo" style="width:200;">
</a>
<!-- BUY button -->
<a class="btn btn-primary btn-lg" href="buy.html">BOOK</a>
<!-- toggler/collapsibe Button -->
<button class="navbar-toggler ml-auto artful-hamburger" type="button" data-toggle="collapse" id="artful-hamburger" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse flex-grow-1 text-right topnav" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a class="nav-link active" href="./">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="chapters.html">CHAPTERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="author.html">AUTHOR</a>
</li>
<li class="nav-item">
<a class="nav-link" href="teach/">TEACH</a>
</li>
<li class="nav-item">
<a class="nav-link" href="events.html">EVENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tv/">AD:TV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="more.html">MORE...</a>
</li>
</ul>
</div>
</nav>
<!-- end navbar -->
<!-- MAIN SPLASH IMAGE -->
<div class="bgimg-1">
<div class="caption">
<img width="400" class="img-fluid" style="max-width:90%" src="images/title/artful-design-title-full-3.png">
</div>
<div class="caption-sup">
<img width="260" class="img-fluid" style="max-width:90%" src="images/title/sup.png">
</div>
</div>
<!-- TEXT -->
<div class="artful-body-section">
<h3>HOW WE SHAPE TECHNOLOGY — AND HOW TECHNOLOGY SHAPES US</h3>
<p><i>What we make, makes us.</i><!--We make the world we inhabit.--> These words begin <i>Artful Design</i>, a manifesto of how we shape technology, and a meditation on how technology shapes us in turn. Investigating design through the vehicle of music and technology, the book begins with a simple question: What <i>is</i> design? In pursuit of that answer, <i>Artful Design</i> takes the reader on a journey of discovery — of the nature, meaning, and purpose of design in this age of technology, and the many related questions that arise. Why should we design <i>beauty</i> into <i>useful</i> things? What does it mean to design <i>well</i>? To what extent can (and should) the things we engineer embody our <i>values</i> as human beings? Why does design... <i>matter</i>? This book is for anyone who has ever been curious (excited or concerned) about technology — both what it does for us, and what it does <i>to</i> us.</p>
<!-- <p>We make the world we inhabit. <i>Artful Design</i> is a manifesto of how we shape technology, and a meditation on how technology shapes us in turn. Investigating design and technoloygy, art and life, the book begins with a simple question: What <i>is</i> design? — and, what is its nature, meaning, and purpose in this age of technology? Why should we design <i>beauty</i> into <i>useful</i> things? What does it mean to design <i>well</i>? To what extent can (and should) the things we engineer embody our <i>values</i> as humans beings? Why does design... <i>matter</i>? This book is for anyone who has ever been curious (or concerned) about technology — both what it does for us, and what it does <i>to</i> us.</p>-->
</div>
<!-- OCARINA IMAGE -->
<div class="bgimg-ocarina"></div>
<!-- TEXT -->
<div class="artful-body-section">
<h3>A DESIGN MANIFESTO — IN COMIC FORM</h3>
<p><i>Artful Design</i> is meticulously designed in the medium of a full-color <i>photo comic</i> book. It is uncompromising (it requires some thinking) yet accessible (due to its unconventional visual format). A book about "the soul" of design, it is itself an artifact of design.</p>
<p>The world of <i>Artful Design</i> is revealed both conceptually and concretely through the design of tools, toys, games, mobile apps like <i>Ocarina</i>, musical instruments, and social experiences. It contains over 100 principles of artful design, and "design etudes" (i.e., expressive exercises) for the reader to explore and enact in everyday life. Across its eight chapters, the book articulates an overarching practical philosophy of design that seeks to understand us as human beings.</p>
<!--<p>(Yes, it's a supremely nerdy book.)</p>-->
</div>
<!-- IMAGE 2 -->
<div class="bgimg-2"></div>
<!-- TEXT -->
<div class="artful-body-section">
<h3>FROM STANFORD UNIVERSITY PROFESSOR GE WANG</h3>
<p>A Stanford Music professor with a Ph.D. in Computer Science, a designer/engineer/artist hybrid working at the intersections of disciplines, and an accidental entrepreneur (he co-founded Smule), Ge doesn't neatly fit any profile. He designs programming languages for music, instruments and apps (like the award-winning <i>Ocarina</i>) for mobile devices and virtual reality. He directs the Stanford Laptop Orchestra. He loves food. He plays Starcraft (but is still a noob after 20 years). He shoots <i>a lot</i> of photographs. He is a Guggenheim Fellow and has spent three years writing this book. (During this time, he has become good friends with the excellent people of Stanford University Press.) |
<a href="author.html">Learn more about the author</a>.<br><br>
Based on <i>Artful Design</i>, Ge teaches a Stanford Continuing Studies course <a target="_blank" href="dsn100/"><b>DSN</b>100 | Artful Design: How We Shape Technology and How Technology Shapes Us</a> (online and open to all), <a target="_blank" href="think66/"><b>THINK</b>66 | Design that Understands Us</a> (a critical thinking course at Stanford), and <a target="_blank" href="https://ccrma.stanford.edu/courses/256a/"><b>MUSIC</b>256a / <b>CS</b>476a | Music, Computing, Design</a> (a creative design course at Stanford). He also hosts <a target="_blank" href="tv/">Artful Design <b>TV</b></a>, a weekly online series exploring coding, music, critical making with helpings of history and philosophy.</p>
</div>
<!-- IMAGE 3 -->
<div class="bgimg-3">
<div class="caption2">
<img width="300" class="img-fluid" style="max-width:95%" src="images/title/words.png">
</div>
</div>
<!-- TEXT -->
<div class="artful-body-section">
<h3>WHAT WE MAKE, MAKES US.</h3>
<p>The things we design with technology, designs us. We cannot unmake technology. But we <i>can</i> shape it more artfully. No matter your walk of life or what you think about technology or design, this book invites you to venture into a realm where the <i>technological</i> meets the <i>intangible</i>. Welcome to the realm of...</p>
<div>
<center>
<img class="img-fluid mt-3" width="500" style="max-width: 90%" src="images/book/artful-design-book-1.jpg">
</div>
<br>
<center>
<a class="btn btn-primary btn-lg mt-2 mb-2 mr-2" href="buy.html">Buy This Book!</a>
<a class="btn btn-success btn-lg mt-2 mb-2" href="stuff/samples/prelude.pdf">Read the Prelude Now!</a>
</center>
<h3 class="mt-5">AND...</h3>
<p>Check out the book <a href="chapters.html">chapters</a>, learn more about <a href="author.html">the author</a>, see (or set up) upcoming <a href="events.html">book-related talks and performances</a>, tune in to <a href="tv/">Artful Design TV</a>, and <a href="more.html">more</a>. Do you know someone how might be interested in this book? Let them know (or <a href="buy.html">get them this book!</a>)</p>
<p align="center">"Happy explorations — I'll see you in the book."</p>
</div>
<!-- scripts -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script>
$(document).on("click", function(e){
var width = document.body.clientWidth;
var isExpanded = $("#artful-hamburger").attr("aria-expanded");
if( width < 768 && isExpanded === "true" )
{
$("#artful-hamburger").click();
}
});
</script>-->
<!-- content end -->
</body>
</html>