-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
284 lines (274 loc) · 22.6 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Processes and Workflows: Visual Interaction Design | FA/YSDN 2005 - Fall 2017</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/YSDN2005-F17/assets/css/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/YSDN2005-F17/assets/logos/icon-180.png">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bitter:400,400i,700" rel="stylesheet">
</head>
<body>
<div class="o-wrapper">
<header class="c-site-header u-clearfix">
<div class="o-box">
<p class="c-site-header__logo"><img src="/YSDN2005-F17/assets/logos/yorku-logo.png" alt="York University Logo" width="33" height="33" class="u-margin-right-small"> FA/YSDN 2005 - Fall 2017</p>
</div>
</header>
<div class="o-layout">
<div class="o-layout__item u-1of4-large">
<nav class="c-navigation c-navigation--primary">
<ul class="o-list-bare c-navigation__list">
<li class="c-navigation__item is-selected"><a class="c-navigation__link" href="/YSDN2005-F17/">Home</a></li>
<li class="c-navigation__item "><a class="c-navigation__link" href="/YSDN2005-F17/about-this/">Abouts This Class</a></li>
<li class="c-navigation__item "><a class="c-navigation__link" href="/YSDN2005-F17/projects/project-1/">Project 1</a></li>
<li class="c-navigation__item "><a class="c-navigation__link" href="/YSDN2005-F17/projects/project-2/">Project 2</a></li>
<li class="c-navigation__item "><a class="c-navigation__link" href="/YSDN2005-F17/projects/project-3/">Project 3</a></li>
<li class="c-navigation__item "><a class="c-navigation__link" href="/YSDN2005-F17/exercises/ice/">In-Class Exercises</a></li>
<li class="c-navigation__item "><a class="c-navigation__link" href="/YSDN2005-F17/resources/">Resources</a></li>
<li class="c-navigation__item "><a class="c-navigation__link" href="/YSDN2005-F17/faq/">FAQ</a></li>
</ul>
</nav>
</div>
<div class="o-layout__item u-3of4-large">
<main>
<div class="c-card">
<div class="o-box o-box--giant">
<h1>Processes and Workflows: Visual Interaction Design</h1>
<p><hr><br></p>
<h2 id="week-13-november-30-2017">Week 13 - November 30, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Final submission to all materials;</li>
<li>Podium presentation;</li>
<li>Connect with
Toronto’s Design Community - <a href="https://designx.community/slack/">Design X</a>;</li>
<li>Become a tester at <a href="https://usabilityhub.com">Usability Hub</a> and <a href="https://www.usertesting.com/be-a-user-tester">Usertesting.com</a>.</li>
</ul>
<p><br><br></p>
<h2 id="week-12-november-23-2017">Week 12 - November 23, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Remmember to <a href="projects/project-3/index.html">Usertesting.com Study Metrics submission</a>;</li>
<li>Small group review for <a href="projects/project-3/index.html">Project 3</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Final submission to all materials;</li>
<li>Proposal <em>(Written Component, <a href="http://theuxreview.co.uk/sitemaps-the-beginners-guide/">Application Architecture</a> </em>(inspired by the site map technique) and <a href="../../assets/documents/Introduction_Personas.pdf">Persona</a>)*;</li>
<li><a href="assets/documents/Introduction_Moodboards.pdf">Mood Boards</a> <em>(Option A, Option B)</em>;</li>
<li><a href="assets/documents/Introduction_Wireframes.pdf">Wireframes</a> <em>(Low Fidelity, Mid Fidelity)</em>;</li>
<li>High Fidelity Interactive Prototype <em>(InVision Link)</em>;</li>
<li>User Testing Component <em>(Questions Proposition, Excel File Study Metrics, Take Aways Text Component)</em>;</li>
</ul>
<p><br><br></p>
<h2 id="week-11-november-16-2017">Week 11 - November 16, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Attention, our <a href="https://ysdn2005-f17.slack.com/">Slack Channel</a> is over storage quota. Please delete all large files and switch it to digital locker instead;</li>
<li>Introduction to <a href="projects/project-3/index.html">Peer Reviews</a>;</li>
<li>Introduction to <a href="projects/project-3/index.html">Usertesting.com Submission Process</a>;</li>
<li>Introduction to <a href="projects/project-3/index.html">Post-testing Steps</a>;</li>
<li>Introduction to <a href="projects/project-3/index.html">Take aways writtent component</a>;</li>
<li>Small group review for <a href="projects/project-3/index.html">Project 3</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Full High Fidelity InVision Prototype (The more you do for next week the better is for one last round of feedback before the delivery);</li>
<li>If you have not already done so, you must be in process to submit your questions at your instructor and ultimately on Usertesting.com;</li>
<li>Reading - <a href="https://www.usertesting.com/blog/2013/05/02/9-steps-to-creating-the-perfect-user-test/">9 Steps for Creating the Perfect User Test</a>;</li>
<li>Reading - <a href="https://www.usertesting.com/blog/2013/03/29/what-to-test/">Lessons From An Expert: What to Test</a>;</li>
</ul>
<p><br><br></p>
<h2 id="week-10-november-9-2017">Week 10 - November 9, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Introduction to <a href="projects/project-3/index.html">Usertesting.com</a>;</li>
<li>Create a <a href="projects/project-3/index.html">Usertesting.com account</a> <em> - Make sure you to use the email address on <a href="https://docs.google.com/spreadsheets/d/1KTu5PCKZn68Bg51i-iSnaqaWrQevZqu0J1cgMg6yUCo/edit?usp=sharing">this document</a></em>;</li>
<li>Usertesting.com - <a href="https://info.usertesting.com/EduDemo.html">Watch Tutorial Demo</a>;</li>
<li>Introduction to <a href="projects/project-3/index.html">Questions Strategy for UserTesting</a>;</li>
<li>Introduction to <a href="assets/documents/YSDN2005F17_InformedConsentForm.pdf">Consent Form for Research</a>;</li>
<li>InVision In Class Demo - Various Topic according to each Instructors;</li>
<li>Small group review for <a href="projects/project-3/index.html">Project 3</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>2 High And Robust Contrast <a href="assets/documents/Introduction_Moodboards.pdf">Mood Boards</a>;</li>
<li>First Iteration of <a href="assets/documents/Introduction_HighFidelityMockups.pdf">High Fidelity Mockups</a> Mockups;</li>
<li>First <a href="http://invisionapp.com">InVision</a> prototype <em>(could be done with Mid Fidelity wireframes)</em>;</li>
<li>Usertesting.com - <a href="https://info.usertesting.com/EduDemo.html">Watch Tutorial Demo</a>;</li>
<li>Usertesting.com - Create a questionnaire first draft for validation/approval of your instructor. <strong><span class="underline">Bring a paper copy for instructors signature. Submission to participants will start next week. Do not submit any tests before the agreement of the instructors first</span></strong>;</li>
<li>Usertesting.com - Custom the <a href="assets/documents/YSDN2005F17_InformedConsentForm.pdf">Consent Form <em>PDF</em></a> for your project purpose;</li>
<li>Reading - <a href="http://downloads.usertesting.com/white_papers/UT_Complete-Guide-to-User-Testing.pdf">Usertesting The Guide To Usertesting</a>;</li>
<li>Reading - <a href="http://help.usertesting.com/customer/portal/articles/1680726">Usertesting Best Practices</a>;</li>
<li>Reading - <a href="https://www.nngroup.com/topic/user-testing/">Nielsen Norman Group - User Testing</a>.</li>
</ul>
<p><br></p>
<h2 id="week-9-november-2-2017">Week 9 - November 2, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Introduction to <a href="projects/project-3/index.html">Project 3</a>;</li>
<li>Introduction, Setup and Demo with <a href="https://www.invisionapp.com">InVision</a>;</li>
<li>Revision on <a href="assets/documents/Introduction_Personas.pdf">Personas</a> and <a href="assets/documents/Introduction_Wireframes.pdf">Wireframes</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Project 3 - <a href="projects/project-3/index.html">Proposals</a> (Written component, Persona & Application Architecture);</li>
<li>Project 3 - <a href="projects/project-3/index.html">Low Fidelity & Mid Fidelity Wireframes</a>;</li>
<li>InVision - <a href="https://invisionapp.wistia.com/medias/5daefdvykt">The Classroom tutorial</a>;</li>
<li>InVision - <a href="https://projects.invisionapp.com/d/main#/learn">Learn Tutorials</a> (need to be sign in);</li>
<li>Reading - <a href="https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556">7 rules for mobile UI button design</a>;</li>
<li>Reading - <a href="https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53">Dropdown alternatives for better (mobile) forms</a>;</li>
<li>Reading - <a href="https://uxplanet.org/mobile-design-best-practices-2d16d37ecfe">Mobile Design Best Practices</a>;</li>
<li>Reading - <a href="https://uxplanet.org/mobile-ui-design-basic-types-of-screens-aa1857e31339">Mobile UI Design: Basic Types of Screens</a>;</li>
<li>Watching - <a href="https://www.youtube.com/watch?v=9IjgyPoYbOY&feature=youtu.be&t=6s">Erik Spiekermann: Typomaniac</a>.</li>
</ul>
<h2 id="week-8-october-26-2017">Week 8 - October 26, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>No Class. Reading Week</li>
</ul>
<h2 id="week-7-october-19-2017">Week 7 - October 19, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Small group review of <em>HTML Prototype + All materials</em> from <a href="projects/project-2/index.html">Project 2</a>.</li>
</ul>
<h3 id="due-after-reading-week-nov-2-class-">Due After Reading Week (Nov 2 class)</h3>
<ul>
<li>Project 2 - Fully interactive integrated website with Responsive Framework. Make sure your code is validated.</li>
</ul>
<h2 id="week-6-october-12-2017">Week 6 - October 12, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Collecting All Research Ethics Tutorial Certificate - <a href="http://www.pre.ethics.gc.ca/eng/education/tutorial-didacticiel/">TCPS 2: CORE</a> - <a href="https://docs.google.com/spreadsheets/d/1VFSNRsRYpx7QlVIs9K5sjiEKIB_L8tcuRVeLQJRdDXA/edit#gid=0">Student List Done</a>;</li>
<li>Introduction to <a href="exercises/ice/index.html">In Class Exercise 5</a>;</li>
<li>Small group review of <em>High Fidelity Mockups</em> from <a href="projects/project-2/index.html">Project 2</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Project 2 - Interactive Bootstrap prototype <em>(Homepage + One Inside Page)</em>. Attention, the more you do before reading week, the better is;</li>
<li>Project 2 - High-Fidelity Mockups / Wireframes revisions - all pages <em>(mobile, tablet and desktop)</em>;</li>
<li>Project 2 - Lynda.com Bootstrap 3 <a href="https://www.lynda.com/Bootstrap-tutorials/Understanding-Bootstrap-containers/417641/429427-4.html?autoplay=true">Chapter 8 & 9</a>;</li>
<li>Project 2 - NavBar Bootstrap <a href="https://www.youtube.com/watch?v=k4mYoF0o6ec">Tutorial 1</a>;</li>
<li>Project 2 - NavBar Bootstrap <a href="https://www.youtube.com/watch?v=6Ozf-_v4nGs">Tutorial 2</a>;</li>
<li>Reading - <a href="https://www.smashingmagazine.com/2007/10/splash-pages-do-we-really-need-them/">Splash Pages: Do We Really Need Them?</a>;</li>
</ul>
<h2 id="week-5-october-5-2017">Week 5 - October 5, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Collecting All Research Ethics Tutorial Certificate - <a href="http://www.pre.ethics.gc.ca/eng/education/tutorial-didacticiel/">TCPS 2: CORE</a> - <a href="https://docs.google.com/spreadsheets/d/1VFSNRsRYpx7QlVIs9K5sjiEKIB_L8tcuRVeLQJRdDXA/edit#gid=0">Student List Done</a>;</li>
<li>Introduction to <a href="exercises/ice/index.html">In Class Exercise 4</a>;</li>
<li>Introduction to <a href="assets/documents/Introduction_HighFidelityMockups.pdf">High Fidelity Mockups</a>;</li>
<li>Small group review of <em>Wireframes Mid-Fidelity</em> and <em>Moodboards</em> from <a href="projects/project-2/index.html">Project 2</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Project 2 - <a href="projects/project-2/index.html">High Fidelity Mockups</a>.</li>
</ul>
<h2 id="week-4-september-28-2017">Week 4 - September 28, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Introduction to <a href="exercises/ice/index.html">In Class Exercise 3</a>;</li>
<li>Introduction to <a href="assets/documents/Introduction_Wireframes.pdf">Wireframes Mid-Fidelity</a>;</li>
<li>Introduction to <a href="assets/documents/Introduction_Moodboards.pdf">Mood boards</a>;</li>
<li>Small group review of <em>Personas</em> and <em>Wireframes Low-fidelity</em> from <a href="projects/project-2/index.html">Project 2</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Project 2 - <a href="projects/project-2/index.html">Wireframes Mid-Fidelity</a>;</li>
<li>Project 2 - <a href="projects/project-2/index.html">Mood Boards</a>;</li>
<li>Project 2 - <a href="https://www.lynda.com/Bootstrap-tutorials/Understanding-Bootstrap-containers/417641/429427-4.html?autoplay=true">Lynda.com Bootstrap 3 Chapter 3,4 and 6</a>;</li>
<li>Research Ethics Tutorial Certificate - <a href="http://www.pre.ethics.gc.ca/eng/education/tutorial-didacticiel/">TCPS 2: CORE</a> - <a href="https://docs.google.com/spreadsheets/d/1VFSNRsRYpx7QlVIs9K5sjiEKIB_L8tcuRVeLQJRdDXA/edit#gid=0">Student List Done</a>;</li>
<li>Reading - <a href="https://medium.com/thinking-design/30-ux-design-inspiration-resources-7a65fe9e29a4">Design Inspiration Resources</a>;</li>
<li>Reading - <a href="https://medium.muz.li/fashion-web-design-inspiration-2017-38475464bf49">Fashion Web Design Inspiration</a>;</li>
<li>Reading - <a href="https://medium.springboard.com/the-guide-to-getting-typography-right-in-digital-design-bb61214ff3ad">Getting Typography Right in Digital Design</a>;</li>
<li>Reading - <a href="http://code.makery.ch/library/more-html-css/image-bootstrap/">Images with Bootstrap</a>;</li>
<li>Reading - <a href="https://usabilitygeek.com/mood-boards-ux-design/">Mood Boards In UX Design: Ignite Passion In Your Users</a>;</li>
<li>Reading - <a href="https://medium.muz.li/weekly-inspiration-for-designers-120-d2dfb4e2b083">Weekly Inspiration for Designers</a>;</li>
<li>Reading - <a href="https://medium.com/inspiration-supply/wireframes-by-top-ux-designers-d6922d34ddb8">Wireframes by Top UX Designers</a>;</li>
</ul>
<h2 id="week-3-september-21-2017">Week 3 - September 21, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Introduction to <a href="https://getbootstrap.com/docs/3.3/getting-started/">Bootstrap 3</a>;</li>
<li>Introduction to <a href="exercises/ice/index.html">In Class Exercise 2</a>;</li>
<li>Introduction to <a href="assets/documents/Introduction_Personas.pdf">Personas</a>;</li>
<li>Introduction to <a href="assets/documents/Introduction_Wireframes.pdf">Wireframes (Low Fidelity)</a>;</li>
<li>Introduction to <a href="projects/project-2/index.html">Project 2</a>;</li>
<li>Individual code review of <a href="projects/project-1/index.html">Project 1</a>;</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Project 2 - <a href="projects/project-2/index.html">Proposal (Written Component, Site Map & Personas)</a>;</li>
<li>Project 2 - <a href="projects/project-2/index.html">Wireframes Low Fidelity</a>;</li>
<li>Project 2 - <a href="https://www.lynda.com/Bootstrap-tutorials/Understanding-Bootstrap-containers/417641/429427-4.html?autoplay=true">Lynda.com Bootstap 3 Chapter 2 Working with the Grid</a>;</li>
<li>Research Ethics Tutorial Certificate - <a href="http://www.pre.ethics.gc.ca/eng/education/tutorial-didacticiel/">TCPS 2: CORE</a>;</li>
<li>Reading - <a href="http://theuxreview.co.uk/sitemaps-the-beginners-guide/">Site Maps - The beginners guide</a>;</li>
<li>Reading - <a href="https://blog.marvelapp.com/stop-talking-start-sketching-guide-paper-prototyping/">Stop Talking and Start Sketching: A Guide to Paper Prototyping</a>;</li>
<li>Reading - <a href="https://uxplanet.org/the-art-of-ux-sketching-and-paper-prototyping-5dae5a1efc7d">The art of UX sketching and paper prototyping</a>;</li>
<li>Reading - <a href="https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/">The Skeptic’s Guide To Low-Fidelity Prototyping</a>;</li>
<li>Reading - <a href="https://www.usability.gov/how-to-and-tools/methods/wireframing.html">Wireframing Usability</a>.</li>
</ul>
<p><br></p>
<h2 id="week-2-september-14-2017">Week 2 - September 14, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Introduction to Research Ethics and online tutorial <a href="http://www.pre.ethics.gc.ca/eng/education/tutorial-didacticiel/">TCPS 2: CORE</a>;</li>
<li>Introduction to <a href="assets/documents/Introduction_MediaQueries.pdf">Media Queries</a>;</li>
<li><a href="exercises/ice/index.html">In Class Exercise 1</a>: Responsive web design – continued;</li>
<li>Small group review of grid-based visual compositions for <a href="projects/project-1/index.html">Project 1</a>.</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Project 1 - <a href="projects/project-1/index.html">Functional responsive layouts</a>;</li>
<li>Reading - <a href="https://medium.springboard.com/the-guide-to-getting-typography-right-in-digital-design-bb61214ff3ad">Getting Typography Right in Digital Design</a>;</li>
<li>Reading - <a href="http://learnlayout.com/media-queries.html">Learn Layout - Media Queries</a>;</li>
<li>Reading - <a href="https://alistapart.com/article/responsive-web-design">Responsive Web Design by Ethan Marcotte</a>;</li>
<li>Reading - <a href="https://developers.google.com/web/fundamentals/design-and-ui/responsive/">Responsive Web Design Basics</a>.</li>
</ul>
<p><br></p>
<h2 id="week-1-september-7-2017">Week 1 - September 7, 2017</h2>
<p><br></p>
<h3 id="lectures-and-assignments">Lectures and assignments</h3>
<ul>
<li>Welcome!;</li>
<li>Introduction to the course (<a href="assets/documents/YSDN2005-F17-CourseOutline.pdf">outline</a> | <a href="assets/documents/YSDN2005-F17-CourseSchedule.pdf">schedule</a>);</li>
<li>Accessing Digital Locker (filed under <a href="faq/index.html">FAQs</a> and linking files from Digital Locker to your project and exercise pages;</li>
<li><a href="https://slack.com">Slack</a> account creation and invitation <a href="https://ysdn2005-f17.slack.com/">into our class' group</a>;</li>
<li>HTML and TEXT editors | <a href="https://atom.io/">Atom</a> | <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a> | <a href="http://www.barebones.com/products/bbedit/index.html?utm_source=thedeck&utm_medium=banner&utm_campaign=bbedit">BBEdit</a> | <a href="http://panic.com/coda/">Coda 2</a> | <a href="http://brackets.io/index.html">Brackets</a> | <a href="http://www.sublimetext.com/">Sublime Text 2 (Mac & PC)</a>;</li>
<li>Validating your code: <a href="http://validator.w3.org/">Markup Validation Service</a> | <a href="http://www.w3schools.com/tags/tag_doctype.asp">HTML Document Types</a> (p181) | <a href="http://www.w3.org/International/questions/qa-html-encoding-declarations">Declaring Character Encodings</a> in HTML;</li>
<li>Lecture on <a href="assets/documents/HTML5_Elements.pdf">HTML 5 Elements</a> from <a href="http://www.htmlandcssbook.com/code-samples/chapter-17/">Jon Duckett's HTML & CSS</a> book;</li>
<li>Introduction to <a href="exercises/ice/index.html">In Class Exercise 1</a>;</li>
<li>Introduction to <a href="assets/documents/Introduction_Grids.pdf">Grid-based design</a>;</li>
<li>Introduction to <a href="projects/project-1/index.html">Project 1</a>;</li>
</ul>
<h3 id="due-next-week">Due next week</h3>
<ul>
<li>Reading - <a href="http://visualsyntax.net/2014/12/21/john-cage’s-rules-hints-for-student-teachers/">10 Rules for Students and Teachers</a> by John Cage</li>
<li>Reading - <a href="https://www.smashingmagazine.com/2009/07/lessons-from-swiss-style-graphic-design/">Lessons From Swiss Style Graphic Design</a> Smashing Magazine article</li>
<li>Reading - <a href="http://www.aiga.org/the-birth-of-the-user">The Birth of the User</a> by Ellen Lupton</li>
<li>Reading - <a href="http://johnpolacek.github.io/scrolldeck.js/decks/responsive/">What The Heck Is
Responsive Web Design?</a></li>
<li>Project 1 - <a href="projects/project-1/index.html">Grid-based visual compositions for three different screen sizes</a></li>
</ul>
</div>
</div>
</main>
</div>
</div>
</div>
</body>
</html>