Department of Computer Science, Faculty of Science Khon Kaen University 
322432 Web Design Technology 
Your own footer Your Logo
ผูสอน  
อ.สุมณฑา เกษมวิลาศ (sumkas@kku.ac.th) 
ผูชวยสอน 
นางสาวเยาวลักษณ พรมดี (ypromdee@gma...
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
สวนของเนื้อหาของเว็บไซต หรือ
สวนของการนำ...
ความเรียบงาย (Simplicity)
	
  	
  
http://bigcartel.com/about ! ! !http://www.onedaywithoutgoogle.org/
ความสม่ำเสมอ (Consistency)  
 
	
  	
  
a. Typographic consistency	
  
b. Graphic consistency	
  
c.  Color consistency	
 ...
ความเปนเอกลักษณ (Uniqueness)  
 
 
	
  	
  
	
  	
  
เนื้อหามีประโยชน (Usefulness)  
 
 
	
  	
  
Usability is focused on designing the website to be easy to use
Understandin...
ระบบ Navigation ที่ใชงานงาย (Easy-use Navigation)
	
  	
  
http://webdesignerwall.com/trends/30-examples-of-attractive-n...
แสดงผลไดดีในสิ่งแวดลอมที่ตางกัน  
 
	
  	
  
LAB#1 Good/Bad design  
•  คำสั่ง  
•  ใหนักศึกษาศึกษาคนหาควา เว็บที่นักศึกษาคิดวาออกแบบดี และ
ออกแบบไมดี จงใหเหตุผล...
Questions?
Upcoming SlideShare
Loading in …5
×

Lab#1 good bad design

369 views

Published on

  • Be the first to comment

  • Be the first to like this

Lab#1 good bad design

  1. 1. Department of Computer Science, Faculty of Science Khon Kaen University  322432 Web Design Technology 
  2. 2. 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 
  3. 3. Web Design Technology    Good/Bad design  How is a good web design?. Good Why you think it bad? Bad 1 2 ?
  4. 4. Web Design Technology    Good/Bad design  ?
  5. 5. องคประกอบของเว็บไซต   สวนหัวของเว็บไซต 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
  6. 6. ความเรียบงาย (Simplicity)     http://bigcartel.com/about ! ! !http://www.onedaywithoutgoogle.org/
  7. 7. ความสม่ำเสมอ (Consistency)         a. Typographic consistency   b. Graphic consistency   c.  Color consistency   d. Icon and button consistency   http://www.ribbonsofred.com/ >>>>  
  8. 8. ความเปนเอกลักษณ (Uniqueness)              
  9. 9. เนื้อหามีประโยชน (Usefulness)           Usability is focused on designing the website to be easy to use Understanding user's requirements
  10. 10. ระบบ Navigation ที่ใชงานงาย (Easy-use Navigation)     http://webdesignerwall.com/trends/30-examples-of-attractive-nav  
  11. 11. แสดงผลไดดีในสิ่งแวดลอมที่ตางกัน        
  12. 12. LAB#1 Good/Bad design   •  คำสั่ง   •  ใหนักศึกษาศึกษาคนหาควา เว็บที่นักศึกษาคิดวาออกแบบดี และ ออกแบบไมดี จงใหเหตุผลวาออกแบบดี ไมดีอยางไร และนำเสนอใน ชั่วโมงเรียน  
  13. 13. Questions?

×