Infographic Design การออกแบบอินโฟกราฟิก
•
20 recomendaciones•17,022 vistas
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
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Más de Department of Educational Technology, Faculty of Education, Ramkhamhaeng University
Más de Department of Educational Technology, Faculty of Education, Ramkhamhaeng University (17)
Infographic Design การออกแบบอินโฟกราฟิก
- 3. อินโฟกราฟิก (infographic) หมายถึง การนําข้อมูล (information) ความรู้ (knowledge) ที่มีปริมาณมาก หรือซับซ้อน มาสรุปเป็นสารสนเทศที่ออกแบบใน ลักษณะภาพนิ่งหรือภาพเคลื่อนไหว เพื่ออธิบาย ข้อมูลที่ซับซ้อนให้เกิดความเข้าใจได้ง่ายใช้เวลา รวดเร็วและมีความชัดเจน
- 12. VARK Model
- 15. องค์ประกอบของอินโฟกราฟิก • ข้อมูล – ตัวหนังสือ – ข้อความ – ตัวเลข • ภาพกราฟิก – รูปทรงเรขาคณิต –ภาพไอคอน –ภาพการ์ตูน –ชาร์ต ไดอะแกรม –ภาพถ่าย
- 16. ประโยชน์ของอินโฟกราฟิก • นําเสนอข้อมูล • นําเสนอข่าวสาร • ดึงดูดความสนใจ • ใช้ภาพกราฟิกเล่าเรื่อง • เข้าใจเนื้อหาสาระได้ง่าย • ส่งสารได้รวดเร็ว • สรุปเรียบเรียง สั้น กระชับ • เข้าใจข้อมูลในภาพเดียว • สร้างความแปลกตา
- 17. จุดเด่นของการสื่อสารด้วยอินโฟกราฟิก • ง่ายต่อการทําความเข้าใจ • ดึงดูดความสนใจได้มากกว่า • ประหยัดเวลาในการศึกษาข้อมูล • ช่วยให้จดจําข้อมูลได้ดีกว่า • ดูเป็นมืออาชีพ น่าเชื่อถือ • นําไปเผยแพร่ต่อได้ง่าย
- 19. อินโฟกราฟิกที่ดี • ข้อมูลในอินโฟกราฟิกต้องสั้นกระชับ • อินโฟกราฟิกไม่เหมาะในการให้ข้อมูลจํานวนมาก • ภาพที่ใช้เข้าใจง่าย นิยมใช้แบบ Flat Design • จัดวางองค์ประกอบลงตัว ดูเรียบง่าย สบายตา
- 20. การนําอินโฟกราฟิกไปใช้งาน • งานออกแบบเว็บไซต์ • งานออกแบบหนังสือ โปสเตอร์ โชว์ชัวร์ สิ่งพิมพ์ • Social Network • TV, VDO • Presentation
- 31. The Color Theory infographic
- 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
- 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) • การออกแบบอ็อบเจกต์ต่าง ๆ ให้ดูเหมือนของจริง หรือเลียนแบบของจริง สไตล์การออกแบบแนวนี้ได้รับความนิยมน้อย
- 139. การออกแบบอินโฟกราฟิกแบบ 3 มิติ (3D) • การออกแบบอ็อบเจกต์ให้ดู เป็นสามมิติ มีด้านกว้าง ด้านยาว และด้านสูง • การออกแบบสไตล์นี้เหมาะ จะใช้อ็อบเจกต์จําพวก ชาร์ตและไดอะแกรมต่าง ๆ
- 140. แบบ 3 มิติ (3D)
- 143. การออกแบบอินโฟกราฟิกแบบโครงร่าง (Outline) • เน้นโครงสร้างหรือ เส้นขอบของอ็อบเจกต์ • เลือกสีของเส้นโครงร่าง และสีของพื้นหลังให้ตัดกัน จะช่วยให้อินโฟกราฟิกดู โดดเด่นและน่าสนใจ
- 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/