lab#1 good bad design

Department of Computer Science, Faculty of Science Khon Kaen University 

322432 Web Design Technology 

Your own footer Your Logo

ผูสอน  อ.สุมณฑา เกษมวิลาศ (sumkas@kku.ac.th) 

ผูชวยสอน นางสาวเยาวลักษณ พรมด ี (ypromdee@gmail.com)  

นางสาวกรวิกา พูลลาภ (kpnance.nance26@gmail.com) 

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 

Web Design Technology  

Good/Bad design 

How is a good web design?.

Good

Why you think it bad?

Bad

1 2

?

Web Design Technology  

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

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

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

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

    a. Typographic consistency  

b. Graphic consistency  

c.  Color consistency  

d.  Icon and button consistency  

http://www.ribbonsofred.com/

>>>>  

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

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

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

Understanding user's requirements

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

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

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

LAB#1 Good/Bad design  

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

Questions?