E-book หน่วยที่ 3 หลักการออกแบบเว็บเพจ

1

1. ใชแบ็กกราวดสะอาด เรียบงาย
- ขนาดทไี่ มเ หมาะสม
- หลกี เลีย่ งการใชลวดลาย
- เลือกสีท่ีเหมาะสม

2. คิดกอนใชเอฟเฟคทตาง ๆ
3. ใชต วั อักษรท่คี มชัด
4. ออกแบบกราฟฟก ใหม ีขนาดไฟลเลก็ ๆ
5. วางแผนและออกแบบกอ นลงมือสราง

6. ควบคมุ ขนาดของเพจใหดี
- เรียนรูข อ จํากัดของผชู ม
- วางรปู แบบโครงรางทเี่ หมาะสม
- ออกแบบเฟรมทห่ี ยดื หยนุ

7. ชี้นําผูช มดวยวธิ กี ารงา ย ๆ
8. อยาพยายามทําตวั ลํ้าหนา เกินไป

- อยา สรา งเว็บไซดด ว ยเทคโนโลยีล้าํ ยคุ
- จากมันสมองและสองมือของคุณ
- ดาํ เนินตามมาตรฐานสากล

9. งา ย ๆ แตจ รงิ ใจ
- ของดี ๆ ไมจ ําเปน ตองยากเสมอไป

10. อยา ลมื ปรับปรงุ ความสดใส
- จัดสลบั ลาํ ดับเน้อื หาท่ีมีอยู
- อยาละเลยผลตอบรับของผชู ม
- ใสตัวเลขนับจํานวนผูชมและตวั วดั สถติ ิเขา ไปดว ย

 ใชโ ครงสรา งหนา เว็บเปนเฟรม
 ใชเ ทคโนโลยีข้นั สงู โดยไมจาํ เปน
 ใชตัวหนงั สอื ท่เี คล่อื นไหวตลอดเวลา
 มที อ่ี ยเู ว็บไซทท ี่ซับซอ น (URL) ยากตอ การจดจํา
 ไมม กี ารแสดงช่อื และท่ีอยขู องเวบ็ ไซทใ นหนาเว็บเพจ
 มีความยาวของหนา มากเกนิ ไป
 ขาดระบบเนวเิ กชนั ทม่ี ีประสิทธภฺ าพ
 ใชส ขี องลิงคืไมเหมาะสม
 ขอมูลเกา ไมมีการปรับปรุงใหทันสมัย
 เว็บเพจแสดงผลชา

 ความเรียบงา ย (Simplicity)
 ความสมํา่ เสมอ (Consistency)
 ความเปนเอกลกั ษณ (Identity)
 เนือ้ หาท่ีมปี ระโยชน (Useful Content)
 ระบบเนวิเกชันทใ่ี ชง านงาย (User-Friendly Navigation)
 มลี กั ษณะท่นี า สนใจ (Visual Appeal)
 การใชง านอยา งไมจ ํากดั (Compatibility)
 คณุ ภาพในการออกแบบ (Design Stability)
 ระบบการใชงานทถ่ี ูกตอง (Functional Stability)

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

 มีรูปแบบที่เรยี บงา ย ไมซ ับซอนและใชงานไดอยางสะดวก
 สอ่ื สารเน้อื หาถงึ ผูใ ชโ ดยมีเฉพาะองคป ระกอบเสรมิ ทจ่ี าํ เปน

เทาน้นั

ความสมาํ่ เสมอ (Consistency)

 สรางความสมา่ํ เสมอใหกบั เวบ็ ไซตโ ดยใชรปู แบบเดียวกันตลอด
ท้ังเวบ็ ไซต ทัง้ ในสว นของรูปแบบหนา สไตลข องกราฟก ระบบเน
วเิ กชนั และโทนสี

 ถา ลกั ษณะของแตละหนา ในเว็บไซตเ ดียวกนั แตกตา งกนั อาจ
ทําใหผูใชเกิดความสับสนได

7

ความเปน เอกลักษณ (Identity)

 การออกแบบตอ งคํานงึ ถงึ ลักษณะขององคก ร
 รูปแบบของเวบ็ ไซตส ามารถสะทอ นถึงเอกลกั ษณขององคก ร

เนื้อหาท่ีมปี ระโยชน (Useful Content)

 ควรจดั เตรียมเน้อื หาและขอมูลทีผ่ ใู ชต อ งการใหถ ูกตองและสมบรู ณ
 ควรมีการปรับปรุงและเพม่ิ เตมิ ใหท นั ตอเหตกุ ารณอยูเ สมอ

8

ระบบเนวเิ กชนั ท่ีใชง านงาย (User-Friendly Naviagtion)

 ระบบเนวิเกชันจะตอ งออกแบบใหผ ูใชเ ขาใจงายและใชงานสะดวก โดยใชกราฟก ท่ี
สือ่ ความหมายรว มกับคําอธบิ ายอยางชัดเจน

 มีรปู แบบและลาํ ดับของรายการอยา งสมา่ํ เสมอ

มีลกั ษณะทน่ี า สนใจ (Visual Appeal)

 ความนา ในใจของเวบ็ ไซตจะมีความสัมพนั ธก บั คณุ ภาพขององคป ระกอบตา ง ๆ
เชน คณุ ภาพของกราฟก การใชชนดิ ตัวอกั ษร การใชโ ทนสี เปน ตน

9

การใชง านอยา งไมจ าํ กัด (Compatibility)

 ควรออกแบบเวบ็ ไซตใหครอบคลุมกับผูใชสวนใหญมากทส่ี ดุ
 ไมควรมกี ารตดิ ต้ังโปรแกรมเพ่มิ เติม หรอื เลือกใชบ ราวเซอรชนดิ ใดชนดิ หนึง่
 สามารถแสดงผลไดท ุกระบบปฏิบตั กิ ารและทีค่ วามละเอยี ดหนาจอตา ง ๆ กนั ไดอ ยาง

ไมมปี ญหา

คณุ ภาพในการออกแบบ (Design Stability)

 ควรใหความสําคัญกบั การออกแบบเว็บไซต
 ควรมีมาตรฐานการออกแบบและการจดั ระบบขอ มลู

10

ระบบการใชงานทถี่ ูกตอง (Functional
Stability)

 ระบบการทาํ งานตา ง ๆ ในเว็บไซตจ ะตอ งมีความแนน อนและทาํ
หนา ท่ไี ดอ ยา งถูกตอง เชน การกรอกขอ มูล การเชอ่ื มโยง เปน
ตน

 ควรมกี ารตรวจสอบการทํางานอยเู สมอ

11

มีเนือ้ หาทเ่ี ปน ประโยชน ตรงกบั ทผี่ ูใชต อ งการ
มีการปรบั ปรงุ เน้ือหา และพัฒนาเว็บไซตอยเู สมอ
ใชเวลาในการดาวนโหลดนอย แสดงผลเร็ว
การใชงานทสี่ ะดวก เขาใจงา ย

12

Webmaster

 เปนผูควบคมุ ในเร่ืองการออกแบบ เน้อื หา และรายละเอยี ดทางเทคนิค

Information Architect

 ทําหนาท่ีจัดระเบียบขอมลู และทดสอบประสทิ ธิภาพในการใชง าน

Designer

 เปนผูอ อกแบบลกั ษณะหนา ตาของเว็บไซต และองคประกอบตาง ๆ

HTML and JavaScript Coder

 รบั ผิดชอบการสรา งเวบ็ เพจโดยอาศัยเครอ่ื งมือตา ง ๆ
 ปรบั ปรงุ เปล่ียนแปลงขอ มูล รวมถงึ การอัพโหลดไฟล

13

Developer/Programmer

 เปนผเู ขยี นสครปิ ตและโปรแกรมตา ง ๆ
 อาจตองเกีย่ วขอ งกบั ระบบฐานขอ มลู

System Administrator

 ทําหนา ทค่ี วบคมุ ดูแลเว็บเซริ ฟเวอร รวมถึงฮารด แวรแ ละซอฟตแ วรอ ื่นท่ี
เกีย่ วขอ ง

 สามารถวเิ คราะหและปรบั ตั้งระบบเพ่ือการทาํ งานท่ีมีประสทิ ธภิ าพ

Content Editor/Writer

 เปน บรรณาธกิ าร โดยรบั ผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกตอ ง

14

Phase 1 สาํ รวจปจจัยสาํ คญั (Research)

1. รูจ กั ตวั เอง – กําหนดเปา หมายและสาํ รวจความพรอ ม
2. เรยี นรผู ใู ช – ระบกุ ลุมผใู ชแ ละศึกษาความตองการ
3. ศกึ ษาคูแขง – สาํ รวจการแขง ขนั และเรยี นรคู แู ขง สิ่งท่ไี ดรบั
สิ่งที่ไดร ับ
1. เปา หมายหลักของเวบ็ ไซต
2. ความตอ งการของผใู ช
3. กลยุทธใ นการแขง ขัน

15

Phase 2 : พฒั นาเนอื้ หา (Site Content)
4. สรางกลยทุ ธก ารออกแบบ
5. หาขอสรปุ ขอบเขตเนอ้ื หา
สงิ่ ท่ีไดร ับ

 แนวทางการออกแบบเวบ็ ไซต
 ขอบเขตเน้ือหาและการใชงาน
 ขอมลู ทถ่ี ูกจดั อยางเปน ระบบ

16

Phase 3 : พัฒนาโครงสรา งเว็บไซต (Site
Structure)

6. จัดระบบขอมลู
7. จัดทาํ โครงสรางขอมูล
8. พฒั นาระบบเนวเิ กชัน
สิ่งท่ไี ดรับ

 แผนผังโครงสรา งขอมลู
 แนวทางการทองเวบ็
 ระบบเนวิเกชนั

17

Phase 4 : ออกแบบและพัฒนาหนา เวบ็ (Visual
design)

9. ออกแบบลักษณะหนา ตาเว็บเพจ
10. พัฒนาเว็บตนแบบและขอ กําหนดสุดทา ย
ส่ิงท่ไี ดรบั

 ลกั ษณะหนา ตาของเวบ็ ไซต
 เว็บเพจตนแบบทจี่ ะใชใ นการพฒั นา
 รูปแบบโครงสรางของเว็บไซต
 ขอ กาํ หนดในการพฒั นาเว็บไซต

18

Phase 5 : พฒั นาและดําเนนิ การ (Production and
Operation)

11. ลงมือพฒั นาเว็บเพจ
12. เปด ตัวเวบ็ ไซต
13. ดแู ลและพัฒนาตอเนือ่ ง
สิง่ ทีไ่ ดร บั

 เวบ็ ไซตท่ีสมบรู ณ
 เปดตัวเว็บไซตและทําใหเ ปนท่ีรูจกั
 แนวทางการดูแลและพัฒนาตอ ไป

19

การออกแบบโครงสรางเวบ็ ไซต
(Website Structure Design)
การออกแบบหนาตาเว็บไซต
(Website Interface Design)

20

 Site Map

 เปนการวางแผนเนือ้ หาของเวบ็ ไซต เพ่อื เปนโครงสรางในการจดั วางหนา
เวบ็ เพจทัง้ หมด

 เปรียบเสมือนแผนท่ที ่ีทําใหเห็นโครงสรา งท้งั หมดของเว็บไซต
 ชว ยในการออกแบบเว็บไซตเพือ่ ไมใหห ลงทาง หรอื การเช่ือมโยงแตละ

หนา
 เปน การนําเสนอแนวความคิดแบบลาํ ดับชั้นจากสวนใหญไปหาสวนยอย

หรือที่เรียกวาแบบบนลงลาง (Top Down Thinking)

21

Site Map ที่ดี

 ทกุ ๆ เว็บเพจจะตองมลี ิงกท างออกเสมอ
 ทุก ๆ เว็บเพจควรมลี งิ กก ลบั หนาโฮมเพจ หรอื จดุ เร่มิ ตน
 ควรมีหนา แสดง Site Map ในกรณีท่ีเวบ็ ไซตมีจาํ นวนหนา

มาก ๆ

สามารถประเมินราคาจาก Site Map ได

22

ใชง านงายและสะดวก โดยมรี ะบบ Navigation หรือ
ระบบนําทางทีด่ ี

 เขา ใจงาย การใชงานไมซ ับซอน
 มองเหน็ ไดช ดั ควรวางไวด า นซาย หรอื ดา นบน
 อยาเคลอ่ื นยายไปมา
 ควรมลี งิ กก ลบั ไปยังโฮมเพจ

มีการออกแบบกราฟกทส่ี วยงาม สอ่ื ความหมาย

23

ไมควรเสยี เวลาโหลดภาพมากเกินไป
ภาพรวมทง้ั หมดควรออกมาในอารมณเดยี วกัน

(Theme) หรือโครงเดยี วกนั แนวความคดิ เดยี วกนั

24

แบบ Content
แบบ Image
แบบผสม

25

ลกั ษณะงานจะเปนภาพกราฟกเล็ก ๆ มาเรยี งกนั
เปนหนา เว็บเพจ

จะมเี น้อื หามากกวารปู
พฒั นามาจากการเขียนดวยภาษา HTML
มขี อดีคอื ความเรว็ ในการโหลด

26

เปน ภาพกราฟก ขนาดใหญเ ตม็ หน่งึ หนา แลวตัดแบงเปน
ชิ้นเล็ก ๆ (Slice Image) มาวางเรียงกัน เพ่อื ความเรว็ ใน
การ
ดาวนโ หลด และแสดงผล

มีรปู แบบท่สี วยงามและหลายหลาย โดยจะทาํ การสรา งจาก
โปรแกรมสรางรปู หรือตกแตง รูปโดยทว่ั ไป

เหมาะกบั หนาทมี่ เี น้ือหานอ ย ตอ งการความสวยงามเปน หลกั
หากภาพใหญจะทําใหก ารดาวนโ หลดชา

27

เปนการผสมผสานระหวางแบบ
Content
และแบบ Image

28

ใชโ ครงสรา งหนาเว็บเปน ระบบเฟรม
ใชเ ทคโนโลยีชน้ั สูงโดยไมจาํ เปน
ใชตวั หนังสอื หรอื ภาพทีเ่ คลอ่ื นไหวตลอดเวลา
มีทอ่ี ยูเวบ็ ไซตทซ่ี บั ซอน (URL) ยากตอการจดจําและพิมพ
ไมมกี ารแสดงชอ่ื และทอี่ ยูของเวบ็ ไซตในหนาเวบ็ เพจ
มคี วามยาวของหนา มากเกนิ ไป
ขาดระบบเนวเิ กชนั ท่ีมีประสทิ ธภิ าพ

29

ใชส ขี องลิงคไ มเหมาะสม
ขอ มลู เกา ไมมกี ารปรบั ปรงุ ใหทันสมัย
เว็บเพจแสดงผลชา

มีรายงานวจิ ยั วา ถาเกิน 8 วนิ าที ผใู ชก วา 90%
จะเปลยี่ นไปดเู ว็บอ่ืนแทน

30