MOOK DESIGN
-
Upload
ionut-atitienei -
Category
Documents
-
view
26 -
download
0
description
Transcript of MOOK DESIGN
![Page 1: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/1.jpg)
MOOC 2 Week 1
Dr Kate Devlin
![Page 2: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/2.jpg)
Usability and User Experience
• Usability is about how usable a website is: efficient, memorable, learnable • User experience (or UX) is subjecBve – it’s how the user feels about a website: happy, frustrated, bored
good usability + good design = good UX
![Page 3: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/3.jpg)
Know your audience
• Who is your user? • Design for them! • There may be more than one type of user.
![Page 4: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/4.jpg)
UX
interface design
usability
content
structure
![Page 5: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/5.jpg)
Where am I?
![Page 6: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/6.jpg)
Where am I?
Where can I go? What is here?
![Page 7: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/7.jpg)
Where am I?
Where can I go?
What is here?
What is here?
What is here?
What is here?
![Page 8: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/8.jpg)
Wireframing
• Plan your layout!
• Go simple: paper and pen.
• Revise it; use it or through it away!
![Page 9: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/9.jpg)
Where can I go?
![Page 10: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/10.jpg)
Where am I?
Where can I go?
What is here?
What is here?
What is here?
What is here?
![Page 11: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/11.jpg)
NavigaBon
• Hierarchical • Global • Local
![Page 12: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/12.jpg)
NavigaBon
• EffecBve navigaBon is crucial
• Before you can plan where people can go, you’ll need to know the site architecture
• Take the Bme to plan out a site map
![Page 13: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/13.jpg)
Breadcrumbs on the UoL web site
![Page 14: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/14.jpg)
Breadcrumbs
Home >> albums >> album 1 >> photos
![Page 15: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/15.jpg)
RelaBve vs. absolute links
• Rela6ve path index.html images/myimage.html album1.html
• Absolute path h[p://www.mywebsitename.com/index.html h[p://www.mywebsitename.com/images/image.html h[p://www.mywebsitename.com/album1.html
![Page 16: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/16.jpg)
What is here?
![Page 17: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/17.jpg)
Where am I?
Where can I go?
What is here?
What is here?
What is here?
What is here?
![Page 18: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/18.jpg)
Box model
content content content content content content content content content content content content content content content content content content content content content content content content
padding border
margin
![Page 19: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/19.jpg)
Where am I?
Where can I go?
What is here?
What is here?
What is here?
What is here?
![Page 20: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/20.jpg)
![Page 21: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/21.jpg)
Where am I?
Where can I go?
What is here?
What is here?
What is here?
What is here?
![Page 22: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/22.jpg)
![Page 23: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/23.jpg)
![Page 24: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/24.jpg)
Where am I?
Where can I go?
What is here?
What is here?
![Page 25: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/25.jpg)
Accessibility
![Page 26: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/26.jpg)
Accessibility
• What is accessibility? • What is Web Accessibility IniBaBve? • What kind of things can you do to make a site accessible?
• How can you check your site to make sure it is accessible?
![Page 27: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/27.jpg)
Accessibility and disability
• Web accessibility encompasses all disabiliBes that affect access to the Web, including: visual auditory physical speech cogniBve neurological
![Page 28: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/28.jpg)
W3C’s Web Accessibility IniBaBve
• h[p://www.w3.org/WAI/ge^ngstarted/Overview.html
![Page 29: MOOK DESIGN](https://reader035.fdocuments.in/reader035/viewer/2022081722/5695d2271a28ab9b02994cd1/html5/thumbnails/29.jpg)
Good and bad design