การออกแบบ infographic

สารบัญ 1 เรือ่ ง หนา้ 1. Infographic คืออะไร? 2 2. ข้ันตอนการสรา้ ง Infographic 2-3 3. การออกแบบ 4 4-8 3.1 ออกแบบ Infographic ด้วย 9 Layout 8-10 3.2 การเลอื กสี และธมี 10 3.3 สง่ิ ท่ีควรทา / ไม่ควรทา 11 4. เครื่องมือที่ใช้ในการออกแบบ 11-14 4.1 Canva 15-19 4.2 Piktochart 20 แบบฝึกหัด 21 แหล่งอ้างองิ 22 แบบประเมินผลการอบรม

2 Infographic มาจากคาว่า Information (ขอ้ มลู ) + Graphic (รูปภาพ) อนิ โฟกราฟิก หมายถงึ การนาข้อมูลหรอื องคค์ วามรูม้ าสรุปเปน็ สารสนเทศ ในลักษณะของกราฟิกท่ีออกแบบเป็นภาพนิ่งหรือภาพเคลื่อนไหว ดูแล้ว เข้าใจง่ายในเวลารวดเร็วและชัดเจน สามารถส่ือใหผ้ ู้ชมเข้าใจความหมาย ของข้อมูลท้ังหมดได้โดยไม่จาเปน็ ต้องมีผนู้ าเสนอมาช่วยขยายความเข้าใจ อกี 1.ทำควำมเขำ้ ใจจดุ ประสงคใ์ นกำรทำ 2. กำหนดหวั เร่ือง 3. ศกึ ษำขอ้ มลู 4. กำหนดเนือ้ หำ และ Concept 5. ออกแบบ 6. ตรวจสอบ

3 1. ใชก้ ารทาขอ้ มลู ใหเ้ ป็นภาพอยา่ งมีความหมาย 2. เข้าใจงา่ ย ไม่ซบั ซ้อน เปน็ มิตรกับผู้อา่ น 3. น่าสนใจ เตะตาผอู้ า่ น 4. เนอื้ หาดี มีประโยชน์ ทาให้คนอ่านรู้สกึ อยากจะเก็บเอาไว้ 5. จดุ ประกายใหค้ นอ่านคดิ หรอื ทาอะไรตอ่ 1. ชอื่ เร่อื ง : ควรใส่ไวต้ รง Header เพ่อื เตะตาคนอ่าน เลือกชื่อเรื่องท่ีครอบคลมุ เนอ้ื หาโดยรวมได้ทั้งหมด 2. แหล่งท่ีมาของขอ้ มลู : ส่วนมากจะเขยี นสรปุ ไว้ตรงด้านล่างสุด 3. เครดิตผู้เผยแพร่/ผจู้ ัดทา : ใสช่ อ่ื Logo, URL ไว้ ให้ผอู้ า่ นรูว้ ่าใครเป็นผู้จดั ทาและ เผยแพร่ 4. อ่นื ๆ : อธิบายเน้ือหาคร่าวๆ เขียนช่ือหัวขอ้ ของแตล่ ะเรื่อง

4 3.1 ออกแบบ Infographic ดว้ ย 9 Layout 1) Visualised 3 เหมาะสาหรับการนาบทความ งานเขียน มาเลา่ ผ่าน Infographic จาเป็นตอ้ งใชก้ ารนาเสนอ ท่ีเหมาะสมกับขอ้ มลู แต่ละชนดิ เชน่ ถ้ามีตัวเลขกค็ วรนาเสนอผ่านกราฟแบบต่าง ๆ เทคนคิ : สรปุ บทความ และเลอื กประเดน็ ก่อนนาเสนอ 2) Listed เหมาะกับการเล่าเร่ืองที่มีหัวข้อหลัก เพียงข้อเดียว เช่น “5 วิธี” การนาเสนอแบบ เป็นข้อ ๆ แบบนี้เหมาะกับเร่ืองที่ไม่ยาวนัก และไมค่ วรเป็นเรื่องท่ีเครียดมากเกินไป เทคนิค : ลองวิเคราะห์ว่าข้อไหนสามารถรวบ เป็นข้อเดยี วกันได้ เพราะยงิ่ มหี ลายข้อจะจดจา ไดย้ าก หมายเหตุ * ภาพตวั อยา่ งการออกแบบจาก Infographic Thailand

3) Comparison 5 เหมาะกับใช้เพื่อเปรียบเทียบระหว่างของส่ิงหน่ึงกบั อีกส่ิง โดยการนาเสนอคู่กันแบบนี้ทาให้ เหน็ ภาพได้ชัดเจนว่าแตกต่างอยา่ งไรบ้าง เทคนิค : ใช้การจัดวางท่ีเหมือนกันทง้ั สองฝัง่ ทาใหเ้ หน็ ความต่างทช่ี ัดเจน ใช้สีค่ตู รงขา้ มเปน็ ตัวแบง่ 4) Structure เหมาะกับการแสดงให้เหน็ และใช้อธิบายส่วนประกอบของบางส่ิงใดสงิ่ หน่งึ เทคนิค : พยายามสร้างภาพให้เห็นแต่ละส่วนประกอบ เช่น ภาพเหมือนสแกนเข้าไปภายใน หรือ การแยกแต่ละสว่ นออกหา่ งกัน ไม่ซอ้ นกนั หมายเหตุ * ภาพตวั อยา่ งการออกแบบจาก Infographic Thailand

5) TimeLine 6 เหมาะสาหรับใช้เล่าประวัติความเป็นมาเป็นไปของสิ่งใดส่ิงหน่ึง โดยใช้เส้นแทนระยะเวลา สามารถใช้ได้กับทุกอย่าง เชน่ ประวัตคิ น ประวตั ิองค์กร ประวัตสิ ถานท่ี เทคนคิ : ใชค้ วามหา่ งของแตล่ ะจดุ ชว่ ยบอกความห่างของแตล่ ะชว่ งเวลาได้ 6) Flow chart เป็นการนาเสนอแบบเป็นลาดับขั้น เหมาะกับการเสนอเป็นควิซให้ผู้อ่านได้ทราบคาตอบท่ี ตอ้ งการโดยการอ่านไล่ลงไปตามเส้นจนถึงดา้ นลา่ งสุด เทคนคิ : ระวงั เรอ่ื งความยุง่ เหยงิ ของเส้น ใชส้ ชี ว่ ยแยกเสน้ ลดความสบั สนในการอา่ น หมายเหตุ * ภาพตวั อยา่ งการออกแบบจาก Infographic Thailand

7) Road Map 7 เป็นการอธิบายทีละขัน้ ตอน เหมาะกับการอธิบายขน้ั ตอนการทางาน หรือการเดินทาง เชน่ ขน้ั ตอนการทางานขององค์กร ข้นั ตอนการรับพนักงานเข้าทางาน เปน็ ต้น เทคนิค : เรอื่ งต้องนา่ สนใจพอท่ีคนอยากจะร้ทู ลี ะขัน้ ตอนขนาดนี้ 8) Useful Bait เปน็ Infographic ทท่ี าให้เราเห็นวิธที าบางอย่าง โดยท่ีเราเห็นแลว้ สามารถนาไปใช้ไดท้ นั ที เทคนคิ : ต้องใหค้ วามสาคัญกบั การอ่านงา่ ย และความเข้าใจง่าย มากกว่าความสวยงาม หมายเหตุ * ภาพตวั อย่างการออกแบบจาก Infographic Thailand

9) Number Porn 8 คือ Infographic ที่เต็มไปด้วยตัวเลข และกราฟ หากคุณมีตัวเลขท่ีน่าสนใจมากเพียงพอ กส็ ามารถนาเสนอในรปู แบบนไี้ ด้ เทคนิค : ไมใ่ ชแ่ ค่มีตัวเลขมาก แตต่ วั เลขต้องนา่ สนใจ หรือเก่ยี วขอ้ งกับคนอา่ นมากพอ ถงึ จะมกี ราฟหลายประเภทแตค่ วรเลอื กสไตลก์ ราฟิกแบบเดยี วกนั ทัง้ ภาพ เช่น 3D, Flat 3.2 การเลือกสี และธีม แหล่งดเู วบ็ สี IG : @colours.cafe Web : https://www.color-hex.com , https://colorpalettes.net

1) กฎ 3 สี : ใช้แค่ 3 สี ก็เพยี งพอแล้ว 9 2) ใช้ทฤษฏี 60 30 10 โดยการแบง่ การออกแบบอินโฟกราฟิกเปน็ หนว่ ยแบบ เปอร์เซ็น ดังนี้  60% แรกคือการใช้สีพ้ืนของอินโฟกราฟกิ  30% ตอ่ มาสาหรบั สีที่ 2 ทใี่ ช้ในอนิ โฟกราฟิก  10% สุดทา้ ยคอื การนาสไี ปใชใ้ นการเนน้ ส่วนที่สาคัญ วธิ ีน้จี ะช่วยใหค้ วามสมดลุ ของสใี หเ้ ขา้ กันและเป็นไปในทศิ ทางเดยี วกนั

10 3) สร้างความแตกต่างของสี เช่น ถ้าสีตัวหนังสือเป็นสีอ่อน ควรเลือกสีพื้นหลังเป็น สีเข้ม และถ้าสีพ้ืนหลังเป็นสีอ่อนก็ควรเลือกให้ตัวหนงั สือเป็นสีเข้ม เพื่อสร้างความแตกต่าง ของสีใหผ้ ู้ชมสามารถอา่ นข้อความได้ง่ายขนึ้ 3.3 ส่งิ ท่ีควรทา สง่ิ ทไี่ มค่ วรทา  เน้นทีห่ วั ข้อหลักขอ้ เดยี ว  อยา่ ทาข้อมลู ทท่ี าใหซ้ บั ซอ้ น  ออกแบบใหเ้ ขา้ ใจ  อยา่ ใช้ข้อมลู มากเกินไป  ขอ้ มูลเป็นสงิ่ สาคญั  อย่าใส่ตวั เลขมากเกินไป  ออกแบบใหเ้ หมาะกบั กลุม่ เปา้ หมาย  อยา่ สรา้ งอินโฟกราฟกิ ใหน้ า่ เบอ่ื  ให้อนิ โฟกราฟิกเปน็ ตวั เล่าเรื่อง  อย่าใชว้ ิธีการพิมพผ์ ิด  การออกแบบท่ดี ที าใหม้ ปี ระสทิ ธิภาพ  อย่านาเสนอขอ้ มลู ทผ่ี ดิ  ใช้สีท่ดี งึ ดูดความสนใจ  อย่าเน้นที่การออกแบบ  ใช้คาพดู ที่กระชบั  อย่าใช้แบบเปน็ วงกลม  ตรวจสอบตวั เลขขอ้ มลู  อย่าใช้สีมากเกนิ ไป

11 4. เครอ่ื งมือทใี่ ช้ในการออกแบบ 4.1 Canva เว็บไซต์ Canva เป็นเคร่อื งมอื ออกแบบงานต่าง ๆ แบบออนไลนส์ ามารถทากราฟกิ ได้ หลากหลาย ตั้งแตเ่ อกสารสิง่ พิมพ์ ไปจนถงึ การทา Web Banner, Facebook Ads, Infographic, ปกหนงั สอื ฯลฯ

12 ข้ันตอนการใชง้ าน 1. เข้าสู่เวบ็ ไซต์ www.canva.com 2. ลงทะเบียนใช้งานโดยเลือก Facebook หรือ Gmail และสามารถลงทะเบียนผ่าน Email อืน่ ๆ ได้ 3. เมอ่ื ลงทะเบยี นเรยี บรอ้ ยแลว้ ใหเ้ ลือกท่ี Personal และเลือกอาชีพ

13 4. วิธีการสร้าง Infographics ให้เลือกไปที่เครือ่ งมอื Templates (หมายเลข 1) หลงั จาก นนั้ ให้เลอื ก Infographics (หมายเลข 2) 1 2 5. ใหเ้ ลอื ก Templates ตามความเหมาะสมกบั เนือ้ ท่กี าลงั จะออกแบบ

14 6. Canva สามารถเลือกใส่ Graphic ตัวอกั ษร อัพโหลดรูปภาพ เปลย่ี น Font ตวั อักษร และใส่แผนภมู ติ า่ ง ๆ ได้ฟรี 7. วิธบี นั ทกึ ภาพใหก้ ดป่มุ Download ท่ีมมุ บนขวามอื เลือกเป็นชนดิ ไฟล์ jpg หรือ PDF

4.2 Piktochart 15 Piktochart เป็นเว็บไซต์ท่ีช่วยในการสรา้ งสื่อการเรยี นการสอนในรูปแบบต่าง ๆ เช่น Infographic, Presentation, Poster, Card และ Report เปน็ ต้น Piktochart ประกอบดว้ ย เคร่ืองมือหลากหลายที่ช่วยในการออกแบบชิ้นงานและมี Template สาเร็จรูปหลายแบบ ช่วยให้การออกแบบชิ้นงานมีความสะดวก สวยงามและมีประสิทธิภาพ นอกจากนั้นยัง สามารถบันทึกชิน้ งานเปน็ ไฟล์รูปสกุล PNG และJPEG ไดอ้ กี ดว้ ย รวมทงั้ ยังสามารถเผยแพร่ และแบ่งปนั สู่สาธารณะได้

ข้ันตอนการใช้งาน 16 1. เข้าสู่เว็บไซต์ www.piktochart.com 2. ลงทะเบียนใชง้ านโดยเลือก Facebook หรือ Gmail และสามารถลงทะเบียนผ่าน Email อืน่ ๆ ได้ 3. สาหรับการเข้าใช้งานครง้ั แรกจะปรากฏหนา้ ต่างขนึ้ มาให้กรอกข้อมูลพื้นฐานทัง้ หมด 4 Step หลงั จากนนั้ ให้คลิกปุม่ Submit

4. วธิ กี ารสร้าง Infographics ให้เลือกไปท่ี Templates และ หัวขอ้ Infographic 17 จากน้นั ให้เลอื ก Templates สาเร็จรปู ตามความเหมาะสมกับเนอื้ หาที่จะออกแบบ 1 2 5. แถบเครือ่ งมือมเี มนู Graphics ประกอบด้วยเมนูย่อย 4 เมนู คือ - Shapes & Line เปน็ ตัวช่วยในการสร้างรูปทรง ต่าง ๆ และเสน้ ตรง - Icons เปน็ สัญลักษณห์ รอื รปู ภาพท่ีใช้สอื่ แทน ความหมายต่าง ๆ - Photos คลังรูปภาพทอี่ ยู่ในเว็บไซต์โดยแบง่ เปน็ หมวดหมู่ - Photo Frame คลังกรอบรูปภาพในรูปแบบต่าง ๆ

6. นอกจากน้ยี ังมเี มนู Background สามารถเลือกพน้ื หลัง และเมนู Text สามารถ 18 ใสต่ ัวอกั ษรสาเรจ็ รปู ได้อีกด้วย 7. เมนู Tools ประกอบดว้ ย - Charts แผนภมู ิ หรือ แผน่ กราฟ ทเี่ ขยี น ข้ึนโดยอาศัยการกรอกข้อมูลรายละเอียดท่ี ตอ้ งการเข้าไป - Maps การแทรกแผนที่เข้าไปในช้ินงาน โดยแบ่ง ตามโซนพร้อมบอกรายละเอียด ของพนื้ ทีต่ า่ งๆ - VDO การแทรกวิดีโอเข้าไปในช้ินงาน โดยการใส่Linkวิดีโอในช่อง Video URL และคลิกปมุ่ INSERT

8. วิธีการ Download File มี 2 วธิ ี ดงั นี้ 19 - คลกิ ทีเ่ มนู File มมุ บนด้านซ้ายมือ แล้วคลิกที่ Download as Image - คลิกท่เี มนู Download มมุ บนดา้ นขวามือ จะปรากฏหน้าจอให้คลกิ เลือกความละเอียด ของรูปภาพ และประเภทของไฟล์ข้อมูล ซ่ึงในโหมดฟรีสามารถดาวน์โหลดไฟล์ ประเภท PNG และ JPEG เท่านั้น และรูปภาพท่ีได้จะมีโลโก้ Piktochart ติดอยู่ ด้านล่างของรูปภาพกรณีที่ต้องการดาวน์โหลดเป็นไฟล์ PDF จะต้องทาการอัพเกรด สมาชิกซึง่ จะมีค่าใช้จ่ายเพม่ิ เติม

20 แบบฝกึ หดั ทาแผน่ ผับ ประชาสัมพนั ธส์ ายด่วนสานักงาน กสม. 1377 เสรจ็ แลว้ ส่งผลงานท่ี Line@ ศูนยส์ ารสนเทศสิทธิมนุษยชน กสม. หรอื E-mail [email protected]

21 เอกสารอา้ งองิ Infographic Thailand. (2563). Infographic Design Rules. สบื ค้นจาก: http://wow.in.th/0y8G Infographic Thailand. (2563). ออกแบบ Infographic ดว้ ย 9 Layout. สบื คน้ จาก: http://wow.in.th/O23L learningstudio.info. (2563). การสรา้ งแบบอนิ โฟกราฟกิ ส์ (Infographics Design). สืบค้นจาก: http://wow.in.th/Zn1B PresentationX. (2563). เทคนิคการเลอื กใช้สี สาหรบั การออกแบบ Presentation. สืบคน้ จาก: http://wow.in.th/i5LD

22 แบบประเมินผลการอบรม