Week 1: Web design principles

Introduction

main goals

1. Wireframe mockups of web pages
2. Key functional element of web
3. Use of bootstrap
4. Use of Javascript
5. Handlebars template library to convert data to HTML
6. 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

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/方法:

1. Cognition/Evidence-based principle(Edward Tufte) -> what is information= how do we make the information clear 认知/循证原则
2. 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: *

1. They make it very easy for people to find informations they want.
2. 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/大规模开放在线课堂