Introduction
main goals
- Wireframe mockups of web pages
- Key functional element of web
- Use of bootstrap
- Use of Javascript
- Handlebars template library to convert data to HTML
- Interactivity to templates using JavaScript event listeners
to complete
1 website design assignment + 1 programming assignment + 2 quizzes +practice
grades relevant
assessment at the end of 2.2 and 2.4 (10%)+ pass mark (65%)
Usability & User Experience
Usability: how usable the web is. efficient, memorable, learnable...
**User Experience (UX): **how the user feels about the web. happy, bored...
--> good usability + good design = good UX
Audience: Who is your user? Design for them! You may have more than one type of user!
UX
Navigation: Hierarchical/Global/Local
Navigation is crucial! -> you should take time to plan out a site map
site map(sitemap/site tree) 网站地图：网站地图描述了一个网站的架构。
Example of breadcrumbs:Home >> albums >> albums 1 > >photos
Relative vs. absolute links
◇ Relative path:
index.html
images/myimage.html
◇ Absolute path: (better!)
http://www.mywebsitename.com/index.html
http://www.mywebsitename.com/myimage.html
box model
Accessibility/可访问性
Web accessibility encompasses all disabilities that affect access to the web, includes: visual, auditory, physical, speech, cognitive, neurological. -> make the web for everyone!
-> like ChromVox, who can read all context in the website
WAI = Web Accessibility Initiative: is an effort to improve the accessibility of the World Wide Web for people with disabilities
Guidelines for Design(Constructive criticism/建设性的批评)
This is not a design guide, it's a guideline to teach you how to judge web.
There are two basic approaches/方法:
- Cognition/Evidence-based principle(Edward Tufte) -> what is information= how do we make the information clear 认知/循证原则
- User-centric approaches -> who are the users? what did they want? how do they get the information? 用户为中心的方法
(BUT: both approaches share one important thing in commen - "User Experience First")
Principles for Web Design
Principle 1: User Experience First
It must come before any code is written. To do that, first, get it clear what your web is going to do. Second, it must be consistent/一致性(比如字体类型的一致性)!
Principle 2: WTF(What's this for)
You can judge a good design by how long is takes you to understand what it's about.
Principle 3: Obfuscation vs. Simplicity/混淆与简单
you've got a lot of information, there might be a lot of text, but you're not sure from scanning it what it means, then maybe it's padding.
-> Click numbers: The minimum number of clicks to get to content. If content is not on the front page, I want it in one click as soon as I know what it is.
-> Colors on the web: If you can't think of a reason why the color is there, don't use color, just use white.
-------be simple, be consistent, pay attention to user experiences-------
Design example
trip advisor
skype, paypal, bootstrap -> Bootstrap(a popular theme)
*theme like Bootstrap, TEHY DO TWO THINGS: *
- They make it very easy for people to find informations they want.
- they make it respond to different sizes of device.
BAD THINGS - "dark pattern": It looks well designed. It's providing information, but not really telling me what it is.
MOOC=Massive open online course/大规模开放在线课堂