2. การออกแบบเว็บไซต์
จัดทาโดย
1. นางสาวพิมพ์กนก กุนอก 533410080319
2. นางสาวพิมพ์ชนก เฝ้าทรัพย์533410080320
3. นางสาวสุพรรษา พันธ์สุวอ 533410080328
4. นายวัชรินทร์ เรืองนุช 533410080343
5. นายภิรัชช์กวินทร์ คุ้มสีไวย์533410080349
นักศึกษา ชั้นปีที่ 4 หมู่ 3
เสนอ
อาจารย์ปวริศ สาระมโน
สาขาวิชา คอมพิวเตอร์ศึกษา คณะครุศาสตร์
มหาวิทยาลัยราชภัฏมหาสารคาม

3. เว็บไซต์คือ
หน้าเว็บหลายหน้าที่เชื่อมต่อทางไฮเปอร์ลิงค์ทาขึ้นเพื่อเสนอข้อมูลผ่านทาง
internetให้เป็นแหล่งข้อมูลต่างๆผ่านใน www
องค์ประกอบของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ที่มีประสิทธิภาพนั้นต้องคานึงถึง องค์ประกอบสาคัญ
ดังต่อไปนี้
1. ความเรียบง่าย (Simplicity)
หมายถึง การจากัดองค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลัก
กล่าวคือในการสื่อสารเนื้อหากับผู้ใช้นั้น เราต้องเลือกเสนอสิ่งที่เราต้องการ
นาเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและ ภาพเคลื่อนไหว ต้อง
เลือกให้พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคาราญต่อ
ผู้ใช้ตัวอย่างเว็บไซต์ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ
อย่างเช่น Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบ
ที่เรียบง่าย ไม่ซับซ้อน และใช้งานอย่างสะดวก
2. ความสม่าเสมอ ( Consistency)
หมายถึง การสร้างความสม่าเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์โดยอาจ
เลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้เพราะถ้าหากว่าแต่ละหน้าใน
เว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป อาจทาให้ผู้ใช้เกิดความสับสนและไม่
แน่ใจว่ากาลังอยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละ
หน้าควรที่จะมีรูปแบบ สไตล์ของกราฟิก ระบบเนวิเกชั่น (Navigation) และโทนสี
ที่มีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
1

4. 3. ความเป็นเอกลักษณ์ (Identity)
ในการออกแบบเว็บไซต์ต้องคานึงถึงลักษณะขององค์กรเป็นหลัก เนื่องจาก
เว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี
รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเรา
ต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและกราฟิกมากมาย อาจทา
ให้ผู้ใช้คิดว่าเป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือขององค์กรได้
4. เนื้อหา (Useful Content)
ถือเป็นสิ่งสาคัญที่สุดในเว็บไซต์เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับ
การปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้
ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สาคัญที่สุดคือเนื้อหาที่ทีมผู้พัฒนา
สร้างสรรค์ขึ้นมาเอง และไม่ไปซ้ากับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้า
มาเว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้
ทราบว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่จาเป็นต้องกลับมาใช้งานลิงค์เหล่านั้นอีก
5. ระบบเนวิเกชั่น (User-Friendly Navigation)
เป็นส่วนประกอบที่มีความสาคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้
เกิดความสับสนระหว่างดูเว็บไซต์ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง
ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่าย ใช้งานได้สะดวก ถ้ามีการใช้
กราฟิกก็ควรสื่อความหมาย ตาแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่าเสมอ
เช่น อยู่ตาแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็น
กราฟิกก็ควรเพิ่มระบบเนวิเกชั่นที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วยอานวย
ความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราเซอร์
2

5. 6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์(Visual Appeal)
ลักษณะที่น่าสนใจของเว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็น
สาคัญ แต่โดยรวมแล้วก็สามารถสรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่าง
ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได้ให้เห็น ชนิด
ตัวอักษรอ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น
7. ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility)
การใช้งานของเว็บไซต์นั้นไม่ควรมีขอบจากัด กล่าวคือ ต้องสามารถใช้งาน
ได้ดีในสภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่น
ใดเพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บที่แสดงผลได้ดีในทุก
ระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็น
เว็บไซต์ที่มีผู้ใช้บริการมากและกลุ่มเป้าหมายหลากหลายควรให้ความสาคัญกับ
เรื่องนี้ให้มาก
8. ความคงที่ในการออกแบบ (Design Stability)
ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ควร
ให้ความสาคัญกับการออกแบบเว็บไซต์เป็นอย่างมาก ต้องออกแบบวางแผนและ
เรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทาขึ้นอย่างลวก ๆ ไม่มีมาตรฐานการ
ออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหาและ
ทาให้ผู้ใช้หมดความเชื่อถือ
3

6. กระบวนการแรกของการออกแบบเว็บไซต์
กาหนดเป้ าหมายของเว็บไซต์
ขั้นตอนแรกของการออกแบบเว็บไซต์คือการกาหนดเป้าหมายของ
เว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้ง
เอาไว้โดยทั่วไปมักจะเข้าใจว่าการทาเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ
หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมี
เป้าหมายของตนเองแตกต่างกันออกไป
กาหนดกลุ่มผู้ใช้เป้ าหมาย
ผู้ออกแบบเว็บไซต์จาเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการ
เว็บไซต์เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่น
เว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่
เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สาหรับทุก
คน เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ใน
เว็บไซต์เดียว
การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
โครงสร้างเว็บไซท์( Site Structure ) เป็นแผนผังของการลาดับเนื้อหา
หรือการจัดวางตาแหน่งเว็บเพจทั้งหมด ซึ่งจะทาให้เรารู้ว่าทั้งเว็บไซท์ประกอบไป
ด้วยเนื้อหาอะไรบ้าง และมีเว็บเพจหน้าไหนที่เกี่ยวข้องเชื่อมโยงถึงกัน ดังนั้นการ
ออกแบบโครงสร้างเว็บไซท์จึงเป็นเรื่องสาคัญ เปรียบเสมือนกับการเขียนแบบ
อาคารก่อนที่จะลงมือสร้าง เพราะจะทาให้เรามองเห็นหน้าตาของเว็บไซท์เป็น
4

7. รูปธรรมมากขึ้น สามารถออกแบบระบบเนวิเกชั่นได้เหมาะสม และเป็นแนว
ทางการทางานที่ชัดเจน สาหรับขั้นตอนต่อๆไป นอกจากนี้โครงสร้างเว็บไซท์ที่ดี
ยังช่วยให้ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว
วิธีการจัดโครงสร้างเว็บไซท์สามารถทาได้หลายแบบ แต่แนวคิดหลักๆที่
นิยมใช้กันมีอยู่2 แบบคือ
จัดตามกลุ่มเนื้อหา ( Content-based Structure )
จัดตามกลุ่มผู้ชม ( User-based Structure )
องค์ประกอบที่ควรมีในเว็บเพจ
องค์ประกอบทั่วไป
1. ชื่อของเว็บเพจ (Title)
2. ประวัติและรูปภาพผู้จัดทา (Profile/Picture)
3. การเชื่อมโยงภายในและภายนอกเว็บ (Links)
4. การแสดงที่อยู่ของเว็บ : URL
5. วัน/เวลาที่สร้างเว็บ (Date/Time)
6. การปรับปรุงครั้งล่าสุด (Update)
7. ผู้จัดทาเว็บ : (created by)
8. การสงวนลิขสิทธิ์ (Copy right)
9. การติดต่อผู้จัดทาเว็บ (contract /e-mail)
10. สถานที่ติดต่อของเว็บ (Address)
11. บราวเซอร์ที่เหมาะสมสาหรับการชม (Browser )
5

8. 12. ขนาดหน้าจอที่เหมาะสมในการชม (Bested View)
13. คาถามที่ถูกถามบ่อย FAQ (Frequency Asked Question)
14. ความช่วยเหลือ (Help)
องค์ประกอบพิเศษ
1. สมุดเยี่ยม (Guest book)
2. ฝากข้อความ (Web board)
3. กระดานข่าว (Bulletin Board)
4. กระทู้( Webboard )
5. แบบสารวจ (Web poll)
6. จานวนผู้เข้าชม (Counter)
7. ห้องสนทนา (Chat Room)
8. สถิติทุกประเภท (Web state)
9. เทคนิคพิเศษด้วยโปรแกรมสคริปต์ (Java script, VBscript ,
cgi,asp,php)
10. โปรแกรมพิเศษสนับสนุน (Download)
11. สไลด์สรุปบรรยาย (Presentation)
รูปแบบของโครงสร้างเว็บไซต์
เราสามารถวางรูปแบบโครงสร้างเว็บไซต์ได้หลายแบบตามความเหมาะสม
เช่น แบบเรียงลาดับ ( Sequence ) เหมาะสาหรับเว็บไซต์ที่มีจานวนเว็บ
6

9. ส่วนประกอบของเว็บ
ส่วนประกอบของหน้าเว็บไซต์แบ่งออกเป็น 3 ส่วนหลักๆ คือ
1. ส่วนหัวของเว็บเพ็จ (Page Header)
เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สาคัญที่สุดของหน้า
เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์มักใส่ภาพกราฟิกเพื่อ
สร้างความประทับใจส่วนใหญ่ประกอบด้วย
- โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็น
อย่างดี และยังทาให้เว็บน่าเชื่อถือ
- ชื่อเว็บไซต์
- เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของ
เว็บไซต์
2.ส่วนของเนื้อหา (Page Body)
เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่ง
ประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนู
หลักหรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย สาหรับส่วนเนื้อหาควรแสดง
ใจความสาคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบตัวอักษรที่
อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ
3. ส่วนท้ายของหน้า (Page Footer)
เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้มักวางระบบนาทางที่
เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายใน
7

10. โครงสร้างเว็บไซต์ที่เหมาะสม
ส่วนประกอบย่อยอื่นๆ ที่จาเป็น
1. Text เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่น
ต่างๆ ดังเช่นโปรแกรมประมวลคา
2. Graphic ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย
3. Multimedia ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง
4. Counter ใช้นับจานวนผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ของเรา
5. Cool Links ใช้เชื่อมโยงไปยังเว็บไซต์ของตนเองหรือเว็บไซต์ของคนอื่น
6. Forms เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด แล้วส่งกลับ
มายังเว็บไซต์
8

11. 7. Frames เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่
แตกต่างกันและเป็นอิสระจากกัน
8. Image Maps เป็นรูปภาพขนาดใหญ่ที่กาหนดส่วนต่างๆ บนรูป เพื่อ
เชื่อมโยงไปยังเว็บไซต์อื่นๆ
การใช้สีในการออกแบบเว็บไซต์
การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมายของเว็บไซต์ได้อย่าง
ชัดเจน การเลือกใช้สีให้เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจ
ให้กับผู้ใช้แต่ยังสามารถทาให้เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้สีเป็น
องค์ประกอบหลักสาหรับการตกแต่งเว็บ จึงจาเป็นอย่างยิ่งที่จะต้องทาความเข้าใจ
เกี่ยวกับการใช้สี
ความหมายและอารมณ์ของสี
นอกจากเฉดสีจะเป็นส่วนช่วยให้เว็บไซต์มีความสวยงาม น่าสนใจได้แล้ว "สี"
ยังส่งผลต่อความรู้สึก และสามารถสื่อถึงอารมณ์ส่งไปยังผู้เข้าชมเว็บไซต์ได้อีก
ด้วย โดยสีแต่ละสีจะมีความหมายและสื่ออารมณ์ที่ต่างกัน จึงควรเลือกใช้เฉดสีให้
เหมาะสมกับเว็บไซต์ของท่าน เช่น
สีส้ม เป็นสีแห่งความสร้างสรรค์อบอุ่น สดใส มีสติปัญญา ความ
ทะเยอทะยาน
สีแดง เป็นสีที่กระตุ้นระบบประสาทของเราได้รุนแรงที่สุด ให้ความรู้สึกเร้า
ใจ ตื่นเต้น ท้าทาย ตื่นตัว
ให้ความรู้สึกอบอุ่น อ่อนโยน นุ่มนวล อ่อนหวาน ความรักสีชมพู
9

12. สีเหลือง ให้ความรู้สึกแจ่มใส ความสดใส ความอบอุ่น ความร่าเริง ความ
สุกสว่างใส
สีเขียว เป็นสีที่เด่นที่สุดบนโลก ให้ความรู้สึกร่มเย็น สบายตา ผ่อนคลาย
ปลอดภัย ทาให้เกิดความหวังและความสมดุล
สีน้าเงิน เป็นสีที่สร้างความสุขุม เยือกเย็น หนักแน่นและละเอียด
รอบคอบ น่าเชื่อถือ
สีฟ้า เป็นสีที่ให้ความรู้สึกสงบเยือกเย็น เป็นอิสระ ปลอดโปร่ง สบาย
ปลอดภัย ใจเย็น สะอาด
สีม่วง เป็นสีแห่งผู้รู้ ห้ความรู้สึกมีเสน่ห์ น่าติดตาม เร้นลับ น่าค้นหา
สีขาว ให้ความรู้สึกบริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน
ให้ความรู้สึกความหรูหรา โอ่อ่า มีราคา สง่างาม เป็นต้นสีทอง
(ข้อมูลอ้างอิงจาก : http://th.wikipedia.org/wiki/สีบาบัด)
10

13. ความสอดคล้องของสีกับจุดประสงค์ของเว็บไซต์
นอกเหนือจากการคานึงถึงความหมายของสีและการส่งผลต่ออารมณ์ผู้เข้าชม
เว็บไซต์แล้ว สิ่งสาคัญที่สุดคือความเหมาะสมของการเลือกใช้สีได้สอดคล้องกับ
วัตถุประสงค์หรือเป้าหมายของเว็บไซต์ด้วย ตัวอย่างเช่น
เว็บไซต์ร้านรับซักรีดเสื้อผ้า
11

14. www.fongfab.com
สีที่เลือกใช้บนหน้าเว็บไซต์อยู่ในโทนสีขาวและสีฟ้า เพราะสีขาวสื่อถึง
ความสะอาด สีฟ้าสื่อถึงน้าหรือสดใสของเสื้อผ้า
เว็บไซต์ให้คาปรึกษาด้านกฎหมาย www.laslaws.com
สีที่เลือกใช้บนหน้าเว็บไซต์อยู่ในโทนสีน้าเงิน ฟ้า และสีขาว สื่อถึงความ
ซื่อสัตย์ความน่าเชื่อถือ ความบริสุทธิ์ใจในการบริการ เป็นต้น
หากเป็นเว็บไซต์ขององค์กร สถาบันต่าง ๆ อาจเลือกใช้สีประจาองค์กรมา
เป็นโทนสีของเว็บไซต์ได้ ขึ้นอยู่กับความต้องการและความเหมาะสม
การเลือกใช้กลุ่มสีที่มีความกลมกลืนกัน
เมื่อเลือกสีที่จะเป็นเฉดสีหลักของเว็บไซต์ได้แล้ว อาจจาเป็นต้องใช้สีใน
ส่วนประกอบอื่น ๆ เพิ่มเติม เช่น แถบสีหัวข้อเมนู สีพื้นหลังเว็บไซต์เป็นต้น โดย
มีหลักการ คือ เลือกใช้สีที่ให้อารมณ์ใกล้เคียงกัน หรือเข้ากันได้ดีกับสีหลัก
และควรระมัดระวังในการคุมโทนสีไม่ให้ฉูดฉาดหรือหลากหลายเกินไป
เช่น สีประจาบริษัท คือ สีชมพูและสีฟ้า เบื้องต้นเลือกใช้สีพื้นหลังเว็บไซต์เป็นสี
ฟ้า ตัวอักษรสีชมพู แต่เมื่อดูการแสดงผลแล้ว ตัวอักษรดูไม่ชัด ไม่สะดวกต่อการ
12

15. อ่านของผู้ชมเว็บไซต์ จึงควรเลือกแสดงสีเหล่านี้แค่บางส่วนในเว็บไซต์เช่น โลโก้
ภาพส่วนหัว หรือแถบหัวข้อเมนูต่าง ๆ เป็นต้น และนาสีอื่นมาช่วยเสริมในการ
แสดงผล เช่น ใช้สีขาวเป็นสีพื้นหลังแทน ดังภาพตัวอย่าง
ตัวอย่างการเลือกใช้กลุ่มสีที่กลมกลืนกัน
เทคนิคการเลือกใช้สี
เทคนิคการเลือกใช้สีแบบสูตรสาเร็จจะมีอยู่หลายรูปแบบ แต่แบบที่นิยมให้
งานกันเป็นหลักจะมีอย่าง4รูปแบบ คือ
Mono หรือเอกรงค์จะเป็นการใช้สีที่ไปในโทนเดียวกันทั้งหมด เช่น จุดเด่นเป็น
สีแดง สีส่วนที่เหลือจะเป็นสีที่ใกล้เคียงกับสีแดง โดยใช้วิธีลดน้าหนักความเข้ม
ของสีแดงลงไป
Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรงข้ามกันในวงจร
สีเช่น สีฟ้าจะตรงข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสีเขียว สามารถนามาใช้
13

16. งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดีและไม่ดี หากไม่รู้หลักพื้นฐานใน
การใช้งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ควรใช้ในพื้นที่ปริมาณเท่ากันในงาน
ควรใช้สีใดสีหนึ่งจานวน 80% อีกฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30 โดยประมาณ
บนพื้นที่ของงานโดยรวม จะทาให้ความตรงข้ามกันของพื้นที่น้อยกลายเป็นจุดเด่น
ของภาพ
Triad คือ การเลือกสีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่ามาใช้
งาน
Analogicหรือสีข้างเคียงกัน การเลือกสีใดสีหนึ่งขึ้นมาใช้งานพร้อมกับสีที่อยู่ติดกัน
อีกข้างละสี หรือก็คือสีสามสีอยู่ติดกันในวงจรสีนั่นเอง
เลือกใช้สีตัวอักษรให้อ่านง่าย
สีของตัวอักษร ควรเป็นสีที่ตรงกันข้ามหรือตัดกับสีพื้นหลังของเว็บไซต์
กล่าวคือ หากเว็บไซต์ของท่านมีสีพื้นหลังเป็นสีอ่อน ควรเลือกใช้สีตัวอักษรเป็นสี
เข้ม ในทางกลับกัน ถ้าเว็บไซต์ของท่านมีสีพื้นหลังเป็นสีเข้ม สีตัวอักษรก็ควร
จะเป็นสีอ่อนหรือสีที่สว่าง แต่ควรหลีกเลี่ยงสีสว่างบางสี เช่น สีเหลืองสด สีแดง
สีเขียวสะท้อนแสง เป็นต้น เพราะจะสะท้อนแสงสู่สายตาผู้อ่านอย่างมาก ทาให้
อ่านตัวอักษรได้ยากยิ่งขึ้น (ยกเว้น กรณีใช้สีสว่างในการเน้นตัวอักษรบางประโยค
ให้เป็นจุดเด่น เพื่อการโฆษณาประชาสัมพันธ์ บอกโปรโมชั่นต่าง ๆ )
14

17. ตัวอย่างการแสดงผลหน้าเว็บไซต์ที่เลือกใช้สีตัวอักษรและสีพื้นหลังที่ทาให้
อ่านยาก และทาให้หน้าเว็บไซต์ไม่สวยงาม
ตัวอย่างการเลือกเฉดสีสาหรับเว็บไซต์ Oxygen.ReadyPlanet.com
มีโทนสีหลักของเว็บไซต์คือ สีฟ้าและสีขาว โดยเลือกใช้เป็นพื้นหลังของ
เว็บไซต์และพื้นหลังในส่วนเนื้อหา เนื่องจากเป็นสีฟ้าและสีขาวของโลโก้บริษัท
รวมไปถึงจุดประสงค์ในการทาเว็บไซต์ "Oxygen คือ อากาศที่ทาให้สิ่งมีชีวิตดารง
อยู่ได้ดังนั้น Blog "Oxygen Online" คือ อากาศที่ทาให้เว็บมาสเตอร์อยู่ได้เช่นกัน
และที่นี่มีอากาศบริสุทธิ์สาหรับผู้ทาเว็บทุกคน" ซึ่งสีฟ้าและสีขาวทาให้รู้สึกถึง
ความสดชื่น เย็นสบาย เข้ากับจุดประสงค์ของเว็บไซต์และสีประกอบเพิ่มเติมที่
เลือกใช้คือ สีน้าเงินเพื่อใช้เน้นหัวข้อเมนูย่อยให้เด่นชัด เลือกใช้สีดาเป็นสีตัว
อักษรหลัก แสดงผลบนพื้นหลังสีขาว ทาให้มองเห็นตัวอักษรชัดเจน สะดวกใน
การอ่าน และใช้สีฟ้าเข้มในการแสดงผลตัวอักษรที่เป็นลิงค์เชื่อมโยง เป็นต้น
15

18. รูปแบบตัวอักษรต่างๆ
สาหรับการเลือกใช้งานตัวอักษรที่เหมาะสม เราจะต้องมารู้จักกับคุณสมบัติ
หลัก ๆ ที่สาคัญของตัวอักษร เช่น ส่วนประกอบหลัก ๆ และชนิดกันก่อน
Body & Proportion
Body หลัก ๆ จะประกอบไปด้วยตัว Body เอง และส่วนแขนขา และที่สาคัญ
ที่สุดที่จะส่งผลถึงการเลือกใช้งาน Font ก็คือส่วนของ “เชิง” หรือ “Serif” (ในตัว
Body ของ Font อาจจะแยกย่อยได้เป็นตา หรือไหล่ได้อีกและในเบื้องต้นให้รู้จักกัน
ไว้ในชื่อของ Body ก่อน)
ส่วนของ Proportion ของ Font จะหมายถึง ลักษณะการตกแต่งเพื่อนาไปใช้
งาน เช่น ตัวหนา หรือตังเอียง โดยปกติแล้ว Proportion ของ Font
นอกจากทั้ง 3 แบบที่กล่าวมาแล้ว ในบางครั้งอาจจะเจอแบบที่ย่อยลงไปอีก
เช่น Bold Italic ที่เป็นตัวหนาและเอียงหรือ Narrow ที่มีลักษณะแคบๆ ผอมๆ ก็
เป็นไปได้
16

19. วิธีเลือก Font ไปใช้ในงานออกแบบ
การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคานึงง่าย ๆ อยู่2 ข้อคือ
1. ความหมายต้องเข้ากัน หมายความว่า ความหมายของคาและ Font ที่
เลือกใช้ควรจะไปด้วยกันได้เช่น คาว่าน่ารักก็ควรจะใช้Font ที่ดูน่ารักไปด้วย ไม่
ควรใช้Font ที่ดูเป็นทางการ ดังภาพตัวอย่าง
2. อารมณ์ของฟอนต์และอารมณ์ของงานต้องไปในทิศทางเดียวกัน
เช่น งานที่ต้องการความน่าเชื่อถือก็จะเลือกใช้Font แบบ Serif ที่ดูหนักแน่น
น่าเชื่อถือ ส่วนงานที่ต้องการความฉูดฉาดอย่างโปสเตอร์ลดราคาก็ควรจะเลือกใช้
Font ที่เป็นกันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็นต้น
ภาพตัวอย่าง อารมณ์ของฟอนต์และอารมณ์ของงานที่เป็นไปในทิศทางเดียวกัน
17

20. นอกจากการเลือก Font มาใช้งานแล้ว การวางตาแหน่งตัวอักษรก็เป็นอีก
เรื่องหนึ่งที่มีความสาคัญกับการทางาน สาหรับการวางตาแหน่งตัวอักษร มีข้อควร
คานึงถึงไว้ให้อยู่ 3 ข้อคือ
1. ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลงล่าง โดยมี
รัศมีการกวาดสายตาตามลาดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลาดับให้ดี
ด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมาทาให้เสียความหมายของข้อความไป
2. จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัวใหญ่ๆ อยู่
เพียงชุดเดียว จึงจะเป็นจุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วนจุดอื่น ๆ ขนาดควร
จะเล็กลงมาตามลาดับความสาคัญ
3. ไม่ควรใช้Font หลากหลายรูปแบบเกินไป จะทาให้กลายเป็นงานที่อ่าน
ยากและชวนปวดศีรษะมากกว่าชวนอ่าน ถ้าจาเป็นจริง ๆ แนะนาให้ใช้Font เดิมแต่
ไม่ตกแต่งพวกขนาด, ความหนาหรือกาหนดให้เอียงบ้าง เพื่อเพิ่มความน่าสนใจ
ไม่ให้งานดูน่าเบื่อแบบนี้จะดีกว่า
18