-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathassignment-3.html
141 lines (128 loc) · 7.43 KB
/
assignment-3.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>IML 400 Spring 2015 Assignment 3</title>
<style>
body{
background: #222;
color:#ddd;
margin:0;
}
a{
font-weight:bold;
text-decoration:none;
color:crimson;
}
a:link, a:visited, a:active{
font-weight:bold;
text-decoration:none;
color:crimson;
}
a:hover{
color:gold;
}
ol h3{
margin:0 0 10px 0;
}
#wrapper{
width: 640px;
margin:40px auto;
margin-bottom:0;
bottom:0;
}
#assignment{
font-size:21px;
}
.due-date{
color:gold;
}
strong{
color:gold;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="assignment">
<h2><a href="index.html">IML 400 Spring 2015</a></h2>
<h2>Assignment 3: UI/UX Fundamentals</h2>
<p>
<ol>
<li><strong>History of the web</strong>
<ul>
<li>Research and 6 minute Presentation</li>
<li>Make a simple web page for the presentation content, and use it to present your content. For this assignment it is only required that you use HTML. CSS and/or Javascript are optional</li>
<li>Group 1: The web in 1992-1996</li>
<li>Group 2: The web in 1996-2000</li>
<li>Group 3: The web in 2000-2004</li>
<li>Group 4: The web in 2004-2007</li>
<li>Group 5: The web in 2007-2014</li>
</ul></li>
<li><strong>Update class cover page</strong>
<ul>
<li>Add interactivity and dynamic content</li>
<li>Based on considerations about your potential audience/users, apply UI/UX Design reasoning to justify your update</li>
</ul></li>
</ol>
</p>
<h2>Due Date</h2>
<p>
<span class="due-date">Monday, February 9nd, 9:00am.</span>
</p>
<p>
<h2>Readings</h2>
<ol>
<li>Andrew Maier - <a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/">Complete Beginner’s Guide to Interaction Design</a></li>
<li>Ben Shneiderman - <a href="http://www.designprinciplesftw.com/collections/shneidermans-eight-golden-rules-of-interface-design">Eight Golden Rules of Interface Design</a></li>
<!--
http://www.creativebloq.com/netmag/10-principles-interaction-design-1143871
-->
<li>Charles L. Mauro - <a href="http://www.mauronewmedia.com/blog/why-angry-birds-is-so-successful-a-cognitive-teardown-of-the-user-experience/">Why Angry Birds is so successful and popular</a></li>
<li>Apple OS X Human Interface Guidelines - <a href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/DesignPrinciples.html#//apple_ref/doc/uid/20000957-CH18-SW1" target="blank">Design Principles</a></li>
<li>Apple OS X Human Interface Guidelines - <a href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Strategies.html#//apple_ref/doc/uid/20000957-CH19-SW1" target="blank">User-Centered Design</a></li>
<li>Jakob Nielsen - <a href="http://www.nngroup.com/articles/how-users-read-on-the-web/" target="blank">How Users Read on the Web</a></li>
<li>Dan Gardner and Mike Treff - <a href="http://www.fastcodesign.com/3036091/the-next-big-thing-in-responsive-design/">The Next Big Thing In Responsive Design</a></li>
</ol>
</p>
<p>
Please prepare a report where you compare and combine insight from all this [mostly super short] readings.
</p>
<p>
<h2>Readings Due Date</h2>
<span class="due-date">Monday, February 9nd, 9:00am.</span>
</p>
<p>
<h2>Additional Resources</h2>
<ol><h3>Historical</h3>
<li>1995, otherwise known as <a href="http://www.wired.com/2015/01/90s-startup-terrified-microsoft-got-americans-go-online">“the year the Web started changing lives”</a></li>
<li>Cory Doctorow's <a href="http://boingboing.net/2011/03/08/lively-and-insightfu.html">Lively and insightful technical history of the Internet</a></li>
<li><a href="http://www.wired.com/wired/archive/3.06/xanadu.html" target="blank">Ted Nelson and The Curse of Xanadu</a></li>
<li>Alan Kay's <a href="https://www.youtube.com/watch?v=AnrlSqtpOkw">Tribute to Ted Nelson</a></li>
</ol>
<ol><h3>User Experience / User Interaction Design</h3>
<li>Bill Moggridge's <a href="http://www.designing-media.com">Designing Media</a></li>
<li>Bill Moggridge's <a href="http://www.designing-media.com">Designing Interactions</a></li>
<li><a href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html" target="blank">Apple OS X Human Interface Guidelines</a></li>
<li><a href="http://www.subtraction.com/2014/08/26/what-is-a-card/">What Is a Card?</a></li>
<li><a href="http://hci.stanford.edu/publications/2006/HowBodiesMatter-DIS2006.pdf">How Bodies Matter</a> Five Themes for Interaction Design</li>
<li><a href="http://www.wired.com/2013/12/home-depot-reinvents-buckets/">How Home Depot Copied Apple to Build an Ingenious New Bucket</a> —“the importance of this design rests less in its features and more why it was developed in the first place”</li>
<li><a href="http://theixdlibrary.com">The IxD [Interaction Design] Library</a> - a blog</li>
<li>Some of the Nielsen Norman Group <a href="http://www.nngroup.com/articles/#popular-alertboxes">Most Popular Articles</a>
<ul>
<li><a href="http://www.nngroup.com/articles/usability-101-introduction-to-usability/">Usability 101: Introduction to Usability</a></li>
<li><a href="http://www.nngroup.com/articles/top-10-mistakes-web-design/">Top 10 Mistakes in Web Design</a></li>
<li><a href="http://www.nngroup.com/articles/ten-usability-heuristics/" target="blank">10 Usability Heuristics for User Interface Design</a></li>
<li><a href="http://www.nngroup.com/articles/computer-screens-getting-bigger/">Computer Screens Getting Bigger</a></li>
<li><a href="http://www.nngroup.com/articles/scrolling-and-attention/">Scrolling and Attention</a></li>
<li><a href="http://www.nngroup.com/articles/mobile-usability-update/">Mobile Usability Update</a></li></ul>
</li>
</ol>
</p>
<p style="text-align:center; margin:0; padding:0;">
<img src="fall-2012/images/robota.png" style="display:block; margin:auto;"/>
</p>
</div>
</div>
</body>
</html>