1

หลกการออกแบบเวบไซตทด

2

สารบญ หนา

สารบญ ตอนท 1 รจกกบการออกแบบเวบไซต ออกแบบใหตรวงกบเปาหมายและลกษณะของเวบไซต 6 องคประกอบของการออกแบบเวบไซตอยางมประสทธภาพ 7 ความผดพลาดในการออกแบบเวบไซต 7 ตอนท 2 กระบวนการพฒนาเวบไซต จดระบบโครงสรางขอมล 9 กระบวนการ 13 ขนตอนในการพฒนาเวบไซต 10 ตอนท 3 การออกแบบเพอผใช ก าหนดกลมผใชเปาหมาย 11 สงทผใชตองการจากเซบไซต 11 ขอมลหลกทควรมอยในเวบไซต 11 ตอนท 4 การจดระบบขอมลในเวบไซต แบบแผนระบบขอมล 12 แบบแผนระบบขอมลแบบแนนอน 13 แบบแผนระบบขอมลแบบไมแนนอน 14 แบบแผนระบบขอมลแบบผสม 15 โครงสรางระบบขอมลในเวบไซต 15 โครงสรางระบบขอมลแบบล าดบชน 16 โครงสรางระบบขอมลแบบไฮเปอรเทกซ 17 โครงสรางระบบขอมลแบบฐานขอมล 17 ตอนท 5 การออกแบบระบบเนวเกชนส าหรบเวบไซต ความส าคญของระบบเนวเกชน 17 รปแบบของระบบเนวเกชน 18 องคประกอบของระบบเนวเกชนหลก 18 คณสมบตส าคญของระบบเนวเกชน 19 ตอนท 6 การออกแบบหนาเวบ สรางล าดบชนความส าคญขององคประกอบ 20

-2-

3

หนา สรางรปแบบ บคลก และสไตล 21 สรางความสม าเสมอตลอดทวทงเวบไซต 21 การวางองคประกอบทส าคญไวในสวนบนของหนาเสมอ 22 ตอนท 7 การเลอกใชสส าหรบเวบไซต เลอกใชสส าหรบเวบไซต 22 ประโยชนของสในเวบไซต 23 ความรเบองตนเกยวกบส 24 การผสมส 25 การผสมสแบบบวก 25 การผสมสแบบลบ 26 วงลอส 27 วงลอสแบบลบ 27 วงลอสแบบบวก 27 สทเปนกลาง 28 สออน สเขม และโทนส 28 ความกลมกลนของส 28 รปแบบชดสพนฐาน 29 ชดสรอน 29 ชดสเยน 30 ชดสแบบสเดยว 29 ชดสแบบสามเสา 31 ชดสทคลายคลงกน 31 ชดสตรงขาม 32 ชดสตรงขามขางเคยง 33 ชดสตรงขามขางเคยงทง 2 ดาน 33 ขอคดเกยวกบการใชสในเวบไซต 34 ระบบสในเวบไซต 35 ตอนท 8 การออกแบบกราฟกส าหรบเวบไซต

ระบบการวดขนาดของรปภาพ 35 ความละเอยดของรปภาพ 36

-3-

4

หนา ปญหาเกยวกบขนาดไฟลของกราฟก 36 ลดขนาดไฟลกราฟกส าหรบเวบไซต 36

ตอนท 9 การจดรปแบบตวอกษรส าหรบเวบไซต สวนประกอบของตวอกษร 37 การจดต าแหนง 38 ชองวางระหวางตวอกษรและชองวางระหวางค า 38 ระยะหางระหวางบรรทด 39 ความยาวของบรรทด 39 ความยาวของหนาเวบไซต 39 ขนาดของตวอกษร 40 ดงดดความสนใจดวยอกษรขนาดใหญ 40 การเนนขอความใหเดนชด 41 การสรางความสมดลในหนาเวบไซต 42 การใชสกบตวอกษร 43 อางอง 45

5

การออกแบบเวบไซตทด

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

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

6

รปแสดงตวอยางเวบไซตของ Adobe

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

องคประกอบของการออกแบบเวบไซตอยางมประสทธภาพ องคประกอบตอไปนถอเปนพนฐานทส าคญของเวบไซตทไดรบการออกแบบมาอยางมประสทธภาพ 1. ความเรยบงาย (Simplicity) หลกทส าคญของความเรยบงาย คอ การสอสารเนอหาถงผใชโดยจ ากดองคประกอบเสรมทเกยวของกบการน าเสนอใหเหลอเฉพาะสงทจ าเปนเทานน 2. ความสม าเสมอ (Consistency) ใชรปแบบเดยวกนตลอดทงเวบไซต เนองจากผใชจะรสกกบเวบไซตวาเปนเสมอนสถานทจรง ถาลกษณะของแตละหนาในเวบไซตเดยวกนนนแตกตางกนมาก ผใชกจะเกดความสบสนและไมแนใจวาก าลงอยในเวบเดมหรอไม ดงนนรปแบบของหนา สไตลของกราฟก ระบบเนวเกชน และโทนสทใชควรจะมความคลายคลงกนตลอดทงเวบไซต

7

3. ความเปนเอกลกษณ (Identity) การออกแบบตองค านงถงลกษณะขององคกร เนองจากรปแบบของเวบไซตสามารถสะทอนถงเอกลกษณ และลกษณะขององคกรนนได 4. เนอหาทมประโยชน (Useful Content) เนอหาถอเปนสงทส าคญทสดในเวบไซต ดงนนในเวบไซตควรจดเตรยมเนอหาและขอมล ทผใชตองการใหถกตองและสมบรณ โดยมการปรบปรงและเพมเตมใหทนตอเหตการณอยเสมอ เนอหาทส าคญทสดคอ เนอหาทสรางขนมาเองโดยทมงานของคณและไมซ ากบเวบอน เพราะจะเปนสงทดงดดผใชใหเขามาในเวบไซตอยเสมอ 5. ระบบเนวเกชนทใชงานงาย (User-Friendly Navigation) ระบบเนวเกชนเปนองคประกอบทส าคญมากของเวบไซต จะตองออกแบบใหผใชเขาใจไดงายและใชงานสะดวก โดยใชกราฟกทสอความหมายรวมกบค าอธบายทชดเจน รวมทงมรปแบบและล าดบของรายการทสม าเสมอ 6. มลกษณะทนาสนใจ (Visual Appeal) เปนเรองยากทจะตดสนวาลกษณะหนาตาของเวบไซตนาสนใจหรอไม เพราะเกยวของกบความชอบของแตละบคคลอยางไรกตามหนาตาของเวบไซตจะมความสมพนธกบคณภาพขององคประกอบตาง ๆ 7. การใชงานอยางไมจ ากด (Compatibility) ควรออกแบบเวบไซตใหผใชสวนใหญเขาถงไดมากทสด โดยไมมการบงคบใหผใชตองตดตงโปรแกรมใด ๆ เพมเตม หรอตองเลอกใชบราวเซอรชนดใดชนดหนงจงจะสามารถเขาถงเนอหาได สามารถแสดงผลไดในทกระบบปฏบตการและทความละเอยดหนาจอตางกนอยางไมมปญหา 8. คณภาพในการออกแบบ (Design Stability) ถาตองการใหผใชรสกวาเวบไซตทมคณภาพ ถกตอง และเชอถอได กควรใหความส าคญกบการออกแบบเวบไซตอยางมาก 9. ระบบการใชงานทถกตอง (Functional Stability) ระบบการท างานตาง ๆ ในเวบไซตจะตองมความแนนอน และท าหนาทไดอยางถกตอง

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

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

8

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

ตอนท 2 กระบวนการพฒนาเวบไซต การจดระบบโครงสรางขอมล (Information Architecture) ในกระบวนการพฒนาเวบไซตทก าลงจะไดศกษาตอไปนไดอาศยหลกการจดระบบโครงสรางขอมลทเรยกวา Information Architecture อยในหลาย ๆ สวน ตงแตขนแรกจนถงขนทไดเปนรปแบบโครงสรางสดทาย (Final Architecture Plan) ซงถอเปนกระบวนการทส าคญมากทจะท าใหเวบไซตบรรลตามเปาหมายทตงไว การจดระบบโครงสรางขอมล คอ การพจารณาวาเวบไซตควรจะมขอมลและการท างานใดบาง ดวยการสรางเปนแผนผงโครงสรางกอนทจะเรมลงมอพฒนเวบเพจ โดยเรมจากการก าหนดเปาหมายเวบไซต และกลมผใชเปาหมาย ตอมากพจารณาถงเนอหาและการใชงานทจ าเปน แลวน ามาจดกลมใหเปนระบบ จากนนกถงเวลาในการออกแบบโครงสรางขอมลในหนาเวบ ใหพรอมทจะน าไปออกแบบกราฟก และหนาตาใหสมบรณตอไป การจดท าระบบโครงสรางขอมลเปนพนฐานส าคญในการออกแบบเวบไซตทด ทจะชวยพฒนาแบบแผนรายละเอยดขอมลในการออกแบบเวบไซต ซงไดแก รปแบบการน าเสนอ ระบบการท างาน แบบจ าลอง ระบบเนวเกชน และอนเตอรเฟสของเวบ ดงนนการจดระบบโครงสรางขอมลจงเปนสงส าคญทเกยวของอยในกระบวนการออกแบบเวบไซต

เปาหมาย

เนอหา

บคลากร

ระยะเวลา

กลมผใช เงนทน

เวบไซต

9

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

สงทไดรบ

Phase 1 : ส ารวจปจจยส าคญ (Research) 3. รจกตวเอง – ก าหนดเปาหมายและส ารวจความพรอม 4. เรยนรผใช – ระบกลมผใชและศกษาความตองการ 5. ศกษาคแขง - ส ารวจการแขงขนและเรยนรคแขง

1. เปาหมายหลกของเวบไซต 2. ความตองการของผใช 3. กลยทธในการแขงขน

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

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

1. แนวทางการออกแบบเวบไซต 2. ขอบเขตเนอหาและการใชงาน 3. ขอมลทถกจดอยางเปนระบบ

1. แผนผงโครงสรางขอมล 2. แนวทางการทอเวบ 3. ขอมลทถกจดอยางเปนระบบ

Phase 4 : ออกแบบและพฒนาหนาเวบ (Visual design) 1. ออกแบบลกษณะหนาเวบเพจ 2. พฒนาเวบตนแบบและขอก าหนดสดทาย

1. ลกษณะหนาตาของเวบไซต 2. เวบเพจตนแบบทจะใชในการพฒนา 3. รปแบบโครงสรางของเวบไซต 4. ขอก าหนดในการพฒนาเวบไซต

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

1. เวบไซตทสมบรณ 2. เปดตวเวบไซตและท าใหเปนทรจก 3. แนวทางการดแลและพฒนาตอไป

10

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

สงทผใชตองการจากเวบไซต 1. ขอมลและการใชงานทเปนประโยชน 2. การตอบสนองตอผใช 3. ความบนเทง 4. ของฟร

ขอมลหลกทควรมอยในเวบไซต 1. ขอมลเกยวกบบรษท (About the company) 2. รายละเอยดผลตภณฑ (Product information) 3. ขาวความคบหนาและขาวจากสอมวลชน (News/Press releases) 4. ค าถามยอดนยม (Frequently asked questions) 5. ขอมลในการตดตอ (Contact information)

รปแสดงรายละเอยดตาง ๆ ของตวสนคา

11

ตอนท 4 การจดระบบขอมลในเวบไซต การจดระบบขอมลในเวบไซตเปนสงส าคญตอความส าเรจของเวบไซต เนองจากโครงสรางขอมลมความส าคญอยางมากตอการพฒนาระบบเนวเกชน เนองจากขอมลในแตละล าดบชนจะมความสมพนธอยางใกลชดกบรายการในระบบเนวเกชน นอกจากนนชอของกลมขอมลตาง ๆ กจะเปนตวก าหนดชนดและลกษณะของขอมลภายในกลมนน ๆ ดวย การจดระบบขอมลในเวบไซตประกอบดวย แบบแผนระบบขอมล (Organizational Scheme) และโครงสรางระบบขอมล (Organizational Structure) โดยทแบบแผนระบบขอมลในกลม ซงจะมผลตอการจดแบงขอมลเขาในแตละกลมภายหลง สวนโครงสรางระบบขอมลจะก าหนดรปแบบความสมพนธระหวางกลมขอมล

แบบแผนระบบขอมล (Organizational Scheme) แบบแผนระบบขอมล คอ การก าหนดลกษณะพนฐานของขอมลภายในกลมเดยวกน ในชวตประจ าวนคณอาจไดสมผสกบแบบแผนการจดระบบตาง ๆ มากมายโดยไมรตว เชน ในการคนหาเบอรโทรศพทจากสมดโทรศพท ซงใชรปแบบการจดระบบตามตวอกษร หรอการเลอกซอของในหางสรรพสนคาทมการแบงหมวดหมสนคาทแตกตางกนไป แบบแผนระบบขอมลแบบแนนอน (Exact Organizational Schemes) แบบแผนระบบขอมลแบบแนนอน เกดจากการแบงขอมลออกเปนกลมทแนนอน โดยไมมการเหลอมล าของขอมลในแตละกลม ตวอยางระบบขอมลรปแบบน ไดแก ระบบขอมลตามตวอกษร ระบบขอมลตามล าดบเวลา และระบบขอมลตามพนท ลกษณะเดนของแบบแผนประเภทน คอ ความงายตอการออกแบบและดแล เพราะไมจ าเปนตองอาศยความพยายามใด ๆ ในการแบงขอมลใหอยตามกลมและยงงายตอการใชงาน

การจดเรยงขอมลตามล าดบอกษร (Alphabetical) เปนรปแบบการจดระบบพนฐานของพจนานกรม สารานกรม สมดโทรศพท หองสมด และดชนทอยดานหลงหนงสอ สงเหลานลวนใชประโยชนจากการล าดบตวอกษรในการจดเรยงขอมล แตวธนกมขอดวย คอ สงทอยใกลเคยงกนอาจไมมความสมพนธกนแตอยางใด

การจดขอมลตามล าดบเวลา (Chronological) มความเหมาะสมกบขอมลบางประเภททมความสมพนธกบเวลา เชน ขาว หนงสอพมพ รายการทว ซงจ าเปนน าเสนอขอมลตามล าดบเวลา

12

ขอมลทควรจดระบบตามพนท (Geographic) ไดแก ขาว พยากรณอากาศ เศรษฐกจ การเมองหรอการปกครอง ทมลกษณะเฉพาะของแตละพนท

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

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

13

จดกลมขอมลตามกลมผใช (Audience-specific) ในกรณทคณมกลมผใชทชดเจน และเขามาใชบรการในเวบไซตอยางสม าเสมอ จะเปนการดถาคณสามารถแบงขอมลออกเปนพวก ๆ ตามความสนใจของผใชแตละกลม เพอความสะดวกในการเลอกดเฉพาะทตนเองสนใจ

จดกลมขอมลตามการท างาน (Task-oriented) เปนการแบงเนอหาและการท างานตาง ๆ ใหอยในรปของกระบวนการ หนาท และงานยอย ในปจจบนเวบไซตทจดระบบตามลกษณะงานนมใหเหนไดนอย เนองจากขอมลในเวบไซตสวนใหญมกจะเปนเนอหามากกวาการท างาน

14

จดกลมขอมลตามแบบจ าลอง (Metaphor-driven) แบบจ าลองเปนสงทมกใชกบการแนะน า

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

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

โครงสรางระบบขอมลในเวบไซต โครงสรางระบบขอมล คอ รปแบบความสมพนธระหวางกลมขอมล ซงจะมผลตอความสะดวกในการทองเวบของผใช ระบบขอมลทมโครงสรางดจะชวยเพมความชดเจนใหกบเนอหา โครงสรางหลกของระบบขอมลส าหรบเวบไซต มดวยกน 3 รปแบบ ไดแก แบบล าดบชน (Hierarchy) แบบไฮเปอรเทกซ (Hypertext) และแบบฐานขอมล (Database Model) โดยทโครงสรางแตละแบบมจดเดนและจดดอยแตกตางกน บางครงคณสามารถใชโครงสรางรปแบบเดยวได แตโดยสวนใหญแลวควรใชโครงสรางทง 3 รปแบบรวมกน เพอใหเกดประโยชนสงสด โครงสรางระบบขอมลแบบล าดบชน (Hierarchy) พนฐานของโครงสรางระบบขอมลทด โดยสวนใหญจะจดอยในรปของล าดบชน เนองจากมการแบงแยกกลมอยางชดเจน อกทงความสมพนธระหวางชนขอมลกเปนสงทเราคนเคย และไมยากเกนจะเขาใจ เชน ในทท างานทคณมหวหนา รองหวหนา อยชนตน ๆ ของโครงสราง ตอจากนนกเปนพนกงาน ลกนอง ฯลฯ รองลงไปเรอย ๆ

15

เนองจากความแพรหลายในการใชโครงสรางระบบขอมลแบบน เมอเราน ามาใชกบขอมลในเวบไซตกจะท าใหผใชเขาใจโครงสรางของขอมลทซบซอนในเวบไดงายและรวดเรว ซงถอเปนโครงสรางทเหมาะสมกบขอมลบนเวบมาก เพราะในทกวน ๆ เวบจะเรมจากหนาโฮมเพจกอนเสมอ แลวจงแบงแยกออกเปนสวนยอย ๆ และดวยวธการจดล าดบชนจากบนลงลาง ท าใหคณสามารถก าหนดขอบเขตของเนอหาภายในเวบไซตไดอยางรวดเรว โดยเรมจากการก าหนดหวขอหลกของขอมล แลวจงเลอกใชแบบแผนระบบขอมล (organizational scheme) ทเหมาะสมกบขอมลของคณทสด หลกการออกแบบโครงสรางระบบขอมลแบบล าดบชน ในการออกแบบโครงสรางระบบขอมลแบบล าดบชนส าหรบเวบไซต คณควรยดหลก 2 ประการ ดงน

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

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

16

โครงสรางระบบขอมลแบบไฮเปอรเทกซ (Hypertext) ไฮเปอรเทกซเปนโครงสรางระบบขอมลแบบใหมทมลกษณะคลายเครอขายโยงใย โครงสรางระบบนประกอบดวยองคประกอบ 2 สวน คอ รายการหรอกลมขอมลทถกลงค กบลงคทเชอมโยงขอมลเหลานน องคประกอบ 2 สวนนเมอรวมกน จะเกดเปนระบบการเชอมโยงขอมลประเภทตาง ๆ ไมวาจะเปนตวอกษร ขอมล รปภาพ เสยง หรอภาพยนตร โดยการเชอมโยงนนอาจเปนไปตามล าดบชนขอมลหรอไมตามล าดบชนขอมล หรอทงสองอยางรวมกนกเปนได จากความยดหยนอยางสงของระบบไฮเปอรเทกซ จงเปนไปไดงายทคณจะท าการเชอมโยงซบซอนเกนไปจนท าใหผใชสบสน และไมสามารถนกถงโครงสรางรวมของเวบไซตได แตจากการทระบบไฮเปอรเทกซไดเปดชองทางใหมการเชอมโยงระหวางรายการใด ๆ ในล าดบชนขอมลทตางกน เราจงมกน าระบบไฮเปอรเทกซมาใชเปนสวนเสรมใหกบโครงสรางขอมลแบบล าดบชนทมอยแลวมากกวาจะใชเปนโครงสรางหลกเสยเอง โครงสรางขอมลแบบฐานขอมล (Database Model) โครงสรางขอมลแบบนมกน าไปใชกบเวบขนาดใหญทมผรบผดชอบเรองระบบฐานขอมลโดยเฉพาะ ฐานขอมลเปนการจดระบบขอมลทเปนทนยมมากประเภทหนง โดยขอมลจะถกจดอยในรปแถวและคอลมนดวยกฎเกณฑบางอยางทมการก าหนดไวเฉพาะฐานขอมลนน ๆ การน าระบบฐานขอมลมาใชในเวบไซตจะชวยเพมความสามารถในการคนหาขอมลไดอยางถกตองและรวดเรว นอกจากนนการใชระบบฐานขอมลยงชวยเพมความสะดวกในการดแลและปรบปรงเนอหาอยางมประสทธภาพอกดวย เนองจากความซบซอนของกฎเกณฑและขอจ ากดตาง ๆ ในระบบฐานขอมล จงเปนเรองยากในการจดเนอหาทงหมดของเวบไซต ซงมทงตวอกษร ลงค รปภาพ และสออน ๆ ไวในฐานขอมลเดยวกนไดทงหมด หรอถาจะท าจรงกตองใชเวลาและความพยายามอยางมาก ดวยเหตดงกลาวระบบฐานขอมลควรน าไปใชกบบางสวนในเวบไซต หรอเวบไซตยอย (Sub site) ทมกลมของขอมลประเภทเดยวกน

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

17

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

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

ระบบเนวเกชนนนอาจประกอบดวยองคประกอบหลายๆ อยาง เชนเนวเกชนบาร หรอ pop-up menu ซงมกจะมอยในทกๆ หนาของเวบเพจ และอาจอยในหนาเฉพาะทมรปแบบปนระบบสารบญ ระบบดชน หรอ site map ทสามารถใหผใชคลกผานโครงสรางขอมลไปยงสวนอนๆได การเขาใจถงรปแบบและองคประกอบของระบบเนวเกชนเหลาน จะท าใหคณออกแบบระบบเนวเกชนดวยองคประกอบทเหมาะสมไดอยางมประสทธภาพ

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

ระบบเนวกเกชนแบบล าดบขน (Hierarchical) ระบบเนวกเกชนแบบโกลบอล (Global) ระบบเนวกเกชนแบบโลคอล (Local) ระบบเนวกเกชนแบบเฉพาะท (Ad Hoc)

องคประกอบของระบบเนวกเกชนหลก (Main Navigation Elements) ระบบเนวกเกชนทส าคญและพบไดมากทสดคอ เนวเกชนทอยในหนาเดยวกบเนอหา ไมใชเนวกเกชนทอยในหนาแรก เนองจากเมอผใชผานหนาแรกเขาไปสภายในเวบไซทแลว กไมอยากจะกลบมาเรมตนใหมทหนาแรกทกครงกอนจะเขาไปดเนอหาในสวนอนๆตอ ระบบเนวเกชนหลกทงแบบโกบอลและแบบโลคอล จงชวยใหผใชสามารถยายจากหนาใดๆ ไปสสวนอนในเวบไซทไดอยางคลองตว องคประกอบของเนวกเกชนมไดหลายรปแบบ ไดแก เนวเกชนบาร เนวกเกชนเฟรม Pull down, menu, pop-up menu, image map และ search box

18

เนวเกชนบาร (Nevigation Bar) เนวเกชนบารเปนระบบพนฐานทใชไดหลายรปแบบทงแบบล าดบชน แบบโกลบอล และแบบโคบอล โดยทวไปเนวเกชนบารจะประกอบดวยกลมของลงคตาง ๆ ทอยรวมกนในบรเวณหนงของหนาเวบ โดยอาจจะเปนตวหนงสอหรอกราฟกกได และถอเปนรปแบบของระบบเนวเกชนทไดรบความนยมมากทสด เนวเกชนบารระบบเฟรม (Frame-Based) การสรางเนวเกชนบารโดยใชระบบเฟรมเปนอกวธทท าใหผใชเขาถงเนวเกชนไดงาย และสม าเสมอ คณสมบตของเฟรมจะท าใหคณสามารถแสดงเวบหลาย ๆ หนาไวในหนาตางบราวเซอรเดยวกน โดยทแตละหนายงเปนอสระตอกน การลงคจากเฟรมทเปนเนวเกชนบารสามารถควบคมการแสดงผลของขอมลในอกเฟรมหนงได ดงนนสวนทเปนเนวเกชนบารจะปรากฏอยคงทเสมอ ในขณะทผใชเลอนดขอมลใด ๆ กตามในอกเฟรมหนง การแยกระบบเนวเกชนบารออกจากหนาขอมลในลกษณะน จะท าใหผใชเขาถงระบบเนวเกชนไดตลอดเวลา และยงคงความสม าเสมอทงทงเวบไซต อยางไรกรตาม การใชเฟรมในระบบเนวเกชนนน สรางปญหาทส าคญอกหลายประการ อาทเชน

1. การครอบครองพนทหนาจอตลอดเวลา 2. รบกวนการท างานของบราวเซอร 3. ท าใหเวลาในการแสดงผลชายงขน 4. ตองใชการออกแบบทซบซอน

คณสมบตส าคญของระบบเนวเกชน ในปจจบนแมวาจะมโปรแกรมทใชชวยในการสรางเวบไซตมากมาย แตกไมมโปรแกรมไหนทจะชวยสรางระบบเนวเกชนใหคณไดอยางมประสทธภาพ การใชคณสมบตพเศษ On Mouse Over หรอ Image Map กไมสามารถชวยอะไรไดมากนก ในการออกแบบเวบไซตตองรหลกนการสรางเนวเกชนทเหมาะสม เพอจะสอถงเนอหาไดอยางชดเจนและนาสนใจ จากนนจงใชโปรแกรมตาง ๆ ชวยสรางสงเหลานนใหส าเรจขนมา คณสมบตของระบบเนวเกชนทง 10 ประการตอไปน ไมไดรวมกนเปนสตรส าเรจแตอยางใด แตจะเปนสวนชวยใหเขาใจในหลกการ และน าไปใชในการะบวนการออกแบบไดอยางด ระบบเนวเกชนทมประสทธภาพ ควรมคณสมบตดงน

1. เขาใจงาย 2. มความสม าเสมอ 3. มการตอบสนองตอผใช 4. มความพรอมและเหมาะสมตอการใชงาน 5. น าเสนอหลายทางเลอก 6. มขนตอนสนและประหยดเวลา

19

7. มรปแบบทสอความหมาย 8. มค าอธบายทชดเจนและเขาใจไดงาย 9. เหมาะสมกบวตถประสงคของเวบไซต 10. สนบสนนเปาหมายและพฤตกรรมของผใช

ตอนท 6 หลกการออกแบบหนาเวบ สรางล าดบชนความส าคญขององคประกอบ (Visual Hierarchy) หลกส าคญในการออกแบบหนาเวบอยางหนงกคอ การสรางล าดบชนความส าคญขององคประกอบตาง ๆ ภายในหนาเวบ เพอเนนใหเหนวาอะไรเปนเรองส าคญมาก ส าคญรองลงไปหรอส าคญนอยตามล าดบการจดระเบยบขององคประกอบอยางเหมาะสม จะชวยแสดงถงความสมพนธระหวางองคประกอบตาง ๆ ในหนาเวบได ในการออกแบบคณจงควรใหความสนใจกบปจจยเหลานดวย ขนาดเปรยบเทยบ (relative size) ขององคประกอบตาง ๆ ในหนาเวบจะชวยสอความหมายถงความส าคญของสงหนงตอสงอน ๆ โดยองคประกอบทมขนาดใหญยอมสามารถดงความสนใจของผใชไดกอน และยงแสดงถงความส าคญทมเหนอองคประกอบขนาดเลก ตวอยางทเราเหนกนอยท วไปกคอ การก าหนดหวขอเรองตาง ๆ ใหมขนาดใหญกวาสวนของเนอหาเสมอ เพอแสดงใหผใชมองเหนไดชดเจนและเขาใจจส าคญของเนอหาไดดขน แตเมอใดกตามทคณก าหนดใหสวนของหวขอมขนาดเลกกวาเนอหากจะสงผลใหผใชเกดความสบสนไดทนท

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

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

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

20

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

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

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

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

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

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

21

ใหผใชรสกคนเคย และสามารถคาดการณลกษณะของเวบไดลวงหนา ซงจะชวยใหการทองเวบเปนไปอยางสะดวก ในทางเทคนคคณสามารถใช Cascading Style Sheet (CSS) ชวยในการก าหนดสไตลมาตรฐานใหกบองคประกอบตาง ๆ เชน ตวอกษร ส หรอตาราง โดยทก าหนดรปแบบเพยงครงเดยว แลวสามารถน าไปใชไดกบขอมลทงหมดในเวบไซต ท าใหเกดความสะดวกในการออกแบบ และยงงายตอการเปลยนแปลงในภายหลง ขอควรระวงอกอยางกคอ ในขณะทคณพยายามรกษาความสม าเสมอของเวบไซตไวโดยตลอดนน บางครงกอาจกลายเปนขอจ ากดทท าใหเวบไซตดนาเบอได แนวทางแกไขกคอ การสรางความแตกตางทนาสนใจในแตละหนา โดยใชองคประกอบทคลายคลงกน แตมสหรอลกษณะแตกตางไปเลกนอย เพอท าใหเกดลกษณะพเศษเฉพาะของหนานน แตยงสามารถคงความสม าเสมอของเวบไซตไวได

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

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

ตอนท 7 เลอกใชสส าหรบเวบไซต เลอกใชสส าหรบเวบไซต ( Designing Web Colors) สสนในหนาเวบเพจ เปนสงทมความส าคญมากในการดงดดความสนใจของผใช เนองจากสงแรกทพวกเขามองเหนจากเวบเพจกคอ ส ซงเปนสงก าหนดบรรยากาศและความรสกโดยรวมของเวบไซต เราสามารถใชสไดกบทกองคประกอบของเวบเพจ ตงแตตวอกษร,รปภาพ,ลงค,สพนหลง และรปภาพพนหลง การเลอกใชสอยางเหมาะสมจะชวยในการสอความหมายของเนอหา และเพมความสวยงามใหกบหนาเวบนน แตในทางกลบกน สทไมเหมาะสมอาจสรางความยากล าบากในการอานหรอรบกวนสายตาผใช รวมทงอาจท าใหการสอสารความหมายไมถกตองได เรองของสในเวบไซตมความซบซอนพอสมควร เรมตงแตการเขาใจถงการแสดงออกของสภายใตสงแวดลอมทตางกนของบราวเซอร,จอมอนเตอร และระบบปฏบตการ ตลอดจนถงการเขาใจทฤษฎส รจกเลอกใชสทเหมาะสมเพอการสอความหมายอยางสวยงาม ดงนน เปาหมายของเราคอ การตดสนใจเลอกใชสให

22

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

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

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

- สชวยเชอมโยงบรเวณทไดรบการออกแบบเขาดวยกน ผอานจะมความรสกวาบรเวณทมสเดยวกนจะมความส าคญเทากน วธการเชอมโยงแบบนชวยจดกลมของขอมลทมความสมพนธอยางไมเดนชดเขาดวยกนได

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

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

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

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

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

23

การออกแบบเกยวกบสไมใชเรองงาย แมวาจะมกฎเกณฑตางๆ ทชวยในการสรางชดส (color scheme) ทมประโยชนมากมาย แตกมแนวทางและความเขาใจผดจ านวนมากทจะน าไปสการสรางชดสทใหความรสกไมเหมาะสม ในบางสถานการณอาจใชสเปนเพยงเครองประดบอยางหนงในการออกแบบ แตในทางตรงกนขาม การใชสทมากเกนไป อาจท าใหไปบดบงองคประกอบอนๆ ในหนาเวบเพจได ดงนนการเลอกใชสใหเหมาะสมและเกดประโยชนจงเปนเรองส าคญ แมวาการเลอกชดของสมาใชในเวบเพจคอนขางจะขนอยกบความชอบของแตละคน อยางนอยเราควรมความเขาใจถงหลกการใชสเบองตน ทจะชวยในการเลอกใชสชดใดชดหนงจากชดสพนฐานอนๆไดอยางเหมาะสมกบลกษณะของเวบไซต อยางไรกตามทฤษฎเหลานจะไมท าใหคณสามารถเลอกชดสไดในทนททนใด แตอยางนอยกจะชวยน าคณไปในทศทางทถกตองได

ความรเบองตนเกยวกบส ทกคนคงไดรจกแมสหรอสขนตน ( primary color ) ทงสามซงประกอบดวย สแดง,เหลอง และน าเงน มากอนจากการศกษาในอดต เหตทสทงสามนถอวาเปนแมสหลก กเพราะวาสทงสามเปนสทไมสามารถเกดขนจากการผสมของสอนๆ และยงเปนตนก าเนดของสอนๆทเหลอทงหมด ตอไปกเปนสขนท 2 ทเกดจากการผสมของสขนตนเขาดวยกน โดยท สแดงกบสเหลองไดเปนสสม,สเหลองกบน าเงนไดเปนเขยว และสน าเงนกบแดงไดเปนมวง ตอจากนนกเปนสขนท 3 ซงเกดจากการผสมของสขนตนกบสขนท 2 ทอยตดกนทงสองดาน ในทสดเรากจะไดสขนท 3 ทงหมด 6 ส โดยสขนตน 1 ส ท าใหเกดสขนทสาม 2 ส ดงน : เหลอง-สม , แดง-สม , แดง-มวง , น าเงน-มวง ,น าเงน-เขยว และเหลอง-เขยว เมอเรารทมาของสตางๆดแลว ในขนตอไปจะเปนเรองของพนฐานการผสมส การจดระบบส และรปแบบของชดสพนฐาน

แสดงตวอยางสขนตางๆ

สขนท 1 สขนท 2

24

สขนท 3 สขนท 4

การผสมส ( Color Mixing) รปแบบการผสมสเพอใหเกดเปนสตางๆ สามารถแบงไดเปน 2 แบบ คอการผสมของแสงหรอการผสมแบบบวก ( additive mixing ) และการผสมของรงควตถ (pigment) หรอการผสมแบบลบ (subtractive mixing) ซงมรายละเอยดดงตอไปน การผสมสแบบบวก (Additive Mixing) การผสมสแบบบวกน เปนสงทคอนขางยากในการท าความเขาใจ เพราะมหลกการทลบลางสงทคณถกสอนมาในสมยกอน เราก าลงจะพดถงรปแบบการผสมของแสง ไมใชการผสมของวตถมสบนกระดาษ เนองจากแสงสขาวประกอบดวยล าแสงทมสตางๆตามความยาวคลนแสง ความยาวคลนแสงพนฐานไดแกสแดง เขยว และน าเงน ไมใชสแดง เหลองและน าเงนอยางทเราเขาใจมากอน เมอคลนแสงเหลานมการซอนทบกนกจะกอใหเกดการบวกและรวมตวกนของความยาวคลนแสง จงเปนทมาของชอ “สแบบบวก” เมอแสงทงสามสมการผสมกนเปนค กจะเกดเปนสน าเงนแกมเขยวหรอ cyan (เกดจากสน าเงนบวกกบเขยว) สแดงแกมมวงหรอ magenta (เกดจากสแดงบวกกบน าเงน) และสเหลอง (เกดจากสแดงบวกกบเขยว) และในทสดเมอผสมสทงสามเขาดวยกน กจะไดผลลพธเปนแสงสขาวอกครง สอใด ๆ กตามทมการใชแสงสองออกมา อยางเชน จอโปรเจคเตอร (movie projector) ทว หรอจอมอนเตอรส าหรบคอมพวเตอร ตางกเปนไปตามกฎของการผสมสแบบบวกน เพราะเหตน การออกแบบสส าหรบเวบไซต จงตองอาศยหลกการผสมสแบบบวกนเชนกน

รปแสดงการผสมสแบบบวก

25

การผสมสแบบลบ (Subtractive Color Mixing) การผสมสแบบลบไมไดมความเกยวของกบเรองของล าแสงแตอยางใด ๆ แตเกยวเนองกบการดดกลนและสะทอนแสงของวตถตางๆ เมอแสงสขาวสองมายงวตถหนงๆวตถนน จะดดกลนแสงทความยาวคลนบางระดบไวและสะทอนแสงทเหลอออกมาใหเราเหน สขนตนในรปแบบนประกอบดวย สแดงแกมมวง (magenta) สน าเงนแกมเขยว (cyan) และสเหลอง ซงไมใชสแดง เหลอง และน าเงนอยางธรรมดาอยางทหลายๆคนเขาใจ เมอมการผสมของรงควตถหรอวตถมส จะเกดการรวมกนของสทจะถกดดกลนไว ท าใหปรมาณแสงทจะสะทอนออกมาลดลง จงเปนทมาของชอ “ สแบบลบ ” เมอสทงสามมการผสมกนเปนคๆ กจะเกดผลเปนสตางๆ ไดแกสแดง (เกดจากสแดงแกมมวงบวกกบเหลอง) สเขยว (เกดจากสเหลองบวกกบน าเงนแกมเขยว) และสน าเงน (เกดจากสน าเงนแกมเขยวบวกกบแดงแกมมวง) ในขนสดทาย เมอรวมสทงสามเขาดวยกนกจะเหนเปนสด า เพราะมการดดกลนแสงทกสไวทงหมด ท าใหไมมแสงสใดสามารถสะทอนออกมาได สอตางๆทเกยวของกบการใชวตถมส อยางเชน สทใชในการวาดรปของศลปน , ดนสอส , สเทยน รวมถงระบบการพมพแบบ 4 ส ในสงพมพตาง ๆ (โดยมหมกสด าเพมมาอกสหนง) ลวนอาศยการผสมสแบบลบนทงสน

รปแสดงการผสมสแบบลบ

วงลอส (Color Wheel) เพอความเขาใจถงความสมพนธของสทดขนเราความท าความรจกกบระบบสทเขาใจงาย และมประโยชนมากทสดทเรยกกนวา วงลอส ( color wheel ) ซงเปนรปแบบหนงทมระบบการจดเรยงสทงหมดไวในวงกลม วงลอสถกพฒนาขนจากความตองการกฎระเบยบทชดเจนของล าดบและความกลมกลนของส แมในอดตจะมการพฒนาและออกแบบระบบสในรปแบบตางๆมากมาย แตสวนใหญมกจะมความซบซอนเกนกวาทจะน ามาใชประโยชนในการออกแบบจรง ในทสดเราจะใชวงลอสแบบ 12 ขน ซงถกประดษฐขนโดย Sir Isaac Newton ในป 1666 ทไดแสดงถงการจดล าดบเฉดสอยางมเหตผลและงายตอการน าไปใช จงเปนประโยชนอยางมากตอศลปนในการศกษาและออกแบบศลปะตางๆ รวมทงการเลอกใชสในกระบวนการออกแบบเวบไซตทเราก าลงสนใจอย

26

วงลอสแบบลบ ( Subtractive Color Wheel )

สขนตนในวงลอสแบบลบประกอบดวย สแดงแกมมวง ( magenta ) สน าเงนแกมเขยว ( cyan ) และสเหลอง ( yellow ) สวนสอนๆอาศยหลกการผสมสแบบลบไดเปนสทเหลอทงหมด

วงลอสแบบบวก ( Additive Color Wheel )

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

Magenta

Cyan Yellow

Red

Blue Magenta bBMagenta

Green

27

สทเปนกลาง ( Neutral Colors ) สทเปนกลางคอสกลมหนงทไมไดถกบรรจไวในวงลอส เพราะเปนสทไมไดรบอทธพลใดๆมาจากสอน ซงกคอสเทา แมวาจะมเฉดสของสเทาจ านวนมากมายไมสนสด แตแคเพยงท 256 ระดบ สายตาคนเรากไมสามารถแยกความแตกตางออกจากกนไดแลว ท าใหมองเหนเปนแถบสระหวางด ากบขาว โดยไมมรอยตอแตอยางใด สเทาไดชอวาเปนสกลางกเพราะเปนสทไมมลกษณะเฉพาะสวนตว ท าใหชดของสทประกอบไปดวยสเทาทงหมดจะดคอนขางจดชด ไมเราอารมณ อยางไรกตาม สเทากจะไปรบเอาลกษณะจากสทอยลอมรอบนนเอง เปนเหตใหศลปนสวนใหญหลกเลยงการใชสเทา เพราะผลทไดรบจากสอนนนไมคงท ยากตอการควบคม

สเทา 12 ขนตามล าดบจากออนไปเขม สออน สเขม และโทนส ( Tint , Shade and Tone ) ในการผสมสกลางดงกลาวเขากบสบรสทธ (สทไมผานการผสมกบสอนมากอน) จะเกดเปนสตางๆจ านวนมากมาย จนไมสามารถบรรจไวในวงลอสไดทงหมด จากประสบการณทผานมา คณคงรวาสแดงไมไดมเพยงเฉดสเดยว แทจรงแลว มแดงออน,แดงแก,แดงเขม หรองแดงจาง ฯลฯ อกจ านวนนบไมถวน สเหลานเปนผลมาจากการผสมของสบรสทธกบสด า ขาว และเทาระดบตางๆ นนเอง

- เมอสบรสทธผสมกบสขาว จะไดเปนสออน ( tint of the hue ) - เมอสบรสทธผสมกบสเทา จะไดเปนโทนสทระดบตางๆ ( tone of the hue ) - เมอสบรสทธผสมกบสด า จะไดเปนสเขม ( shade of the hue )

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

รปแสดงความหลากหลายของสทไดจากการผสมสหลกกบสขาว เทา และด า

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

28

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

รปแบบชดสพนฐาน ( Simple Color Schemes ) หลงจากคณไดรจกพนฐานของสมาพอสมควร ตอไปจะเปนเรองของชดสทถกจดกลมอยางเขากนดวยรปแบบตางๆ ท าใหเรามโอกาสเลอกชดสเหลานมาใชในการออกแบบไดโดยไมตองเสยเวลาสมเลอกสตางๆใหดเขากน อยางไรกตามคณควรยดรปแบบเหลานเปนเพยงหลกการเบองตน และยงคงตองท าการปรบเปลยนคาของส ( hue ) ความอมตวของส ( saturation ) และความสวางของส ( lightness ) เพอใหเกดลกษณะทอานงาย สวยงาม และเหมาะสมกบเนอหาของเวบไซต ชดสรอน ( Warm Color Scheme ) ชดสรอนประกอบดวยสมวงแกมแดง , แดงแกมมวง , แดง , สม , เหลอง และเขยวอมเหลอง สเหลานสรางความรสกอบอน สบาย และความรสกตอนรบแกผชม ชวยดงดดความสนใจไดงาย ในทางจตวทยาสรอนมความสมพนธกบความสข สะดวก สบาย สตางๆในชดสรอนมความกลมกลนอยในตวเอง ขณะทอาจจะดไมนาสนใจบาง เพราะขาดสประกอบทตดกนอยางชดเจน

รปแสดงชดสรอน

ชดสเยน ( Cool Color Scheme ) ชดสเยนประกอบดวยสมวง , น าเงน , น าเงนออน , ฟา , น าเงนแกมเขยว และสเขยว ตรงกนขามกบชดสรอน ชดสเยนใหความรสกเยนสบาย องคประกอ บทใชสเยนเหลานจะดสภาพเรยบรอย และมความช านาญ แตในทางจตวทยา สเยนเหลานกลบมความสมพนธกบความซมเศราหดหและเสยใจ นอกจากนน ชดสเยนมความกลมกลนกนโดยธรรมชาต แตอาจจะดไมนาสนใจในบางครง เพราะขาดความแตกตางของสทเดนชด

29

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

รปแสดงชดสเยน

ชดสแบบสเดยว (Monochromatic Color Scheme) รปแบบของชดสทงายทสดคอชดแบบสเดยวทมคาของสบรสทธเพยงสเดยว ความหากหวายของสชดนเกดจากการเพมสเดยว ความหลากหลายของสชดนเกดจากการเพมความเขมหรอความเขมหรอความออนในระดบตางๆ ใหกบสตงตน ดงนน ชดสแบบเดยวของสแดงอาจประกอบดวยสแดงลวน สแดงอฐ(สเขม ของสแดง) สสตรอเบอร(สออนปานกลางของสแดง) ละชมพ(สออนมากของสชมพ) ชดสแบบนคอนขางจะมความกลมกลนเปนหนงเดยวกน และประสทธภาพในการสรางอารมณโดยรวมดวยการใชสเพยงสเดยว แตในบางครงรปแบบทมสเดยวนอาจดไมมชวตชวา เพราะขาดความหลากหลายของส ซงอาจท าใหผอานความสนใจ

รปแสดงชดสแบบเดยว

ชดสแบบสามเสา (Triadic Color Scheme) วธการทงายอกแบบหนงในการเลอกชดสมาใชกคอ การนกถงสามเหลยมดานเทาลอยอยเหนอวงลอส เพยงเทาน สทอยทมมของสามเหลยมทงสามกจะเปนสทเขาชดกน ชดสทไดจากการเลอกแบบนจง

30

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

รปแสดงชดสแบบสามเสา

ชดสทคลายคลงกน (Analogous Color Scheme) ชดสทมรปแบบอยางงายอกแบบหนง กคอชดสทคลายคลงกน ซงจะประกอบดวยส 2 หรอ 3 สทอยตดกนในวงลอส เชนสแดงแกมมวง สแดง และสสม เนองจากชดสทอยในรปแบบนมจ านวนมากมายท าใหเราสามารถเลอกชดสแบบนมาใชงานไดอยางงายสะดวก และแมวาเราสามารถเพมจ านวนสในชดใหมากขนเปน 4 หรอ 5 สได แตกลบจะมผลใหขอบเขตของสทมความกวางเกนไป ท าใหสอยตรงปลายทงสองของชดไมมความสมพนธกน เปนสาเหตใหลกษณะการทอยตรงปลายทงสองชดไมมความสมพนธ เปนสาเหตใหลกษณะการทมสคลายคลงกนลดลง ณ บางต าแหนงของวงลอส ชดสคลายคลงกน 3-4 สทอยตดกนอาจดเหมอนเปนสเดยวกน เพราะมสใดสหนงคลมโทนของสทงหมดไว ไมเพยงแตชดสแบบนจะน ามาใชงานไดสะดวก ความคลายคลงกนของสยงกอใหเกดความกลมกลนกนอกดวย แมกระนนกดการขาดความแตกตางอยางชดเจน อาจท าใหไมมความเดนเพยงพอทจะดงดดความสนใจของผอานได

31

รปแสดงชดสทคลายคลงกนประกอบดวยส 2-3 สทอยตดกนในวงลอส

ชดสตรงขาม (Complementary Color Scheme) สตรงขามในทน หมายถง สทอยตรงกนขามกนในวงลอส เชน สแดงกบฟา หรอสน าเงนออนกบสมนาสนใจทวาเมอน าสทงสองนมาผสมกน จะไดผลลพธเปนสขาวส าหรบวงลอสแบบบวก หรอไดเปนสด าส าหรบวงลอสแบบลบ ทเปนเชนนกเนองจากวาสแตละสทอยตรงขามกน จะมอตราสวนของสขนตนทผกผนกน ตวอยางเชน สแดงในวงลอสแบบบวกมสทตรงขามเปนสน าเงนแกมเขยว ซงเปนสวนผสมจากสน าเงนและเขยว จงท าใหสทงสองรวมกนยงไดเปนสขาวอกเชนเดม จากคณสมบตนเราอาจเรยกสคนวาเปน “สเตมเตม” กได เมอน าสทงสองมาใชคกนกจะท าใหสทงสองมความสวาง และสดใสมากขน ซงถอเปนคสทมความแตกตางมากทสด และยงมความเสถยรมากทสด (maximum contrast and maximum stability) ขอไดเปรยบของสในรปแบบนคอ ความสดใส สะดดตา และบางครงดนาสนใจกวาสทใชรปแบบสามจดเสยอก ท าใหแนใจไดวาชดสตรงกนขามน จะไมดจดชอ ขาดความนาสนใจ อยางไรกดจ านวนสทจ ากดในรปแบบน ท าใหผอานใหความสนใจไดงาย แลวหลงจากนนกอาจละทงความรสกสนใจไปไดงายเชนกน

รปแสดงชดสตรงขามไดแกส 2 สทอยตรงขามในวงลอ

32

ชดสตรงขามขางเคยง (Split Complementary Color Scheme) ชดสตรงขามขางเคยงมรปแบบทเปลยนแปลงมาจากชดสตรงขาม แตละความแตกตางกนทสใดสหนงทอยตรงขามกนถกแทนทดวยสทอยดานขางทงสอง เชน สฟาซงมสดานขางเปนสน าเงนออนกบสน าเงนแกมเขยว ฉะนนชดสตรงขามขางเคยงทไดจงประกอบดวย สแดง สน าเงนออน และสน าเงนแกมเขยว ขอไดเปรยบของชดสแบบน คอ ความหลากหลายทมากขนเมอเทยบกบชดสตรงขาม อยางไรกตามความหลากหลายทเพมขนมาน มผลใหความสดใสและความสะดดตาลดลง รวมถงความเขากนของสกลดลงดวย

รปแสดงชดสตรงขามขางเคยง

ชดสตรงขามขางเคยงทง 2 ดาน (Double Split Complementary Color Scheme) ชดสแบบนถกดดแปลงมาจากชดสตรงขาม เชนกน แตคราวนสตรงกนขามทงสองถกแบงแยกเปนสดานขางทง 2 ดาน จงไดเปนชดส 4 ส ดงเชนสแดงแกมมวงกบน าเงนแกมเขยว และน าเงนออนกบสม ขอไดเปรยบทเหนไดชด คอ ความหลากหลายทเพมขนจากชดสตรงขามแบบแบงแยก สวนขอเสยเปรยบกยงมลกษณะเชนเดมทความสดใสและความกลมกลนของสลดลง

รปแสดงชดสตรงขามแบบแบงแยก 2 ดาน

นอกเหนอจากน ยงมรปแบบอนทเรยกวา Alternate Complementary Color Scheme โดยมสทไดจากสามเหลยมรวมกบอกสหนงทอยตรงกนขามกบสใดสหนงในสามเหลยม เชน สเขยว สมวงแดง สแดง

33

และสสม สวนแบบสดทายไดแก ชดสแบบสเหลยม (Tetrad Color Scheme) ทเกดจาก 4 สทอยตรงกนขามภายใตรปสเหลยม วธนเปนการใชสขนตน 1 ส สขนทสอง 1 ส และสขนทสาม 2 ส มาประกอบกน

ขอคดเกยวกบการใชสในเวบไซท จากสทไดเรยนรมาตงแตตนเกยวกบสและสอตางๆทมผลตอการสแดงออกของส คงจะพอท าใหคณออกแบบเวบไซทโดยใชสทเหมาะสมกลมกลนกนในการสอความหมายถงเนอหา และสรางความสวยงานใหกบหนาเวบเพจไดเปนอยางด และทส าคญจาการใชชดสส าหรบเวบเพจทมสสนตรงกบความตงใจอยางไมผดเพยน ในสวนน เปนเรองของขอคดสนๆ เกยวกบการใชสใหเกดประโยชนกบเวบไซท 3 ขอดงน 1. ใชสอยาสม าเสมอ การออกแบบเวบไซทโดยใชสอยางสม าเสมอชวยสรางความรสกถงบรเวณของสถานท เชนการใชสทเปนชดเดยวกนตลอดทงไซทเพอสรางขอบเขตของเวบไซททสมผสไดดวยตา เมอผใชคลกเขาไปในแตละหนากยงรสกไดวาก าลงอยภายในเวบไซทเดยวกน 2. ใชสอยางเหมาะสม เวบไซทเปรยบเสมอสถานทหนงๆ ทมลกษณะเฉพาะ เชนเดยวกบสถานทตางๆ ในชวตจรงอยาง ธนาคาร โรงเรยน หรอรานคาตางๆ ดงนน การเลอกใชสทเหมาะสมกบลกษณะของเวบไซท จะชวยสงเสรมเปาหมายและภาพพจนของเวบไซทได นอกจากนคณควรค านงถงปจจยหลายๆอยางทมผลตอความเหมาะสมของสในเวบไซท เชน วฒนธรรม แนวโนม ของแฟชน อายและประสบการณของผใช ดงนนเราจงรสกเหนดวยเมอมการใชสชมพเพอสแดงถงความรก ใชโทนสน าตาลด า สอถงเหตการณใน อดต ใชสสดใสส าหรบเดก และการใชสตามแฟชนในเวบมเกยวกบเครองแตงกาย 3. ใชสเพอสอความหมาย

Color Wheel Pad ทออกแบบโดย web.designBrand.com มการแสดงคาของสในระบบเลขฐานสบไวในแตละชองส ซงจะเปนประโยชนในการเลอกใชสตามรปแบบตาง ๆ จากวงลอส

34

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

ระบบสในเวบไซท ระบบสในเวบไซทมรปแบบเฉพาะตวทแตกตางจากสอนๆ อยางสนเชง ท าใหการใชสอยางมประสทธภาพในเวบจงตองอาศยความเขาใจรายละเอยดทางเทคนคพอสมควร ระบบสทมความเฉพาะตวนเปนผลมาจากความเกยวของกบสอ 3 ประเภททมอทธพลตอการปรากฏของส ได แก

- จอมอนเตอร : เปนเพราะเวบเพจถกเรยกดผานทางจอมอนเตอร ดงนนการแสดงสของเวบเพจจงขนอยกบประสทธภาพดานสของจอมอนเตอร - บราวเซอร : เนองจากบราวเซอรมระบบการความคมและแสดงสภายในตวเอง เมอใดทมการแสดงผลในหนาจอทมจ านวนสจ ากด บราวเซอรจะท าการสรางสทดแทนใหดเหมอนหรอไกลเคยงกบสทก าหนดไว ผลลพธทไดจงไมแนนอน - HTML : สในเวบเพจทไมไดเปนสวนหนงของรปภาพ เชน สของตวอกษรและพนหลง จะถกควบคมดวยค าสงภาษา HTML โดยระบคาของสในระบบเลขฐานสบหก เพราะฉะนน การเขาใจถงอทธพลของปจจยทงสาม และออกแบบโดยค านงถงขอจ ากดเหลาน จะท าใหผใชโดยสวนใหญไดเหนสทถกตองอยางทคณตงใจ

ตอนท 8 การออกแบบกราฟกส าหรบเวบไซต ระบบการวดชนาดของรปภาพ เมอจอมอนเตอรท าการแสดงผลรปภาพในเวบเพจ พกเซลในรปภาพจะจบคกนแบบหนงตอหนงกบพกเซลตามความละเอยดของหนาจอ ท าใหหนวยการวดรปภาพในเวบจงเปนพกเซล ไมใชนวหรอเซนตเมตรแตอยางใด ดงนนในกระบวนการ ออกแบบกราฟกและรปภาพตางๆ คณจงความลดขนาดเปนพกเซลไวเสมอ ซงจะมประโยชนในการเปรยบเทยบขนาดกราฟกกบองคประกอบอนๆ ในหนาเวบ รวามถงขนาดวนโดวของบราวเซอรอกดวย ระบบการวดความละเอยดของรปภาพ เนองจากรปภาพในเวบโดยสวนใหญจะถกสแดงผานหนาจอมอนเตอร ในทางเทคนคทถกตองแลว ระบบการวดความละเอยดของรปภาพจงตองเปน “Pixels per inch” (ppi) แตกมระบบการวดอกแบบหนงคอ “Dot per inch (dpi) ทใชความละเอยดของรปถาพทพมพออกมา ซงความละเอยดทไดจะขนอยกบประสทธภาพ

35

ของเครองพมพแตละเครองในทางปฏบต หนวย ppi กบ dpi อาจใชแทนกนได ท าใหเปนทยอมรบวาความละเอยดของรปภาพในหนาจอมหนวยเปน dpi แทนทจะเปน ppi ทถกตอง

ความละเอยดของรปภาพ โดยปรกตแลว รปภาพทกรปในเวบไซทควรจะมความละเอยดแค 72 ppi ก เพยงพอแลว เรองจากจอมอนเตอรองผใชสวนใหญมความละเอยดต า (72 ppi) ดงนนแมวารปภาพจะมความละเอยดสงกวานเรากไมอาจมองเหนความแตกตางได เมอเปรยบเทยบความละเอยดของรปภาพในเวบกบในสงพมพ คณจะเหนความแตกตางกนวารปภาพในเวบมคณภาพทต ากวา เนองจากมขอมลและรายละเอยดของรปภาพทนอยกวาท าใหรปทไดมองดมลกษณะเปนจดเลกๆ ซงถอเปนธรรมชาตของรปภาพในเวบ

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

ลดขนาดไฟลกราฟกส าหรบเวบ (Optimizing Web Graphic) ปญหาความเชองชาของอนเตอรเนทท าใหผออกแบบเวบไซทตองระมดระวงในเรองของเวลาทใชในการดาวนโหลดเปนอยางมาก แนวทางงายๆ ส าหรบผมหนาทออกแบบกราฟก าหรบเวบกคอพยายามท าใหกราฟกมขนาดเลกมากทสดเทาทจะเปนไปได ทงนผออกแบบตองรจกทจะสรางความสมดลระหวางความสวยงามกบความเรวในการแสดงผลเรองจากการสรางเวบโดยไมมรปภาพกราฟกใดๆ เลยยอมไมนาสนใจ เพราะกราฟกมบทบาทส าคญในการแนะน า และสรางความบนเทงตอผชม ดงนนนแนวทางทดทสดคอการสรางเวบทมประสทธภาพ โดยใชกราฟกทแสดงผลไดอยางรวดเรว การ Optimize กราฟกจะชวยลดขนาดไฟลใหเลกลงไดท าใหแสดงผลไดเรวขน และท าใหการปราฏของสอยางถกตองในหนาจอของผใช

36

ตอนท 9 การจดรปแบบตวอกษรส าหรบเวบไซต สวนประกอบของตวอกษร

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

Ascender สวนบนของตวอกษรพมพเลก ทสงกวาความสง x-height ของตวอกษร Descender สวนลางของตวอกษรพมพเลกทต ากวาเสน baseline ของตวอกษร Baseline เสนสมมตทตวอกษรสวนใหญตงอย Cap height ความสงจากเสน baseline ไปถงสวนบนสดของตวอกษรพมพใหญ x-height หมายถง ความสงของตวอกษร x ในแบบพมพเลก ซงมกจะใชอางถงความสง

ของตวอกษรทไมรวมสวนบนและสวนลาง

point size ระยะความสงทงหมดวดจากสวนบนสดถงสวนลางสดของตวอกษร การจดต าแหนง (Alignment) การจ าต าแหนงของตวอกษรในแตละสวนมผลตอความรสกของเอกสาร โดยทการจดต าแหนงแตละแบบจะใหความรสกทตางกน ตวอกษรทถกจดใหชดขอบดานซายโดยทปลอยใหดานขวามลกษณะไมสม าเสมอ จะใหความรสกไมเปนทางการ และจะอานไดงายกวาการจดชดขอบขวา โดยทวไปแลวพยายามหลกเลยงการจดชดขวา ยกเวนเมอมความเหมาะสมกบรปแบบจรงๆ สวนตวอกษรทมการปรบระยะใหชดขอบทงซายและขวา (Justify) เปนทนยมใชในหนงสอพมพและจลสาร พรอมกบใหคามรสกทเปนทางการอกดวย ในภาษา HTML คณสามารถจดต าแหนงตวอกษรไดดวยค าสง ALIGN และเลอกค าสง left, right, center และ Justify (ค าสง Justify ใชไดเฉพาะบราวเซอรรนใหมๆ) ดงตวอยาง

37

จดชดซาย

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

จดชดขวา

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

จดเรมตนของแตละบรรทด

จดกงกลาง

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

จดชดขอบซาย และขวา

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

ชองวางระหวางตวอกษร (Tracking) และชองวางระหวางค า ความรสกของตวอกษรอาจจะเปนผลมาจากพอทวางโดยรอบ ทอยระหวางตวอกษร ระหวางค า หรอระหวางบรรทด คณสามารถปรบระยะของชองวางเหลานเพอใหอานไดงายขน แมวาตวอกษรจะถกออกแบบมาใหมระยะหางทเหมาะสมอยแลว แตในบางสถานการณ อาจมความตองการใหตวอกษรดแนนหรอหลวมเปนพเศษ อยางเชนตวอกษทใช ตวพมพใหญทงหมด (UPPERCASE) จะดคอนขางแนนเพราะถกออกแบบใหใชรวมกบตวพมพเลกดงนนคณควรเพมชองวางระหวางตวอกษรใหมากขนเลกนอย ส าหรบค าทใชตวพมพใหญทงหมด ตวอกษรบางคทอยตดกนอาจมระยะหางไมเหมาะสม จ าเปนตองท าการปรบแตงทเรยกวา Kerning เปนการปรบระยะหางระหวางคของตวอกษร ซงจะมความส าคญมากเมอใชตวอกษรขนาดใหญหรอตวอกษรทใชเปนหวขอหลก เพราะเมอตวอกษรใหญขนกจะเกดชองวางทมากขนดวย จดประสงคของการท า kerning คอการปรบระยะหางของตวอกษรใหเทากนโดยตลอด เพอทสายตาจะไดเคลอนทอยางราบเรยบและสม าเสมอ ชองวางระหวางค าส าหรบภาษาองกฤษ หรอ ชองวางระหวางค าในภาษาไทย เปนสงทควรจะเทากนเสมอ ไมวาจะเปนการจดต าแหนงแบบ Justify ชองวางของแตละค าจะแตกตางกนไปในแตละบรรทด เพอชวยใหขอบซายและขวาเทากน คณอาจตองใชเครองหมายยตภงค (-) มาชวยแยกค าใหอยคนละบรรทด หรอปรบเปลยนการเวรวรรคใหม เพอไมใหมชองวางมากเกนไป

38

ระยะหางระหวางบรรทด (Leading) ระยะหางระหวางบรรทด หรอ Leading ซงมทมาจากการเตมแนวของตะกวเขาไประหวางบรรทดเพอใหอานงายขนในกระบวนการท าตวอกษรโลหะในสมยกอน (Leading ออกเสยงวา “เลดดง” มาจากค าวา Lead หรอตะกวแปลตรงตามตววา “เสนตะกวทใชถางบรรทดในการพมพ” ไมไดเกยวกบค าวา lead ทแปลวา “การน า” หรอ “สงน า” แตอยางใด จากกระบวนการนท าใหค าวา Leading ถกน ามาใชในการก าหนกระยะหางระหวางบรรทด ในโปรแกรมใชในการก าหนดระยะหางระหวางบรรทดในโปรแกรมออกแบบสงพมพและ word processing ทระยะหางนอยจะมจ านวนตวอกษรไดมากจะขยายพนทของตวอกษรและยงเพมความสะดวกในการอานอกดวย ลองเปรยบเทยบผลของความสะดวกในการอานจากตวอยางตอไปน ความยาวของบรรทด เมอบรรทดของตวอกษรยาวขน อาจสรางความไมสะดวกใหกบผอานทตองเลอนสายตาจากปลายบรรทดไปยงสวนตนของบรรทดใหม ในทางตรงกนขามบรรทดทคอนขางสน ขอความจะถกแยกจากกนบอยครงซงเปนการรบกวนผอานเชนกน ความยาวทเหมาะสมของบรรทดขนอยกบหลายปจจยอยางเชน ชนดตวอกษร ขนาด ระยะหางระหวางบรรทด และความยาวของเนอหา คณสามารถควบคมความยาวของบรรทดไดดวยการสรางตางราง HTML ครอบบรเวณเนอหาเหลานน แลวก าหมดความกวางของชองเปนพกเซลแทนการใหเปอรเซนต จากการศกษาพบวาสายตาคนเราสามารถกวาดไปในพนทกวางประมาณ 4 นวไดโดยไมตองขยบศรษะ ดงนน เพอความสะดวกในการอาน แตละบรรทดควรมตวอกษรประมาณ 50-70 ตวหรอ 7-15 ค า (ภาษาองกฤษ) หรอเทยบเปนพนทกจะกวางประมาณ 350-500 พกเซล ความยาวของหนาเวบ โดยปรกตแลว ความยาวของหนาเวบไมควรยาวจนเกนไป เพราะหนาเวบทยาวมากๆ จะท าใหผใชรสกเหนอยลาทจะอาน ทางทดควรจะแบงออกเปนหนาสนๆ หลายๆ หนาตอกน ซงจะใหความรสกทดกวาอยางไรกตาม ไมมขอก าหนดตามตวเกยวกบความยาวสงสดทควรจะเปน ทงนขนอยกบรปแบบหนาและขนากไฟลนนๆ แบงเนอหาออกเปนยอหนา (Paragraph) เมอใดทเนอหาของคณมความยาวมากๆหลายบรรทดตอกนกควรแบงขอความเหลานนใหเปนสวนยอยๆ หรอเรยกวา “ยอหนา” หรอ Paragraph ซงแตละยอหนาแตละเวบเพจแยกออกจากกนโดยการขนยอหนาใหม และมกจะมบรรทดวางคนเนองจากภาษา HTML ค าสงหรอแทกซทใชในการขนยอหนาใหมคอ <P> จะท าใหเกดบรรทดวางระหวางยอหนาดวยกนเพอแยกใหเหนไดชดวาเปนขอความทอยคนละยอหนา

39

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

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

การใชตวอกษรขนาดใหญเรมตนประโยค (Initial caps หรอ Drop caps) บางครงคณไมจ าเปนตองใชตวอกษรแบบกราฟก เพอดงดดความสนใจเนนถงความส าคญของขอความ เมอคณสามารถใชตวอกษรทมขนาดใหญเรมตนประโยคเปนเทคนคทนยมใชกนมานานแลวในสงพมพ เพอดงดดความสนใจของผอานดวยการสรางความแตกตางของขนาดตวอกษร โดยทวไปแลวตวอกษรตวแรกจะมขนาดใหญวาตวอนประมาณ 2-5 พอยท และยงนยมทจะใชตวอกษรชนดอนเพอใหเกดความแตกตางมากขน นอกจากนนแลวยงอาจใชรปแบบสลบส ซงจะใชตวอกษณสออนเหนอพนหลงสเขมเพอใหเหนไดเดนชด หรอคณอาจยกเนอหายางสวนหรอขอความส าคญออกมาแสดงใหเดนชด เพอเพมความนาสนใจใหกบเนอหาทคอนขางยาว

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

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

40

สะดดตาและดงดดความสนใจจากผอานไดอยางมาก แตถาเลอกใชตวหนาทงหมดกจะไมมอะไรเดนชดขนมา แตกลบท าใหรสกวาเปนการตะโกนใสผอาน และถาพยายามจดตวหนงสอใหตอนขางแนนเกนไป ผอานกอาจมองเหนเหมอนเปนก าแพงตวอกษร และไมสามารถมองหาจดทนาสนใจได ในท านองเดยวกนการใชตวอกษรขนาดใหญทงหมดกไมมประโยชนแตอยางใด เพราะสงทเหนจะดเหมอนกนหมด ไมมสวนทสะดดตา แนวทางในการเนนขอความใหเดนชดสามารถท าไดหลายรปแบบ ซงเมอน าไปใชอยางเหมาสมกจะชวยสรางความนาสนใจกบเนอหา และยงชวยเสรมความสวยงามใหกบเวบเพจไดอกดวย ดงวธการตอไปน การใชขนาดและน าหนกของตวอกษร เปนเรองปรกตทจะสรางความเดนใหกบตวอกษรโดยท าใหมขนาดใหญกวา หรอมลกษณะเสนทหนาและเขมกวา ซงจะท าใหดมความส าคญมากกวาสงทอยรอบขาง ในการอานอยางคราวๆ สงทตองการเนนจะมลกษณะเดนชดและสะดดตาผอาน ในทางตรงกนขาม ขอความทไมตองการเนนจะมขนาดเลกและบางกวา ซงในภาษา HTML เรามน าหนกของตวหนงสอใหเลอกเพยง 2 ระดบ คอ ตวปรต และตวหนาทก าหนดดวยค าสง<B> (Bold) การท าตวเอยง (Italic) ลกษณะตวอกษรแบบเอยงเปนทนยมใชกบสงพมพในการเนนค าหรอขอความ ตวอกษรแบบเอยงนมกจะท าใหอานยากกวาตวปรกตเลกนอยจงท าให ผอานตองหยดเพออานซ าๆ ซงนบถอเปนสงทเนนเพราะความแตกตางจากตวอกษรปรกต และเพราะความเรวของการอานทลดลง ซงจะท าใหสายตาของเรามงไปสจดทแตกตางจากปรกต ตามลกษณะเฉพาะของสมองมนษย ต าราทางดาน Publishing หลายเลม แนะน าใหใชตวเอยงเพอเนนมากกวาท าตวหนา (Bold) เสยอก เพราะเรยกรองความสนใจไดโดยไมสะดดตาหรอรบกวนการกวาดสายตาเกนไป ขณะทการใชตวเอยงในสงพมพไดผลด แตในหนาจอมนเตอรแลว กลบมการแสดงของพกเซลอยางไมลงตว เพราะจดบนจอภาพมความละเอยดต ากวาการพมพมาก คอมความละเอยดเพยงประมาณ 72-96 dpi (จดตอนว) ในขณะทการพมพนนใชความละเอยดถง 2,400 dpi ขนไป ดงนนเปนเวลาแสดงผลตวเอยงในปรมาณมากๆ โดยเฉพาะอยางยงตวอกษรภาษาไทย จงเปนสงทควรหลกเลยง หรอถาจ าเปนตองใชกตองแนใจวาผใชจะสามารถอานไดโดยไมล าบากนก การขดเสนใต เทคนคการขดเสนใตเปนทนยมใชในการพมพดดสมยกอน ทมการใชสบเนองจนมาถงยคการพมพในโปรแกรมคอมพวเตอร (Word Processing) แตเนองจากการใชเสนใตมความหมายพเศษในระบบเวบ ซงแสดงถงไฮเปอรลงคทตดอยกบค านน (Hypertext) ดงนนเราจงไมควรใชขดเสนใตในความหมายอนอก มฉะนนสรางความสบสนใหกบผใชได ต าแหนงตวอกษร

41

ต าแหนงของค าหรอบรรทดทอยตางจากปรกตจะมความเดนในตว เชนเดยวกบการยอหนาเขาขางในหรออกขางนอก (Indent หรอ hanging indent) ใหเกดความแตกตางในพารากราฟ ซงจะชวยดงดดความสนใจได แนวทางของตวอกษร (Orientation) ตวอกษรทอยในแนวตงจากลางไปบนเปนสงทแปลกใหม สงเกตไดงาย แตท าใหไมสะดวกในการอานในหนาหนงสอปกตเราแตกลบดานหนงสอกจะอานไดแตในจอมอนเตอรผอานตองเอยงคอจ จะอานได สวนตวอกษรในแนวตงจากบนลงลาง เปนสงทท าไมไดในภาษา Html แตสามารถท าไดงายโดยใชรปกราฟกแทน ถาจ าเปนกตองใชกควรใชอยางจ ากด พนทวาง (White Space) นอกเหนอจากขนาดตวอกษรทจะแสดงถงความส าคญ พนทวางรอบๆ ตวอกษรกเปนสงทส าคญเชนกน ตวอกษรขนาดเลกในพนทกวางๆ จะมความโดดเดนมากกวาปรกต นอกจากนน การมพนทวางมากๆ ในหนาเวบยงชวยท าใหเนอหานนนาอานมากกกวาหนาทเตมไปดวยตวหนงสอ ผออกแบบควรเขาใจวาการท าเนอหาใหดอานงายส าคญกวาการใสเนอหาใหมากทสดในหนาเวบ การออกแบบเวบเพจโดยค านงถงพนทวาง จงชวยท าใหคณสามารถจดบรเวณของเนอหาไดอยางนาสนใจ วธเบองตนในการควบคมการปรากฏของตวอกษรในเวบเพจ คอการใชค าสง <PRE> ทมไวส าหรบแสดงตวอกษรตามรปแบบทก าหนดไว สวนวธทพลกแพลงขนอกหนอยคอการใชกราฟกโปรงใสมาคนใหเกดพนทวาง หรอการก าหนดคาพนทวางในแนวตงและแนวนอนโดยรอบของกราฟก นอกจากนน การใชตาราง HTML ท าใหคณสามารถจดตวอกษรและกราฟกไดอยางเปนระเบยบมากขน ขณะท Cascading Style Sheets และ Dynamic HTML กเปนเทคนคใหมทจะชวยคณในการควบคมต าแหนงของขอความและรปกราฟกตางๆ โดยใชการจดต าแหนงอยางแนนอน และการจดล าดบของชนเอกสารขององคประกอบในหนาเวบวาอะไรซอนกบอะไร

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

42

สรางความสมดลของตวอกษรขนาดใหญและขนาดเลก หลกในการใชตวอกษรอกอยางหนงคอ การสรางความสมดลของตวอกษรขนาดใหญและขนาดเลกโดยปรกตนกออกแบบจะใช GIF ส าหรบตวอกษรขนาดใหญ และตวอกษษรแบบ HTML กบสวนเนอหาในเวบเพจ ดงนนเราจงตองควบคมใหตวอกษรแบบ GIF เขากนไดแบบ HTML อยางเหมาะสมและตองไมโดดเดนเกนไป จดกลมขอความเปนสดสวนเหลอมล ากน วธการหนงในการสรางความสมดลใหกบหนาเวบ คอการจดกลมขอความใหเปนสดสวนเหลอมล ากน เชนการจดขอความ 3 พารากราฟใหเหลอมล ากนลงมาดานลางจากซายไปขวา ผใชสวนใหญกจะเรมอานทพารากราฟทอยดานบนซายและไลไปตามล าดบ วธนถอเปนการจดขอความใหเปนสดสวนทนาตดตามอยางสรางสรรค จดโครงสรางพนทของตวอกษรอยางไมเทากน (Asymmetrical) ไมจ าเปนตองจดวางพนทของตวอกษรใหเทากนหรออยตรงกลางเสมอ ทจรงแลว การแบงพนทหนาอยางไมสมดลเชนเปน 2 คอลมนในอตราสวน 30:70 ไมเพยงแตจะดนาสนใจแตยงชวยสรางความสมดลระหวางพนทวางและตวอกษร วธการในการแบงพนท ท าไดดวยดารด าหนดตารางใหมความกวางเตมพนทหนาจอ แลวแบงคอลมนตามขนาดทตองการ จดแนวตวอกษรในกลมเดยวกน การจดแบบนจะชวยใหผใชสามารถแยกแยะขอความตามลกษณะออกเปนกลมอยางชดเจนซงอาจท าไดโดยใชพนทวางและคอลมนในตารางในสวนของเนวกเกชนบารกควรรวมลงคประเภทเดยวกนเขาดวยกน พรอมทงจดแนวใหเปนระเบยบ และควรนกถงความสม าเสมอของรปแบบโดยรวมของทงหนา อยาลมวาการแยกสวนของขอมลกบลงคออกจากกน อาจท าใหผใชสนใจ หรอในทางตรงกนขามอาจจะสบสนกได

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

43

ก าหนดสหลกส าหรบเวบ เวบไซททดอาจไมจ าเปนตองใชสจ านวนมากอยางทคด โดยทวไปแลวเวบไซทตองการสหลกจ านวน ถง 7 สทจะใชประจ าส าหรบองคประกอบตางๆ ในเวบเพจ ซงรวมถงตวอษรดวยแตกไมใชวาคณจะใชไดเฉพาะสทก าหนดไวเทานนคณอาจเลอกใชสอนเพมเขาไดเสมอ เพยงแตตองระวงใหสทงหมดไปดวยกนไดดโดยไมขดแยงกน ใชสของตวอกษรอยางมความหมายและสม าเสมอ เนองจากผใชจะมองเปนความแตกตางของสไดอยางรวดเรว การใชสของตวอกษรทตางกนตามลกษณะเนอหาเชน หวขอ รายละเอยด และลงคอยางสม าเสมอ จะท าใหผใชคนเคยและทองไปในเวบไซทไดอยางสะดวกตลอดไซท เพอความสม าเสมอของสตลอดทงเวบไซทคณอาจใชเทคนคของ Cascading Style Sheets ชวยระบสและรปแบบขององคประกอบแตละชนด ภายในเวบไดอยางสะดวก และจะเปนการดถาคณจดรหสทใชไวอางองภายหลง ทงคาในแบบ Hexadecimal ส าหรบ HTML และคา RGB ทจะตองใชในงานกราฟก รวมไปถงคา CM ถาคณจ าเปนตองเปรยบเทยบกบสในสงพมพ ใชสทแตกตางกนในแตละสวนขอมล ถาคณก าลงน าเสนอเนอหาทแบงเปนสวนๆ ได อยางเชน สนคาหลายๆ ประเภท หรอลงคไปยงขอมลหลายๆสวน คฯอาจทดลองใชสทตางกนในแตละยอหนา ชวยใหผอานไดรบขอมลทเรวขนและถาเราใชสเหลานอยางสม าเสมอผอานกจะคนเคยและเขาถงขอมลไดสะดวกขน ทส าคญคอคณตองแนใจวาสทน ามาใชเขากนไดกบสขององคประกอบอนๆ ก าหนดสของลงคใหเหมาะสม ในขนตอนการออกแบบลงค คณสามารถระบสใหกบสภาวะทงสามอยางของลงค ซงไดแก ลงคทยงไมไดคลก ลงคขณะทคลก และลงคทไดผานการลกไปแลว ทงนการเลอกสทใชความค านงถงหนาทของแตละสภาวะ ลงคตามปรกตควรจะมสทเดนชดใหรวาสามารเชอมโยงไปทอนได จงควรใชสทเดนมองเหนไดชด ขณะทสของลงคขณะทคลกนนมไวเพอตอบสนองวาก าลงถกคลกอย จงควรท าใหมสสนทชดเจนเชนกนแตตองตางจากสของลงคปกตพอสมควร สวนลงคทผานการคลกไปแลวมหนาทเตอนใหเรารวาไดคลกเขาไปแลว จะไดไมตองคลกซ าอก จงควรใชสทแตกตางไมจ าเปนตองใชสทเดนชดแตอยางใด สกบการพมพเวบเพจ ถาคณตงใจใหผใชพมพขอมลจากเวบแลวควรจะออกแบบใหมล กษณะพเศษทเหมาะสมกบการพมพ เชนการใชตวอกษรสเยมบนพนหลงสออนมผออกแบบจ านวนมากทใชพนหลงเปนสเขมกบตวอกษรสขาว โดยอาจลมคดไปวา ปกตแลวสพนหลงจะไมถกพมพออกมาดวยคอกลายเปนสขาวไป ท าใหไมสามารถพมพตวอกษรสขาวบนพนขาวได หรอถามการก าหนดใหพมพสพนหลงออกมาดวยกจะเปนการสนเปลองหนกพมพอยางไมสมควรนก

44

45

อางอง ธนชชย ศรสเทพ. คมภร Web Design. กรงเทพฯ : โปรวชน 2544