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

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. Web Design Technology
Good/Bad design
How is a good web design?.
Good
Why you think it bad?
Bad
1 2
?

4. Web Design Technology
Good/Bad design
?

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. ความเรียบงาย (Simplicity)
http://bigcartel.com/about ! ! !http://www.onedaywithoutgoogle.org/

7. ความสม่ำเสมอ (Consistency)
a. Typographic consistency
b. Graphic consistency
c. Color consistency
d. Icon and button consistency
http://www.ribbonsofred.com/
>>>>

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

9. เนื้อหามีประโยชน (Usefulness)
Usability is focused on designing the website to be easy to use
Understanding user's requirements

10. ระบบ Navigation ที่ใชงานงาย (Easy-use Navigation)
http://webdesignerwall.com/trends/30-examples-of-attractive-nav

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

12. LAB#1 Good/Bad design
• คำสั่ง
• ใหนักศึกษาศึกษาคนหาควา เว็บที่นักศึกษาคิดวาออกแบบดี และ
ออกแบบไมดี จงใหเหตุผลวาออกแบบดี ไมดีอยางไร และนำเสนอใน
ชั่วโมงเรียน

13. Questions?