1. วิชา โปรแกรมสรางเว็บเพื่อการศึกษา (1193524)
สมาชิก กลุม3
1.นางสาวพัชราภรณ สอนอ่ํา รหัส533410080318
2.นางสาวเสาวลักษณ แกวเกต รหัส533410080331
3.นายนิรันดร กิริยาดี รหัส533410080338
4.นายพัฒพล วรรณสัมผัส รหัส533410080339
เสนอ
อาจารยปวริศ สารมะโน
มหาวิทยาลัยราชภัฏมหาสารคาม
ภาคเรียนที่1 ปการศึกษา2556

2. วิเคราะหแนวทางการออกแบบเว็บไซตของมหาวิทยาลัย

3. 1. University of Rochester United States
การวิเคราะหการออกแบบและองคประกอบของเว็บไซตUniversity of Rochester United States
1.รูปแบบตัวอักษรและขนาด ใชตัวอักษรสีขาวตัดกับพื้นสีดําและสีน้ําเงิน ทําใหตัวหนังสือมีความ
ชัดเจน ใหความสําคัญกับหัวเรื่องใหญและหัวเรื่องรอง โดยใหหัวเรื่องใหญมีขนาดใหญกวาหัวเรื่องรอง แตใชสี
เดียวกัน ทําใหดูกลืนกัน และตัวหนังสือคอนขางเล็กทําใหอานยาก
2.การกําหนดระยะหางและพื้นที่วาง มีการจัดระยะหางของตัวหนังสือไดอยางเหมาะสม แตมีเนื้อหา
นอยเกินไป สวนใหญของเว็บไซตจะเปนภาพประกอบ โดยภาพประกอบที่นํามาอาจจะกินพื้นที่ในการ
ประชาสัมพันธขาวสาร แตก็ถือวาเปนภาพที่ทําใหรูสึกวามีพื้นที่วาง เพราะดูแลวไมรกตา
3.การกําหนดโครงสี มีการนํารูปภาพมาใชเปนพื้นหลัง ภาพที่ใชดูสบายตาเนนใหเห็นถึงความมุงมั่น
พยายาม สีตัวหนังสือเหมาะสมกับกลุมเปาหมายคือนักศึกษา เพราะตัวหนังสือเปนสีขาว ทําใหอานงาย และ
เนนถึงความบริสุทธิ์
4.การจัดวางตําแหนง โลโกของมหาวิทยาลัยอยูกึ่งกลาง อาจจะดูไมโดดเดนเทากับอยูมุมบนซาย แต
ก็ถือวาอยูในระดับดี เว็บไซตนี้จะเนนที่รูปภาพ โดยใหความสําคัญกับตัวหนังสือ รายละเอียดเปนเรื่องรอง ทํา
ใหรูปภาพเดนเพราะเปนพื้นหลังของเว็บไซต

4. ตารางสังเคราะหองคประกอบของเว็บไซตUniversity of Rochester
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of Rochester
1.ขอความทักทายตอนรับ 
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ 
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

5. 2.Case Western Reserve University United States
การวิเคราะหการออกแบบและองคประกอบของเว็บไซตCase Western Reserve University United
States
1.รูปแบบตัวอักษรและขนาด ตัวอักษรที่ใชอานยาก เพราะตัวอักษรคอนขางเล็ก รูปแบบตัวหนังสือ
ไมเปนฟรอนเดียวกันทําใหดุไมเปนระเบียบ อานยาก ลักษณะตัวหนังสือคอนขางบาง ตัวหนังสือเขียนติดกัน
มากเกินไป ทําใหลายตา
2.การกําหนดระยะหางและพื้นที่วาง ไมคอยมีพื้นที่วาง เพราะหนาเว็บไซตสวนใหญจะเต็มไปดวย
ตัวหนังสือและรูปภาพ อีกทั้งซายขวาไมสมดุลกัน ทําใหดูหนักขางขวามากเกินไป ดูแลวรกตา
3.การกําหนดโครงสี ดานซายมีการนําตัวหนังสือสีขาวมาตัดกับพื้นหลังสีน้ําเงิน ทําใหตัวหนังสือดูเดน
สวนดานขวาตัวหนังสือสีน้ําเงินพื้นหลังสีขาวก็ทําใหตัวหนังสือดูเดน แตใชพื้นหลังสีขาว ทําใหแสบตา เมื่อจอง
หนาจอคอมพิวเตอรนานๆ เว็บไซตนี้สวนใหญใชสีโทนเย็น
4.การจัดวางตําแหนง โลโกของมหาวิทยาลัยอยูดานบนอาจจะไมไดอยูบนซายมาก แตก็ถือวาดูเดน
เพราะมองเห็นงาย แตมีการนําตัวหนังสือและรูปภาพมาไวทางดานขวามากเกินไป จึงทําใหดูไมเปนระเบียบ
ทําใหดูขัดตา

6. ตารางสังเคราะหองคประกอบของเว็บไซตCase Western Reserve University United States
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Case Western Reserve
University United States
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ 
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร 
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

7. 3.Technische UniversitätMünchen Germany
การวิเคราะหการออกแบบและองคประกอบของเว็บไซตTechnische UniversitätMünchen
Germany
1.รูปแบบตัวอักษรและขนาด ตัวอักษรอานงาย สะอาดตา มีหัวเรื่องใหญ หัวเรื่องรอง ทําใหดูเปน
ระเบียบ ออกแบบไดอยางสวยงาม โดยกําหนดใหหัวเรื่อง เปนตัวหนา หัวเรื่องรองเปนตัวบาง ซึ่งสามารถ
แยกแยะไดงาย
2.การกําหนดระยะหางและพื้นที่วาง มีพื้นที่วางใหพักสายตา ตัวหนังสือมีพื้นที่วางระยะหางแตละ
ชองไฟ ทําใหดูสบายตา ภาพประกอบที่นํามาใชก็ดูไมรก เขากับการศึกษา ทําใหภาพรวมดูดี
3.การกําหนดโครงสี สีพื้นหลังที่ใช ทําใหดูเย็นตา ผอนคลาย เพราะเปนสีเทาซึ่งเปนสีกลาง ทําใหดู
นุมนวล ตัวหนังสือเปนสวนใหญเปนสีน้ําเงิน แตเมื่อมาอยูบนพื้นหลังสีเทากลับเขากันไดดี อีกทั้งตัวหนังสือสี
ขาวที่อยูบนรูปภาพก็ดูเดน
4.การจัดวางตําแหนง โลโกของมหาวิทยาลัยอยูในตําแหนงมุมบนซาย ซึ่งเปนจุดสนใจของสายตา
มนุษยที่สุด ทําใหดูเดนแตชื่อมหาวิทยาลัยที่อยูดานลางโลโกกลับตัวเล็กและติดกันมากเกินไป จึงทําใหแต
สัญลักษณดูเดน แตชื่อมหาวิทยาลัยกลับดูจม

8. ตารางสังเคราะหองคประกอบของเว็บไซตTechnische UniversitätMünchen Germany
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Technische
UniversitätMünchen
Germany
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน 
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร 
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

9. 4.Vanderbilt University United States
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต Vanderbilt University United States
1.รูปแบบตัวอักษรและขนาด รูปแบบตัวอักษรอานงาย จัดไวอยางเปนระเบียบ ตัวอักษรแถบเมนู
อานงาย แตตัวหนังสือประกาศขาวสารที่อยูดานลางคอนขางตัวเล็ก ทําใหอานยาก และในหนาเว็บไซตใช
ฟรอนไมเหมือนกัน ทําใหดูขัดกัน
2.การกําหนดระยะหางและพื้นที่วาง โดยรวมแลวซายขวาเทากัน จัดไดเหมาะสม มีที่พักสายตา มี
ชองวางระหวางบรรทัด ทําใหดูมีระเบียบ
3.การกําหนดโครงสี สีพื้นหลังใชสีเทา ทําใหดูสบายตา ผอนคลาย ตัวหนังสือสวนใหญใชสีดํา มี
บางสวนที่ใชสีขาว แตโดยรวม เมื่อมาอยูในพื้นหลังก็ทําใหตัวหนังสือดูเดน อีกทั้งรูปภาพและสีพื้นหลังก็เปนสี
โทนเย็น ทําใหดูแลวไมแสบตา
4.การจัดวางตําแหนง โลโกเกือบจะอยูกึ่งกลาง แตก็ยังเอียงมาทางดานมุมบนซายอยู ก็ถือวายังอยูใน
จุดสนใจของสายตามนุษย อีกทั้งดานลางที่เปนการประชาสัมพันธขาวสาร ก็มีภาพประกอบในทุกหัวขอ ทําให
เขาใจมากขึ้น ดูสวยงาม เปนระเบียบ

10. ตารางสังเคราะหองคประกอบของเว็บไซต Vanderbilt University United States
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Vanderbilt University
United States
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ 
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

11. 5.University of St Andrews United Kingdom
การวิเคราะหการออกแบบและองคประกอบของเว็บไซตUniversity of St Andrews United Kingdom
1.รูปแบบตัวอักษรและขนาด มีการวางแผนในการจัดรูปแบบตัวอักษร เพราะมีการใหความสําคัญ
กับหัวเรื่องหลัก หัวเรื่องรองตามลําดับ โดยหัวเรื่องหลักนั้นจะใหเปนตัวหนา หัวเรื่องรองจะเปนตัวบาง และ
ใชฟรอนเดียวกัน ขนาดตัวอักษร อานงาย เหมาะกับกลุมเปาหมายที่เปนนักศึกษา คือไมใหญไมเล็กจนเกินไป
2.การกําหนดระยะหางและพื้นที่วาง ไมคอยมีพื้นที่วาง เพราะเว็บไซตนี้สวนใหญตองการจะสื่อดวย
รูปภาพ จึงทําใหมีรูปภาพเยอะ แตตัวหนังสือก็ยังมีระยะหางระหวางตัวอักษรอยู แตดูโดยรวมแลวดูแนน
เกินไป
3.การกําหนดโครงสี สวนใหญของหนังสือใชตัวหนังสือสีดํา และใชพื้นหลังสีขาวจึงทําใหตัวหนังสือ
เดน แตเปนสีที่ตัดกัน สวนรูปภาพที่นํามาประกอบนั้นก็ดูไมรกจึงทําใหดูไมรกตา
4.การจัดวางตําแหนง โลโกอยูมุมบนซายถือวาอยูในระดับสายตาที่มนุษยใหความสนใจมากที่สุดแต
การจัดวางตําแหนงยังดูไมเปนระเบียบ ชวงดานบนยังดูแนน ไมมีที่วาง จึงทําใหโดยรวมดูอึดอัด แนนเกินไป

12. ตารางสังเคราะหองคประกอบของเว็บไซต University of St Andrews United Kingdom
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of St Andrews
United Kingdom
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ 
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร 
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

13. 6.University of Helsinki Finland
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต University of Helsinki Finland
1.รูปแบบตัวอักษรและขนาด รูปแบบตัวอักษรเปนตัวบาง และตัวหนังสือมีขนาดเล็กทําใหดูอานยาก
ลายตา ตัวหนังสือติดกัน
2.การกําหนดระยะหางและพื้นที่วาง ไมมีพื้นที่วางและระยะหาง เพราะเต็มไปดวยรูปและตัวหนังสือ
ทําใหดูรกตา ตัวหนังสือติดกันมากเกินไป รูปก็อยูติดกับตัวหนังสือมากเกินไป จึงทําใหภาพรวมดูแลวไมเปน
ระเบียบ
3.การกําหนดโครงสี สวนใหญจะใชตัวหนังสือสีน้ําเงิน ใชพื้นหลังสีขาว ทําใหเห็นตัวหนังสือชัดเจน
แตการใชพื้นหลังสีขาวนั้น ทําใหสวางมากไป ดูแสบตา
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยสนใจมากที่สุดแตดูดอยลงเมื่อดูโดย
ภาพรวม เพราะรูปภาพในเว็บไซตดูเดนกวา

14. ตารางสังเคราะหองคประกอบของเว็บไซตUniversity of Helsinki Finland
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of Helsinki
Finland
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ 
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ

18. การติดตอกับเว็บมาสเตอร 
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

15. 7.University of Sussex United Kingdom
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต University of Sussex United Kingdom
1.รูปแบบตัวอักษรและขนาด เนื้อหารายละเอียดสวนใหญตัวหนังสือคอนขางเล็ก ทําใหตองจองมอง
อาจทําใหปวดตาได อีกทั้งสวนใหญของตัวหนังสือเปนตัวบาง ทําใหไมคอยมีความเดนชัด
2.การกําหนดระยะหางและพื้นที่วาง มีระยะหางระหวางภาพและตัวหนังสือ ทําใหดูมีระเบียบ เปน
สัดเปนสวน แตตัวหนังสือคอนขางติดกันจึงทําใหไมคอยมีพื้นที่วาง โดยรวมแลวดูมีระเบียบ
3.การกําหนดโครงสี สวนใหญของเว็บไซตใชตัวหนังสือสีน้ําเงิน และใชพื้นหลังสีฟา ถึงแมวาจะ
มองเห็นตัวหนังสือ แตก็ทําใหตัวหนังสือดูจม เพราะสีพื้นหลังใกลเคียงกัน
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยสนใจมากที่สุดและคอนขางเดน เพราะตัด
กับพื้นหลังสีขาว การจัดแถบเมนูเปนระเบียบ มองดูแลวจึงดูสบายตา

16. ตารางสังเคราะหองคประกอบของเว็บไซต University of Sussex United Kingdom
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of Sussex
United Kingdom
1.ขอความทักทายตอนรับ 
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

17. 8.University of Sheffield United Kingdom
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต University of Sheffield United Kingdom
1.รูปแบบตัวอักษรและขนาด สวนใหญตัวหนังสือบนเว็บไซตจะใชตัวหนา เนื้อหารายละเอียดสวน
ใหญคอนขางเล็กอีกทั้งยังเปนตัวหนา จึงทําใหดูอานยาก เพราะคอนขางติดกัน มองดูแลวลายตา
2.การกําหนดระยะหางและพื้นที่วาง สวนใหญแลวไมคอยมีพื้นที่วาง เพราะเต็มไปดวยรูปและ
ตัวหนังสือ แตยังพอมีระยะหางเพื่อใหพักสายตา
3.การกําหนดโครงสี ใชตัวหนังสือสีขาว ตัดกับสีพื้นหลังที่เปนสีดํา จึงทําใหตัวหนังสือเดน แตพื้นหลัง
ดูจมเกินไป เพราะเปนสีมืด จึงทําใหดูไมโดดเดน อีกทั้งสีพื้นหลังยังมีการนําสีแดงและสีน้ําเงินมาอยูใกลกัน ซึ่ง
2สีนี้อยูคนละวรรณะ สีน้ําเงินอยูวรรณะเย็น สีแดงอยูวรรณะรอน เมื่อนํามาไวใกลเคียงกัน จึงดูตัดกันอยาง
มาก
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยสนใจมากที่สุดและคอนขางเดน เพราะตัด
กับพื้นหลังสีขาว ซึ่งสวนอื่นของเว็บไซตพื้นหลังจะเปนสีดํา ดังนั้นโลโกจึงดูเดนอยางเปนพิเศษ ทําใหคนจดจํา
สัญลักษณได

18. ตารางสังเคราะหองคประกอบของเว็บไซต University of Sheffield United Kingdom
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of Sheffield
United Kingdom
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ

20. การสงวนลิขสิทธิ์

19. 9.Trinity College Dublin Republic of Ireland
การวิเคราะหการออกแบบและองคประกอบของเว็บไซตTrinity College Dublin Republic of Ireland
1.รูปแบบตัวอักษรและขนาด ตัวหนังสือที่เปนหัวเรื่องหลักจะใชตัวหนา สวนตัวหนังสือเรื่องรองนั้น
จะใชตัวบาง ตัวหนังสืออานงาย ดูเปนระเบียบ จัดเปนหมวดหมู
2.การกําหนดระยะหางและพื้นที่วาง สวนใหญไมคอยมีพื้นที่วาง เพราะใชพื้นที่สวนใหญประสัมพันธ
ขาวสาร และมีภาพประกอบ แตยังมีระยะหางระหวางตัวหนังสือ ทําใหอานงายมีระเบียบ รูปภาพก็ถูกจัดวาง
ไวอยางเปนระเบียบ
3.การกําหนดโครงสี สีพื้นหลังสวนใหญของเว็บไซตจะเปนสีขาว ซึ่งตัดกับตัวหนังสือสีดําและน้ําเงิน
ทําใหตัวหนังสือดูเดน สวนแถบเมนูใชตัวหนังสือสีฟา ทําใหดูสดใส สบายตา
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยสนใจมากที่สุดมีการจัดวางองคประกอบ
ทุกสวนอยางเปนระเบียบ ดูแลวนาสนใจ

20. ตารางสังเคราะหองคประกอบของเว็บไซตTrinity College Dublin Republic of Ireland
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Trinity College Dublin
Republic of Ireland
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ

20. การสงวนลิขสิทธิ์

21. 10.Eindhoven University of Technology Netherlands
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต Eindhoven University of Technology
Netherlands
1.รูปแบบตัวอักษรและขนาด ตัวหนังสือหัวเรื่องหลักจะเปนตัวหนา หัวเรื่องรองจะเปนตัวบาง แต
ตัวหนังสือมีขนาดเล็ก จึงทําใหอานยาก ลายตา
2.การกําหนดระยะหางและพื้นที่วาง ไมคอยมีพื้นที่วางเพราะสวนใหญเต็มไปดวยรูปภาพ แตยังพอมี
ระยะหางระหวางตัวอักษรอยู
3.การกําหนดโครงสี สีพื้นหลังจะใชสีขาว ตัวหนังสือจะใชสีน้ําเงินและสีดํา ทําใหตัวหนังสือดุเดน แต
สีพื้นหลังทําใหแสบตา เพราะเปนสีที่สวางมาก
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยสนใจมากที่สุดแถบเมนูอยูในที่ๆไมเหมาะ
ไมนาสนใจ มีตัวหนังสือและภาพมากเกินไป ทําใหดูอึดอัด

22. ตารางสังเคราะหองคประกอบของเว็บไซตEindhoven University of Technology Netherlands
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Eindhoven University of
Technology Netherlands
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน 
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ

18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

23. 11.Maastricht University Netherlands
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต Maastricht University Netherlands
1.รูปแบบตัวอักษรและขนาด ตัวหนังสือคอนขางที่จะติดกัน อีกทั้งยังตัวเล็ก ทําใหอานยาก ลายตา
อีกทั้งยังขีดเสนใตตัวหนังสือ จึงทําใหลายตามากขึ้น
2.การกําหนดระยะหางและพื้นที่วาง ตรงดานลางมีพื้นที่วางมากพอสมควร ทําใหดูเย็น สบายตา แต
ตัวอักษรคอนขางที่จะติดกันจึงทําใหไมมีระยะหาง
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะใชสีน้ําเงิน ทําใหตัดกับสีพื้นหลังที่เปนสีขาว จึงทําให
ตัวหนังสือดูเดน แตพื้นหลังทําใหแสบตา เพราะเปนสที่สวางมากเกินไป
4.การจัดวางตําแหนง โลโกยังถือวาอยูมุมบนซายซึ่งเปนจุดที่มนุษยสนใจวางตัวอักษรและรูปภาพไว
เปนระเบียบ นาสนใจและนาติดตาม

24. ตารางสังเคราะหองคประกอบของเว็บไซต Maastricht University Netherlands
Components
องค์ประกอบ
Website ต่างประเทศ องค์ประกอบที่ขาดไม่ได้
Maastricht University
Netherlands
1.ข้อความทักทายต้อนรับ 
2.กล่องสําหรับใส่ชื่อผู้เรียนและ
รหัสผ่าน

3. รายวิชาต่างๆ  
4. การใช้สีสัน 
5. ขนาดของข้อความ  
6. ภาพกราฟิก 
7. ภาคเคลื่อนไหวแบบไฟล์วิดีโอ
8. แบนเนอร์
9. จุดเชื่อมโยงหลายมิติ
10. โลโก้ประจําสถาบัน 
11. เมนูหลัก/หน้าหลัก 
12. เมนูย่อย 
13. รายชื่อผู้เรียนที่กําลังออนไลน์
14. ปฏิทิน
15. กล่องค้นหา 
16. ข้อมูลข่าวสาร/ประกาศ
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใช้ในประเทศนั้นๆ

18. การติดต่อกับเว็บมาสเตอร์ 
19. การเชื่อมโยงกับหน่วยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

25. 12.Stockholm University Sweden
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต Stockholm University Sweden
1.รูปแบบตัวอักษรและขนาด ตัวอักษรสวนใหญจะใชตัวหนา ใหความสําคัญกับหัวเรื่องหลักและหัว
เรื่องรอง แตตัวหนังสือคอนขางเล็ก ทําใหอานยาก
2.การกําหนดระยะหางและพื้นที่วาง ตัวอักษรคอนขางที่จะติดกันไมคอยมีระยะหาง พื้นที่วางก็ไมมี
เต็มไปดวยตัวหนังสือและรูปภาพ ทําใหดูรก ไมเปนระเบียบ
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะใชสีดํา ซึ่งตัดกันกับสีพื้นหลังที่เปนสีขาว ตัวหนังสือ
อาจจะดูเดนกจริง แตถาจองนานๆก็จะทําใหแสบตา เพราะสีพื้นหลังสวางเกินไป
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยใหความสนใจมากที่สุดการวางตัวอักษร
ไมเปนระเบียบ ทําใหดูอึดอัด

26. ตารางสังเคราะหองคประกอบของเว็บไซต Stockholm University Sweden
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Stockholm University
Sweden
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

27. 13. Royal Holloway, University of London United Kingdom
การวิเคราะหการออกแบบและองคประกอบของเว็บไซตRoyal Holloway, University of
LondonUnited Kingdom
1.รูปแบบตัวอักษรและขนาด ตัวอักษรสวนใหญจะเปนตัวบาง แตอานงาย เพราะดูมีระเบียบ
ตัวอักษรตรงกับกลุมเปาหมายซึ่งเปนนักศึกษา เพราะตัวไมใหญไมเล็กจนเกินไป
2.การกําหนดระยะหางและพื้นที่วาง ตัวอักษรมีระยะหางที่พอเหมาะ ทําใหดูสบายตา อานงาย
รูปภาพก็มีระยะที่พอเหมาะ ไมติดกันจนเกินไป จึงดูมีระเบียบ แตไมคอยมีพื้นที่วาง เพราะใสตัวหนังสือและ
รูปภาพเต็มจนเกินไป
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะใชสีดํา สวนพื้นหลังสีขาว จึงทําใหตัวหนังสือดูเดน พื้น
หลังสวางมากเกินไป ทําใหแสบตา
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยใหความสนใจมากที่สุดแตกลับไมคอยเดน
เพราะโลโกมีขนาดเล็ก อีกทั้งชื่อมหาวิทยาลัยก็เล็กจึงทําใหไมนาสนใจ ถึงแมวาจะอยูบนพื้นหลังสีน้ําเงิน แต
ปุมแถบเมนูกลับเดนกวา เพราะมีสีสันสดใส จึงทําใหคนสะดุดตาแถบเมนูมากกวาโลโก

28. ตารางสังเคราะหองคประกอบของเว็บไซตRoyal Holloway, University of London United
Kingdom
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Royal Holloway, University
of LondonUnited Kingdom
1.ขอความทักทายตอนรับ 
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ

20. การสงวนลิขสิทธิ์

29. 14. University of AlbertaCanada
การวิเคราะหการออกแบบและองคประกอบของเว็บไซตUniversity of Alberta Canada
1.รูปแบบตัวอักษรและขนาด ตัวอักษรมีขนาดพอเหมาะ ทําใหดูอานงาย แตมีการใชหลายฟรอน ทํา
ใหไมเปนไปในทิศทางเดียวกัน
2.การกําหนดระยะหางและพื้นที่วาง ตัวอักษรคอนขางที่จะมีระยะหางที่พอเหมาะ เพราะอานแลว
ไมรูสึกลายตา อานงาย สวนพื้นที่วางไมคอยมี เพราะภาพที่นํามาคอนขางใหญ จึงทําใหกินเนื้อที่มาก
พอสมควร
3.การกําหนดโครงสี สีตัวอักษรจะเปนสีดํา ซึ่งเปนสีที่เห็นชัดเจนอยูแลว พื้นหลังเปนสีเทา ซึ่งให
ความรูสึกนุมนวล ถึงสีดํากับสีเทาจะโทนสีใกลเคียงกัน แตตัวอักษรก็ไมไดจม
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยใหความสนใจมากที่สุดแตตัวโลโกไมเดน
เทาชื่อมหาวิทยาลัย เพราะตัวโลโกสีคอนขางจะจมไปกับพื้นหลังที่เปนสีเขียว ตางกับชื่อมหาวิทยาลัยที่สีขาว
จึงดูตัดกันกับพื้นหลัง ทําใหดูโดดเดน

30. ตารางสังเคราะหองคประกอบของเว็บไซต University of Alberta Canada
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of Alberta
Canada
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ 
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

31. 15. University of FloridaUnited States
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต University of Florida United States
1.รูปแบบตัวอักษรและขนาด ตัวอักษรเปนตัวบาง และคอนขางที่จะเปนตัวผอม อีกทั้งตัวหนังสืออยู
ติดกันมาก จึงทําใหอานยาก ลายตา
2.การกําหนดระยะหางและพื้นที่วาง ตัวอักษรไมมีพื้นที่วาง เพราะอยูติดกันมากจนเกินไป จึงทําใหดุ
อึดอัด ปวดตาเวลาอาน สวนพื้นที่วางไมคอยมี แตก็ยังไมถือวารก ยังมีระเบียบอยู
3.การกําหนดโครงสี สีตัวอักษรจะเปนสีขาว ซึ่งตัดกับสีพื้นหลังที่เปนสีน้ําเงิน ทําใหตัวหนังสือเดน
แตพื้นหลัง กลับดูจมเพราะเปนสีที่เขมจึงทําใหดูเรียบๆ ไมมีอะไรโดดเดน
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยใหความสนใจมากที่สุดและโลโกคอนขาง
ที่จะเดนเพราะเปนตัวอักษรขนาดใหญ และตัดกับสีพื้นหลังที่เปนสีขาว การจัดตัวอักษรและรูปภาพคอนขาง
เปนระเบียบ

32. ตารางสังเคราะหองคประกอบของเว็บไซต University of Florida United States
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of Florida
United States
1.ขอความทักทายตอนรับ 
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน
 
3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

33. 16.Dartmouth CollegeUnited States
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต Dartmouth College United States
1.รูปแบบตัวอักษรและขนาด ขนาดตัวอักษรเล็กมาก ทําใหอานยาก ไมสบายตา ลายตา อีกทั้งยัง
เปนตัวบาง ยิ่งทําใหอานยากมากยิ่งขึ้น
2.การกําหนดระยะหางและพื้นที่วาง ระยะหางของตัวอักษรไมคอยมี คอนขางที่จะติดกันแตก็ยังพอ
ระยะหางระหวางบรรทัด พื้นที่วางก็มีบาง ทําใหไมดูรกจนเกินไป มีที่พักสายตา
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะเปนสีดําและสีน้ําเงิน ซึ่งตัดกับพื้นหลังสีขาว ซึ่งมีความ
สวางมาก บางครั้งอาจจะทําใหมองตัวหนังสือไมชัดได
4.การจัดวางตําแหนง ชื่อมหาวิทยาลัยอยูมุมบนซายซึ่งเปนจุดที่มนุษยใหความสนใจมากที่สุดและชื่อ
มหาวิทยาลัยคอนขางที่จะเดนเพราะเปนตัวอักษรขนาดใหญ และตัดกับสีพื้นหลังที่เปนสีขาว การจัดตัวอักษร
และรูปภาพไมเปนระเบียบ ดูรก

34. ตารางสังเคราะหองคประกอบของเว็บไซต Dartmouth College United States
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Dartmouth College
United States
1.ขอความทักทายตอนรับ 
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

35. 17.Chinese University of Hong KongHong Kong
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต Chinese University of Hong Kong Hong
Kong
1.รูปแบบตัวอักษรและขนาด ขนาดตัวอักษรไมเล็กไมใหญจนเกินไป อานงาย เหมาะสําหรับวัย
นักศึกษา ตัวอักษรเปนตัวบาง
2.การกําหนดระยะหางและพื้นที่วาง ระยะหางของตัวอักษรมีพอเหมาะ ทําใหอานงาย เพราะ
ตัวหนังสือไมติดกัน พื้นที่วางไมมี เพราะสวนใหญกินเนื้อที่ดวยรูปภาพ
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะเปนสีดําและสีมวง ซึ่งตัดกับพื้นหลังสีขาวจึงทําให
ตัวหนังสือดูเดน แตพื้นหลังสีสวางเกินไป ทําใหแสบตา
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยใหความสนใจมากที่สุด และโลโกคอนขาง
ที่จะเดนเพราะตัดกับสีพื้นหลังที่เปนสีขาว การจัดตัวอักษรและรูปภาพเปนระเบียบ

36. ตารางสังเคราะหองคประกอบของเว็บไซต Chinese University of Hong Kong Hong Kong
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Chinese University of
Hong Kong Hong Kong
1.ขอความทักทายตอนรับ 
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ

18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ

20. การสงวนลิขสิทธิ์

37. 18. Radboud University Nijmegen Netherlands
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต Radboud University Nijmegen
Netherlands
1.รูปแบบตัวอักษรและขนาด ขนาดตัวอักษรมีขนาดเล็ก และบาง อีกทั้งคอนขางที่จะอานยาก แตดูมี
ระเบียบ
2.การกําหนดระยะหางและพื้นที่วาง ระยะหางของตัวอักษรมีพอเหมาะ และระยะหางระหวาง
บรรทัดก็มีพอเหมาะ จึงทําใหดูมีระเบียบ สวยงาม อีกทั้งยังมีพื้นที่วา เพื่อผอนคลายสายตา
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะเปนสีดํา ซึ่งตัดกับพื้นหลังสีขาวจึงทําใหตัวหนังสือดูเดน
แตพื้นหลังสีสวางเกินไป ทําใหแสบตา
4.การจัดวางตําแหนง โลโกอยูมุมบนซายซึ่งเปนจุดที่มนุษยใหความสนใจมากที่สุดและโลโกคอนขาง
ที่จะเดนเพราะมีตัวอักษรสีขาวตัดกับสีพื้นหลังที่เปนสีแดง จึงทําใหจุดสนใจอยูที่โลโก อีกทั้งยังมีรูปภาพไมมาก
จึงไมไดแยงกันเดน รูปแบบตัวอักษรถูกวางไวอยางเปนระเบียบ ทําใหดูสะอาดตา

38. ตารางสังเคราะหองคประกอบของเว็บไซต Radboud University Nijmegen Netherlands
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
Radboud University
Nijmegen Netherlands
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน 
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ

18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

39. 19.University of SouthamptonUnited Kingdom
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต University of Southampton United
Kingdom
1.รูปแบบตัวอักษรและขนาด ขนาดตัวอักษรกําลังพอเหมาะ ทําใหอานงาย สบายตา ตัวอักษรสวน
ใหญเปนตัวบาง
2.การกําหนดระยะหางและพื้นที่วาง ระยะหางของตัวอักษรมีพอเหมาะ จึงทําใหดูมีระเบียบ
สวยงาม แตไมมีพื้นที่วาง สวนใหญจะถูกกินเนื้อที่ดวยรูปภาพ จึงทําใหดุแนน
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะเปนสีดําและสีขาว ตัวอักษรสีดําจะตัดกับพื้นหลังสีขาว
ตัวอักษรสีขาวจะตัดกับพื้นหลังสีเขียว จึงทําใหตัวหนังสือดูเดน
4.การจัดวางตําแหนง ชื่อมหาวิทยาลัยอยูมุมบนขวาซึ่งเปนจุดที่มนุษยใหความสนใจอยูในลําดับที่3
รองลงมาจากมุมบนซาย มุมลางซาย ตามลําดับซึ่งเอาโลโกไวบนมุมบนขวามนุษยใหความสนใจเพียง20%
เทานั้นอีกทั้งชื่อมหาวิทยาลัยก็ดูไมเดนเทาภาพที่นํามาประกอบ

40. ตารางสังเคราะหองคประกอบของเว็บไซต University of Southampton United Kingdom
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of
Southampton United
Kingdom
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์

41. 20.University of UtahUnited States
การวิเคราะหการออกแบบและองคประกอบของเว็บไซต
1.รูปแบบตัวอักษรและขนาด สวนใหญเนื้อหารายละเอียดตัวอักษรจะมีขนาดคอนขางเล็ก เปน
ตัวบาง ทําใหอานแลวปวดตา
2.การกําหนดระยะหางและพื้นที่วาง ระยะหางของตัวอักษรมีพอเหมาะ จึงทําใหดูมีระเบียบ
สวยงาม แตไมคอยมีพื้นที่วาง สวนใหญจะถูกกินเนื้อที่ดวยรูปภาพ จึงทําใหดุแนน
3.การกําหนดโครงสี สีตัวอักษรสวนใหญจะเปนสีดํา พื้นหลังสีเทา จึงทําใหสีตัวอีกษรไมเดน เพราะสี
ใกลเคียงกับสีพื้นหลัง จึงทําใหตัวหนังสือดูจม
4.การจัดวางตําแหนง โลโกอยูมุมบนซาย ซึ่งเปนจุดที่สายตามนุษยใหความสนใจมากที่สุด อีกทั้งโล
โกยังดูเดน เพราะเปนสีขาว ตัดกับพื้นหลังที่เปนสีแดง

42. ตารางสังเคราะหองคประกอบของเว็บไซต University of Southampton United Kingdom
Components
องคประกอบ
Website ตางประเทศ องคประกอบที่ขาดไมได
University of
Southampton United
Kingdom
1.ขอความทักทายตอนรับ  
2.กลองสําหรับใสชื่อผูเรียนและ
รหัสผาน

3. รายวิชาตางๆ  
4. การใชสีสัน  
5. ขนาดของขอความ  
6. ภาพกราฟก  
7. ภาคเคลื่อนไหวแบบไฟลวิดีโอ 
8. แบนเนอร 
9. จุดเชื่อมโยงหลายมิติ 
10. โลโกประจําสถาบัน 
11. เมนูหลัก/หนาหลัก 
12. เมนูยอย 
13. รายชื่อผูเรียนที่กําลังออนไลน
14. ปฏิทิน
15. กลองคนหา 
16. ขอมูลขาวสาร/ประกาศ 
17. ภาษาอื่นๆ นอกเหนือจาก
ภาษาที่ใชในประเทศนั้นๆ
18. การติดตอกับเว็บมาสเตอร
19. การเชื่อมโยงกับหนวยงาน
อื่นๆ
20. การสงวนลิขสิทธิ์