Infographic Design การออกแบบอินโฟกราฟิก โดย ผศ.ดร.ศยามน อินสะอาด ภาควิชาเทคโนโลยีการศึกษาคณะศึกษาศาสตร์ มหาวิทยาลัยรามคำแหง Asst. Prof.Dr.Sayamon Insaard Department of Educational Technology, Faculty of Education, Ramkhamhaeng University. E-Mail: dr.sayamon@gmail.com http://www.facebook.com/sayamon2010

1. ผศ.ดร.ศยามน อินสะอาด
อาจารย์ภาควิชาเทคโนโลยีการศึกษา
มหาวิทยาลัยรามคําแหง

3. อินโฟกราฟิก (infographic) หมายถึง การนําข้อมูล
(information) ความรู้ (knowledge) ที่มีปริมาณมาก
หรือซับซ้อน มาสรุปเป็นสารสนเทศที่ออกแบบใน
ลักษณะภาพนิ่งหรือภาพเคลื่อนไหว เพื่ออธิบาย
ข้อมูลที่ซับซ้อนให้เกิดความเข้าใจได้ง่ายใช้เวลา
รวดเร็วและมีความชัดเจน

4. หัวใจหลัก
ในการทําอินโฟกราฟิก
“การเปลี่ยนข้อมูลที่ยาก
ให้เข้าใจง่าย
ได้อย่างเร็วสุด”

12. VARK Model

14. องค์ประกอบของอินโฟกราฟิก
ข้อมูล
ภาพ
อินโฟกราฟิก

15. องค์ประกอบของอินโฟกราฟิก
• ข้อมูล
– ตัวหนังสือ
– ข้อความ
– ตัวเลข
• ภาพกราฟิก
– รูปทรงเรขาคณิต
–ภาพไอคอน
–ภาพการ์ตูน
–ชาร์ต ไดอะแกรม
–ภาพถ่าย

16. ประโยชน์ของอินโฟกราฟิก
• นําเสนอข้อมูล
• นําเสนอข่าวสาร
• ดึงดูดความสนใจ
• ใช้ภาพกราฟิกเล่าเรื่อง
• เข้าใจเนื้อหาสาระได้ง่าย
• ส่งสารได้รวดเร็ว
• สรุปเรียบเรียง สั้น กระชับ
• เข้าใจข้อมูลในภาพเดียว
• สร้างความแปลกตา

17. จุดเด่นของการสื่อสารด้วยอินโฟกราฟิก
• ง่ายต่อการทําความเข้าใจ
• ดึงดูดความสนใจได้มากกว่า
• ประหยัดเวลาในการศึกษาข้อมูล
• ช่วยให้จดจําข้อมูลได้ดีกว่า
• ดูเป็นมืออาชีพ น่าเชื่อถือ
• นําไปเผยแพร่ต่อได้ง่าย

18. ทักษะที่จําเป็นในการทําอินโฟกราฟิก
ทักษะการ
วิเคราะห์
ทักษะการ
เรียบเรียง
ทักษะด้าน
ดีไซน์

19. อินโฟกราฟิกที่ดี
• ข้อมูลในอินโฟกราฟิกต้องสั้นกระชับ
• อินโฟกราฟิกไม่เหมาะในการให้ข้อมูลจํานวนมาก
• ภาพที่ใช้เข้าใจง่าย นิยมใช้แบบ Flat Design
• จัดวางองค์ประกอบลงตัว ดูเรียบง่าย สบายตา

20. การนําอินโฟกราฟิกไปใช้งาน
• งานออกแบบเว็บไซต์
• งานออกแบบหนังสือ โปสเตอร์ โชว์ชัวร์ สิ่งพิมพ์
• Social Network
• TV, VDO
• Presentation

22. Elements and principles of art

31. The Color Theory infographic

42. https://www.motocms.com/blog/wp-content/uploads/2014/08/justimagine-psychology-colors-best-infographics.jpeg

45. ประเภทของอินโฟกราฟิก
Types of Infographics
• Mixed charts แบบผสมผสาน
• Informational / List แบบอธิบายข้อมูล
• Timeline แบบแสดงข้อมูลตามลําดับเวลา
• How-to แบบแสดงวิธีทํา
• Process แบบแสดงกระบวนการ

46. ประเภทของอินโฟกราฟิก
Types of Infographics
• Comparison แบบเปรียบเทียบข้อมูล
• Location แบบแผนที่ สถานที่ตั้ง
• Photographic แบบภาพกราฟิก
• Hierarchical แบบแสดงลําดับชั้น
• Single chart แบบแผนภูมิ

47. Mixed charts

48. Mixed charts

49. Mixed charts

50. Mixed charts

52. Informational / List

53. Informational / List
https://infograph.venngage.com/infograph/

54. Informational / List

55. Timeline

56. Timeline

57. Timeline

62. How-to

70. Comparison

79. Location

80. Location

81. Location

82. Photographic

83. Photographic

84. Photographic

85. Hierarchical

86. Hierarchical

89. Single chart

90. Single chart

98. ประเภทของอินโฟกราฟิก
• Static infographic สื่อสารสนเทศรูปแบบภาพนิ่ง
สรุปเนื้อหาใจความชัดเจน สามารถเผยแพร่ จัดทําเป็น
ข้อมูลอ้างอิงในรูปแบบของภาพ

99. ประเภทของอินโฟกราฟิก
• Presentation infographic สื่อสารสนเทศรูปแบบ
การนําเสนอเคลื่อนไหวเป็นขั้นตอนลําดับเหตุการณ์

100. ประเภทของอินโฟกราฟิก
• Motion infographic สื่อสารสนเทศแบบภาพเคลื่อนไหว
มีองค์ประกอบของการบรรยายภาพและเสียง

101. ประเภทของอินโฟกราฟิก
• Interactive infographic สื่อสารสนเทศรูปแบบเว็บไซต์ที่
สามารถกําหนดค่า เพิ่มลูกเล่นให้กับสื่อให้อยู่ในรูปแบบตอบ
โต้ทันที เคลื่อนไหวได้และสามารถรองรับการตอบสนอง
http://ernestoolivares.com/interactivity/samples/namas/

102. ประเภทของอินโฟกราฟิกตามวัตถุประสงค์การใช้งาน
• ข่าวเด่น ประเด่นร้อน และสถานการณ์วิกฤต
• สอน ฮาวทู (How to)
• ให้ความรู้
• บอกเล่าตํานานหรือวิวัฒนาการ
• อธิบายผลสํารวจ และ งานวิจัย
• กระตุ้นให้เกิดการเปลี่ยนแปลงพฤติกรรม
• โปรโมทสินค้าและบริการ

103. การเตรียมข้อมูลสําหรับอินโฟกราฟิก
• ส่วนประกอบของข้อมูลใน อินโฟกราฟิก
• หัวใจของการเตรียมข้อมูลสําหรับทําอินโฟกราฟิก
• ข้อมูลแบบไหนเหมาะจะนําเสนอเป็น อินโฟกราฟิก
• เทคนิคย่นย่อข้อมูลให้สั้น
• แปลงข้อมูลธรรมดาเป็น อินโฟกราฟิก

104. ภาพกราฟิกที่มักใช้ในอินโฟกราฟิก
• ภาพไอคอน
• ภาพการ์ตูน
• ภาพสัญลักษณ์
• ภาพกราฟิก
• ภาพถ่าย
• รูปทรงเรขาคณิต

105. ภาพกราฟิกที่มักใช้ในอินโฟกราฟิก
• เส้นและลูกศร
• ชาร์ตและไดอะแกรม
• แผนที่
• แบล็กกราวด์
• กราฟิกอื่นๆ

106. หลักสําคัญในการออกแบบ
• ออกแบบเหมาะกับกลุ่มเป้ าหมาย
• ออกแบบให้ง่ายเข้าไว้
• สร้างความสมดุลระหว่างตัวหนังสือกับภาพกราฟิก
• พื้นที่ว่างก็สําคัญ
• ออกแบบให้เหมาะกับการแสดงผล
• หัวเรื่องต้องโดดเด่น
• โฟกัสไปประเด็นเดียว

121. กระบวนการที่ดีในการออกแบบอินโฟกราฟิก
1. รวบรวมข้อมูล
2. อ่านข้อมูลทั้งหมด
3. ค้นหาวิธีการเล่าเรื่อง
4. ระบุปัญหาและความต้องการ
5. จัดลําดับโครงสร้างข้อมูล
6. ออกแบบโครงสร้างข้อมูล

122. กระบวนการที่ดีในการออกแบบอินโฟกราฟิก
7. เลือกรูปแบบอินโฟกราฟิก
8. กําหนดภาพให้ตรงกับหัวข้อ
9. ตรวจสอบข้อมูลและทดลองใช้
10. แบ่งปันความรู้ในอินเทอร์เน็ต

123. ขั้นตอนการสร้างอินโฟกราฟิก
1. หาข้อมูล
- Useful ต้องเป็นข้อมูลที่มีประโยชน์และเปลี่ยน
ชีวิตคนไปในทางที่ดีขึ้น
- Insightful ต้องมีคุณภาพ เนื้อหาแน่น รู้ลึกรู้จริง
-Interesting ต้องสดใหม่และทันกระแส มีความ
แปลกใหม่
- Reliable ข้อมูล ต้องมีความน่าเชื่อถือ ที่มา อ้างอิง
ชัดเจน

124. ขั้นตอนการสร้างอินโฟกราฟิก
2. คัดแยกเนื้อหา
3. จัดหมวดหมู่
4. คิดไอเดีย
5. ร่างแบบ
6. ออกแบบ
7. เผยแพร่

125. การสร้างอินโฟกราฟิกให้มีประสิทธิภาพ
1. เน้นที่หัวข้อหลักหัวข้อเดียว
2. ออกแบบให้เข้าใจง่าย
3. ข้อมูลเป็นสิ่งสําคัญ
4. แน่ใจว่าข้อเท็จจริงถูกต้อง
5. ให้อินโฟกราฟิกเป็นตัวเล่าเรื่อง

126. การสร้างอินโฟกราฟิกให้มีประสิทธิภาพ
6. การออกแบบที่ดีทําให้มีประสิทธิภาพ
7. ใช้สีที่ดึงดูดความสนใจ
8. ใช้ข้อความที่สั้นๆ
9. ตรวจสอบตัวเลข ข้อมูล
10. ทําไฟล์อินโฟกราฟิกให้เล็ก

127. สไตล์การออกแบบอินโฟกราฟิก
• แบบแบนราบ (Flat )
• แบบเหมือนจริง (Photorealistic)
• แบบ 3 มิติ (3D)
• แบบโครงร่าง (Outline)

128. การออกแบบอินโฟกราฟิกแบบแบนราบ (Flat )
• การออกแบบให้ดูแบนราบ
• ใช้สีสันน้อย 3-4 สี
• ไม่เน้นแสงและเงา
• ไม่ใส่เอฟเฟกต์ให้ดูนูนเด่นหรือมีมิติ
• มักใช้รูปทรงเรขาคณิตพื้นฐานเป็นหลัก

132. แบบแบนราบ (Flat )

135. การออกแบบอินโฟกราฟิกแบบเหมือนจริง
(Photorealistic)
• การออกแบบอ็อบเจกต์ต่าง ๆ ให้ดูเหมือนของจริง
หรือเลียนแบบของจริง
สไตล์การออกแบบแนวนี้ได้รับความนิยมน้อย

136. แบบเหมือนจริง (Photorealistic)

137. แบบเหมือนจริง (Photorealistic)

139. การออกแบบอินโฟกราฟิกแบบ 3 มิติ (3D)
• การออกแบบอ็อบเจกต์ให้ดู
เป็นสามมิติ มีด้านกว้าง
ด้านยาว และด้านสูง
• การออกแบบสไตล์นี้เหมาะ
จะใช้อ็อบเจกต์จําพวก
ชาร์ตและไดอะแกรมต่าง ๆ

140. แบบ 3 มิติ (3D)

143. การออกแบบอินโฟกราฟิกแบบโครงร่าง (Outline)
• เน้นโครงสร้างหรือ
เส้นขอบของอ็อบเจกต์
• เลือกสีของเส้นโครงร่าง
และสีของพื้นหลังให้ตัดกัน
จะช่วยให้อินโฟกราฟิกดู
โดดเด่นและน่าสนใจ

150. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

151. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

152. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

153. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

154. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

155. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

156. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

157. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

158. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

159. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

160. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

161. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

162. ตัวอย่างอินโฟกราฟิกที่ไม่มีประสิทธิภาพ

163. ฟอร์แมทที่ใช้งานร่วมกัน
ชื่อเรื่อง
แหล่งที่มาของข้อมูล เครดิตผู้จัดทํา

164. ฟอร์แมทที่ใช้งานร่วมกัน

180. โปรแกรมที่ใช้ออกแบบอินโฟกราฟิก
• Adobe Illustrator
• Adobe Photoshop
• Microsoft Visio, Word, PowerPoint
• เครื่องมือออนไลน์ฟรี Piktochart
• http://www.freepik.com/

215. Links
• https://venngage.com/templates/
• https://infograph.venngage.com/infograph/view/fdc09842
-1027-4db5-9438-88a98e0a5feb
• http://www.freepik.com/free-photos-vectors/infographic-
elements
• https://www.learningstudio.info/infographics-design/