lab#1 good bad design

13
Department of Computer Science, Faculty of Science Khon Kaen University 322432 Web Design Technology

Upload: palm2816

Post on 28-May-2015

236 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Lab#1 good bad design

Department of Computer Science, Faculty of Science Khon Kaen University 

322432 Web Design Technology 

Page 2: Lab#1 good bad design

Your own footer Your Logo

ผูสอน  อ.สุมณฑา เกษมวิลาศ ([email protected]

ผูชวยสอน นางสาวเยาวลักษณ พรมด ี ([email protected])  

นางสาวกรวิกา พูลลาภ ([email protected]

Lecture / Lab  Sec.1 อังคาร 10.30-12.30 น. 8103 พุธ Lab 15.00-17.00 น. 6601B Sec2. ศุกร s 10.30-12.30 น. 8105 ศุกร Lab 15.00-17.00 น. 6601B 

322432 Web Design Technology Introduction 

Page 3: Lab#1 good bad design

Web Design Technology  

Good/Bad design 

How is a good web design?.

Good

Why you think it bad?

Bad

1 2

?

Page 4: Lab#1 good bad design

Web Design Technology  

Good/Bad design  ?

Page 5: Lab#1 good bad design

องคประกอบของเว็บไซต  

สวนหัวของเว็บไซต logos, banner, menu  

 

H e a d e r

สวนของเนื้อหาของเว็บไซต หรือสวนของการนำทาง  

 

C o n t e n t

3 สวนทายของเว็บไซต ใหเครดิต ใสลิขสิทธิ์ หรือใสเพจที่นาสนใจ  

 

F o o t e r

1.  ความเรียบงาย (Simplicity)  2.  ความสม่ำเสมอ (Consistency)  3.  ความเปนเอกลักษณ (Uniqueness)  4.  เนื้อหามีประโยชน (Usefulness)  5.  ระบบ Navigation ที่ใชงานงาย (Easy-use

Navigation)  6. แสดงผลไดอยางรวดเร็ว (Rapid Output)   7. มีความชัดเจน (Clearance)   8. เปนไปตามรูปแบบมาตราฐาน (Standardzation)  9. แสดงผลไดดีในสิ่งแวดลอมที่ตางกัน  10. ระบบใชงานที่ถูกตอง  

2

1

Page 6: Lab#1 good bad design

ความเรียบงาย (Simplicity)

   

http://bigcartel.com/about ! ! !http://www.onedaywithoutgoogle.org/

Page 7: Lab#1 good bad design

ความสม่ำเสมอ (Consistency)   

    a. Typographic consistency  

b. Graphic consistency  

c.  Color consistency  

d.  Icon and button consistency  

http://www.ribbonsofred.com/

>>>>  

Page 8: Lab#1 good bad design

ความเปนเอกลักษณ (Uniqueness)   

 

   

   

Page 9: Lab#1 good bad design

เนื้อหามีประโยชน (Usefulness)   

 

   

Usability is focused on designing the website to be easy to use

Understanding user's requirements

Page 10: Lab#1 good bad design

ระบบ Navigation ที่ใชงานงาย (Easy-use Navigation)

   

http://webdesignerwall.com/trends/30-examples-of-attractive-nav

 

Page 11: Lab#1 good bad design

แสดงผลไดดีในสิ่งแวดลอมที่ตางกัน   

   

Page 12: Lab#1 good bad design

LAB#1 Good/Bad design  

•  คำสั่ง  •  ใหนักศึกษาศึกษาคนหาควา เว็บที่นักศึกษาคิดวาออกแบบดี และออกแบบไมดี จงใหเหตุผลวาออกแบบดี ไมดีอยางไร และนำเสนอในชั่วโมงเรียน  

Page 13: Lab#1 good bad design

Questions?