-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·81 lines (77 loc) · 7.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sketching With Code 2016</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" href="./img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./img/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="./manifest.json">
<link rel="mask-icon" href="./img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/normalize.min.css">
<link rel="stylesheet" href="./css/boilerplate.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="fixed-width">
<h1 id="sketching-with-code">Sketching With Code</h1>
<h2 id="neu-arte-5901-04-fall-2016">NEU ARTE 5901.04 – FALL 2016</h2>
<h4 id="-noah-paessel-mailto-n-paessel-neu-edu-399-ryder-hall-https-www-northeastern-edu-campusmap-map-qad7-html-"><a href="mailto:[email protected]">Noah Paessel</a> @ 399 <a href="https://www.northeastern.edu/campusmap/map/qad7.html">Ryder Hall</a></h4>
<h5 id="tuesdays-6-00pm-9-00pm">Tuesdays 6:00pm - 9:00pm</h5>
<h5 id="-slack-https-2016-swc-slack-com-signup-https-2016-swc-slack-com-x-76283814564-76238175267-signup-"><a href="https://2016-swc.slack.com">Slack</a> | <a href="https://2016-swc.slack.com/x-76283814564-76238175267/signup">signup</a></h5>
<h3 id="overview">Overview</h3>
<p>Code sketching is a methodology for quickly exploring visual ideas by writing software. Encoding design decisions in software forces us to consider visual design from a new angle. Designers who learn to enjoy writing code will think differently about their process. Using HTML, CSS, and Javascript students will develop a low-friction design processes that enables rapid prototyping and iteration. Through a series of exercises exploring gestalt principles of design, students will achieve a measure of code fluency and intuition. Students will use computation to explore large parameter spaces, guide stochastic digital mark-making, and generate new visual forms. No prior programming experience is assumed for this studio.</p>
<h3 id="objective">Objective</h3>
<p>Students will leave this course knowing how to use web technologies to quickly publish and refine visual prototypes. They will understand fundamental programming techniques, and be comfortable developing ideas for feedback using HTML, CSS, and Javascript. Students will be able to articulate and defend their aesthetic choices.</p>
<h3 id="weekly-structure">Weekly Structure</h3>
<ul>
<li><code>5:30 – 6:20</code> <strong>Critique & Charette</strong>. Students present work from previous week at the start of the class. Students will critique the formal elements of the design, visual impact, legibility, and context of the work shown. Presenters will explain their intentions and process. Reviewers suggest next steps for strengthening, extending, or rethinking the design.</li>
<li><code>6:20 - 6:30</code> <strong>Show and Tell</strong>. Each week a student will present an artists, musician, or designer who uses code as part of their creative process. Alternatively, a student may present a <em>code sketching tool</em>.</li>
<li><code>6:40 - 7:15</code> <strong>Lecture</strong>. We will discuss key topics from the weekly reading. We will answer questions about the reading material. We will work through any programming exercises, or design concepts together in class.</li>
<li><code>7:15 – 8:00</code> <strong>PS introduction</strong>. I introduce the next problem set. We work together to get started on the next week's design challenges.</li>
<li><code>8:10 - 9:00</code> <strong>Work</strong>. Students work alone or in small groups on the weekly design challenges. This is a great time for students to help each other, or ask me for help.</li>
</ul>
<h3 id="grading-">Grading:</h3>
<p>Students will show continuous improvement in their ability to execute and defend design solutions.</p>
<p>The grading system follows the <a href="http://www.northeastern.edu/registrar/gradingsystem.html">University Policies</a>.</p>
<h5 id="criteria-">Criteria:</h5>
<ul>
<li><strong>70% Project work – presentation, and defense:</strong> We evaluate designs based on clarity, efficiency, originality, and emotional impact. Work should be informed by critical thinking, guided by cognitive principles, and refined on the basis of feedback given in class. The work should communicate on its own, but students must defend the decisions made in their process.</li>
<li><strong>20% class participation:</strong> The studio is a community. Modern design challenges require collaboration and communication. Students should offer respectful and insightful design critique. Students must offer sophisticated and challenging ideas in design charettes. We expect students in this studio to challenge and elevate each other.</li>
<li><strong>10% peer evaluation:</strong> Peer evaluation is meaningful. Students will evaluate each others work. We will account for this evaluation in the grading process.</li>
</ul>
<h5 id="integrity">Integrity</h5>
<p>Students will abide by Northeastern University’s <a href="http://www.northeastern.edu/osccr/academicintegrity/">Academic Integrity Policy</a>.</p>
<h5 id="attendance">Attendance</h5>
<p>Students are expected to attend all classes. Absence for health or personal reasons should be communicated to the lecturer. Tardiness and unexcused absences will impact student grades.</p>
<h3 id="schedule-">Schedule:</h3>
<ul>
<li><a href="./01"><code>01 - 09-13</code></a> : SWC hello & introductions. <em>reading: Handouts</em></li>
<li><a href="./02"><code>02 - 09-20</code></a> : Git, HTML, linking & publishing. <em>reading: EJ.Intro, EJ.12</em></li>
<li><a href="./03"><code>03 - 09-27</code></a> : Advanced CSS, behaviors. <em>reading: EJ.1, EJ.2 </em></li>
<li><a href="./04"><code>04 - 10-04</code></a> : Variables & loops. Canvas. <em>reading: EJ.3</em></li>
<li><a href="./05"><code>05 - 10-11</code></a> : Gestalt principles & JavaScript. <em>reading: Dondis (handout), EJ.13</em></li>
<li><a href="./06"><code>06 - 10-18</code></a> : Interaction with the DOM. Exquisite Corpse <em>reading: EJ.16</em> </li>
<li><a href="./07"><code>07 - 10-25</code></a> : More canvas and interaction . <em>reading: EJ.4</em></li>
<li><a href="./08"><code>08 - 11-01</code></a> : Simulation & emergent behavior <em>reading: EJ.5</em></li>
<li><a href="./09"><code>09 - 11-08</code></a> : Simulation part II and tweening animation. </li>
<li><a href="./10"><code>10 - 11-15</code></a> : SVG & D3 Part I</li>
<li><a href="./11"><code>11 - 11-22</code></a> : D3 part II.</li>
<li><a href="./12"><code>12 - 11-29</code></a> : Libraries & Frameworks: ThreeJS.</li>
<li><a href="./13"><code>13 - 12-06</code></a> : Using API's and foreign data.</li>
<li><code>14 - 12-13</code> : Further reading, other stacks. Final projects.</li>
</ul>
<h4 id="books-">Books:</h4>
<ul>
<li><a href="http://www.amazon.com/Primer-Visual-Literacy-Donis-Dondis/dp/0262540290/ref=sr_1_1?s=books&ie=UTF8&qid=1451940566&sr=1-1&keywords=primer+of+visual+literacy">Primer of Visual Literacy</a> – Dondis</li>
<li><a href="http://eloquentjavascript.net/">Eloquent JavaScript</a> – Haverbeke</li>
</ul>
</div>
</body>
</html>