lab#1 good bad design
DESCRIPTION
Lab#1 Good/ Bad Design Web design technology WebTRANSCRIPT
![Page 1: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/1.jpg)
Good / Bad Design By Yaowaluck Promdee, Dr.Sumonta Keamvilas
http://img.linux.net.cn/data/attachment/album/201405/19/124456u2xukavclc82kxac.jpg
![Page 2: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/2.jpg)
INDEX
• Introduction to Web design Technology
• Good/ Bad is ?
• Elements of Web Design
• Assignment
• Q/A?
Figure from http://www.operationtechnology.com/blog/wp-content/uploads/2010/05/tools.jpg
![Page 3: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/3.jpg)
Introduction to Web Design Technology
![Page 4: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/4.jpg)
Introduction
• LecturerDr.Sumonta Kasemvilas ([email protected]) Room: 6325C !
• Teacher Assistant Yaowaluck Promdee ([email protected]) Room:6209CKrissanapon SangprachumChanakan Siwarom!
• eLearning • Group Facebook: https://www.facebook.com/groups/291600470935229/• Lecture: https://sites.google.com/site/sumontaiclass/iclassroom/web-
design-technology• Lab: https://sites.google.com/a/kkumail.com/webdesign/• e-learning: http://202.28.94.53/lms/
![Page 5: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/5.jpg)
Good /Bad Design
• How do you feel about this website?
www.lingscars.com www.arngren.net/
![Page 6: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/6.jpg)
Bad Design
• Can you tell the objective of this website?
www.havenworks.com
Can you find any health care link?
![Page 8: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/8.jpg)
Good Design
• Example e-commerce website
![Page 9: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/9.jpg)
Elements of Web Design
• 1. Simplicity
• 2. Consistency
• 3. Uniqueness
• 4. Usefulness
• 5. Easy to use Navigation
• 6. Rapid Output
• 7. Clearance
• 8. Standardization
• 9. Responsive Web
• 10. Less error
Header
Content
Footer
![Page 10: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/10.jpg)
Simplicity
![Page 11: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/11.jpg)
Consistency
• a. Typographic consistency
• b. Graphic consistency
• c. Color consistency
• d. Icon and button consistency
![Page 12: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/12.jpg)
Uniqueness
http://www.bbc.com/news/
http://www.oreo.com/
![Page 13: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/13.jpg)
Usefulness
• Usability is focused on designing the website to be easy to use
http://www.smashingmagazine.com/wp-content/uploads/2011/03/ux-discussion.jpg
Understanding user's requirements
![Page 14: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/14.jpg)
Easy to use Navigation
![Page 15: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/15.jpg)
Standardization
![Page 16: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/16.jpg)
Responsive Web
• Understanding Responsive Web Design: Cross-browser Compatibility
![Page 17: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/17.jpg)
Assignment#1
• Please find two examples of web design, good and bad design, evaluate them based on what you have learned in class today, and prepare a two-minutes presentation.
![Page 18: Lab#1 good bad design](https://reader033.vdocument.in/reader033/viewer/2022050722/559b708b1a28ab53778b4775/html5/thumbnails/18.jpg)
Q&A?