Lab#1 good bad design

18
Good / Bad Design By Yaowaluck Promdee, Dr.Sumonta Keamvilas http://img.linux.net.cn/data/attachment/album/201405/19/124456u2xukavclc82kxac.jpg

description

Lab#1 Good/ Bad Design Web design technology Web

Transcript of Lab#1 good bad design

Page 1: Lab#1 good bad design

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

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

Introduction to Web Design Technology

Page 4: Lab#1 good bad design

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

Good /Bad Design

• How do you feel about this website?

www.lingscars.com www.arngren.net/

Page 6: Lab#1 good bad design

Bad Design

• Can you tell the objective of this website?

www.havenworks.com

Can you find any health care link?

Page 7: Lab#1 good bad design

Good Design

• How do you feel about this website?

www.nike.com

Page 8: Lab#1 good bad design

Good Design

• Example e-commerce website

Page 9: Lab#1 good bad design

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

Simplicity

Page 11: Lab#1 good bad design

Consistency

• a. Typographic consistency

• b. Graphic consistency

• c. Color consistency

• d. Icon and button consistency

Page 12: Lab#1 good bad design

Uniqueness

http://www.bbc.com/news/

http://www.oreo.com/

Page 13: Lab#1 good bad design

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

Easy to use Navigation

Page 15: Lab#1 good bad design

Standardization

Page 16: Lab#1 good bad design

Responsive Web

• Understanding Responsive Web Design: Cross-browser Compatibility

Page 17: Lab#1 good bad design

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

Q&A?