-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
115 lines (95 loc) · 6.85 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
<!doctype html>
<head>
<meta charset="utf-8" />
<title>UI&UX Module - Home Page</title>
<!-- stylesheets -->
<script src="resources/jquery-2.1.4.min.js"></script>
<script src="resources/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<link href="resources/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 950px; margin-left: 100px;">
<h1>Introduction to UI and UX Design</h1>
<p>
Our next module will focus on the design disciplines that inform what we are doing when we build web pages with HTML and CSS,
<b>user interface design (UI)</b> and <b>user experience design (UX)</b>. But first, we'll take a high level look at how we interact with computers.
</p>
<hr>
<h3> Human Computer Interaction </h3>
<p> The study of how people understand and use the tools on a computer screen is known as 'Human Computer Interaction' (HCI).
HCI is the highest-level perspective on what designers and
front-end developers are doing when they build web applications for their users.
The <a href="readings/Graphical User Interface-Wikipedia.pdf" target="blank"> Graphical User Interface (GUI)</a>
is the interactive visual layer of the software
that we use. It is where we click, drag, drop and scroll. The goal of UI, UX and front-end development is to design and code GUI's that
users find simple and easy to use.
</p>
<ul>
<li><a href="videoplayer/index.html" target="blank">A Brief History of the User Interface (video)</a> </li>
<li><a href="readings/The Elements of User Experience.pdf" target="blank">The Elements of User Experience</a></li>
</ul>
<p>
<a href="readings/User experience design Wikipedia.pdf" target="blank">User Experience Design</a> and
<a href="readings/User interface design (wikipedia).pdf" target="blank">User Interface Design</a> are the core disciplines of
web application front-end design. However, there is often confusion and debate about the different aspects of design.
In fact, there are many more distinctions beyond UI and UX.
Other areas of specilization include interaction design, visual design, and product design. While it is common for one person to play multiple
if not all the roles within a small company, understanding the tools and tasks associated with each is important.
</p>
<ul>
<li><a href="readings/WhoDoesWhat.pdf" target="blank">UI, UX, Who Does What?</a> </li>
<li><a href="readings/Learning to Design (giftrocket).pdf" target="blank">Learning to Design</a></li>
</ul>
<p>Let's dive further into designing user experiences. First, read the first article below on the basics of great UX.
Then, instead of writing code, we'll sketch wireframes of hyptothetical websites, laying out the different steps our users will follow.
</p>
<ul>
<li><a href="readings/The Basics of Great UX(tutsplus).pdf" target="_blank">The Basics of Great UX</a></li>
<li><a href="readings/A Beginners Guide to Wireframing (tutsplus).pdf" target="_blank">A Beginner's Guide to Wireframing</a></li>
<li><a href="videoplayer/index.html" target="blank">What Is a Wireframe? (video)</a></li>
</ul>
<h3>The Iterative Design Cycle</h3>
<p>A critical component of good design is to revise and iterate often. Known as <a href="readings/Iterative design wikipedia.pdf" target="blank">
Iterative Design</a>, the process of reviewing and revising design yields the best results. So, take your wireframes and review
them with a fellow student. Get their feedback. Ask them what they don't understand. Make notes of their suggestions and
revise your webpages to be more user-friendly. Learn to open yourself to feedback and criticism. Put aside your ego!
</p>
<hr>
<h3> Excercises </h3>
<p><a href="excercises/wireframing.html" target="_blank">Excercise #1 Wireframing</a></p>
<p><a href="excercises/bootstrap.html" target="_blank">Excercise #2 Bootstrap </a></p>
<p>You have finished this module when you have:</p>
<ul>
<li>Complete wireframes for all 3 pages for your Instacart and Facebook websites</li>
<li>Working bootstrap-based webpages complete with bootstrap components and javascript elements for your Instacart and Facebook websites.</li>
<li>Reviewed and received feedback on your work from at least one classmate. Then implemented their suggestions (iterate your designs!)</li>
</ul>
<h3>Responsive Web Design</h3>
<a href="readings/Responsive Web Design wikipedia.pdf" target="_blank">Responsive web pages</a>
adjust their layout automatically as the size of the browser window changes. They dynamically rearrange themselves to look good on
big desktops and tiny mobile phones. A first step to testing your webpage's responsiveness is to simply use your mouse to
resize your browser window and watch your website change. You can also use the device emulator in the developer toolbar to
set the screen resolution of your browser to mimic different devices. Watch the video about the Chrome DevTools Device Mode to learn more
about using your built-in browser tools to simulate a mobile device.
</p>
<ul>
<li><a href="readings/Building Responsive Websites Using Twitter BootStrap (sitepoint).pdf" target="_blank">Building Responsive Websites Using Twitter Bootstrap</a></li>
<li><a href="videoplayer/index.html" target="_blank">Bootstrap Responsive Layout Tutorial (video)</a></li>
<li><a href="videoplayer/index.html" target="_blank">Responsive Web Design Tutorial (without Bootstrap)(video)</a></li>
<li> <a href="videoplayer/index.html" target="_blank">Chrome DevTools Device Mode (video)</a></li>
</ul>
<p><a href="excercises/responsive.html" target="_blank">Excercise #3 Responsive Design</a></p>
<h3>Evaluation</h3>
<p>At the end of this module, you will need to package up your work in a standardized manner to be evaluated. Please follow these instructions.</p>
<ol>
<li> Create a directory (aka folder) titled YOUR_NAME + UIUX. </li>
<li>In this directory add three subdirectories, one titled Instacart, one titled Facebook and the other called 'resources'.</li>
<li> Put your finished, responsive, 3-page websites in the Facebook and Instacart directories. Except for the jquery and bootstrap libraries!</li>
<li>In the resources directory put the bootstrap and jquery libraries. Edit your webpages to load these resources</li>
<li>Make sure your pages load properly using the bootstrap and jquery pages in the resources directory</li>
<li><b>Delete</b> the resources directory (I'll add it back later) and turn in the YOUR_NAME + UIUX directory.</li>
<li>See the directory in this module titled 'HansUIUX' as a model</li>
</ol>
<p>Good luck!</p>
</div>
</html>