chapter ter 2 2 web desiweb design and development …€¦ · chapter ter 2 2 web desiweb design...

Chapter Chapter 2 2 Web Design Web Design pp ggand Development Processand Development Process

Details

2.1 Web Design2 2 Web Development Process2.2 Web Development Process2.3 Techniques for Web Design

1

2 1 Web Design2.1 Web Design

ความสาคญของการออกแบบเวบไซตความสาคญของการออกแบบเวบไซต

ไ ป ใ ใ โ เวบไซตเปนสอทอยในความควบคมของผใชโดยสมบรณ การออกแบบเวบไซตจงควรออกแบบใหเกดประโยชนสงสดตอผใช และดงดดใหเขามาใชบรการ

การออกแบบเวบไซตมสวนสาคญในการสรางความประทบใจใหกบผใช ผใชจะชอบเวบทออกแบบมาสวยงามและมการใชงานทสะดวกมากกวาเวบทดสบสนวนวายงานทสะดวกมากกวาเวบทดสบสนวนวาย

โดยถาเปนเวบไซตทางธรกจเราจะตองพยายามสรางเวบไซตใหไดเปรยบเหนอเวบไซตของคแขงขน เนองจากพฤตกรรม ฤในการใชจายบนเวบจะมลกษณะทตางจากการซอขายท วไป

2

การออกแบบเวบไซตทด การออกแบบเวบไซตทด เวบไซตทดสวยงามหรอมลกเลนมากมายน น อาจจะ เวบไซตทดสวยงามหรอมลกเลนมากมายนน อาจจะไมนบเปนการออกแบบทดกได ถาความสวยงามและลกเลนเหลาน นไมเหมาะสมกบลกษณะของเวบไซต

เปนเรองยากทจะระบวาการออกแบบเวบไซตทดน น เปนอยางไร เนองจากวาการออกแบบบางอยางท

เหมาะสมกบเวบไซตหนง อาจจะไมเหมาะกบอกเวบไซตหนงกไดเวบไซตหนงกได

ดงน นการออกแบบเวบไซตจะตองออกแบบใหตรง ดงนนการออกแบบเวบไซตจะตองออกแบบใหตรงกบเปาหมายและลกษณะของเวบไซตน น

3

องคประกอบของการออกแบบเวบไซต อยางมประสทธภาพ

- ความเรยบงาย (Simplicity)ออกแบบอยางเรยบงาย ไมซบซอน ใชงานสะดวก ออกแบบอยางเรยบงาย ไมซบซอน ใชงานสะดวก

- ความสมาเสมอ (Consistency) การใชรปแบบของหนา สไตลของกราฟก ระบบเนวเกช น และโทนสทใช ควรมความคลายคลงกน ตลอดท งเวบไซต ตลอดทงเวบไซต

- ความเปนเอกลกษณ (Identity)ความเปนเอกลกษณ (Identity) การออกแบบตองคานงถงลกษณะขององคกร เนองจาก รปแบบของเวบไซตสามารถสะทอนถงเอกลกษณและ

4

ลกษณะขององคกรน นได

เนอหามประโยชน (Useful Content)- เนอหามประโยชน (Useful Content) เนอหาถอเปนสงทสาคญทสดในเวบไซต ดงน นในเวบไซตจงควรจดเตรยมเนอหา และขอมลทผใชตองการใหถกตอง จงควรจดเตรยมเนอหา และขอมลทผใชตองการใหถกตอง

และสมบรณ โดยมการปรบปรงและเพมเตมใหทนตอ เหตการณอยเสมอ

- ระบบเนวเกชนทใชงานงาย (User-Friendly Navigation)ตองออกแบบใหผใชเขาใจไดงาย และใชงานไดสะดวก ตองออกแบบใหผใชเขาใจไดงาย และใชงานไดสะดวก

โดยใชกราฟกทส อความหมายรวมกบคาอธบายทชดเจน รวมท งมรปแบบและลาดบของรายการทสมาเสมอ รวมทงมรปแบบและลาดบของรายการทสมาเสมอ

5

มลกษณะทนาสนใจ (Visual Appeal)- มลกษณะทนาสนใจ (Visual Appeal) ลกษณะทนาสนใจเปนเร องทตดสนไดยากเพราะเกยวของกบ ความชอบของแตละบคคล แตโดยพนฐานแลวกควรคานงถง ความชอบของแตล บคคล แตโดยพนฐานแลวกควรคานงถง

องคประกอบตาง ๆ เหลาน เชน คณภาพของกราฟกทตอง สมบรณ การใชชนดตวอกษรทอานงาย สบายตา การใชโทน สทเขากนอยางสวยงาม

การใชงานอยางไมจากด (Compatibility)- การใชงานอยางไมจากด (Compatibility) การออกแบบเวบไซตใหผใชเขาถงไดมากทสด ไมจากดวาตองตดต งโปรแกรมเพมเตม หรอเลอกใช ไมจากดวาตองตดตงโปรแกรมเพมเตม หรอเลอกใช บราวเซอรชนดใดชนดหนง สามารถแสดงผลไดในทก ระบบปฏบตการ เปนตน

6

- คณภาพในการออกแบบ (Design Stability) ( g y) การออกแบบเวบไซตโดยมการเรยบเรยงเนอหาอยางรอบคอบ มมาตรฐานในการออกแบบและการจดระบบฐขอมล

- ระบบการใชงานทถกตอง (Functional Stability)ระบบการทางานตางๆในเวบไซตตองมความแนนอนร บบการทางานตางๆในเวบไซตตองมความแนนอนและทาหนาทไดอยางถกตอง เชน ในเวบไซตมการกรอกแบบฟอรมหรอมลงคเชอมโยงกตองแนใจวา

สามารถใชงานไดจรง

7

ปจจยสาคญทผใชตองการจากเวบไซตปจจยสาคญทผใชตองการจากเวบไซต

• มเนอหาเปนประโยชน ตรงกบทผใชตองการ ป ป ไ • มการปรบปรงเพมเตมเนอหา และพฒนาเวบไซต

อยเสมอใ ใ • ใชเวลาในการ Download นอย แสดงผลเรว

• การใชงานทสะดวก เขาใจงาย

8

ความผดพลาดในการออกแบบเวบไซต ความผดพลาดในการออกแบบเวบไซต

• ใชโครงสรางหนาเปนระบบเฟรม• ใชเทคโนโลยข นสงโดยไมจาเปน• ใชเทคโนโลยขนสงโดยไมจาเปน• ใชตวหนงสอหรอภาพเคลอนไหวตลอดเวลา• มทอยเวบไซต (URL) ทซบซอน ยากตอการ จดจาและพมพ ไ ไ ใ • ไมมการแสดงชอทอยของเวบไซตในหนาเวบเพจ

• มความยาวของหนามากเกนไป• ขาดระบบเนวเกช นทมประสทธภาพ ขาดระบบเนวเกชนทมประสทธภาพ• ใชสลงคไมเหมาะสม• ขอมลเกาไมมการปรบปรงใหทนสมย • เวบเพจแสดงผลชา

9

2.2 Web Development Processกระบวนการในการพฒนาเวบไซตกระบวนการในการพฒนาเวบไซต

Phase 1 : สารวจปจจยสาคญ (Research)Phase 1 : สารวจปจจยสาคญ (Research) 1. รจกตวเอง

2. เรยนรผใช 2. เรยนรผใช 3. สารวจการแขงขนและคแขง

Phase 2 : พฒนาเนอหา (Site Content) 4. สรางกลยทธการออกแบบ

5 หาขอสรปขอบเขตเนอหา 5. หาขอสรปขอบเขตเนอหา

Phase 3 : พฒนาโครงสรางเวบไซต (Site Structure)Phase 3 : พฒนาโครงสรางเวบไซต (Site Structure) 6. จดระบบขอมล

7. จดทาโครงสรางขอมล

10

8. พฒนาระบบเนวเกชน

กระบวนการในการพฒนาเวบไซตกระบวนการในการพฒนาเวบไซต

Phase 4 : ออกแบบและพฒนาหนาเวบ (Visual Design)9 ออกแบบลกษณะหนาตาเวบเพจ9. ออกแบบลกษณะหนาตาเวบเพจ

10. พฒนาเวบตนแบบและโครงสรางเวบไซตข นสดทาย

Phase 5 : พฒนาและดาเนนการ (Production & Operation)11 ลงมอพฒนาเวบเพจ11. ลงมอพฒนาเวบเพจ12. เปดตวเวบไซต13 ดแลและพฒนาตอเนอง13. ดแลและพฒนาตอเนอง

11

Phase 1 : สารวจปจจยสาคญ (Research)Phase 1 : สารวจปจจยสาคญ (Research)Phase 1 : สารวจปจจยสาคญ (Research)Phase 1 : สารวจปจจยสาคญ (Research)

1. รจกตวเอง

กาหนดเปาหมายหลกของเวบไซต ใชเปนตวกาหนดขอบเขตและการทางานในเวบไซตใหเหมาะสมกบป ไ ป ป เปาหมายทตงไว เชนเปาหมายเพอการประชาสมพนธ, เพอการเพมจานวนลกคาและปรมาณยอดขาย, ยกระดบการใหบรการลกคา, สรางภาพลกษณทดตอ ,องคกร เปนตน

12

กาหนดเปาหมายทชดเจน การต งเปาหมายของ กาหนดเปาหมายทชดเจน การตงเปาหมายของเวบไซตน นตองอาศยความรวมมอของผเก ยวของทกคนในหนวยงาน โดยใหจดลาดบความสาคญของเปาหมาย

ตางๆ และหาขอสรปทผเก ยวของสวนใหญเหนดวย

ระบวธการวดความสาเรจ เชนวดความสาเรจจากการเพมข นของยอดขาย 20 % หรอมลกคาใหมเพมข นเดอนละ 5 ราย5

พจารณาทรพยากรทม ไดแก บคลากร, เงนทน,

ระยะเวลาในการพฒนา และเนอหาขอมลทจะนาเสนอบนเวบ

13

2 เรยนรผใช2. เรยนรผใช

กาหนดกลมผใชเปาหมาย ลองคดดวาใครคอผท จะเขามากาหนดกลมผใชเปาหมาย ลองคดดวาใครคอผทจะเขามาใชบรการ? ใหนกถงผใชหลายๆกลมใหมากทสด จากน นจงนามาเรยงลาดบความสาคญโดยใหความสาคญแกกลมใ ป ใ ผใชหลก นอกจากนนการกาหนดกลมเปาหมายใหแคบลงแลวทาใหเวบตรงกลม จะชวยสรางความเชอถอและความม นใจไดมากขนมนใจไดมากขน

คนหาสงทผใชตองการ ตองทาการคนหาสงทผใช ตองการใหถกตองและครบถวน ซงจะถอเปนกญแจสาคญทจะนาไปสความสาเรจ

14

สรางประโยชนตอผใช ปญหาทจะตองตอบใหได คอ ผใชจะไดประโยชนอะไรจากเวบของเรา? มลกษณะพเศษอะไรทแตกตางจากเวบอนบาง? มอะไรทดงดดใจใหผใชยอนกลบแตกตางจากเวบอนบาง? มอะไรทดงดดใจใหผใชยอนกลบมาอก?

เรยนรประสบการณของผใช จะทาใหเขาใจถงลกษณะการใชงานของผใช ขอมลพนฐานทควรรไดแก อาย, เพศ,

ไ ป การศกษา และรายไดเปนตน

จาลองสถานการณ คอการสรางเร องราวเกยวกบลกษณะ จาลองสถานการณ คอการสรางเรองราวเกยวกบลกษณะการเขามาใชบรการในเวบไซต เพอชวยใหมองเหนภาพลกษณะการใชงานเบองตน และยงนาไปใชกาหนดเนอหา

15

และการใชงานทจาเปนในเวบไดอก

3. สารวจการแขงขนและคแขง3. สารวจการแขงขนแล คแขง

สารวจบรรยากาศการแขงขน เปนการสารวจตลาดการแขงขนของเวบทมเปาหมายเดยวกน คนหาจานวนเวบทอยในประเภทเดยวกน และตองรวาผใชกาลงใหความสนใจกบเร องอะไร? แนวโนมขางหนาจะเปนอยางไร?สนใจกบเรองอะไร? แนวโนมขางหนาจะเปนอยางไร?

เรยนรจากคแขง ดวยการเขาไปสารวจเนอหา การใช เรยนรจากคแขง ดวยการเขาไปสารวจเนอหา การใชงานและลกษณะการออกแบบตางๆแลวนามาวเคราะหเปรยบเทยบถงจดออน และจดแขงของแตละเวบเพอใช

ประกอบการกาหนดขอบเขตของเนอหาและการใชงานในเวบ

16

Phase 2 : พฒนาเนอหา (Site Content)Phase 2 : พฒนาเนอหา (Site Content)Phase 2 : พฒนาเนอหา (Site Content)Phase 2 : พฒนาเนอหา (Site Content)

4 สรางกลยทธการออกแบบ4. สรางกลยทธการออกแบบ

สรางแนวทางใหผใชไดรบขอความทจะสอ ข นตอนน สรางแนวทางใหผใชไดรบขอความทจะสอ ขนตอนนคอการสรางกลยทธสาหรบใชในการออกแบบทส อความหมาย แนใจวาผใชจะไดรบขอความทคณตองการสอและตอบสนองตอสงทไดรบตามเปาหมายตองการสอและตอบสนองตอสงทไดรบตามเปาหมาย

ประยกตเนอหาจากสออน นาเนอหาทมอยแลว เชน

ส อส งพมพ, วทย, ซดรอม หรอทว มาจดรปแบบใหเหมาะสมกบสอ Internet แตตองระวงไมนาเนอหาจากสอเหลาน นมาใสรวมไวในเวบไซตท งหมดจากสอเหลานนมาใสรวมไวในเวบไซตทงหมด

17

เนอหาเสรมคณคา นอกเหนอจากเนอหาหลกแลว เนอหาเสรมคณคา นอกเหนอจากเนอหาหลกแลวเวบไซตยงมเนอหาทควรนามาใชเพมเตม คอ เนอหาทจะเพมคณคาใหกบเวบเพอดงดดผใชใหอยในเวบนาน ใ ฟ ใ โ ทสด เชน ในเวบมรวบรวมของฟรใหดาวนโหลด, มเกมสเพอสรางความสนก

เลอกใชเทคโนโลยทเหมาะสม แมวาเทคโนโลยภาพเคลอนไหว, เสยง, วดโอ หรอภาพกราฟกจะชวย, ,ดงดดความสนใจ แตกตองใชเครองคอมพวเตอรท ม คณภาพสง และตองตดต งโปรแกรมเสรมเพมเตม นอกจากน นปจจยทสาคญในการเลอกใชเทคโนโลยกนอกจากนนปจจยทสาคญในการเลอกใชเทคโนโลยกคอลกษณะของสนคาและตวผใชวาเหมาะสมกนหรอไม

18

5. หาขอสรปขอบเขตเนอหา กาหนดเนอหาและการใชงานทจาเปน ขอมลแบงเปน 2 ประเภท คอ เนอหา (Content) หมายถงขอมลท วไปทเรา ใ ใ ( i )อานกนในหนาเวบเพจ และ การใชงาน (Function) หมายถงระบบทผใชสามารถใชงานได เชนการสง E-mail, การสง E-Card, การสงขอมลผานแบบฟอรมmail, การสง E Card, การสงขอมลผานแบบฟอรม

พจารณาถงความเปนไปได อาศยหลก 3 ประการคอ ความสอดคลองกบเปาหมาย, ความเหมาะสมกบทรพยากร ท มอย และผลกระทบทจะเกดขน

เกบรวบรวมและพฒนาขอมล เปนข นตอนทเร มตนเกบรวบรวมและพฒนาขอมล ขอมลเหลานคอ บทความ รปรวบรวมและพฒนาขอมล ขอมลเหลานคอ บทความ, รปภาพกราฟก, เสยงประกอบ หรอวดโอทตองการนาเสนอในเวบไซต

19

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

6 จดระบบขอมล6. จดระบบขอมล

จดกลมและระบชอเนอหา เมอมขอมลจานวนมากทจะ จดกลมและระบชอเนอหา เมอมขอมลจานวนมากทจะนามาใชในเวบไซต กตองนาขอมลเหลาน นมาจดใหเปนระบบเพอใหไดเปน รางแผนผงโครงสราง (Draft

ใ architecture plan) ดวยการทดลองใชแนวคดหลายๆแบบมาใชเปนเกณฑในการจดกลม และลองต งชอกลมขอมลเหลาน น ระบบโครงสรางขอมลทดมสวนชวยใหขอมลเหลานน ระบบโครงสรางขอมลทดมสวนชวยใหผใชเขาใจภาพรวมของเนอหาไดดข น

20

7 จดทาโครงสรางขอมล7. จดทาโครงสรางขอมล

จดทารายการโครงสรางของไซต (Site Structure จดทารายการโครงสรางของไซต (Site Structure Listing) เมอมขอมลทถกจดกลมใหเปนระบบเรยบรอยแลวข นตอไปกนาขอมลทไดมาจดเปนโครงสรางเนอหาท

แสดงถงกลมขอมลและลาดบช นของหวขอยอย

โ ไ ป จดทาแผนผงโครงสรางเวบไซต เปนการนารายการโครงสรางของไซตมาจดใหเปนแบบแผนทส อความหมายยงข น โดยสรางเปนเปนแผนผงทแสดงถงโครงสรางขอมลยงขน โดยสรางเปนเปนแผนผงทแสดงถงโครงสรางขอมลลาดบช น และการเชอมโยงแตละสวนอยางชดเจน ทเรยกวา แผนผงโครงสรางเวบไซต (Architectural bl i t)

21

blueprint)

1 1. เกยวกบบรษท1.1 ประวต 1.2 สถานทต ง

2. สนคา2.1 เครองคอมพวเตอร

2.1.1 จอภาพ2 1 2 CPU2.1.2 CPU2.1.3 Keyboard

2.2 กลองดจตอล2.2.1 ความละเอยดนอยกวา 1 Mpixelว มล เ น ว p e2.2.1 ความละเอยดมากกวา 1 Mpixel

3. ตดตอบรษท

22

ตวอยาง Site Structure Listing

SPLASH

HOME

A B C

SALESSALES

23

ตวอยาง Architectural Blueprint

8 พฒนาระบบเนวเกชน8. พฒนาระบบเนวเกชน การวางแนวทางการเคลอนทภายในไซตเปนการกาหนดขอบเขตของขอมลสวนตางๆรวมกบการสราง ๆทางเชอมโยงถงกน โดยเร มพจารณาจากหนาโฮมเพจ แลวจงกาหนดแนวทางการเขาถงขอมลยอยในสวนตางๆ ผใชจะทองเวบในลกษณะใด? ทาอยางไรผใชจะตางๆ ผใชจะทองเวบในลกษณะใด? ทาอยางไรผใชจะไมหลงทางอยในเวบ?

สรางระบบเนวเกชน หรอระบบนาทางเปนเครองมอทจะนาผใชไปยงสวนตางๆของเวบ กระบวนการสราง

ระบบเนวเกชน เรมตนจากการพจารณาแผนผงโครงสรางเวบไซต รวมกบแนวทางการเคลอนทภายในไซตทมอยเพอใหไดระบบนาทางทจะพาผใชไปสสวน

24

ไซตทมอยเพอใหไดระบบนาทางทจะพาผใชไปสสวนตางๆของเวบไซต

ป 4 ประบบเนวเกชน แบงออกเปน 4 ประเภท1) ระบบเนวเกช นแบบลาดบช น (Hierarchical Navagation

System) เปนเนวเกชนทมการเชอมโยงตามลาดบช นของขอมลSystem) เปนเนวเกชนทมการเชอมโยงตามลาดบชนของขอมลหวขอหลก หวขอยอย รายละเอยด

ซงจะมขอจากดในการเคลอนทเฉเพาะแนวต ง

หวขอหลก (A)

หวขอยอย (A1) หวขอยอย (A2)

25

รายละเอยด รายละเอยด

2) ระบบเนวเกช นโกลบอล (Global Navigation System)2) ระบบเนวเกชนโกลบอล (Global Navigation System) เปนเนวเกช นหลกทมอยทกหนา เพอใหผใชสามารถเขาไปยงสวนสาคญตางๆของเวบไซท ซงจะมาชวยเสรมขอจากดของแบบลาดบ ช นทาใหสามารถ เคลอนทไดท งแนวต งและแนวนอนไดอยางม

ประสทธภาพ

3) ระบบเนวเกช นโลคอล (Local Navigation System) เปนระบบเนวเกช นทใชลงคไปยงรายละเอยดยอยๆ ภายในหวขอ เปนระบบเนวเกชนทใชลงคไปยงรายละเอยดยอยๆ ภายในหวขอหลกน นๆ โดยจะเหมาะสาหรบเวบไซททมรายละเอยดและมรายการหวขอทซบซอน

4) ระบบเนวเกช นเฉพาะสวน (Ad Hoc Navigation System)

26

เปนระบบเนวเกช นเฉพาะทตามความจาเปนของเนอหา ซงกคอลงค ของคาหรอขอความทนาสนใจซงประกอบอยในประโยค

Global NavigationLocal Navigation

27

Ad Hoc

28

Site Map ของ GoogleSite Map ของ GoogleSite Map ของ GoogleSite Map ของ Google

29

Site Map ของมหาวทยาลยเชยงใหมSite Map ของมหาวทยาลยเชยงใหม

30

ป องคประกอบของระบบเนวเกชนหลก- เนวเกช นบาร (Navigation Bar)

ช รร ฟร (F ame Based)- เนวเกชนบารระบบเฟรม (Frame Based)- Pull-Down Menu- Pop-Up Menu- Pop-Up Menu- Image Map- Search BoxSearch Box

31

Pull-Down Menu

Pop-Up Menup p

I M32

Image Map

Phase 4 : ออกแบบและพฒนาหนาเวบ Phase 4 : ออกแบบและพฒนาหนาเวบ Phase 4 : ออกแบบและพฒนาหนาเวบ (Visual Design)Phase 4 : ออกแบบและพฒนาหนาเวบ (Visual Design)

9. ออกแบบลกษณะหนาตาเวบเพจ

สรางแบบจาลองรายละเอยดขอมลในหนาเวบ ข นตอนนคอการแสดงรายละเอยดเนอหาและลงคท จะมอยในหนาหลกๆ โดยสรางแบบจาลองหนาเวบทส อถงการจดกลมของรายการเนอหาเพอสงใหผพฒนาเวบไซตนาไปกลมของรายการเนอหาเพอสงใหผพฒนาเวบไซตนาไปดาเนนการตอได

33

ชอสนคารายละเอยด :รายละเอยด :

วธใช :

ขอมลทางเทคนค :

ราคา :

ลงคไปยงหนาอน

34

ตวอยางแบบจาลองรายละเอยดขอมลในหนาเวบเกยวกบสนคา

จด บงพนทในหนา วบ พนทในหนา วบ กดจากการ จดแบงพนทในหนาเวบ พนทในหนาเวบเกดจากการจดแบงบรเวณตางๆในหนาเวบใหเปนพนทขององคประกอบชนดตางๆ เชนตาแหนงบรเวณทแสดงๆ

โลโก, ระบบเนวเกชน, ปายโฆษณา เปนตน

ในเวบไซตหนงๆ อาจมรปแบบโครงสรางหนาเวบเพจหลาย ๆ แบบ แตจะตองมเอกลกษณ และลกษณะทใกลเคยงกน มฉะน นอาจสรางความสบสนแกผใชวาใกลเคยงกน มฉะนนอาจสรางความสบสนแกผใชวารปแบบท งหมดเปนของเวบไซตเดยวกนหรอไม

35

ออกแบบโครงรางของหนาเวบเพจ ในข นตอนนเปน โ กระบวนการออกแบบหนาตาของเวบเพจโดยอาศยขอมลและ

ขอกาหนดทไดจากกระบวนการทผานมาท งหมด แบนเนอร

โลโก

เนอหา

ลงค

สกอรบาร

36รปภาพประกอบ

10 พฒนาเวบตนแบบและโครงสรางเวบไซตข นสดทาย10. พฒนาเวบตนแบบและโครงสรางเวบไซตขนสดทาย

ใ สรางและทดสอบเวบเพจตนแบบ หลงจากตดสนใจเลอกรปแบบของเวบเพจทตองการไดแลวจงนาไปสรางเปนเวบเพจตนแบบ และนาไปทดสอบการใชงานกบตวอยางกลมเพจตนแบบ และนาไปทดสอบการใชงานกบตวอยางกลมผใชหลายๆคน โดยสงเกตแนวทางการเรยกดขอมลและการใชงานระบบตางๆ

สรปแผนผงโครงสรางเวบไซตข นสดทาย ผลลพธสดทายทจะไดจากข นน คอ แผนผงโครงสรางเวบไซตข นสดทายทจะไดจากขนน คอ แผนผงโครงสรางเวบไซตขนสดทาย ซงเรยกวา Final architecture blueprint

37

38ตวอยาง Final Architectural Blueprint

ระบขอกาหนดในการพฒนาเวบไซต หรอ specs คอ ระบขอกาหนดในการพฒนาเวบไซต หรอ specs คอเอกสารทกาหนดลกษณะการออกแบบ หรอสงทตองการทางเทคนคทไดจากข นตอนตางๆทผานมา เชน รปแบบโ ไ โ โ โครงสรางเวบไซต, การจดระบบขอมล, เทคโนโลยทจะนามาใช, ระบบการต งชอไฟลใหส อความหมาย รวมถงรายละเอยดตางๆทจะนาไปใชเปนแนวทางในการพฒนารายละเอยดตางๆทจะนาไปใชเปนแนวทางในการพฒนาเวบไซตจรง

กาหนดรปแบบมาตรฐาน ควรจดทารปแบบมาตรฐานของเวบใหเปนทชดเจนเพอใหทกคนในทมพฒนาไปในในแนวเดยวกน รปแบบมาตรฐานอาจจะประกอบไปดวย ชดสทเดยวกน รปแบบมาตรฐานอาจจะประกอบไปดวย ชดสทตองการใช ชนดและขนาดของตวอกษร ลกษณะของหวเร อง เปนตน

39

Phase 5 : พฒนาและดาเนนการ Phase 5 : พฒนาและดาเนนการ (Production & Operation) (Production & Operation)11. ลงมอพฒนาเวบเพจ11. ลงมอพฒนาเวบเพจ

เรยบเรยงและตรวจสอบขอมล นาขอมลทมอยแลวมาเรยบ

เรยงใหมรปแบบทเหมาะสาหรบการอานในหนาเวบ โดยตองพยายามจดรปแบบเนอหาใหอานงายและชดเจน ตรวจสอบคาผดและขอผดพลาดตางๆคาผดและขอผดพลาดตางๆ

ตกแตงหนาตาเวบเพจใหสมบรณ นาตนแบบเวบเพจทได ไ ป ป ใ ออกแบบไวมาตกแตง ปรบปรงใหเสรจสมบรณ

40

สรางเทมเพลตสาหรบหนาเวบ ใหสรางโครงรางสรางเทมเพลตสาหรบหนาเวบ ใหสรางโครงรางมาตรฐาน หรอเทมเพลต ทประกอบไปดวยโครงสรางหลกขององคประกอบตางๆทจะมอยในทกๆหนาของเวบเพจ ซงในข นตอนนอาจมเทมเพลตมากกวา 1 แบบกไดเพจ ซงในขนตอนนอาจมเทมเพลตมากกวา 1 แบบกไดขนอยกบจานวนของโครงสรางหนาเวบหลกทได ออกแบบไว

พฒนาเวบเพจ จะเปนการเลอกรปแบบเทมเพลตท เหมาะสมกบเนอหา จากน นจะทาการใสเนอหาเขาไปใน

ตาแหนงทกาหนดไว แลวจดรปแบบใหอานงาย

พฒนาระบบการใชงานของเวบ ในบางเวบไซตอาจจะตองมสวนของฟงกชนการทางานตางๆ ซงตองมทมของตองมสวนของฟงกชนการทางานตางๆ ซงตองมทมของโปรแกรมเมอรดาเนนการพฒนาระบบการทางาน เชน สราง guestbook, counter, web board, formmail ปนตน

41

เปนตน

W b T l42

ตวอยาง Web Template

W b 43

ตวอยาง Web ทพฒนาแลว

12. เปดตวเวบไซต12. เปดตวเวบไซต ทดสอบคณภาพ การใชงาน และความถกตอง สงทควรทดสอบในข นน ไดแก

1) การใชงาน (usability)2) ความสมาเสมอ และความถกตอง (Consistency and Accuracy)3) ความเขากนไดกบส งแวดลอม (Compatibility and Degradability)Degradability)

ทาใหเวบไซตเปนทรจก มดวยกนหลายวธ เชน การลงทะเบยนเวบกบเวบไดเรกทอร search engine, การg ,แลกเปลยนลงคกบพนธมตรเวบอน, การลงทนโฆษณากบ banner ในเวบอนๆ, การทาโฆษณากบสออนทเปนลกษณะ offline เชน เชน TV Radio Magazine

44

ลกษณะ offline เชน เชน TV, Radio, Magazine, Newspaper

13 ดแลและพฒนาตอเนอง13. ดแลและพฒนาตอเนอง เพมขอมลใหมโดยยดรปแบบมาตรฐาน ใหยดรปแบบมาตรฐานทกาหนดไวใน style guide จากข นตอนท 10. ซงไดมการทกาหนดไวใน style guide จากขนตอนท 10. ซงไดมการกาหนดลกษณะและรปแบบขององคประกอบสาคญตางๆไวแลว

วเคราะหสถตการใชบรการในเวบไซต มเครองมอหลายชนดทสามารถทาการตดตามและวเคราะหลกษณะการใชงานของผท เขามาใชบรการ ซงจะทาใหทราบวามผเขามาใชบรการวนละกเขามาใชบรการ ซงจะทาใหทราบวามผเขามาใชบรการวนละกคน, คลกไปยงเนอหาสวนใดมากทสด, ใชเวลาแตละหนานานแคไหน หรอหนาไหนไมมผเขาไปชมเลย เปนตน

ตรวจสอบความถกตองของ Link อยเสมอ ตรวจสอบเนอหาและใ ไ ใ

45

การใชงานเวบไซตใหถกตอง ทนสมย และตรงกบความตองการของผใชอยเสมอ

2.3 Techniques for Web Design

สและความหมาย

q g

สแล ความหมาย

สแดง > ใหความสวาง ความรอน สรางความตนเตนส > ใ ส ใส ป โป สเหลอง > ใหอารมณของความสดใส ปลอดโปรงสฟา > โปรงโลงสบายตา ความนมนวล ความสขสบายสนาเงน > ความหนกแนน เครงขรม สขม สงางาม มศกด ศร ความมราคา หรหรามระดบสสม > ใหความรสกดงดด ทนสมย สดใส

กระฉบกระเฉง มชวตชวา ความคกคะนอง ความเปรยว กระฉบกระเฉง มชวตชวา ความคกคะนอง ความเปรยวสมวง > ใหอารมณหนกแนน มเสนห ความเรนลบ ซอนเรน สงท ปกปด มอานาจ มพลงแฝงอยสช > ใ ส สชมพ > ใหความรสกออนหวาน นมนวล ความรก วยรน ผหญง

46

สและความหมาย

สเขยว > ความเยนสบาย สงบเงยบ รนรมย รมเยน การ พกผอน ผอนคลายสนาตาล > ความสงบ ความเรยบ ความเปนผใหญ

ความเกาแก โบราณส > ส ส ใ ส สเงน > รสกถงสงใหมๆ ความทนสมย มคณคา มราคาสทอง > ความมราคาแพง ความหรหราสขาว > สอถงความบรสทธ ความสะอาด ความเรยบงายสขาว > สอถงความบรสทธ ความสะอาด ความเรยบงาย ความโลงสเทา > ใหอารมณเศรา หมนหมอง ไรชวตชวา ความเปนกลางสดา > ความมด ความไมเหน ความไมร ความนากลว

47

โทนสโทนส

โทนสหรอวรรณะของส จะมความแตกตางกนในอณหภม ซงจะแสดงออกทางอารมณ มชวตชวาหรอเศราโศก รปแบบของสทสายตาของมนษยมองเหน สามารถแบงรปแบบของสทสายตาของมนษยมองเหน สามารถแบงออกเปน 3 กลม ดงนคอ

1) สโทนรอน (Warm Colors) โ ใ ป สแบบอนหรอสโทนรอนในทางจตวทยามองวาเปนกลมสทเก ยวของกบความสข ความปลอบโยน ความอบอน และดงดดใจ ประกอบดวย สแดง สสม สเหลอง สมวงแดงและดงดดใจ ประกอบดวย สแดง สสม สเหลอง สมวงแดงและสเหลองเขยว

48

สโทนรอนสโทนรอน

49

โทนสโทนส

2) สโทนเยน (Cold Colors) ในทางจตวทยาน นจะสอถงความทดสภาพ ออนโยน

ป โ เรยบรอย มองดเปนผชานาญการ โดยเฉพาะสนาเงนทสามารถโนมนาวในระยะไกลได เครองหมายการคาสวนใหญชอบใชสนาเงน สแบบเยนประกอบดวย สเขยวทะเลใหญชอบใชสนาเงน สแบบเยนประกอบดวย สเขยวทะเล สมวง สนาเงน สออน สนาเงนออนและนาเงนเขยว

3) สโทนกลาง (Neutral Colors)) ( ) สทเปนกลาง ประกอบดวย สดา สขาว สเทา และสนาตาล

50

สโทนเยนสโทนเยน

51

สโทนกลางสโทนกลาง

52

สทนยมใชในเวบไซต 20 สสท นยมใชในเวบไซต 20 สสทนยมใชในเวบไซต 20 สสทนยมใชในเวบไซต 20 ส

รปวงลอความสมพนธของส ซงบรรจสท นยมใชในรปวงลอความสมพนธของส ซงบรรจสทนยมใชในเวบไซตไว 20 ส เราสามารถใชความสมพนธของวงลอขอสนใหเกดประโยชนได เชนวงลอขอสนใหเกดประโยชนได เชน

- ตองการออกแบบใหเวบไซตรสกตดกนโดยสนเชง อาจใชชดส 4 สททามมกน 90 องศา เชนดง

ตวอยางถาเราเลอกชดส 1 , 6 , 11 , 16 สทไดจะตดกนชดเจน

- ถาตองการใหเวบไซตดกลมกลนกอาจเลอกชดส ใกลเคยงกนกไดเชน เลอกชดสเขยวเบอร 8 , 9 , 10 , 11 กจะไดสในโทนสเขยวสวาง

53

,

54

Hexadecimal Browser Colour CodesHexadecimal Browser Colour CodesHexadecimal - Browser Colour CodesHexadecimal - Browser Colour Codes

1- #FF0000 6 - #FFFF00 11 - #009900 16 - #0000FF

2 - #FF3300 7 - #CCFF00 12 - #006633 17 - #3300CC

3 #FF6600 8 #99CC00 13 #006666 18 #6600993 - #FF6600 8 - #99CC00 13 - #006666 18 - #660099

4 - #FF9900 9 - #66CC00 14 - #003399 19 - #9900664 #FF9900 9 #66CC00 14 #003399 19 #990066

5 - #FFCC00 10 - #339900 15 - #0033CC 20 - #CC0033

55

หลกในการออกแบบเวบไซตหลกในการออกแบบเวบไซต

หลกในการออกแบบเวบไซต คอ การออกแบบใหตรงกบความหมายหรอตรงกบความตองการทเราตองการจะ ส โ ใ ส ป นาเสนอ โดยใหคานงถงความสวยงามประกอบดวย

56

โ >> ใ ไซ ป ไโจทย >> ใหออกแบบเวบไซตเกยวกบความเปนไทย

Keyword : (คดดวาส งใดแสดงถงความเปนไทย) พระพทธรป ลายไทย ดอกบว ศลปะไทย

ความบรสทธสงบ

ภาพ : พร พทธรป ลายศลป บบไทย ความบรสทธสงบภาพ : พระพทธรป ลายศลปะแบบไทย ความบรสทธสงบ

ตความหมาย : พระพทธรป = สเหลองทองตความหมาย : พระพทธรป สเหลองทอง ลายศลปะแบบไทย = สสม , สเหลอง ความบรสทธสงบ = สขาว

57

สรป : เวบไซตทเราจะออกแบบน นนาจะมภาพพระพทธรปสรป : เวบไซตทเราจะออกแบบนนนาจะมภาพพระพทธรป มาเปนองคประกอบ และสท ใชควรจะมสขาวประกอบเพอแสดงถงความบรสทธสงบ

58

สวนประกอบหนาเวบสวนประกอบหนาเวบ

Header

Bodyy

Footer

59

เทคนคการจดโครงสรางหนาเทคนคการจดโครงสรางหนา

1. จดโครงสรางของหนาโดยใชตาราง (Table)

2. จดโครงสรางของหนาโดยใชเฟรม (Frame)

3. จดโครงสรางของหนาโดยใช CSS

60

เทคนคการจดโครงสรางหนาเทคนคการจดโครงสรางหนาจดโครงสรางของหนาโดยใชตาราง (Table)

61

เทคนคการจดโครงสรางหนาเทคนคการจดโครงสรางหนาจดโครงสรางของหนาโดยใชเฟรม (Frame)

62

เทคนคการจดโครงสรางหนาเทคนคการจดโครงสรางหนาจดโครงสรางของหนาโดยใช CSS

63

หนาจอทเหมาะสมหนาจอทเหมาะสมหนาจอทเหมาะสมหนาจอทเหมาะสม

สถตจากเวบไซต http://www w3schools comสถตจากเวบไซต http://www.w3schools.comและ http://truehits.net เดอน พ.ค. 2551 ไดแสดงผลการใชงานหนาจอขนาดตาง ๆ ดงนแสดงผลการใชงานหนาจอขนาดตาง ๆ ดงน

ความละเอยด แนวโนมการใชงาน1024x768 63.81%1024x768 63.81%1280x800 10.80%800 600 7 29%800x600 7.29%

64

เทคนคการออกแบบเวบใหGoogle รจกเทคนคการออกแบบเวบใหGoogle รจกเทคนคการออกแบบเวบให Google รจกเทคนคการออกแบบเวบให Google รจก

• ใส Keyword ในในสวนของแทก <Title>• การใส Keyword ทตองการในสวนดานบนของเวบไซต

และการเนนดวยตวหนา• หลกเลยงการออกแบบเวบไซตดวย Flash หรอรปภาพเยอะ แตไมมตวหนงสอ

• หลกเลยงใชออกแบบเวบไซตดวยเฟรม • การเขยนเวบดวยภาษางาย ๆ ไมใชโคดทสลบซบซอน• ควรต งชอไฟลรปภาพ และใสคาอธบายใหกบภาพ โดยใชแทก• ควรตงชอไฟลรปภาพ และใสคาอธบายใหกบภาพ โดยใชแทก

<alt> คาอธบาย </alt> • ใส คยเวรด ใหหนาแนน ภายในหนาเวบไซต• แลกลงคกบเวบไซตอนๆ• ทา Site Map ใหกบเวบไซต

65

สวรรณะรอนสวรรณะรอนสวรรณะรอนสวรรณะรอน

66

สวรรณะเยนสวรรณะเยนสวรรณะเยนสวรรณะเยน

67

สสวนรวม (Tonality)สสวนรวม (Tonality)สสวนรวม (Tonality)สสวนรวม (Tonality)

68