การออกแบบเว็บ

ศั�พท์�เบื้�องต้ นเกี่��ยวกี่�บื้เว�บื้ไซต้�• Internet คื�อ ระบื้บื้เคืร�อข่�ายคือมพ�วเต้อร�ท์��ใหญ่�ท์��สุ$ดในโลกี่เกี่�ดจากี่กี่าร

เชื่��อมโยง ข่องคือมพ�วเต้อร�หลายล านเคืร��องท์��กี่ระจายอย*�ต้ามท์��ต้�างๆ ในโลกี่

อ�นเต้อร�เน�ต้เป็-นแหล�งท์��รวมข่องข่ อม*ลมหาศัาลและเป็-นชื่�องท์างต้�ดต้�อสุ��อสุาร เพ��อแลกี่เป็ล��ยนข่ อม*ลท์��สุะดวกี่และรวดเร�วบื้ร�กี่ารยอดน�ยมบื้นอ�นเต้อร�เน�ต้ ได แกี่� เว�บื้เพจ (www) อ�เมล� และ Instant Messageing เชื่�น MSN Messenger, Yahoo Messenger, ICQ เป็-นต้ น

• www (World Wide Web) เป็-นบื้ร�กี่ารข่ อม*ล โดยข่ อม*ลข่อง www จะอย*�ในร*ป็เอกี่สุารแบื้บื้ Hypertext ซ/�งภายในเอกี่สุารจะม�จ$ดเชื่��อมโยง (link) ไป็ย�งเอกี่สุารอ��นๆ ท์��เกี่��ยวข่ อง เอกี่สุารต้�างๆ ท์��เชื่��อมโยงกี่�นเหม�อนใยแมงม$ม เป็-นท์��มาข่องคื1าว�า Web.

• HTTP เป็-นโป็รโต้คือลสุ1าหร�บื้เป็2ดด*ข่ อม*ลจากี่ www เร�ยกี่ใชื่ งานได โดยระบื้$ http:// และต้ามด วย URL ในชื่�องกี่รอกี่ Address ด านบื้นข่องโป็รแกี่รม

เว�บื้บื้ราวเซอร�

http://www.kts.ac.th/kts/kanghan/html/unit102.htm

ศั�พท์�เบื้�องต้ นเกี่��ยวกี่�บื้เว�บื้ไซต้� (ต้�อ)

• URL (Uniform Resource Locator) คื�อ ข่ อคืวามท์��บื้อกี่ต้1าแหน�งข่องข่ อม*ลใน Internet ไม�ว�าจะเป็-น Web page, File ป็ระเภท์ต้�างๆ เชื่�น ร*ป็ภาพ เสุ�ยง

URL ป็ระกี่อบื้ด วย โป็รโต้คือล + domain name + (directory ท์��เกี่�บื้ไฟล�) ชื่��อไฟล� เชื่�นhttp://www.enjoyday.net/webtutorial/css/index.htmlhttp://www.enjoyday.net/images/logo.jpg

• Domain name คื�อ ชื่��อเว�บื้ไซต้� (ท์��ไม�ม�กี่ารซ1ากี่�นกี่�บื้เว�บื้ไซต้�อ��นๆ) เชื่�น google.com, enjoyday.net

ศั�พท์�เบื้�องต้ นเกี่��ยวกี่�บื้เว�บื้ไซต้� (ต้�อ)

• Webpage คื�อ หน าเอกี่สุารข่องบื้ร�กี่าร www ท์��อย*�ในร*ป็แบื้บื้ HTML ภายในป็ระกี่อบื้ด วยข่ อคืวาม ภาพ ล�งคื� Web page แต้�ละหน าจะเชื่��อมโยงกี่�น เพ��อให เราเร�ยกี่ด*เอกี่สุารหน าอ��นๆ ท์��เกี่��ยวข่ องได อย�างสุะดวกี่ ไม�ต้ องระบื้$ URL เองท์$กี่คืร�ง

• Homepage คื�อ Web page หน าแรกี่ท์��ผู้* ใชื่ เห�นเม��อเข่ ามาย�ง Web site ม�กี่ถู*กี่ออกี่แบื้บื้ให โดดเด�น น�าสุนใจ และม�ล�งคื�เชื่��อมโยงไป็เว�บื้เพจหน าอ��นๆ

 • Website คื�อ Web page หลายๆ หน าท์��ม�เน�อหา

เกี่��ยวข่ องกี่�น ป็ระกี่อบื้เข่ าด วยกี่�น

ศั�พท์�เบื้�องต้ นเกี่��ยวกี่�บื้เว�บื้ไซต้� (ต้�อ)• Web browser คื�อ โปรแกรมสำ�าหร�บเร�ยกดู�เว็บเพจ โดูยจะแปลคื�าสำ��ง HTML

แล�ว็ประมว็ลผลเพ��อแสำดูงผลออกมาเป น Web page เช่#น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป นต้�น

• Web server คื�อ เคืร��องคือมพ%ว็เต้อร&ที่��ที่�าหน�าที่��ให�บร%การข้�อม�ลใน www ซึ่+�งเกบ Web page และโปรแกรมจ�ดูการบร%การ เม��อผ��ใช่�ต้�องการดู� Web page ที่��อย�#ในเคืร��อง Server กจะใช่� Web browser เร�ยกข้อข้�อม�ลโดูยระบ,ที่��อย�#ข้องข้�อม�ลในล�กษณะที่��เร�ยกว็#า URL

• Upload คื�อ การสำ#งข้�อม�ลจากเคืร��องข้องเราไปย�ง Web Server เม��อเราสำร�าง Web page แต้#ละหน�าแล�ว็ ต้�องสำ#งข้�อม�ลไปเกบไว็�ที่�� Web

Server ที่��เป นเคืร��องคือมพ%ว็เต้อร&ที่��ให�บร%การข้�อม�ล www โดูยอาศั�ยโปรแกรม FTP

• Search engine เป นเคืร��องม�อหร�อโปรแกรมในการคื�นหาเว็บต้#างๆ โดูยม�การเกบ รายช่��อเว็บไซึ่ต้& และข้�อม�ลที่��เก��ยว็ข้�องต้#างๆ ข้องเว็บไซึ่ต้& และน�ามาจ�ดูเกบไว็�ใน server เพ��อให�สำามารถคื�นหาและแสำดูงผลไดู�สำะดูว็กรว็ดูเรว็ เช่#น google.com, yahoo.com, bing.com, altavista.com, sanook.com เป นต้�น

คืว็ามสำ�าคื�ญข้องการออกแบบเว็บไซึ่ต้&

เน��องจากี่ - เว�บื้ไซต้�เป็-นสุ��อท์��อย*�ในคืวามคืวบื้คื$มข่องผู้* ใชื่ โดยสุมบื้*รณ์� ผู้* ใชื่ สุามารถูคืล�กี่หร�อไม�คืล�กี่ได ต้ามต้ องกี่าร โดยผู้* ใชื่ จะไม�อดท์นต้�อ อ$ป็สุรรคืและป็7ญ่หาท์��เกี่�ดจากี่กี่ารออกี่แบื้บื้ผู้�ดพลาด

ด�งน�น - กี่ารออกี่แบื้บื้เว�บื้ไซต้�จ/งม�สุ�วนสุ1าคื�ญ่ในกี่ารสุร างคืวามป็ระท์�บื้ใจ และท์1าให อยากี่กี่ล�บื้มาใชื่ บื้ร�กี่ารอ�กี่ ซ/�งเว�บื้ไซต้�ด�งกี่ล�าวจะต้ อง

ออกี่แบื้บื้ให ม�ป็ระโยชื่น�และสุะดวกี่ต้�อกี่ารใชื่ งานรวมถู/งคืวามสุวย งาม, คืวามรวดเร�วข่องเว�บื้ไซต้�

การสำร�างคืว็ามไดู�เปร�ยบเหน�อคื�#แข้#ง

ในด านธุ$รกี่�จจ1าเป็-นต้ องให คืวามสุ1าคื�ญ่ข่องกี่ารออกี่แบื้บื้มากี่ข่/น เน��องจากี่- พฤต้�กี่รรมกี่ารใชื่ จ�ายบื้นเว�บื้ น�นล*กี่คื าม�ท์างเล�อกี่มากี่ข่/น- สุามารถูเป็ร�ยบื้เท์�ยบื้ราคืา เพ��อหาสุ�นคื าท์��ด�ท์��สุ$ด โดยไม�ต้ องเกี่รงใจผู้* ข่าย- ไม�ม�ข่ อเสุ�ยเป็ร�ยบื้- ได เป็ร�ยบื้เร��องท์1าเลท์��ต้� ง และระยะท์าง- ผู้* ใชื่ งานหร�อล*กี่คื าจะป็ระเม�นหน�วยงานหร�อบื้ร�ษั�ท์ต้ามล�กี่ษัณ์ะข่องเว�บื้ ไซต้�ท์��ได สุ�มผู้�สุ ซ/�งร านคื าเล�กี่ๆ แต้�สุามารถูออกี่แบื้บื้เว�บื้ไซต้�ให ม�คืวามน�า เชื่��อถู�อมากี่กี่ว�าบื้ร�ษั�ท์ใหญ่�ๆ ได

ด�งน�น กี่ารออกี่แบื้บื้เว�บื้ไซต้�ท์��ด�กี่�จะท์1าเกี่�ดคืวามได เป็ร�ยบื้ท์างกี่ารคื า และม� โอกี่าสุท์างธุ$รกี่�จมากี่ข่/น

การออกแบบเว็บไซึ่ต้&ที่��ดู� กี่ารออกี่แบื้บื้เว�บื้ไซต้�ไม�ได หมายถู/งล�กี่ษัณ์ะหน าต้า

ข่องเว�บื้ไซต้�เพ�ยงอย�างเด�ยว แต้�เกี่��ยวข่ องต้�งแต้�

กี่ารกี่1าหนดกี่ล$�มเป็;าหมาย, ระบื้$กี่ล$�มผู้* ใชื่ , กี่ารจ�ดระบื้บื้ข่ อม*ล กี่ารสุร างระบื้บื้เนว�เกี่ชื่��น, กี่ารออกี่แบื้บื้หน าเว�บื้เพจ รวมไป็ถู/งกี่ารใชื่ กี่ราฟ2กี่, กี่ารเล�อกี่ใชื่ สุ�, กี่ารจ�ดร*ป็แบื้บื้ต้�วอ�กี่ษัร, ร$ �นข่อง Web Browser, ข่นาดหน าจอมอน�เต้อร�, คืวามละเอ�ยดข่องจอภาพ

เพ��อให เกี่�ดคืวามสุะดวกี่และพ/งพอใจแกี่�ผู้* ใชื่ ในกี่ารใชื่ งานเว�บื้ไซต้�น�นๆ

ออกแบบให�ต้รงก�บเป4าหมายและล�กษณะข้องเว็บไซึ่ต้&

เว�บื้ไซต้�แต้�ละป็ระเภท์ต้�างม�เป็;าหมายและล�กี่ษัณ์ะท์��แต้กี่ต้�างกี่�น เชื่�น เว�บื้ไซต้� Search Engine ซ/�งเป็-นแหล�งรวบื้รวมเว�บื้ไซต้�ต้�างๆไว โดยม�ผู้* ท์��เข่ ามาใชื่ ป็ร�กี่ารมากี่ในแต้�ละว�น ด�งน�นสุ��งสุ1าคื�ญ่ในกี่ารออกี่แบื้บื้เว�บื้ไซต้�ป็ระเภท์น�คื�อ

- สุามารถูแสุดงหน าเว�บื้อย�างรวดเร�วเม��อผู้* ใชื่ เป็2ดเข่ ามาด*

- ม�ระบื้บื้สุ�บื้คื นข่ อม*ลท์��ม�ป็ระสุ�ท์ธุ�ภาพ เพ��อให ได ผู้ลล�พธุ�ท์��รวดเร�ว

- ม�คืวามสุะดวกี่ในกี่ารใชื่ บื้ร�กี่ารสุ�บื้คื นข่ อม*ล- ม�รายละเอ�ยดข่องผู้ลกี่ารสุ�บื้คื นท์��ด�

ออกแบบให�ต้รงก�บเป4าหมายและล�กษณะข้องเว็บไซึ่ต้&

เว�บื้ไซต้�เพ��อคืวามบื้�นเท์�งหร�อท์��เกี่�ยวกี่�บื้ศั�ลป็ะ ซ/�งผู้* ใชื่ หว�งท์��จะได พบื้กี่�บื้คืวามต้��นเต้ นเร าใจ, คืวามสุวยงาม, คืวามสุน$กี่สุนานและคืวามเพล�ดเพล�น ด�งน�นสุ��งสุ1าคื�ญ่ในกี่ารออกี่แบื้บื้เว�บื้ไซต้�ป็ระเภท์น�คื�อ

- ม�กี่ารออกี่แบื้บื้เว�บื้ให สุวยงามและน�าสุนใจ- ม�กี่ารใชื่ Plug- ins เพ��อให เว�บื้น�นม�สุ�สุ�นมากี่

ข่/น- ม�กี่ารจ�ดกี่ารระบื้บื้ข่ อม*ลท์��ด�อย�างเป็-นระบื้บื้- คื1าน/งถู/งคืวามสุวยงามข่องเว�บื้ไซต้�เป็-นหล�กี่

ภาษัามาต้รฐานท์��ใชื่ ในกี่ารสุร างเว�บื้เพจ

• HTML (Hypertext Markup Language) คื�อ ภาษามาต้รฐานที่��ใช่�ในการสำร�างเว็บเพจ เพ��อน�าไปแสำดูงผลในโปรแกรม Web browser เอกสำารเว็บเพจจะม�นามสำก,ลเป น .htm หร�อ .html 

ต้�ว็อย#าง code ภาษา HTML เพ��อสำร�างหน�าเว็บเพจ <html>

<head> <title>การเร%�มต้�นสำร�างเว็บเพจ</title>

</head> <body>

ต้�ว็อย#างการสำร�างเว็บเพจดู�ว็ย HTML </body>

</html>

ร*ป็แบื้บื้ข่องเว�บื้ไซต้�แบ#งไดู�เป น 2 ร�ปแบบหล�กๆ คื�อ 1. Static Website 2. Dynamic Website

ร*ป็แบื้บื้ข่องเว�บื้ไซต้�1. Static Website หมายถ+ง เว็บไซึ่ต้&ที่��สำร�างดู�ว็ยภาษา HTML ธรรมดูา และบ�นที่+กเป นไฟล&นามสำก,ล .html    เน�9อหาข้�อคืว็าม ร�ปภาพในหน�าเว็บเพจน�9นจะเป นไปต้ามที่��เราเข้�ยนก�าหนดูไว็� Static Website เหมาะก�บเว็บไซึ่ต้&ที่��ม�ข้นาดูไม#ใหญ# จ�านว็นหน�าเว็บเพจไม#มาก ไม#ม�การเปล��ยนแปลงข้�อม�ลบ#อยๆ  และไม#ม�การต้%ดูต้#อฐานข้�อม�ล

2. Dynamic Website หมายถ+ง เว็บไซึ่ต้&ที่��หน�าเว็บเพจสำามารถเปล��ยนแปลงข้�อม�ลเองไดู� โดูยไม#ต้�องเข้�ยนแต้#ละหน�าเว็บเพจเอง  เช่#น กระดูานข้#าว็ (Webboard), ระบบสำ�บคื�นข้�อม�ล เว็บไซึ่ต้&ร�ปแบบน�9จะถ�กสำร�างดู�ว็ยภาษา Script แบบ Server Side Script เช่#น PHP, ASP, ASP.Net, JSP และอ��นๆ  ไฟล&เอกสำารที่��ไดู�จะม�นามสำก,ล .php, .asp เป นต้�น และม�กจะม�การต้%ดูต้#อก�บฐานข้�อม�ลเพ��อบ�นที่+กข้�อม�ลลงในฐานข้�อม�ล หร�อน�าข้�อม�ลจากฐานข้�อม�ลข้+9นมาแสำดูงผลเป นหน�าเว็บเพจ

สุ�วนป็ระกี่อบื้ข่องหน าเว�บื้เพจ

แบ#งเป น 3 สำ#ว็น• สำ#ว็นห�ว็ข้องหน�า (Page

Header)• สำ#ว็นข้องเน�9อหา (Page

Body)• สำ#ว็นที่�ายกระดูาษ (Page

Footer)

1. สุ�วนห�ว (Page Header)  จะอย*�บื้ร�เวณ์บื้นสุ$ดข่องหน าเว�บื้เพจ เป็-นสุ�วนท์��แสุดงชื่��อ

เว�บื้ไซต้� โลโกี่ แบื้นเนอร�โฆษัณ์าล�งกี่�สุ1าหร�บื้ข่ ามไป็ย�งหน าเว�บื้อ��น

2. สำ#ว็นเน�9อหา (Page Body)  จะอย*�บื้ร�เวณ์ต้อนกี่ลางข่องหน าเว�บื้เพจ ซ/�งเป็-นสุ�วนท์��แสุดงเน�อหาภายในหน าเว�บื้เพจน�น โดยป็ระกี่อบื้ด วยข่ อคืวาม ข่ อม*ล ภาพเคืล��อนไหว เป็-นต้ น

3. สุ�วนท์ าย (Page Footer)  จะอย*�บื้ร�เวณ์ด านล�างสุ$ดข่องหน าเว�บื้เพจ สุ�วนมากี่ใชื่ สุ1าหร�บื้ล�งกี่�ข่ อคืวามสุ�น ๆ เข่ าใจง�าย หร�อจะม�ชื่��อเจ าข่อง เว�บื้ไซต้� อ�เมลแอดเดรสุข่องผู้* ด*แลเว�บื้ไซต้�สุ1าหร�บื้ต้�ดต้�อกี่�บื้ท์างเว�บื้ไซต้�

ข้�9นต้อนการออกแบบเว็ปไซึ่ต้&

กี่ารออกี่แบื้บื้เว�บื้เพจ

โคืรงสำร�างเว็บไซึ่ต้& การออกแบบโคืรงสำร�างเว็บไซึ่ต้& สำามารถที่�าไดู�หลาย

แบบ ข้+9นอย�#ก�บล�กษณะข้องข้�อม�ล คืว็ามถน�ดูข้องผ�� ออกแบบ ต้ลอดูจนกล,#มเป4าหมายที่��ต้�องการน�าเสำนอ

โคืรงสำร�างข้องเว็บไซึ่ต้&ประกอบไปดู�ว็ย 4 ร�ปแบบใหญ#ๆ ไดู�ดู�งน�9

หล�กการออกแบบเว็บเพจ1. การว็างแผน         - ก�าหนดูเน�9อหา กี่�อนลงท์1าเว�บื้เราจะต้ องร* ว�าเราจะท์1าเว�บื้เกี่��ยวกี่�บื้

อะไร เน�อหาเป็-นอย�างไร กี่ล$�มเป็;าหมายเป็-นกี่ล$�มใด ท์�งน�เพ��อท์��เราจะได น1าเน�อหา เหล�าน�นมาใสุ�ในเว�บื้เพ��อแสุดงให ร* ว�า เน�อหาโดยรวมเกี่��ยวกี่�บื้

     อะไร เชื่�น เกี่��ยวกี่�บื้คือมพ�วเต้อร� กี่�ต้ องม�ข่ อม*ลข่องคือมพ�วเต้อร� แต้�ละชื่น�ด ล�กี่ษัณ์ะ ราคืาแต้�ละร$ �นและสุถูานท์��ข่าย เป็-นต้ น

        - ออกแบบม,มมองในหน�าเว็บ (LayOut) คื�อกี่ารจ�ดวางองคื� ป็ระกี่อบื้ในเว�บื้เพจว�าสุ�วนใดคืวรจะม�อะไร อาจท์1าโดยกี่ารร�างใสุ�

กี่ระดาษัเป็ล�า ๆ ไว กี่�อนหร�อใชื่ โป็รแกี่รมคือมพ�วเต้อร�ชื่�วยในกี่าร    ออกี่แบื้บื้กี่�ได กี่ารใชื่ ต้ารางชื่�วยในกี่ารจ�ดองคื�ป็ระกี่อบื้ในหน าเว�บื้น�น

จะท์1าให เว�บื้เพจม�คืวามเป็-นระเบื้�ยบื้ย��งข่/น และสุะดวกี่ต้�อกี่ารแกี่ ไข่   ป็ร�บื้ป็ร$ง

2. การเต้ร�ยมการ               เชื่�น กี่ารเต้ร�ยมกี่ารด านข่ อม*ลท์�งท์��เป็-น เน�อหา ภาพ เสุ�ยง หร�อสุ��งจ1าเป็-นต้�างๆ ท์��น�กี่เร�ยนคื�ดว�าต้ องกี่ารจะ

น1าเสุนอในกี่ารท์1าเว�บื้เพจน�น เม��อเราร* แล วว�าเราจะท์1าเว�บื้เกี่��ยวกี่�บื้      อะไร กี่ารรวบื้รวมข่ อม*ลกี่�ม�สุ�วนสุ1าคื�ญ่อย�างย��ง เชื่�น ถู าจะท์1าเว�บื้

เกี่��ยวกี่�บื้ โรงเร�ยน กี่�ต้ องไป็หาคืต้�พจน�ป็ระจ1าโรงเร�ยน สุ�ป็ระจ1า   โรงเร�ยน บื้$คืลากี่รในโรงเร�ยน ป็ระว�ต้�โรงเร�ยน ฯลฯ มารวบื้รวมไว

แล วหล�งจากี่น�นกี่�เอาข่ อม*ลน�นมาจ�ดร*ป็แบื้บื้ในเว�บื้ต้�อไป็ กี่ารหา เคืร��องม�อในกี่ารจ�ดท์1าน�น กี่�เป็-นเร��องสุ1าคื�ญ่เคืร��องม�อในท์��น� หมาย

ถู/งโป็รแกี่รมกี่ารท์1างานต้�าง ๆ เชื่�นโป็รแกี่รมจ�ดกี่ารร*ป็ภาพ เสุ�ยง    ภาพเคืล��อนไหวต้�างๆ โป็รแกี่รมในกี่ารจ�ดท์1าเว�บื้เพจ

จะใชื่ โป็รแกี่รมสุ1าเร�จร*ป็หร�อจะใชื่ ภาษัาคือมพ�วเต้อร� ในกี่ารสุร างต้ องเต้ร�ยมกี่ารให พร อม

3. การจ�ดูที่�า               เม��อวางแผู้นและเต้ร�ยมกี่ารเร�ยบื้ร อยแล ว กี่�ถู/ง  เวลาจ�ดท์1า อาจจะท์1าคืนเด�ยว หร�อท์1าเป็-นกี่ล$�ม โดยใชื่ เคืร��องม�อท์��เต้ร�ยม

 ไว ซ/�งจะอธุ�บื้ายถู/ง ว�ธุ�กี่ารจ�ดท์1าหร�อว�ธุ�กี่ารสุร างเว�บื้เพจในล1าด�บื้ต้�อไป็

4. การที่ดูสำอบและการแก�ไข้              กี่ารสุร างเว�บื้เพจท์$กี่คืร�งคืวรจะม�กี่ารท์ดสุอบื้กี่�อนเผู้ยแพร�ท์$กี่คืร�งเพ��อหาข่ อบื้กี่พร�องแล วน1ามาแกี่ ไข่กี่าร

ท์1าเว�บื้น�นเม��อท์1าเสุร�จและอ�ป็โหลดไป็ไว ในเคืร��องเซ�ร�ฟเวอร�แล ว ให ท์ดลอง แนะน1าเพ��อนท์��สุน�ท์ชื่�ดเชื่�อและใชื่ อ�นเท์อร�เน�ต้อย*� ลองเป็2ดด*และให บื้อกี่ข่ อ

ผู้�ดพลาดมา เชื่�น กี่ารเชื่��อมโยงต้�าง ๆ , ร*ป็ภาพ และต้�วอ�กี่ษัร ว�าถู*กี่ต้ อง ชื่ าไป็ หร�อเป็ล�า หากี่ท์ดสุอบื้จากี่เคืร��องข่องต้นเองแล ว ข่ อผู้�ดพลาด     ต้�างๆ ม�กี่จะไม�คื�อยป็รากี่ฏให เห�นเน��องจากี่ว�าข่ อม*ลต้�าง ๆ จะอย*�ใน

เคืร��องข่องต้นเองและกี่ารเชื่��อมโยงต้�างๆ เชื่�นกี่�น โป็รแกี่รมจะท์1ากี่าร คื นหาในเคืร��องจนพบื้ ท์1าให เราไม�เห�นข่ อผู้�ดพลาด หล�งจากี่ท์ดสุอบื้แล ว

ให ด1าเน�นกี่ารแกี่ ไข่ข่ อผู้�ดพลาด

5. การน�าเว็บเพจต้#าง ๆ มารว็บรว็มเป นเว็บไซึ่ต้&               เม��อสุร างเว�บื้เพจเสุร�จ จ�ดรวบื้รวม และ

เร�ยบื้เร�ยงหน าเว�บื้เพจแต้�ละหน า ท์1ากี่ารท์ดสุอบื้ แกี่ ไข่ป็ร�บื้ป็ร$งเสุร�จแล ว กี่�สุามารถูเผู้ยแพร�เว�บื้เพจ

ท์�งหมดออกี่สุ*�สุาธุารณ์ชื่นในร*ป็แบื้บื้ข่องเว�บื้ไซต้�ได

กี่ารวางแผู้นพ�ฒนาเว�บื้เพจ

ออกี่แบื้บื้โดยใชื่ สุ�สุดใสุมาเร�ยงกี่�นท์1าให เว�บื้ไซต้�ด*สุะด$ดต้า หล�งจากี่น�นผู้* ท์��เข่ ามาชื่มกี่�จะเร��มด*เมน*สุ�วนอ��นๆข่องเว�บื้ไซต้�

ออกี่แบื้บื้โดยสุร างเมน*เป็-นร*ป็อย*�แถูบื้ซ ายม�อ แล วใชื่ frame เร�ยกี่ข่ อม*ลมาแสุดงบื้ร�เวณ์ต้รงกี่ลาง

http://www.prapayneethai.com/th/culture/

http://thai.tourismthailand.org/

http://women.sanook.com/health/

องคื&ประกอบข้องการออกแบบ

เว็บไซึ่ต้&

องคื&ประกอบข้องการออกแบบเว็บไซึ่ต้&อย#างม�ประสำ%ที่ธ%ภาพ

1. คืวามเร�ยบื้ง�าย (Simplicity)2. คืวามสุม1�าเสุมอ (Consistency)3. คืวามเป็-นเอกี่ล�กี่ษัณ์� (Identity)4. เน�อหาท์��ม�ป็ระโยชื่น� (Useful content)5. ม�ล�กี่ษัณ์ะท์��น�าสุนใจ (Visual Appeal)6. กี่ารใชื่ งานอย�างไม�จ1ากี่�ด (Compatibility)7. คื$ณ์ภาพในกี่ารออกี่แบื้บื้ (Design Stability)8. ระบื้บื้กี่ารใชื่ งานท์��ถู*กี่ต้ อง (Functional

Stability)

คืว็ามเร�ยบง#ายSimplicity

• ม�ร�ปแบบที่��เร�ยบง#าย ไม#ซึ่�บซึ่�อน• ใช่�งานไดู�อย#างสำะดูว็ก• ใช่�ช่น%ดูและสำ�ข้องต้�ว็อ�กษรไม#มากจนเก%นไป

จ�าก�ดูองคื&ประกอบเสำร%มที่�� เก��ยว็ข้�องก�บการน�าเสำนอ ให�เหล�อ

แต้#สำ%�งที่��จ�าเป น เช่#น

คืว็ามสำม��าเสำมอConsistency

การใช่�ร�ปแบบข้องหน�า สำไต้ล&ข้อง กราฟ;ก

ระบบเนว็%เกช่��น และโที่นสำ�ที่��ใช่�คืว็รม�คืว็ามคืล�ายคืล+งก�นต้ลอดู

ที่�9งเว็บไซึ่ต้&

คืว็ามเป นเอกล�กษณ&Identity

การใช่�ช่,ดูสำ� ช่น%ดูต้�ว็อ�กษร ร�ปภาพและ กราฟ;ก ม�ผลต้#อร�ปแบบข้องเว็บไซึ่ที่&เป นอย#างมาก

ดู�งน�9นจ+งคืว็รเล�อกใช่�องคื&ประกอบเหล#าน�9ให�เหมาะสำมก�บล�กษณะข้ององคื&กร

เน�9อหาที่��ม�ประโยช่น&Useful Content

เน�9อหาถ�อเป นสำ%�งที่��สำ�าคื�ญที่��สำ,ดูในเว็บไซึ่ที่&ดู�งน�9นในเว็บไซึ่ที่&จ+งคืว็รจ�ดูเต้ร�ยมเน�9อหา

และข้�อม�ลที่��ผ��ใช่�ต้�องการให�ถ�กต้�องและ สำมบ�รณ&

โดูยม�การปร�บปร,งและเพ%�มเต้%มให�ที่�นต้#อเหต้,การณ&อย�#เสำมอ

ระบบเนว็%เกช่�นที่��ใช่�งานง#ายUser-Friendly Navigation

ระบบเนว็%เกช่�น เป นองคื&ประกอบที่��สำ�าคื�ญข้องเว็บไว็ที่&

ดู�งน�9นจ+งต้�องออกแบบให�ผ��ใช่�เข้�าใจไดู�ง#าย

และใช่�งานไดู�สำะดูว็ก โดูยใช่�กราฟ;กที่��สำ��อคืว็ามหมายร#ว็มก�บคื�าอธ%บายที่��

ช่�ดูเจน รว็มที่�9งม�ร�ปแบบและล�าดู�บข้องรายการ

ที่��สำม��าเสำมอ

ระบบเนว็%เกช่��นที่��ใช่�งานง#าย(User-Friendly Navigation)

จะต้ องออกี่แบื้บื้ให ผู้* ใชื่ เข่ าใจและใชื่ งานได ง�าย โดย

- ใชื่ กี่ราฟ2กี่ท์��สุ��อคืวามหมาย ร�วมกี่�บื้คื1าอธุ�บื้ายท์��ชื่�ดเจน

- ม�ร*ป็แบื้บื้และล1าด�บื้ข่องรายกี่ารท์��สุม1�าเสุมอ

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

ระบบการใช่�งานที่��ถ�กต้�อง (Functional Stability)

ระบื้บื้กี่ารท์1างานต้�างๆ ในเว�บื้ไซต้�จะต้ องม�คืวามแน�นอนและท์1าหน าท์��ได ถู*กี่ต้ อง เชื่�น - กี่ารใชื่ ฟอร�มกี่รอกี่ข่ อม*ล จะต้ องแน�ใจว�าใชื่ งานได จร�ง หร�อ -- ล�งคื�ต้�างๆท์��ม�อย*�สุามารถูเชื่��อมโยงไป็ย�งหน าท์��ม�อย*�จร�ง

ป<จจ�ยสำ�าคื�ญที่��ผ��ใช่�ต้�องการจากเว็บไซึ่ที่&

• ม�เน�9อหาเป นประโยช่น& ต้รงก�บที่��ผ��ใช่�ต้�องการ• ม�การปร�บปร,งเพ%�มเต้%มเน�9อหา และพ�ฒนาเว็บไซึ่ที่&อย�#เสำมอ• ใช่�เว็ลาในการ Download น�อยแสำดูงผลเรว็• การใช่�งานที่��สำะดูว็ก เข้�าใจง#าย

การว็างแนว็ที่างกการเคืล��อนที่��ภายในไซึ่ที่&

Site Flow

เป นการก�าหนดูข้อบเข้ต้ข้องข้�อม�ลสำ#ว็น ต้#าง ๆ

ร#ว็มก�บการสำร�างที่างเช่��อมโยงถ+งก�น โดูย เร%�มพ%จารณาจากหน�าโฮมเพจ แล�ว็จ+ง

ก�าหนดูแนว็ที่างกรเข้�าถ+งข้�อม�ลย#อย ในสำ#ว็นต้#าง ๆ

ร�ปแบบการเช่��อมโยงFlowchart / Storyboard

U n it P lan

G rou p 1 G rou p 2

P resen ta tion

G rou p 1 g rou p 2

P u b lica tion

G rou p 1 G rou p 2

W eb S ite

H om eP ag e

การสำร�างโคืรงร#างสำ�าหร�บหน�าเว็บWeb Template

2222222

โคืรงสำร�างระบบข้�อม�ลในเว็บไซึ่ต้&

Organizational Structure

โคืรงสำร�างระบบข้�อม�ลแบบล�าดู�บช่�9นHierarchy

. . . . . . . . . . . . . .. . . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .

. . . . . . . . . . . . . .. . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . .

โคืรงสำร�างข้�อม�ลแบบแคืบและล+ก

. . .

Page B

. . .

Page A

โคืรงสำร�างข้�อม�ลแบบกว็�างและต้�9น

แบบฝึ@กห�ดู น�กี่ศั/กี่ษัาหาต้�วอย�างเวป็ไซต้�ท์��ม�ล�กี่ษัณ์ะองคื�ป็ระกี่อบื้มา

อย�างละ 5 เวป็ไซต้�ท์��ม�องคื�ป็ระกี่อบื้ด�งน� 1. คืวามเร�ยบื้ง�าย (Simplicity)

2. คืวามสุม1�าเสุมอ (Consistency)3. คืวามเป็-นเอกี่ล�กี่ษัณ์� (Identity)4. เน�อหาท์��ม�ป็ระโยชื่น� (Useful content)5. ม�ล�กี่ษัณ์ะท์��น�าสุนใจ (Visual Appeal)6. กี่ารใชื่ งานอย�างไม�จ1ากี่�ด (Compatibility)7. คื$ณ์ภาพในกี่ารออกี่แบื้บื้ (Design Stability)8. ระบื้บื้กี่ารใชื่ งานท์��ถู*กี่ต้ อง (Functional Stability)

ป<จจ�ยสำ�าคื�ญที่��ผ��ใช่�ต้�องการจากเว็บไซึ่ต้&

1. ม�เน�อหาท์��เป็-นป็ระโยชื่น� และต้รงกี่�บื้ท์��ผู้* ใชื่ ต้ องกี่าร

2. ม�กี่ารป็ร�บื้ป็ร$งเน�อหา และพ�ฒนาเว�บื้ไซต้�อย*�เสุมอ

3. ใชื่ เวลาในกี่ารดาวน�โหลดน อย แสุดงผู้ลได รวดเร�ว

4. กี่ารใชื่ งานท์��สุะดวกี่ เข่ าใจง�าย

ที่�มงานในการพ�ฒนาเว็บไซึ่ต้&

เน��องจากี่กี่ารพ�ฒนาเว�บื้ไซต้�น�นม�คืวามหลากี่หลาย ด�งน�นจ/งต้ องอาศั�ยท์�กี่ษัะ, คืวามร* , คืวามชื่1านาญ่ในหลายๆ ด าน จ/งจ1าเป็-นต้ องม�ท์�มงานเพ��อพ�ฒนาเว�บื้ไซต้�ให ม�ป็ระสุ�ท์ธุ�ภาพ ซ/�งม�หน าท์��ร �บื้ผู้�ดชื่อบื้ต้�างๆ กี่�นไป็

ที่�มงานในการพ�ฒนาเว็บไซึ่ต้&Webmaster : เป็-นผู้* คืวบื้คื$มกี่ารออกี่แบื้บื้, เน�อหาและราย

ละเอ�ยดท์างเท์คืน�คื รวมท์�งเป็-นผู้* ท์��คื�ดหาว�ธุ�สุร างคืวามน�าสุนใจให กี่�บื้เว�บื้ไซต้� เพ��อให ม�ผู้* เข่ ามาใชื่ บื้ร�กี่ารมากี่ๆ

Information Architect : ท์1าหน าท์��จ�ดระเบื้�ยบื้ข่ อม*ลและท์ดสุอบื้ป็ระสุ�ท์ธุ�ภาพในกี่ารใชื่ งาน, Information architect คืวรม�พ�นฐานเกี่��ยวกี่�บื้กี่ารบื้ร�หารจ�ดกี่ารข่ อม*ลมา

กี่�อน

ที่�มงานในการพ�ฒนาเว็บไซึ่ต้&Designer : เป็-นผู้* ออกี่แบื้บื้ล�กี่ษัณ์ะหน าต้าท์�งหมดข่อง

เว�บื้ไซต้�คืวรเป็-นผู้* ท์��ม�คืวามร* ด านศั�ลป็ะ สุามารถูใชื่

โป็รแกี่รมกี่ราฟ2กี่ได เป็-นอย�างด�

HTML and JavaScript Coder : ร�บื้ผู้�ดชื่อบื้ในกี่ารสุร างเว�บื้เพ�จโดยอาศั�ยเคืร��อง

ม�อต้�างๆสุามารถูแกี่ ไข่ข่ อม*ลในเว�บื้เพจได อย�างรวดเร�ว

ที่�มงานในการพ�ฒนาเว็บไซึ่ต้&Developer/Programmer :

เป็-นผู้* เข่�ยน Script และโป็รแกี่รมกี่ารใชื่ งานต้�างๆภายในเว�บื้ไซต้� คืวรม�คืวามร* เกี่��ยวกี่�บื้ HTML, DHTML, JavaScript, ASP, PHP, CGI, Database Development

System Administrator : ท์1าหน าท์��คืวบื้คื$มด*แลเว�บื้เซ�ร�ฟเวอร� รวมถู/ง hardware & Software อ��นๆ ท์��เกี่��ยวข่ อง และสุามารถูแกี่ ไข่, ป็ร�บื้ต้�งระบื้บื้ให ท์1างานได อย�างม�ป็ระสุ�ท์ธุ�ภาพ

ที่�มงานในการพ�ฒนาเว็บไซึ่ต้&Content Editor / Writer :

เป็-นผู้* จ�ดเต้ร�ยมเน�อหาและข่ อม*ลต้�างๆ ท์�งหมดท์��จะน1าไป็ไว ในเว�บื้เพจ โดยจะต้ องสุร างสุรรคื�เน�อหาท์��ด�ม�ป็ระโยชื่น�และน�าสุนใจให กี่�บื้ผู้* ใชื่ งานอย*�เสุมอ

โปรแกรมช่#ว็ยในการสำร�างเว็บไซึ่ต้&- Macromedia Dreamweaver- Microsoft FrontPage- Allaire HomeSite- HTML Editor ต้#างๆ

คืว็ามผ%ดูพลาดูในการออกแบบเว็บไซึ่ต้&

1. ใช่�โคืรงสำร�างแบบ Frame- สุร างคืวามสุ�บื้สุนต้�อผู้* ใชื่ - ไม�สุามารถู Bookmark หน าเว�บื้เพจท์��

ต้ องกี่ารได - แสุดงชื่��อไฟล�หร�อ URL ไม�ถู*กี่ต้ อง- กี่ารสุ��งพ�มพ�จะได ผู้ลล�พธุ�ท์��ไม�แน�นอน

คืว็ามผ%ดูพลาดูในการออกแบบเว็บไซึ่ต้&

2. ใช่�เที่คืโนโลย�สำ�งโดูยไม#จ�าเป น- ผู้* ใชื่ ไม�พร อมท์��จะใชื่ งานเท์คืโนโลย�เหล�า

น�น- ต้ องเสุ�ยเวลาในกี่ารดาวน�โหลดข่ อม*ล

นาน- จ1าเป็-นต้ องต้�ดต้�งโป็รแกี่รมเพ��มเต้�ม- ไม�ม�ผู้ลต้�อผู้* ใชื่ งานโดยท์��วไป็ เพราะผู้* ใชื่

งานจะสุนใจข่ อม*ล มากี่กี่ว�าเท์คืโนโลย�ท์��ใชื่

คืว็ามผ%ดูพลาดูในการออกแบบเว็บไซึ่ต้&

3. ใช่�ต้�ว็หน�งสำ�อหร�อภาพเคืล��อนไหว็ต้ลอดูเว็ลา

- สุร างคืวามร1าคืาญ่ต้�อผู้* ใชื่ งาน- เป็-นจ$ดท์��สุร างคืวามสุ�บื้สุนให กี่�บื้ผู้* ใชื่ งาน

4. ม�ที่��อย�#เว็บไซึ่ต้&ที่��ซึ่�บซึ่�อน (URL) ยากต้#อการจดูจ�าและพ%มพ&

- ท์1าให ผู้* ใชื่ จดจ1าได ยากี่- ผู้* ใชื่ จะเข่�ยนไม�ถู*กี่ต้ อง ถู าม� URL ท์��ซ�บื้

ซ อน

คืว็ามผ%ดูพลาดูในการออกแบบเว็บไซึ่ต้&

5. ไม#ม�การแสำดูงช่��อและที่��อย�#เว็บไซึ่ต้&ในหน�าเว็บเพจ- ผู้* ใชื่ อาจเกี่�ดคืวามสุ�บื้สุนว�ากี่1าล�งใชื่ งานเว�บื้ไซต้�ใดอย*�- ผู้* ใชื่ ไม�สุามารถูร* ชื่��อและท์��อย*�เว�บื้ไซต้� เพ��อเข่ ามาใหม�ได 6. ม�คืว็ามยาว็ข้องหน�ามากเก%นไป- ม�ข่ อม*ลมากี่ ท์1าให เกี่�ดคืวามสุ�บื้สุน- เสุ�ยเวลาในกี่าร Download นาน- ยากี่ต้�อกี่ารคื นหาข่ อม*ลท์��ต้ องกี่าร จากี่จ1านวนข่ อม*ลมากี่ๆ ในหน/งหน า

คืว็ามผ%ดูพลาดูในการออกแบบเว็บไซึ่ต้&

7. ข้าดูระบบเนว็%เกช่��นที่��ม�ประสำ%ที่ธ%ภาพ- ผู้* ใชื่ ไม�สุามารถูเข่ าถู/งข่ อม*ลท์��ต้ องกี่ารได - ผู้* ใชื่ อาจเกี่�ดหลงท์างได หากี่ระบื้บื้เนว�เกี่

ชื่��นไม�ด�8. ใช่�สำ�ข้อง Link ไม#เหมาะสำม

- ท์1าให ผู้* ใชื่ ไม�แน�ใจว�าสุ�วนไหนคื�อ Link หร�อ สุ�วนไหนบื้ างท์��

เคืย Link ไป็แล ว หร�อ ย�งไม�เคืย link ไป็

คืว็ามผ%ดูพลาดูในการออกแบบเว็บไซึ่ต้&

9. ข้�อม�ลเก#าไม#ม�การปร�บปร,งให�ที่�นสำม�ย- ไม�ได ร�บื้คืวามเชื่��อถู�อจากี่ผู้* ใชื่ งาน- ผู้* เข่ ามาใชื่ บื้ร�กี่ารน อย เพราะข่ อม*ลเป็-นข่ อม*ลเกี่�า

10. เว็บเพจแสำดูงผลช่�า- ถู าใชื่ เวลาโหลดนานกี่ว�า 15 sec อาจท์1าให ผู้* ใชื่

ข่าดคืวาม สุนใจท์��จะด*ข่ อม*ลต้�อ (ม�รายงานกี่ารว�จ�ยว�า ถู า

เกี่�น 8 Sec ผู้* ใชื่ กี่ว�า 90 % จะเป็ล��ยนไป็ด*เว�บื้ไซต้�อ��นแท์น)

การเล�อกใช่�สำ�สำ�าหร�บเว็บไซึ่ต้&

เล�อกใช่�สำ�สำ�าหร�บเว็บไซึ่ต้& ( Designing Web Colors)

สุ�สุ�นในหน าเว�บื้เพจ เป็-นสุ��งท์��ม�คืวามสุ1าคื�ญ่ มากี่ในกี่ารด/งด*ดคืวามสุนใจข่องผู้* ใชื่ เน��องจากี่

สุ��งแรกี่ท์��พวกี่เข่ามองเห�นจากี่เว�บื้เพจกี่�คื�อ สุ� ซ/�งเป็-นสุ��งกี่1าหนดบื้รรยากี่าศัและคืวามร* สุ/กี่โดยรวม

ข่องเว�บื้ไซต้� เราสุามารถูใชื่ สุ�ได กี่�บื้ท์$กี่องคื� ป็ระกี่อบื้ข่องเว�บื้เพจ ต้�งแต้�ต้�ว

อ�กี่ษัร,ร*ป็ภาพ,ล�งคื�, สุ�พ�นหล�ง และร*ป็ภาพพ�นหล�ง

ประโยช่น&ข้องสำ�ในเว็บไซึ่ต้&สุ�เป็-นเคืร��องม�ออเนกี่ป็ระสุงคื�อย�างหน/�งท์��

ม�คืวามสุ1าคื�ญ่มากี่ในกี่ารออกี่แบื้บื้เว�บื้ไซต้� เน��องจากี่สุ�สุามารถูสุ��อถู/งคืวามร* สุ/กี่และอารมณ์�

และย�งชื่�วยสุร างคืวามสุ�มพ�นธุ�ระหว�างสุถูานท์��กี่�บื้ เวลาอ�กี่ด วย ด�งน�นสุ�จ/งเป็-นป็7จจ�ยสุ1าคื�ญ่อย�าง

หน/�งท์��จะชื่�วยเสุร�มสุร างคืวามหมายข่ององคื� ป็ระกี่อบื้ให กี่�บื้เว�บื้เพจได อย�างด�

ป็ระโยชื่น�ข่องสุ�ในร*ป็แบื้บื้ต้�างๆ ม�ด�งน�1. สุ�สุามารถูชื่�กี่น1าสุายต้าผู้* อ�านให ไป็ย�งท์$กี่

บื้ร�เวณ์ในหน าเว�บื้เพจ ผู้* อ�านจะม�กี่ารเชื่��อมโยงคืวามร* สุ/กี่กี่�บื้บื้ร�เวณ์ข่องสุ�ในร*ป็แบื้บื้ท์��คืาดหว�ง

ได กี่ารเล�อกี่เฉดสุ�และต้1าแหน�งข่องสุ�อย�าง รอบื้คือบื้ในหน าเว�บื้ สุามารถูน1าท์างให ผู้* อ�าน

ต้�ดต้ามเน�อหาในบื้ร�เวณ์ต้�างๆ ต้ามท์��เรากี่1าหนด ได ว�ธุ�น�จะเป็-นป็ระโยชื่น�อย�างมากี่เม��อคื$ณ์

ต้ องกี่ารให ผู้* อ�านให คืวามสุนใจกี่�บื้สุ�วนใดสุ�วน หน/�งในเว�บื้ไซต้�เป็-นพ�เศัษั เชื่�น ข่ อม*ลใหม� โป็รโมชื่��

นพ�เศัษั หร�อบื้ร�เวณ์ท์��ไม�คื�อยได ร�บื้คืวามสุนใจมากี่�อน

2. สุ�ชื่�วยเชื่��อมโยงบื้ร�เวณ์ท์��ได ร�บื้กี่าร ออกี่แบื้บื้เข่ าด วยกี่�น ผู้* อ�านจะม�คืวามร* สุ/กี่ว�า

บื้ร�เวณ์ท์��ม� สุ�เด�ยวกี่�นจะม�คืวามสุ1าคื�ญ่เท์�ากี่�น ว�ธุ�กี่ารเชื่��อมโยงแบื้บื้น�ชื่�วยจ�ดกี่ล$�มข่องข่ อม*ลท์��ม�คืวามสุ�มพ�นธุ�อย�างไม�เด�นชื่�ดเข่ าด วยกี่�นได

3. สุ�สุามารถูน1าไป็ใชื่ ในกี่ารแบื้�งบื้ร�เวณ์ ต้�างๆ ออกี่จากี่กี่�น ท์1านองเด�ยวกี่�บื้กี่ารเชื่��อมโยง

บื้ร�เวณ์ท์��ม�สุ�เหม�อนกี่�นเข่ าด วยกี่�น แต้�ในข่ณ์ะเด�ยวกี่�นกี่�เป็-นกี่ารแบื้�งแยกี่บื้ร�เวณ์ท์��ม�สุ�ต้�างกี่�นออกี่จากี่กี่�น

4. สุ�สุามารถูใชื่ ในกี่ารด/งด*ดคืวามสุนใจข่องผู้* อ�าน สุายต้าผู้* อ�านม�กี่จะมองไป็ย�งสุ�ท์��ม�ล�กี่ษัณ์ะเด�น หร�อผู้�ด

ป็กี่ต้�เสุมอ กี่ารออกี่แบื้บื้เว�บื้ไซต้�ด วยกี่ารเล�อกี่ใชื่ สุ�อย�าง รอบื้คือบื้ ไม�เพ�ยงแต้�จะกี่ระต้$ นคืวามสุนใจข่องผู้* อ�าน

เพ�ยงเท์�าน�น แต้�ย�งชื่�วยหน�วงเหน��ยวให พวกี่เข่าอย*�ใน เว�บื้ไซต้�ได นานย��งข่/น สุ�วนเว�บื้ไซต้�ท์��ใชื่ สุ�ไม�เหมาะสุม

เสุม�อนเป็-นกี่ารข่�บื้ไล�ผู้* ชื่มไป็สุ*�เว�บื้อ��นท์��ม�กี่ารออกี่แบื้บื้ท์��ด�กี่ว�า

5. สุ�สุามารถูสุร างอารมณ์�โดยรวมข่องเว�บื้เพจและกี่ระต้$ นคืวามร* สุ/กี่ต้อบื้สุนองจากี่ผู้* ชื่มได นอกี่เหน�อ

จากี่คืวามร* สุ/กี่ท์��ได ร�บื้จากี่สุ�ต้ามหล�กี่จ�ต้ว�ท์ยาแล ว ผู้* ชื่มย�งอาจม�อารมณ์�และคืวามร* สุ/กี่สุ�มพ�นธุ�กี่�บื้สุ�บื้างสุ�หร�อบื้างกี่ล$�มเป็-นพ�เศัษั

6. สุ�ชื่�วยสุร างระเบื้�ยบื้ให กี่�บื้ข่ อคืวามต้�างๆ เชื่�น กี่ารใชื่ สุ�แยกี่สุ�วนระหว�างห�วเร��องกี่�บื้ต้�วเร��อง

หร�อกี่ารสุร างคืวามแต้กี่ต้�างให กี่�บื้ข่ อคืวามบื้าง สุ�วน โดยใชื่ สุ�แดงสุ1าหร�บื้คื1าเต้�อน หร�อใชื่ สุ�เท์า

สุ1าหร�บื้สุ��งท์��เป็-นท์างเล�อกี่

7. นอกี่เหน�อจากี่กี่ารใชื่ สุ�ชื่�วยในกี่ารออกี่แบื้บื้แล วสุ�ย�งสุามารถูสุ�งเสุร�มเอกี่ล�กี่ษัณ์�

ข่ององคื�กี่รหร�อหน�วยงานน�นๆ ได ด วยกี่ารใชื่ สุ�ท์��เป็-นเอกี่ล�กี่ษัณ์�ข่ององคื�กี่รมาเป็-นโท์นสุ�หล�กี่ข่องเว�บื้ไซต้�

กี่ารออกี่แบื้บื้เกี่��ยวกี่�บื้สุ�ไม�ใชื่�เร��องง�าย แม ว�าจะม� กี่ฎเกี่ณ์ฑ์�ต้�างๆ ท์��ชื่�วยในกี่ารสุร างชื่$ดสุ� (color

scheme) ท์��ม�ป็ระโยชื่น�มากี่มาย แต้�กี่�ม�แนวท์างและคืวามเข่ าใจผู้�ดจ1านวนมากี่ท์��จะน1าไป็สุ*�กี่ารสุร างชื่$ดสุ�ท์��ให คืวามร* สุ/กี่ไม�เหมาะสุม ในบื้างสุถูานกี่ารณ์�อาจใชื่ สุ�เป็-นเพ�ยงเคืร��องป็ระด�บื้อย�างหน/�งในกี่ารออกี่แบื้บื้ แต้�ในท์างต้รงกี่�นข่ าม กี่ารใชื่ สุ�ท์��มากี่เกี่�นไป็ อาจท์1าให ไป็บื้ดบื้�งองคื�ป็ระกี่อบื้อ��นๆ ในหน าเว�บื้เพจได ด�งน�นกี่ารเล�อกี่ใชื่ สุ�ให เหมาะสุมและเกี่�ดป็ระโยชื่น�จ/งเป็-นเร��องสุ1าคื�ญ่

คืว็ามร��เบ�9องต้�นเก��ยว็ก�บสำ� ท์$กี่คืนคืงได ร* จ�กี่แม�สุ�หร�อสุ�ข่�นต้ น ( primary color ) ท์�งสุาม

ซ/�งป็ระกี่อบื้ด วย สุ�แดง, เหล�อง และน1าเง�น มากี่�อนจากี่กี่ารศั/กี่ษัาใน อด�ต้ เหต้$ท์��สุ�ท์� งสุามน�ถู�อว�าเป็-นแม�สุ�หล�กี่ กี่�เพราะว�าสุ�ท์�งสุามเป็-นสุ�

ท์��ไม�สุามารถูเกี่�ดข่/นจากี่กี่ารผู้สุมข่องสุ�อ��นๆ และย�งเป็-นต้ นกี่1าเน�ด ข่องสุ�อ��นๆท์��เหล�อท์�งหมด ต้�อไป็กี่�เป็-นสุ�ข่�นท์�� 2 ท์��เกี่�ดจากี่กี่ารผู้สุม

ข่องสุ�ข่�นต้ นเข่ าด วยกี่�น โดยท์�� สุ�แดงกี่�บื้สุ�เหล�องได เป็-นสุ�สุ ม,สุ� เหล�องกี่�บื้น1าเง�นได เป็-นเข่�ยว และสุ�น1าเง�นกี่�บื้แดงได เป็-นม�วง ต้�อ

จากี่น�นกี่�เป็-นสุ�ข่�นท์�� 3 ซ/�งเกี่�ดจากี่กี่ารผู้สุมข่องสุ�ข่�นต้ นกี่�บื้สุ�ข่�นท์�� 2 ท์��อย*�ต้�ดกี่�นท์�งสุองด าน ในท์��สุ$ดเรากี่�จะได สุ�ข่� นท์�� 3 ท์�งหมด 6 สุ� โดย

สุ�ข่�นต้ น 1 สุ� ท์1าให เกี่�ดสุ�ข่�นท์��สุาม 2 สุ� ด�งน� : เหล�อง- สุ ม , แดง- สุ ม , แดง- ม�วง , น1าเง�น- ม�วง ,น1าเง�น- เข่�ยว และเหล�อง- เข่�ยว เม��อ

เราร* ท์��มาข่องสุ�ต้�างๆด�แล ว ในข่�นต้�อไป็จะเป็-นเร��องข่องพ�นฐานกี่าร ผู้สุมสุ� กี่ารจ�ดระบื้บื้สุ� และร*ป็แบื้บื้ข่องชื่$ดสุ�พ�นฐาน

แสุดงต้�วอย�างสุ�ข่� นต้�างๆ

สุ�ข่� นท์�� 1 สุ�ข่� นท์�� 2

สุ�ข่�นท์�� 3 สุ�ข่�นท์�� 4

การผสำมสำ� ( Color Mixing)

ร*ป็แบื้บื้กี่ารผู้สุมสุ�เพ��อให เกี่�ดเป็-นสุ�ต้�างๆ สุามารถูแบื้�งได เป็-น 2 แบื้บื้ คื�อกี่ารผู้สุมข่องแสุง

หร�อกี่ารผู้สุมแบื้บื้บื้วกี่ ( additive mixing ) และกี่ารผู้สุมข่องรงคืว�ต้ถู$ (pigment) หร�อกี่ารผู้สุมแบื้บื้ลบื้ (subtractive mixing) ซ/�งม�รายละเอ�ยดด�งต้�อไป็น�

การผสำมสำ�แบบบว็ก (Additive Mixing)

กี่ารผู้สุมสุ�แบื้บื้บื้วกี่น� เป็-นสุ��งท์��คื�อนข่ างยากี่ใน กี่ารท์1าคืวามเข่ าใจ เพราะม�หล�กี่กี่ารท์��ลบื้ล างสุ��งท์��คื$ณ์ถู*กี่

สุอนมาในสุม�ยกี่�อน เรากี่1าล�งจะพ*ดถู/งร*ป็แบื้บื้กี่ารผู้สุม ข่องแสุง ไม�ใชื่�กี่ารผู้สุมข่องว�ต้ถู$ม�สุ�บื้นกี่ระดาษั

เน��องจากี่แสุงสุ�ข่าวป็ระกี่อบื้ด วยล1าแสุงท์��ม�สุ�ต้�างๆต้าม คืวามยาวคืล��นแสุง คืวามยาวคืล��นแสุงพ�นฐานได แกี่�สุ�

แดง เข่�ยว และน1าเง�น ไม�ใชื่�สุ�แดง เหล�องและน1าเง�น อย�างท์��เราเข่ าใจมากี่�อน เม��อคืล��นแสุงเหล�าน�ม�กี่ารซ อน

ท์�บื้กี่�นกี่�จะกี่�อให เกี่�ดกี่ารบื้วกี่และรวมต้�วกี่�นข่อง คืวามยาวคืล��นแสุง จ/งเป็-นท์��มาข่องชื่��อ สุ�แบื้บื้บื้วกี่ “ ”

เม��อแสุงท์�งสุามสุ�ม�กี่ารผู้สุมกี่�นเป็-นคื*� กี่�จะเกี่�ดเป็-นสุ�น1าเง�นแกี่มเข่�ยวหร�อ cyan (เกี่�ดจากี่สุ�น1าเง�นบื้วกี่กี่�บื้เข่�ยว) สุ�แดงแกี่มม�วงหร�อ magenta (เกี่�ดจากี่สุ�แดงบื้วกี่กี่�บื้น1าเง�น) และสุ�เหล�อง (เกี่�ดจากี่สุ�แดงบื้วกี่กี่�บื้เข่�ยว) และในท์��สุ$ดเม��อผู้สุมสุ�ท์�งสุามเข่ าด วยกี่�น กี่�จะได ผู้ลล�พธุ�เป็-นแสุงสุ�ข่าวอ�กี่คืร�ง

สุ��อใด ๆ กี่�ต้ามท์��ม�กี่ารใชื่ แสุงสุ�องออกี่มา อย�างเชื่�น จอโป็รเจคืเต้อร� (movie projector)

ท์�ว� หร�อจอมอน�เต้อร�สุ1าหร�บื้คือมพ�วเต้อร� ต้�างกี่�เป็-นไป็ต้ามกี่ฎข่องกี่ารผู้สุมสุ�แบื้บื้บื้วกี่น� เพราะเหต้$น� กี่ารออกี่แบื้บื้สุ�สุ1าหร�บื้เว�บื้ไซต้� จ/งต้ องอาศั�ยหล�กี่กี่ารผู้สุมสุ�แบื้บื้บื้วกี่น�เชื่�นกี่�น

ร*ป็แสุดงกี่ารผู้สุมสุ�แบื้บื้บื้วกี่

การผสำมสำ�แบบลบ (Subtractive Color Mixing)

กี่ารผู้สุมสุ�แบื้บื้ลบื้ไม�ได ม�คืวามเกี่��ยวข่ องกี่�บื้เร��องข่อง ล1าแสุงแต้�อย�างใด ๆ แต้�เกี่��ยวเน��องกี่�บื้กี่ารด*ดกี่ล�นและสุะท์ อน แสุงข่องว�ต้ถู$ต้�างๆ เม��อแสุงสุ�ข่าวสุ�องมาย�งว�ต้ถู$หน/�งๆว�ต้ถู$น�น

จะด*ดกี่ล�นแสุงท์��คืวามยาวคืล��นบื้างระด�บื้ไว และสุะท์ อนแสุงท์�� เหล�อออกี่มาให เราเห�น สุ�ข่� นต้ นในร*ป็แบื้บื้น�ป็ระกี่อบื้ด วย สุ�แดง

แกี่มม�วง (magenta) สุ�น1าเง�นแกี่มเข่�ยว (cyan) และสุ�เหล�อง ซ/�งไม�ใชื่�สุ�แดง เหล�อง และน1าเง�นอย�างธุรรมดาอย�างท์��หลายๆคืนเข่ าใจ เม��อม�กี่ารผู้สุมข่องรงคืว�ต้ถู$หร�อว�ต้ถู$ม�สุ� จะเกี่�ดกี่ารรวมกี่�นข่องสุ�ท์��จะถู*กี่ด*ดกี่ล�นไว ท์1าให ป็ร�มาณ์แสุงท์��จะสุะท์ อนออกี่มาลดลง จ/งเป็-นท์��มาข่องชื่��อ สุ�แบื้บื้ลบื้ เม��อสุ�ท์�งสุามม�กี่ารผู้สุมกี่�น“ ”เป็-นคื*�ๆ กี่�จะเกี่�ดผู้ลเป็-นสุ�ต้�างๆ ได แกี่�สุ�แดง (เกี่�ดจากี่สุ�แดงแกี่มม�วงบื้วกี่กี่�บื้เหล�อง) สุ�เข่�ยว (เกี่�ดจากี่สุ�เหล�องบื้วกี่กี่�บื้น1าเง�นแกี่มเข่�ยว) และสุ�น1าเง�น (เกี่�ดจากี่สุ�น1าเง�นแกี่มเข่�ยวบื้วกี่กี่�บื้แดงแกี่มม�วง) ในข่�นสุ$ดท์ าย เม��อรวมสุ�ท์�งสุามเข่ าด วยกี่�นกี่�จะเห�นเป็-นสุ�ด1า เพราะม�กี่ารด*ดกี่ล�นแสุงท์$กี่สุ�ไว ท์�งหมด ท์1าให ไม�ม�แสุงสุ�ใดสุามารถูสุะท์ อนออกี่มาได

สุ��อต้�างๆท์��เกี่��ยวข่ องกี่�บื้กี่ารใชื่ ว�ต้ถู$ม�สุ� อย�างเชื่�น สุ�ท์��ใชื่ ในกี่ารวาดร*ป็ข่องศั�ลป็2น , ด�นสุอ

สุ� , สุ�เท์�ยน รวมถู/งระบื้บื้กี่ารพ�มพ�แบื้บื้ 4 สุ� ในสุ��ง พ�มพ�ต้�าง ๆ (โดยม�หม/กี่สุ�ด1าเพ��มมาอ�กี่สุ�หน/�ง)

ล วนอาศั�ยกี่ารผู้สุมสุ�แบื้บื้ลบื้น�ท์� งสุ�น

ร*ป็แสุดงกี่ารผู้สุมสุ�แบื้บื้ลบื้

ว็งล�อสำ� (Color Wheel)

เพ��อคืวามเข่ าใจถู/งคืวามสุ�มพ�นธุ�ข่องสุ�ท์��ด�ข่/นเรา คืวามท์1าคืวามร* จ�กี่กี่�บื้ระบื้บื้สุ�ท์��เข่ าใจง�าย และม�ป็ระโยชื่น�

มากี่ท์��สุ$ดท์��เร�ยกี่กี่�นว�า วงล อสุ� ( color wheel ) ซ/�งเป็-นร*ป็แบื้บื้หน/�งท์��ม�ระบื้บื้กี่ารจ�ดเร�ยงสุ�ท์�งหมดไว ในวงกี่ลม วงล อสุ�ถู*กี่พ�ฒนาข่/นจากี่คืวามต้ องกี่ารกี่ฎระเบื้�ยบื้ท์��ชื่�ดเจนข่องล1าด�บื้และคืวามกี่ลมกี่ล�นข่องสุ� แม ในอด�ต้จะม�กี่ารพ�ฒนาและออกี่แบื้บื้ระบื้บื้สุ�ในร*ป็แบื้บื้ต้�างๆมากี่มาย แต้�สุ�วนใหญ่�ม�กี่จะม�คืวามซ�บื้ซ อนเกี่�นกี่ว�าท์��จะน1ามาใชื่ ป็ระโยชื่น�ในกี่ารออกี่แบื้บื้จร�ง ในท์��สุ$ดเราจะใชื่ วงล อสุ�แบื้บื้ 12 ข่�น ซ/�งถู*กี่ป็ระด�ษัฐ�ข่/นโดย Sir Isaac Newton ในป็D 1666 ท์��ได แสุดงถู/งกี่ารจ�ดล1าด�บื้เฉดสุ�อย�างม�เหต้$ผู้ลและง�ายต้�อกี่ารน1าไป็ใชื่ จ/งเป็-นป็ระโยชื่น�อย�างมากี่ต้�อศั�ลป็2นในกี่ารศั/กี่ษัาและออกี่แบื้บื้ศั�ลป็ะต้�างๆ รวมท์�งกี่ารเล�อกี่ใชื่ สุ�ในกี่ระบื้วนกี่ารออกี่แบื้บื้เว�บื้ไซต้�ท์��เรากี่1าล�งสุนใจอย*�

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

สุ�ข่� นต้ นในวงล อสุ�แบื้บื้ลบื้ป็ระกี่อบื้ด วย สุ� แดงแกี่มม�วง ( magenta ) สุ�น1าเง�นแกี่มเข่�ยว

( cyan ) และสุ�เหล�อง ( yellow ) สุ�วนสุ�อ��นๆอาศั�ยหล�กี่กี่ารผู้สุมสุ�แบื้บื้ลบื้ได เป็-นสุ�ท์��เหล�อท์�งหมด

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

วงล อสุ�แบื้บื้บื้วกี่น�ด*คืล ายๆกี่�บื้วงล อสุ�แบื้บื้ ลบื้ แต้�ม�คืวามสุมด$ลข่องสุ�ท์��ต้�างกี่�นอย�างมากี่

ต้รงท์��สุ�โดยสุ�วนใหญ่�ถู*กี่คืรอบื้คืล$มด วยสุ�น1าเง�น และเข่�ยว ข่ณ์ะท์��สุ�เหล�องและสุ�แดงม�ผู้ลเพ�ยง

เล�กี่น อยในวงล อสุ�แบื้บื้น� เชื่�นเด�ยวกี่�บื้กี่ารกี่ระจา ยต้�วข่องสุ�ในสุเป็กี่ต้�ม ซ/�งม�ล�กี่ษัณ์ะเด�นข่อง

คืวามยาวคืล��นแสุงสุ�น1าเง�น และม�สุ�วนข่องคืวามยาวคืล��นแสุงสุ�แดงเพ�ยงเล�กี่น อย

สำ�ที่��เป นกลาง ( Neutral Colors )

สุ�ท์��เป็-นกี่ลางคื�อสุ�กี่ล$�มหน/�งท์��ไม�ได ถู*กี่บื้รรจ$ไว ใน วงล อสุ� เพราะเป็-นสุ�ท์��ไม�ได ร�บื้อ�ท์ธุ�พลใดๆมาจากี่สุ�อ��น

ซ/�งกี่�คื�อสุ�เท์า แม ว�าจะม�เฉดสุ�ข่องสุ�เท์าจ1านวนมากี่มาย ไม�สุ�นสุ$ด แต้�แคื�เพ�ยงท์�� 256 ระด�บื้ สุายต้าคืนเรากี่�ไม�

สุามารถูแยกี่คืวามแต้กี่ต้�างออกี่จากี่กี่�นได แล ว ท์1าให มองเห�นเป็-นแถูบื้สุ�ระหว�างด1ากี่�บื้ข่าว โดยไม�ม�รอยต้�อ

แต้�อย�างใด สุ�เท์าได ชื่��อว�าเป็-นสุ�กี่ลางกี่�เพราะเป็-นสุ�ท์��ไม�ม� ล�กี่ษัณ์ะเฉพาะสุ�วนต้�ว ท์1าให ชื่$ดข่องสุ�ท์��ป็ระกี่อบื้ไป็ด วยสุ�

เท์าท์�งหมดจะด*คื�อนข่ างจ�ดชื่�ด ไม�เร าอารมณ์� อย�างไร กี่�ต้าม สุ�เท์ากี่�จะไป็ร�บื้เอาล�กี่ษัณ์ะจากี่สุ�ท์��อย*�ล อมรอบื้น�น

เอง เป็-นเหต้$ให ศั�ลป็2นสุ�วนใหญ่�หล�กี่เล��ยงกี่ารใชื่ สุ�เท์า เพราะผู้ลท์��ได ร�บื้จากี่สุ�อ��นน�นไม�คืงท์�� ยากี่ต้�อกี่ารคืวบื้คื$ม

สุ�เท์า 12 ข่�นต้ามล1าด�บื้จากี่อ�อนไป็เข่ ม

สำ�อ#อน สำ�เข้�ม และโที่นสำ� ( Tint , Shade and Tone )

ในกี่ารผู้สุมสุ�กี่ลางด�งกี่ล�าวเข่ ากี่�บื้สุ�บื้ร�สุ$ท์ธุ�E (สุ�ท์��ไม�ผู้�านกี่ารผู้สุมกี่�บื้สุ�อ��นมากี่�อน) จะเกี่�ดเป็-นสุ�ต้�างๆ

จ1านวนมากี่มาย จนไม�สุามารถูบื้รรจ$ไว ในวงล อสุ�ได ท์�งหมด จากี่ป็ระสุบื้กี่ารณ์�ท์��ผู้�านมา คื$ณ์คืงร* ว�าสุ�แดงไม�

ได ม�เพ�ยงเฉดสุ�เด�ยว แท์ จร�งแล ว ม�แดงอ�อน,แดงแกี่�, แดงเข่ ม หร�องแดงจาง ฯลฯ อ�กี่จ1านวนน�บื้ไม�ถู วน สุ�

เหล�าน�เป็-นผู้ลมาจากี่กี่ารผู้สุมข่องสุ�บื้ร�สุ$ท์ธุ�Eกี่�บื้สุ�ด1า ข่าว และเท์าระด�บื้ต้�างๆ น��นเอง

1. เม��อสุ�บื้ร�สุ$ท์ธุ�Eผู้สุมกี่�บื้สุ�ข่าว จะได เป็-นสุ�อ�อน ( tint of the hue )

2 . เม��อสุ�บื้ร�สุ$ท์ธุ�Eผู้สุมกี่�บื้สุ�เท์า จะได เป็-นโท์นสุ�ท์��ระด�บื้ต้�างๆ ( tone of the hue )

3. เม��อสุ�บื้ร�สุ$ท์ธุ�Eผู้สุมกี่�บื้สุ�ด1า จะได เป็-นสุ�เข่ ม ( shade of the hue )

สุ�อ�อน สุ�เข่ ม และโท์นสุ� ม�ป็ระโยชื่น�อย�าง มากี่ ในกี่ารจ�ดชื่$ดข่องสุ� เพราะท์1าให สุ�สุ�หน/�ง

สุามารถูแสุดงออกี่และให คืวามร* สุ/กี่ได หลายร*ป็ แบื้บื้ย��งข่/น ท์ดแท์นกี่ารใชื่ สุ�เด�ยวล วนๆ ซ/�งอาจม�

ล�กี่ษัณ์ะไม�น�าสุนใจ

ร*ป็แสุดงคืวามหลากี่หลายข่องสุ�ท์��ได จากี่กี่ารผู้สุมสุ�หล�กี่กี่�บื้สุ�ข่าว เท์า และด1า

คืว็ามกลมกล�นข้องสำ� ( Color Harmony )

คืวามกี่ลมกี่ล�นข่องสุ� หมายถู/งคืวามเป็-น ระเบื้�ยบื้ข่องสุ�อย�างเป็-นท์��น�าพ/งพอใจต้�อสุายต้า

ท์1าให ผู้* ชื่มร* สุ/กี่ถู/งคืวามเป็-นระเบื้�ยบื้ สุมด$ล และ คืวามสุวยงามในเวลาเด�ยวกี่�น กี่ารใชื่ สุ�ท์��จ�ดชื่�ด

เกี่�นไป็จะท์1าให เกี่�ดคืวามร* สุ/กี่น�าเบื้��อ และไม� สุามารถูด/งด*ดคืวามสุนใจจากี่ผู้* ชื่มได ในท์างต้รง

กี่�นข่ าม กี่ารใชื่ สุ�ท์��มากี่เกี่�นไป็ ด*ว$ �นวาย ไร ระเบื้�ยบื้ กี่�จะสุร างคืวามไม�เข่ าใจและสุ�บื้สุนให ผู้* ชื่ม ด�งน�น

เป็;าหมายสุ1าคื�ญ่ข่องเราในเร��องสุ� กี่�คื�อกี่ารน1า เสุนอเว�บื้ไซต้�โดยใชื่ ชื่$ดสุ�ในร*ป็แบื้บื้ท์��เข่ าใจได ง�าย

น�าสุนใจ และสุ��อคืวามหมายได อย�างเหมาะสุม

ร�ปแบบช่,ดูสำ�พ�9นฐาน ( Simple Color Schemes )

หล�งจากี่คื$ณ์ได ร* จ�กี่พ�นฐานข่องสุ�มาพอ สุมคืวร ต้�อไป็จะเป็-นเร��องข่องชื่$ดสุ�ท์��ถู*กี่จ�ดกี่ล$�ม

อย�างเข่ ากี่�นด วยร*ป็แบื้บื้ต้�างๆ ท์1าให เราม�โอกี่าสุเล�อกี่ชื่$ดสุ�เหล�าน�มาใชื่ ในกี่ารออกี่แบื้บื้ได โดยไม�

ต้ องเสุ�ยเวลาสุ$�มเล�อกี่สุ�ต้�างๆให ด*เข่ ากี่�น อย�างไรกี่�ต้ามคื$ณ์คืวรย/ดร*ป็แบื้บื้เหล�าน�เป็-นเพ�ยงหล�กี่

กี่ารเบื้�องต้ น และย�งคืงต้ องท์1ากี่ารป็ร�บื้เป็ล��ยน คื�าข่องสุ� ( hue ) คืวามอ��มต้�วข่องสุ�

( saturation ) และคืวามสุว�างข่องสุ� ( lightness ) เพ��อให เกี่�ดล�กี่ษัณ์ะท์��อ�านง�าย สุวยงาม และเหมาะสุมกี่�บื้เน�อหาข่องเว�บื้ไซต้�

ช่,ดูสำ�ร�อน ( Warm Color Scheme )

ชื่$ดสุ�ร อนป็ระกี่อบื้ด วยสุ�ม�วงแกี่มแดง , แดงแกี่มม�วง , แดง , สุ ม , เหล�อง และเข่�ยวอม

เหล�อง สุ�เหล�าน�สุร างคืวามร* สุ/กี่อบื้อ$�น สุบื้าย และ คืวามร* สุ/กี่ต้ อนร�บื้แกี่�ผู้* ชื่ม ชื่�วยด/งด*ดคืวามสุนใจ

ได ง�าย ในท์างจ�ต้ว�ท์ยาสุ�ร อนม�คืวามสุ�มพ�นธุ�กี่�บื้ คืวามสุ$ข่ สุะดวกี่ สุบื้าย สุ�ต้�างๆในชื่$ดสุ�ร อนม�

คืวามกี่ลมกี่ล�นอย*�ในต้�วเอง ข่ณ์ะท์��อาจจะด*ไม�น�า สุนใจบื้ าง เพราะข่าดสุ�ป็ระกี่อบื้ท์��ต้�ดกี่�นอย�าง

ชื่�ดเจน ร*ป็แสุดงชื่$ดสุ�ร อน

ช่,ดูสำ�เยน ( Cool Color Scheme )

ชื่$ดสุ�เย�นป็ระกี่อบื้ด วยสุ�ม�วง , น1าเง�น , น1าเง�นอ�อน , ฟ;า , น1าเง�นแกี่มเข่�ยว และสุ�เข่�ยว

ต้รงกี่�นข่ ามกี่�บื้ชื่$ดสุ�ร อน ชื่$ดสุ�เย�นให คืวามร* สุ/กี่ เย�นสุบื้าย องคื�ป็ระกี่อ บื้ท์��ใชื่ สุ�เย�นเหล�าน�จะด*

สุ$ภาพเร�ยบื้ร อย และม�คืวามชื่1านาญ่ แต้�ในท์าง จ�ต้ว�ท์ยา สุ�เย�นเหล�าน�กี่ล�บื้ม�คืวามสุ�มพ�นธุ�กี่�บื้

คืวามซ/มเศัร าหดห*�และเสุ�ยใจ นอกี่จากี่น�น

ร*ป็แสุดงชื่$ดสุ�เย�น

ชื่$ดสุ�เย�นม�คืวามกี่ลมกี่ล�นกี่�นโดยธุรรมชื่าต้� แต้�อาจจะด*ไม�น�าสุนใจในบื้างคืร�ง เพราะข่าดคืวามแต้กี่ต้�างข่องสุ�ท์��เด�นชื่�ด เชื่�นเด�ยวกี่�บื้ชื่$ดสุ�ร อน จะเห�นว�า ม�อ�กี่ 2 สุ� ท์��ไม�อาจจ1าแนกี่ออกี่เป็-นสุ�ร อนหร�อสุ�เย�นได อย�างแน�นอน ซ/�งกี่�คื�อสุ�เหล�องและสุ�เข่�ยว เพราะสุ�ท์�งสุองสุามารถูให คืวามร* สุ/กี่ได ท์�งร อนและเย�นต้ามแต้�สุถูานกี่ารณ์�และสุ�รอบื้ข่ าง

ช่,ดูสำ�แบบสำ�เดู�ยว็ (Monochromatic Color Scheme)

ร*ป็แบื้บื้ข่องชื่$ดสุ�ท์��ง�ายท์��สุ$ดคื�อชื่$ดแบื้บื้สุ� เด�ยวท์��ม�คื�าข่องสุ�บื้ร�สุ$ท์ธุ�Eเพ�ยงสุ�เด�ยว คืวามหากี่

หวายข่องสุ�ชื่$ดน�เกี่�ดจากี่กี่ารเพ��มสุ�เด�ยว คืวามหลากี่หลายข่องสุ�ชื่$ดน�เกี่�ดจากี่กี่ารเพ��มคืวามเข่ ม

หร�อคืวามเข่ มหร�อคืวามอ�อนในระด�บื้ต้�างๆ ให กี่�บื้ สุ�ต้�งต้ น ด�งน�น ชื่$ดสุ�แบื้บื้เด�ยวข่องสุ�แดงอาจ

ป็ระกี่อบื้ด วยสุ�แดงล วน สุ�แดงอ�ฐ( สุ�เข่ ม ข่องสุ�แดง) สุ�สุต้รอเบื้อร��(สุ�อ�อนป็านกี่ลางข่องสุ�แดง) ละชื่มพ*(สุ�อ�อนมากี่ข่องสุ�ชื่มพ*)

ชื่$ดสุ�แบื้บื้น�คื�อนข่ างจะม�คืวามกี่ลมกี่ล�น เป็-นหน/�งเด�ยวกี่�น และป็ระสุ�ท์ธุ�ภาพในกี่ารสุร าง

อารมณ์�โดยรวมด วยกี่ารใชื่ สุ�เพ�ยงสุ�เด�ยว แต้�ใน บื้างคืร�งร*ป็แบื้บื้ท์��ม�สุ�เด�ยวน�อาจด*ไม�ม�ชื่�ว�ต้ชื่�วา

เพราะข่าดคืวามหลากี่หลายข่องสุ� ซ/�งอาจท์1าให ผู้* อ�านคืวามสุนใจ

ร*ป็แสุดงชื่$ดสุ�แบื้บื้เด�ยว

ช่,ดูสำ�แบบสำามเสำ�า (Triadic Color Scheme)

ว�ธุ�กี่ารท์��งายอ�กี่แบื้บื้หน/�งในกี่ารเล�อกี่ชื่$ด สุ�มาใชื่ กี่�คื�อ กี่ารน/กี่ถู/งสุามเหล��ยมด านเท์�าลอย

อย*�เหน�อวงล อสุ� เพ�ยงเท์�าน� สุ�ท์��อย*�ท์��ม$มข่อง สุามเหล��ยมท์�งสุามกี่�จะเป็-นสุ�ท์��เข่ าชื่$ดกี่�น ชื่$ดสุ�ท์��

ได จากี่กี่ารเล�อกี่แบื้บื้น�จ/งเร�ยกี่ว�า ชื่$ดสุ�แบื้บื้สุาม เสุ า ซ/�งอาจป็ระกี่อบื้ด วยสุ�สุามสุ�ท์��ม�ระยะห�างกี่�น

เท์�ากี่�นในวงล อสุ� จ/งม�คืวามเข่ ากี่�นอย�างลงต้�ว ชื่$ดสุ�แบื้บื้สุามเสุ าท์��ม�ป็ระสุ�ท์ธุ�ภาพมากี่ท์��สุ$ดคื�อ

ชื่$ดท์��ป็ระกี่อบื้ด วยสุ�ข่� นต้ นท์�งสุามน�นเองเน��องจากี่กี่ารต้�ดกี่�นอย�างร$นแรงข่องสุ�ท์�งสุาม

น��นเอง เน��องจากี่กี่ารต้�ดกี่�นอย�างร$นแรงข่องสุ� ท์�งสุาม ท์��สุร างคืวามสุะด$ดต้าอย�างมากี่ สุ�วนชื่$ด

สุ�ท์��ได จากี่สุ�ชื่� นสุองและสุ�ข่� นท์��สุามน�น ยากี่ต้�อกี่ารน1ามาใชื่ เพราะคืวามแต้กี่ต้�างข่องสุ�ด�งกี่ล�าวย�งไม�ร$นแรงน�กี่

ชื่$ดสุ�แบื้บื้สุามเสุ าม�ข่ อได เป็ร�บื้ยต้รงท์��ม� เสุถู�ยรภาพสุ*ง เพราะแต้�ละสุ�ม�คืวามสุมด$ลอย�าง

สุมบื้*รณ์�แบื้บื้กี่�บื้อ�กี่สุองสุ�ท์��เหล�อ และร*ป็แบื้บื้น� ย�งม�ล�กี่ษัณ์ะข่องคืวามเคืล��อนไหว เน��องจากี่

แต้�ละสุ�ม�กี่ารชื่�กี่น1าไป็สุ*�กี่�นและกี่�น ต้าม กี่ระบื้วนกี่ารธุรรมชื่าต้� ท์1าให ม�ล�กี่ษัณ์ะเด�นในด าน

คืวาม�ชื่�ว�ต้ชื่�วา ซ/�งเป็-นป็ระโยชื่น�ในกี่ารน1าเสุนอ ข่ อม*ลในร*ป็แบื้บื้ท์��ชื่�ดเจน แน�นอน แต้�บื้างคืร�ง

คืวามสุดใสุด�งกี่ล�วงอาจม�ล�กี่ษัณ์ะท์��ฉ*ดฉาดเกี่�นไป็จนไป็รบื้กี่วนกี่ารสุ��อสุารคืวามหมายท์��แท์ จร�งได

ร*ป็แสุดงชื่$ดสุ�แบื้บื้สุามเสุ า

ช่,ดูสำ�ที่��คืล�ายคืล+งก�น (Analogous Color Scheme)

ชื่$ดสุ�ท์��ม�ร*ป็แบื้บื้อย�างง�ายอ�กี่แบื้บื้หน/�ง กี่� คื�อชื่$ดสุ�ท์��คืล ายคืล/งกี่�น ซ/�งจะป็ระกี่อบื้ด วยสุ� 2

หร�อ 3 สุ�ท์��อย*�ต้�ดกี่�นในวงล อสุ� เชื่�นสุ�แดงแกี่ม ม�วง สุ�แดง และสุ�สุ ม เน��องจากี่ชื่$ดสุ�ท์��อย*�ในร*ป็

แบื้บื้น�ม�จ1านวนมากี่มายท์1าให เราสุามารถูเล�อกี่ชื่$ด สุ�แบื้บื้น�มาใชื่ งานได อย�างง�ายสุะดวกี่ และแม ว�า

เราสุามารถูเพ��มจ1านวนสุ�ในชื่$ดให มากี่ข่/นเป็-น 4 หร�อ 5 สุ�ได แต้�กี่ล�บื้จะม�ผู้ลให ข่อบื้เข่ต้ข่องสุ�ท์��ม�

คืวามกี่ว างเกี่�นไป็ ท์1าให สุ�อย*�ต้รงป็ลายท์�งสุอง ข่องชื่$ดไม�ม�คืวามสุ�มพ�นธุ�กี่�น เป็-นสุาเหต้$ให

ล�กี่ษัณ์ะกี่ารท์��อย*�ต้รงป็ลายท์�งสุองชื่$ดไม�ม�คืวาม สุ�มพ�นธุ� เป็-นสุาเหต้$ให ล�กี่ษัณ์ะกี่ารท์��ม�สุ�

คืล ายคืล/งกี่�นลดลง

ณ์ บื้างต้1าแหน�งข่องวงล อสุ� ชื่$ดสุ� คืล ายคืล/งกี่�น 3-4 สุ�ท์�อย*�ต้�ดกี่�นอาจด*เหม�อนเป็-น

สุ�เด�ยวกี่�น เพราะม�สุ�ใดสุ�หน/�งคืล$มโท์นข่องสุ� ท์�งหมดไว ไม�เพ�ยงแต้�ชื่$ดสุ�แบื้บื้น�จะน1ามาใชื่ งาน ได สุะดวกี่ คืวามคืล ายคืล/งกี่�นข่องสุ�ย�งกี่�อให เกี่�ด

คืวามกี่ลมกี่ล�นกี่�นอ�กี่ด วย แม กี่ระน�นกี่�ด�กี่าร ข่าดคืวามแต้กี่ต้�างอย�างชื่�ดเจน อาจท์1าให ไม�ม�

คืวามเด�นเพ�ยงพอท์��จะด/งด*ดคืวามสุนใจข่องผู้* อ�านได

ร*ป็แสุดงชื่$ดสุ�ท์��คืล ายคืล/งกี่�นป็ระกี่อบื้ด วยสุ� 2-3 สุ�ท์�อย*�ต้�ดกี่�นในวงล อสุ�

ช่,ดูสำ�ต้รงข้�าม (Complementary Color Scheme)

สุ�ต้รงข่ ามในท์��น� หมายถู/ง สุ�ท์��อย*�ต้รงกี่�น ข่ ามกี่�นในวงล อสุ� เชื่�น สุ�แดงกี่�บื้ฟ;า หร�อ

สุ�น1าเง�นอ�อนกี่�บื้สุ มน�าสุนใจท์��ว�าเม��อน1าสุ�ท์� งสุองน� มาผู้สุมกี่�น จะได ผู้ลล�พธุ�เป็-นสุ�ข่าวสุ1าหร�บื้วงล อ สุ�แบื้บื้บื้วกี่ หร�อได เป็-นสุ�ด1าสุ1าหร�บื้วงล อสุ�แบื้บื้

ลบื้ ท์��เป็-นเชื่�นน�กี่�เน��องจากี่ว�าสุ�แต้�ละสุ�ท์��อย*�ต้รง ข่ ามกี่�น จะม�อ�ต้ราสุ�วนข่องสุ�ข่� นต้ นท์��ผู้กี่ผู้�นกี่�น

ต้�วอย�างเชื่�น สุ�แดงในวงล อสุ�แบื้บื้บื้วกี่ม�สุ�ท์��ต้รง ข่ ามเป็-นสุ�น1าเง�นแกี่มเข่�ยว ซ/�งเป็-นสุ�วนผู้สุมจากี่

สุ�น1าเง�นและเข่�ยว จ/งท์1าให สุ�ท์� งสุองรวมกี่�นย�งได เป็-นสุ�ข่าวอ�กี่เชื่�นเด�ม จากี่คื$ณ์สุมบื้�ต้�น�เราอาจ

เร�ยกี่สุ�คื*�น�ว�าเป็-น สุ�เต้�มเต้�ม กี่�ได “ ”

เม��อน1าสุ�ท์� งสุองมาใชื่ คื*�กี่�นกี่�จะท์1าให สุ�ท์� ง สุองม�คืวามสุว�าง และสุดใสุมากี่ข่/น ซ/�งถู�อเป็-นคื$�

สุ�ท์��ม�คืวามแต้กี่ต้�างมากี่ท์��สุ$ด และย�งม�คืวาม เสุถู�ยรมากี่ท์��สุ$ด (maximum contrast and

maximum stability) ข่ อได เป็ร�ยบื้ข่องสุ�ในร*ป็แบื้บื้น�คื�อ คืวามสุดใสุ สุะด$ดต้า และบื้างคืร�งด*น�าสุนใจกี่ว�าสุ�ท์��ใชื่ ร*ป็แบื้บื้สุามจ$ดเสุ�ยอ�กี่ ท์1าให แน�ใจได ว�าชื่$ดสุ�ต้รงกี่�นข่ ามน� จะไม�ด*จ�ดชื่�อ ข่าดคืวามน�าสุนใจ อย�างไรกี่�ด�จ1านวนสุ�ท์��จ1ากี่�ดในร*ป็แบื้บื้น� ท์1าให ผู้* อ�านให คืวามสุนใจได ง�าย แล วหล�งจากี่น�นกี่�อาจละท์�งคืวามร* สุ/กี่สุนใจไป็ได ง�ายเชื่�นกี่�น

ร*ป็แสุดงชื่$ดสุ�ต้รงข่ ามได แกี่�สุ� 2 สุ�ท์��อย*�ต้รงข่ ามในวงล อ

ช่,ดูสำ�ต้รงข้�ามข้�างเคื�ยง (Split Complementary Color Scheme)

ชื่$ดสุ�ต้รงข่ ามข่ างเคื�ยงม�ร*ป็แบื้บื้ท์�� เป็ล��ยนแป็ลงมาจากี่ชื่$ดสุ�ต้รงข่ าม แต้�ละคืวาม

แต้กี่ต้�างกี่�นท์��สุ�ใดสุ�หน/�งท์��อย*�ต้รงข่ ามกี่�นถู*กี่ แท์นท์��ด วยสุ�ท์��อย*ด านข่ างท์�งสุอง เชื่�น สุ�ฟ;าซ/�งม�

สุ�ด านข่ างเป็-นสุ�น1าเง�นอ�อนกี่�บื้สุ�น1าเง�นแกี่มเข่�ยว ฉะน�นชื่$ดสุ�ต้รงข่ ามข่ างเคื�ยงท์��ได จ/งป็ระกี่อบื้ด วย

สุ�แดง สุ�น1าเง�นอ�อน และสุ�น1าเง�นแกี่มเข่�ยว

ข่ อได เป็ร�ยบื้ข่องชื่$ดสุ�แบื้บื้น� คื�อ คืวาม หลากี่หลายท์��มากี่ข่/นเม��อเท์�ยบื้กี่�บื้ชื่$ดสุ�ต้รงข่ าม

อย�างไรกี่�ต้ามคืวามหลากี่หลายท์��เพ��มข่/นมาน� ม� ผู้ลให คืวามสุดใสุและคืวามสุะด$ดต้าลดลง รวม

ถู/งคืวามเข่ ากี่�นข่องสุ�กี่�ลดลงด วย

ร*ป็แสุดงชื่$ดสุ�ต้รงข่ ามข่ างเคื�ยง

ช่,ดูสำ�ต้รงข้�ามข้�างเคื�ยงที่�9ง 2 ดู�าน (Double Split Complementary Color Scheme)

ชื่$ดสุ�แบื้บื้น�ถู*กี่ด�ดแป็ลงมาจากี่ชื่$ดสุ�ต้รง ข่ าม เชื่�นกี่�น แต้�คืราวน�สุ�ต้รงกี่�นข่ ามท์�งสุองถู*กี่

แบื้�งแยกี่เป็-นสุ�ด านข่ างท์�ง 2 ด าน จ/งได เป็-นชื่$ดสุ�4 สุ� ด�งเชื่�นสุ�แดงแกี่มม�วงกี่�บื้น1าเง�นแกี่มเข่�ยว

และน1าเง�นอ�อนกี่�บื้สุ ม ข่ อได เป็ร�ยบื้ท์��เห�นได ชื่�ด คื�อ คืวามหลากี่หลายท์��เพ��มข่/นจากี่ชื่$ดสุ�ต้รงข่ าม

แบื้บื้แบื้�งแยกี่ สุ�วนข่ อเสุ�ยเป็ร�ยบื้กี่�ย�งม�ล�กี่ษัณ์ะเชื่�นเด�มท์��คืวามสุดใสุและคืวามกี่ลมกี่ล�นข่องสุ�ลดลง ร*ป็แสุดงชื่$ดสุ�ต้รงข่ ามแบื้บื้แบื้�งแยกี่ 2 ด าน

นอกี่เหน�อจากี่น� ย�งม�ร*ป็แบื้บื้อ��นท์��เร�ยกี่ว�าAlternate Complementary Color Scheme โดยม�สุ�ท์��ได จากี่สุามเหล��ยมรวมกี่�บื้อ�กี่สุ�หน/งท์��อย*�ต้รงกี่�นข่ ามกี่�บื้สุ�ใดสุ�หน/�งในสุามเหล��ยม เชื่�น สุ�เข่�ยว สุ�ม�วงแดง สุ�แดง และสุ�สุ ม สุ�วนแบื้บื้สุ$ดท์ ายได แกี่� ชื่$ดสุ�แบื้บื้สุ��เหล��ยม (Tetrad Color Scheme) ท์��เกี่�ดจากี่ 4 สุ�ท์��อย*�ต้รงกี่�นข่ ามภายใต้ ร*ป็สุ��เหล��ยม ว�ธุ�น�เป็-นกี่ารใชื่ สุ�ข่� นต้ น 1 สุ� สุ�ข่� นท์��สุอง 1 สุ� และสุ�ข่� นท์��สุาม 2 สุ� มาป็ระกี่อบื้กี่�น

Color Wheel Pad ท์��ออกี่แบื้บื้โดย web.designBrand.com ม�กี่ารแสุดงคื�าข่องสุ�ในระบื้บื้เลข่ฐานสุ�บื้ไว ในแต้�ละชื่�องสุ� ซ/�งจะเป็-นป็ระโยชื่น�ในกี่ารเล�อกี่ใชื่ สุ�ต้ามร*ป็แบื้บื้ต้�าง ๆ จากี่วงล อสุ�

ข้�อคื%ดูเก��ยว็ก�บการใช่�สำ�ในเว็บไซึ่ต้&จากี่สุ�ท์��ได เร�ยนร* มาต้��งแต้�ต้ นเกี่��ยวกี่�บื้สุ�และ

สุ��อต้�างๆท์��ม�ผู้ลต้�อกี่ารสุแดงออกี่ข่องสุ� คืงจะพอท์1าให คื$ณ์ออกี่แบื้บื้เว�บื้ไซท์�โดยใชื่ สุ�ท์��เหมาะสุม

กี่ลมกี่ล�นกี่�นในกี่ารสุ��อคืวามหมายถู/งเน�อหา และสุร างคืวามสุวยงานให กี่�บื้หน าเว�บื้เพจได เป็-น

อย�างด� และท์��สุ1าคื�ญ่จากี่ารใชื่ ชื่$ดสุ�สุ1าหร�บื้เว�บื้เพจท์��ม�สุ�สุ�นต้รงกี่�บื้คืวามต้�งใจอย�างไม�ผู้�ดเพ�ยน

ข่ อคื�ดสุ�นๆ เกี่��ยวกี่�บื้กี่ารใชื่ สุ�ให เกี่�ดป็ระโยชื่น�กี่�บื้ เว�บื้ไซต้� 3 ข่ อด�งน�

1. ใช่�สำ�อย#าสำม��าเสำมอกี่ารออกี่แบื้บื้เว�บื้ไซท์�โดยใชื่ สุ�อย�าง

สุม1�าเสุมอชื่�วยสุร างคืวามร* สุ/กี่ถู/งบื้ร�เวณ์ข่อง สุถูานท์�� เชื่�นกี่ารใชื่ สุ�ท์��เป็-นชื่$ดเด�ยวกี่�นต้ลอดท์�ง

ไซท์�เพ��อสุร างข่อบื้เข่ต้ข่องเว�บื้ไซท์�ท์��สุ�มผู้�สุได ด วยต้า เม��อผู้* ใชื่ คืล�กี่เข่ าไป็ในแต้�ละหน ากี่�ย�งร* สุ/กี่

ได ว�ากี่1าล�งอย*�ภายในเว�บื้ไซท์�เด�ยวกี่�น

2. ใช่�สำ�อย#างเหมาะสำม เว�บื้ไซท์�เป็ร�ยบื้เสุมอสุถูานท์��หน/�งๆ ท์��ม�ล�กี่ษัณ์ะ

เฉพาะ เชื่�นเด�ยวกี่�บื้สุถูานท์��ต้�างๆ ในชื่�ว�ต้จร�งอย�าง ธุนาคืาร โรงเร�ยน หร�อร านคื าต้�างๆ ด�งน�น กี่ารเล�อกี่ใชื่

สุ�ท์��เหมาะสุมกี่�บื้ล�กี่ษัณ์ะข่องเว�บื้ไซท์� จะชื่�วยสุ�งเสุร�มเป็;า หมายและภาพพจน�ข่องเว�บื้ไซท์�ได นอกี่จากี่น�คื$ณ์คืวร

คื1าน/งถู/งป็7จจ�ยหลายๆอย�างท์��ม�ผู้ลต้�อคืวามเหมาะสุม ข่องสุ�ในเว�บื้ไซท์� เชื่�น ว�ฒนธุรรม แนวโน ม ข่องแฟชื่��น

อาย$และป็ระสุบื้กี่ารณ์�ข่องผู้* ใชื่ ด�งน�นเราจ/งร* สุ/กี่เห�น ด วยเม��อม�กี่ารใชื่ สุ�ชื่มพ*เพ��อสุแดงถู/งคืวามร�กี่ ใชื่ โท์นสุ�

น1าต้าลด1า สุ��อถู/งเหต้$กี่ารณ์�ใน อด�ต้ ใชื่ สุ�สุดใสุสุ1าหร�บื้ เด�กี่ และกี่ารใชื่ สุ�ต้ามแฟชื่��นในเว�บื้ม�เกี่��ยวกี่�บื้เคืร��องแต้�ง

กี่าย

3. ใช่�สำ�เพ��อสำ��อคืว็ามหมาย ด�งท์��ได เห�นแล วว�า สุ�แต้�ละสุ�ให คืวามหาย

และคืวามร* สุ/กี่ต้�างกี่�น โดยสุ�หน/�งๆ อาจสุ��อคืวาม หายไป็ในท์างบื้วกี่หร�อท์างลบื้กี่�ได ข่/นอย*�กี่�บื้

สุถูานกี่ารณ์� ต้�วอย�างเชื่�น สุ�ด1าฝห คืวามร* สุ/กี่โศักี่ เศัร าในงานศัพ แต้�กี่ล�บื้สุแดงถู/งคืวามเป็-นม�อ

อาชื่�พในกี่ารแสุดงผู้ลงานข่องศั�ลป็2น ด�งน�นสุ�ท์�� ให คืวามหมายและคืวามร* สุ/กี่ต้รงกี่�บื้เน�อหา จะ

ชื่�วยสุน�บื้สุน$นให ผู้* ใชื่ ได ร�บื้ข่ อม*ลท์��ถู*กี่ต้ องและคืรบื้ถู วน

ระบบสำ�ในเว็บไซึ่ต้&ระบื้บื้สุ�ในเว�บื้ไซท์�ม�ร*ป็แบื้บื้เฉพาะต้�วท์��แต้กี่ต้�าง

จากี่สุ�อ��นๆ อย�างสุ�นเชื่�ง ท์1าให กี่ารใชื่ สุ�อย�างม�ป็ระสุ�ท์ธุ�ภาพในเว�บื้จ/งต้ องอาศั�ยคืวามเข่ าใจรายละเอ�ยด

ท์างเท์คืน�คืพอสุมคืวร ระบื้บื้สุ�ท์��ม�คืวามเฉพาะต้�วน�เป็-น ผู้ลมาจากี่คืวามเกี่��ยวข่ องกี่�บื้สุ��อ 3 ป็ระเภท์ท์��ม�อ�ท์ธุ�พล

ต้�อกี่ารป็รากี่ฏข่องสุ� ได แกี่�- จอมอน%เต้อร& : เป็-นเพราะเว�บื้เพจถู*กี่เร�ยกี่ด*

ผู้�านท์างจอมอน�เต้อร� ด�งน�นกี่ารแสุดงสุ�ข่องเว�บื้เพจจ/งข่/นอย*�กี่�บื้ป็ระสุ�ท์ธุ�ภาพด านสุ�ข่องจอมอน�เต้อร�

- บราว็เซึ่อร& : เน��องจากี่บื้ราวเซอร�ม�ระบื้บื้กี่ารคืวามคื$มและแสุดงสุ�ภายในต้�วเอง เม��อใดท์��ม�กี่ารแสุดงผู้ลในหน าจอท์��ม�จ1านวนสุ�จ1ากี่�ด บื้ราวเซอร�จะท์1ากี่ารสุร างสุ�ท์ดแท์นให ด*เหม�อนหร�อไกี่ล เคื�ยงกี่�บื้สุ�ท์��กี่1าหนดไว ผู้ลล�พธุ�ท์��ได จ/งไม�แน�นอน

- HTML : สุ�ในเว�บื้เพจท์��ไม�ได เป็-นสุ�วนหน/�งข่องร*ป็ภาพ เชื่�น สุ�ข่องต้�วอ�กี่ษัรและพ�นหล�ง จะถู*กี่คืวบื้คื$มด วยคื1าสุ��งภาษัา HTML โดยระบื้$คื�าข่องสุ�ในระบื้บื้เลข่ฐานสุ�บื้หกี่

เพราะฉะน�น กี่ารเข่ าใจถู/งอ�ท์ธุ�พลข่องป็7จจ�ยท์�งสุาม และออกี่แบื้บื้โดยคื1าน/งถู/งข่ อจ1ากี่�ดเหล�าน� จะท์1าให ผู้* ใชื่ โดยสุ�วนใหญ่�ได เห�นสุ�ท์��ถู*กี่ต้ องอย�างท์��คื$ณ์ต้�งใจ

แบบฝึ@กห�ดู1. เราเล�อกใช่�สำ�สำ�าหร�บเว็บไซึ่ต้&เพ��ออะไร?2. ประโยช่น&ข้องสำ�ในเว็บไซึ่ต้&?3. การผสำมสำ�แบบบว็ก และการผสำมสำ�แบบลบ?4. สำ�ที่��เป นกลางคื�อ?5. คืว็ามกลมกล�นข้องสำ�คื�อ?6. ช่,ดูสำ�ร�อน และช่,ดูสำ�เยน หมายถ+ง?7. ช่,ดูสำ�แบบสำ�เดู�ยว็8. ช่,ดูสำ�แบบสำามเสำ�า9. ช่,ดูสำ�ที่��คืล�ายคืล+งก�น10. ช่,ดูสำ�ต้รงข้�าม11. ช่,ดูสำ�ต้รงข้�ามข้�างเคื�ยง12. ระบบสำ�ในเว็บไซึ่ต้&?

Rule of Thirds

“Rule of Thirds”

http://3.bp.blogspot.com/-txW64yOwv0g/TZlwk1BEfnI/AAAAAAAABo4/OlOfawOPLeI/s1600/Rule-of-Thirds-2.jpg

Which image follows the rule?

Portrait as well as Landscape

http://insights.elearningnetwork.org/wp-content/uploads/2012/12/ELN1Thirds.png

http://www.google.co.th/url?url=http://www.pinterest.com/mnzdavn/rule-of-thirds/&rct=j&frm=1&q=&esrc=s&sa=U&ei=B7MvVIX5BMqzuASnqoGYCA&ved=0CDUQ9QEwEDg8&usg=AFQjCNEUM1oRBa7Id8xshE3yO0YyeET4xg

http://2.bp.blogspot.com/-X6oC1nVKDFw/TZl3R2QbviI/AAAAAAAABpY/7k6dklw5vFk/s1600/2653444740038079955s425x425q85.jpg

http://1.bp.blogspot.com/-8mlup_h-sBk/TZl4gUKUjjI/AAAAAAAABpw/u7R1fwDNxz4/s1600/Majority-Rule.jpg

http://1.bp.blogspot.com/-30RJqa21Nkc/TZl4TMn2TTI/AAAAAAAABps/RmBoqYodnE0/s1600/photographing-coastlines-point-of-interest.jpg

http://1.bp.blogspot.com/-CxId2yNqPdw/UikF_GCMslI/AAAAAAAAEj4/Sypz5QXkpz0/s1600/photoProgramCompBig31.jpg

http://2.bp.blogspot.com/-qSaH4_50Pmo/UikF_LCgXII/AAAAAAAAEj0/JsrhGww3FPA/s1600/photoProgramCompBig32.jpg

http://2.bp.blogspot.com/-Qe7ihZ56NB0/UikF_BYx5-I/AAAAAAAAEjw/7c2ZqABcqLA/s1600/photoProgramCompBig33.jpg

http://www.rollingstone.com/

Color & White Space

• Design using colors that work together– PPT “Themes”– Match graphs, text,

pictures, colors in maps

• Don’t cover entire poster w/ text or graphics– “white” = “empty”– Allows viewers to stay

focused

A judged competition: UVa

• Examples from the University of Virginia Presidential Inauguration

• Had a fixed template• Received a cash award…• Which do you like best?

• http://www.virginia.edu/inauguration/postercompetition.html

Final Reminders

• Take advantage of the visual medium– Pix, charts, graphs, figures, etc.– Illustrate your main points

• Don’t put too much text on the poster!– 4-5pp, 20pt font, double-spaced

• Can I understand your research from the poster alone?

• Engaging, pretty, informative, & easy to understand– EPIEu

• Balance… Rule of 1/3s… Color & Whitespace

Citations

• “Creating Anthropology Conference Posters: A Guide to Beginners”, J.E. Miller and J.K. Trainor. Downloaded from aaanet.org.

• Rule of Thirds chart. Downloaded from: http://sixminutes.dlugan.com/wp-content/uploads/2008/06/rule-of-thirds-grid.gif

• Mommy’s Camera, original image from www.mommyscamera.com; downloaded from: http://2.bp.blogspot.com

• Portrait and Landscape. Image downloaded from: http://facweb.cs.depaul.edu/sgrais/images/Composition/rule-of-the-thirds-slice_18.gif

• Poster example, Aramor downloaded from: http://webbizom.files.wordpress.com/2012/05/rule-of-thirds1.jpg