Message Design-Handout 09012019

PRESENTATION AND PRESENTATION AND EXPLANATION EXPLANATION การวิเคราะหแ์ ละสงั เคราะหห์ ลักการและทฤษฎีด้านการออกแบบ การออกแบบสารเพื อการ และพัฒนาการเรยี นการสอน ทีชว่ ยในการออกแบบการเรยี น นําเสนอในยคุ ดจิ ิทลั การสอนและการนาํ เสนอ เน้นการประยุกต์ใชห้ ลกั การ ทฤษฎี และเทคโนโลยีในการออกแบบและพัฒนา อาจารย์ ดร. ธนัท สมณคปุ ต์ ต้นแบบชินงาน โดยใช้เทคนคิ ในการนําเสนอ นเิ ทศศาสตร์เกษตร เพือตอบสนองการเรียนร้ขู องผู้เรียนทีมีความ หลากหลายในยุคดจิ ิทัล สถาบันเทคโนโลยพี ระจอมเกล้าเจา้ คุณทหารลาดกระบัง 12 PRESENTATION AND EXPLANATION PRESENTATION AND EXPLANATION 2 หวั ข้อการเรียนรู้ 1 วัตถปุ ระสงค์ 1. ความรเู้ บืองต้นเกียวกบั การออกแบบสารในยุคดจิ ทิ ลั 1. เพือใหม้ ีความรู้ ความเขา้ ใจเกียวกับการออกแบบสารเพือ 2. หลักการออกแบบสารเพือการเรียนการสอน การเรยี นการสอนในยุคดิจิทัล 3. การวางแผนการออกแบบสารเพือการเรียนการสอน 4. การประยกุ ตใ์ ชเ้ ทคโนโลยใี นการออกแบบสาร 2. เพือให้มคี วามสามารถในการประยุกต์ใช้เทคโนโลยเี พือชว่ ย ในการออกแบบสารได้ 4 3. เพือให้มคี วามสามารถในการสรา้ งสรรคผ์ ลงานการ ออกแบบสารอย่างถูกต้องและมจี ริยธรรมในการสรา้ งสอื การเรียน การสอน 3

จุดประสงค์ของการออกแบบสาร การเรยี นรู้ การรบั รู้ การสือสาร สาร ผู้เรียนเกิดการรับรู้ ความรู้ ทกั ษะ เจตคติ 56 ความสําคญั ของการ ออกแบบสาร MASSAGE DESIGN 78

Basic Concepts of Message Design Perceptibility กระตุน้ ความสนใจ เรียนร้ไู ด้ดีขึน 10 มองเห็น-อ่านได้ Message ลดการตังคาํ ถาม ชดั เจน Design ทไี ม่จาํ เปน Why? 9 ถา้ อยากเปนผู้ออกแบบสารเพือ ความรเู้ บอื งต้นเกยี วกับการออกแบบสาร การเรียนการสอนทีประสบความสําเรจ็ ในยุคดจิ ทิ ลั ควรมีความรเู้ กียวกับหลกั การ ออกแบบสารอะไรบ้าง? 12 11

สอื การเรยี นรู้ในยุคดิจทิ ัล ขอ้ ความ/ตวั อกั ษร ข้อความ/ตวั อักษร ภาพกราฟก 13 ภาพเคลือนไหว การจัดวางและการออกแบบตัวอักษรเพือการสือสาร เปนการ เสียง ออกแบบตวั อักษร (Typefaces) และการจัดวางฟอนต์ ให้ วิดโี อ เหมาะสมสวยงามกบั พืนทีว่างและองค์ประกอบตา่ งๆ ทีใช้ในงาน ออกแบบสือสาร ตัวอกั ษรเปนอยา่ งแรกทีจะทําให้คนดูรสู้ ึกอยากอ่านหรือ ไมอ่ ยากอา่ นงานของเรา 14 Secondary Messages Typography Alignment : การจัดแนว จากการสํารวจพบวา่ Typeface แบบ Serif นันจะอ่านได้ง่าย 16 เหมาะสําหรบั การอธบิ ายขอ้ ความยาวๆ หรอื เนือหา แต่การใช้ Typeface แบบ Sans-Serif นิยมใช้กบั Headline หรอื หวั เรือง 15

Chunking and Sequencing Content Chunking and Sequencing Content Bad Good texttexttexttext texttexttexttext best texttexttexttext texttexttexttext good The perception of The perception of texttexttexttext texttexttexttext poor text is in common text is in common texttexttexttext texttexttexttext with other forms of with other forms of texttexttexttext texttexttexttext illustration. illustration. texttexttexttext texttexttexttext Attention is drawn to words or Attention is drawn to texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext passages that words or passages texttexttexttexttexttexttexttext texttexttexttexttexttexttexttext stand in contrast. that stand in contrast. texttexttexttexttexttexttexttext texttext texttext texttexttexttexttexttexttexttext texttext texttext Texttext Texttext texttext texttext Texttext Texttext texttext texttext 17 18 https://fonts.google.com http://www.f0nt.com/ 19 20

Color 22 21 23 24

Color Perceptibility • วรรณะสีร้อน – วรรณะสีเย็น  สีแดง ใหค วามรสู ึกอันตราย รอนแรง รนุ แรง อดุ มสมบูรณ • สีคตู่ รงกันข้าม  สีสม จะใหความรสู ึกสวา ง เรารอ น ฉดู ฉาด • สโี ทนเดยี วกนั  สีเหลอื ง ใหค วามรสู ึกสวา ง สดใส สดชน่ื และระวัง • เฉดสีแตกต่างกัน  สีนํา้ เงนิ ใหความรูสึกสงบ ผอ นคลา ย สงางาม ทมึ  สมี วง ใหความรสู กึ หนัก สงบ มเี ลศนยั มคี วามลับ *80:20  สีนาํ้ ตาล ใหความรูสกึ เกา หนกั สงบเงยี บ *60:30:10  สขี าว ใหความรูสึกถึงความบรสิ ุทธ์ิ สะอาด ใหม สดใส เบกิ บาน  สีดํา ใหความรสู กึ หนกั แนน หดหู มดื มน มคี วามลบั 25 26 การใช้สเี พื อเนน้ ใจความสาํ คัญ 70% สีพืนหลัง (Background Color) สีพืนหลงั คดิ เปน 70% ของพืนทีสไลด์นบั ว่าเปนสัดสว่ น ทีมากทีสดุ 25% สีหลกั (Main Color) 5% สีเนน้ (Accent Color) สหี ลักคิดเปน 25% สเี น้น คิดเปน 5% ของ ของพื นทีสไลด์ พืนทีสไลด์ จะใช้ในส่วนที เปนส่วนทีสําคญั ทีสดุ เราต้องการใหค้ วามสาํ คญั Credit : GCFLearnFree.org (Beginning Graphic Design) 27 28

Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 29 30 Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 31 32

Color Text Text Text Text Credit : GCFLearnFree.org (Beginning Graphic Design) 33 34 Color Text Text Text Credit : GCFLearnFree.org (Beginning Graphic Design) Text 36 35

Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 37 38 Credit : GCFLearnFree.org (Beginning Graphic Design) 39 40

Credit : GCFLearnFree.org (Beginning Graphic Design) 41 42 https://coolors.co/ Credit : GCFLearnFree.org (Beginning Graphic Design) 43 44

ภาพกราฟก PRESENTATION AND EXPLANATION 45 Grid-Based Design 47 46 ภาพ (Image) Objective ÁØÁÁͧÀÒ¾ Subjective 48

Grid-Based Design Spatial Relationships Rule of Thirds 49 50 PRESENTATION AND EXPLANATION Grid-Based Design Credit : GCFLearnFree.org (Beginning Graphic Design) 51 52

เสียง https://www.facebook.com/sound/ collection Credit : GCFLearnFree.org (Beginning Graphic Design) 53 54 วิดีโอ https://www.youtube.com WORKSHOP 55 56

การตดั คําฟุมเฟอย การตัดคาํ ฟุมเฟอย Adobe รายงานผลประกอบการประจาํ ไตรมาสท่ี 3 ของปก ารเงินบริษทั “ยุคนกี้ ารทําการซอื้ -ขายผา นระบบออนไลนหรือ E-commerce กาํ ลงั เปน ทนี่ ิยมใน 2017 (มถิ นุ ายน-สงิ หาคม) มรี ายไดร วม 1,217.8 ลา นดอลลาร ทาํ สถติ ิใหม ยุคน้ี ผูซ ้ือแคทาํ การสงั่ ซอื้ สินคาและโอนเงิน สาํ หรบั ในสวนของผูขายเมื่อไดรับเงิน ตอ เนือ่ งจากไตรมาสกอ นหนานี้ โดยเตบิ โต 21% จากปก อน และมีกาํ ไรสทุ ธิ จากลกู คา แลวกท็ าํ การจัดสงสินคา ไปใหลูกคา” 174.5 ลานดอลลาร “............................................................................................................................... ...............................................................................................................................” ..................................................................................................................................... ..................................................................................................................................... 57 58 การตัดคาํ ฟุมเฟอย-แก้ไขหัวเรอื ง การตดั คาํ ฟุ มเฟอย-แก้ไขหวั เรือง-แบ่งและเรยี บเรยี งเนือความใหม่ มีรายไดรวม 1,217.8 ลานดอลลาร ทาํ สถติ ใิ หมตอ เน่ืองจากไตรมาสกอนหนา น้ี โดยเติบโต Adobe รายงานผลประกอบการ ประจําไตรมาสท่ี 3 ของปก ารเงนิ 21% จากปกอน และมีกาํ ไรสทุ ธิ 174.5 ลา นดอลลาร บริษัท 2017 (มถิ ุนายน-สงิ หาคม) ไตรมาสที่ผานมา Adobe มผี สู มัครใช Creative Cloud เพ่มิ ขึ้นอีกราว 684,000 คน สูงกวา ผลประกอบการไตรมาส 3 ป 2017 ไตรมาสกอ นหนาท่ีมผี ูใชเพิม่ ข้นึ 639,000 คน ของ Adobe 60 59

Principles of Design ความสมดุล (Balance) Principles of Design LEFT: The Balance is shifted to the Left. RIGHT: The balance is even. 61 62 Principles of Design Principles of Design Balance การทาํ ซาํ (Repetition) สมดลุ แบบเท่ากัน สมดลุ แบบไมเ่ ทา่ กนั (symmetrical balance) (asymmetrical balance) LEFT: The eye is lead quickly from one corner to the other. RIGHT: Though using the same shapes 63 64

Principles of Design Principles of Design Repetition ความแตกตา่ ง (Contrast) Bad Good Introduction Introduction xkdkdkdkdkd xkdkdkdkdkd Body kdkdkdkd Body Conclusion kdkdkdkd kdkdkdkd Conclusion kdkdkdkd LEFT: The eye is lead quickly from one corner to the other. 66 RIGHT: Though using the same shapes 65 Principles of Design Principles of Design Contrast Contrast 68 ปลา เปนสตั ว์นํา อาศัยอยู่ ทังในนําจดื และนําเค็ม ปลา มรี ปู ร่างเรยี วยาว เพื อให้ สะดวกในการเคลอื นทใี นนาํ ปลา เปนสตั ว์นาํ อาศยั อยู่ทงั ในนาํ จืดและนําเค็ม ปลามรี ปู ร่างเรยี วยาว เพื อใหส้ ะดวก ในการเคลอื นทใี นนาํ 67

Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 69 70 Principles of Design Principles of Design ขนาดของตวั อกั ษร สร้างจดุ เด่น ดว้ ยรปู ร่างหรอื ขนาด (Dominance) Dominance 54 Point LEFT: Dominance of shape avoids monotony. ÊÇÑÊ´¤Õ ÃºÑ 44 Point RIGHT: Dominance of size creates dynamism. ÊÇÊÑ ´¤Õ ÃºÑ 36 Point 71 ÊÇÊÑ ´Õ¤ÃºÑ 32 Point ÊÇÑÊ´¤Õ ÃºÑ 28 Point ÊÇÊÑ ´¤Õ ÃºÑ 22 Point ÊÇÑÊ´Õ¤ÃºÑ 72

Principles of Design 1 23 การจัดลาํ ดบั (Hierarchy) 2 1 3 LEFT: Hierarchy in order of size. RIGHT: Hierarchy from Darkest to lightest. การจัดระยะอย่างเหมาะสม 73 Credit : GCFLearnFree.org (Beginning Graphic Design) 74 Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 75 76

การใช้พื นทีว่าง Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 77 78 Credit : GCFLearnFree.org (Beginning Graphic Design) 79 80

Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 81 82 Credit : GCFLearnFree.org (Beginning Graphic Design) Credit : GCFLearnFree.org (Beginning Graphic Design) 83 84

85 86 การวางแผนการออกแบบสาร ขันตอนการออกแบบสารเพื อการเรยี นการสอน เพื อการเรียนการสอน ขันที 2 ขันที 4 87 - วิเคราะหก์ ล่มุ เปาหมาย - สรา้ งชนิ งานโดยใช้ - การรบั ร้แู ละเขา้ ใจสือ - กําหนดวัตถุประสงค์ โปรแกรมคอมพิ วเตอร์ - การเรียนร้เู ปนไปตาม - วเิ คราะหเ์ นอื หา หรอื Web Application - กาํ หนดหวั เรอื ง วตั ถุประสงค์ทีตงั ไว้ พั ฒนา วเิ คราะห์ ประเมินผล ขันที 1 ออกแบบ ขันที 3 นําไปใช้ - วางแผนการเรียนรู้ - นาํ เสนอ ทดลอง เรยี นรู้ - วาง Layout,ขนาด,รูปแบบ ขอ้ ผดิ พลาด - จดั วาง Text, Picture, - แก้ไขปรบั ปรุง สือประกอบอืนๆ และการจดั - แผนตอ้ งพอดกี ับแผน โครงสี - ใชห้ ลกั การออกแบบ การเรียนรทู้ วี างไว้ ขันที 5 88

ขันตอนการออกแบบสารเพื อการเรยี นการสอน ขนั ตอนการออกแบบสารเพื อการเรยี นการสอน วิเคราะห์ -วิเคราะห์กลมุ่ เปาหมาย ขันที 2 - วางแผนการเรยี นรู้ -กาํ หนดวัตถุประสงค์ - วาง Layout,ขนาด,รปู แบบ ขันที 1 -วิเคราะหเ์ นอื หา ออกแบบ - จัดวาง Text, Picture, -กาํ หนดหัวเรือง สือประกอบอืนๆ และการจัดโครงสี - ใชห้ ลกั การออกแบบ 89 90 ขันตอนการออกแบบสารเพื อการเรียนการสอน ขันตอนการออกแบบสารเพื อการเรยี นการสอน พั ฒนา -สรา้ งชนิ งานโดยใช้ ขันที 4 - นําเสนอ ทดลอง เรียนรขู้ อ้ ผดิ พลาด โปรแกรมคอมพิ วเตอร์ - แกไ้ ขปรับปรงุ ขันที 3 หรือ Web Application นําไปใช้ - แผนต้องพอดกี ับแผนการเรียนรู้ ทวี างไว้ 91 92

ขนั ตอนการออกแบบสารเพื อการเรยี นการสอน ประเมนิ ผล - การรับรูแ้ ละเข้าใจสือ การประยุกตใ์ ชเ้ ทคโนโลยีในการออกแบบสาร - การเรียนรู้เปนไปตาม ขันที 5 94 วัตถุประสงคท์ ตี ังไว้ 93 What is Creative การคน้ หาภาพมาใช้อย่างถูกลิขสทิ ธิ Commons ? https://google.com Tools Labeled for reuse with modification ¤Œ¹ËÒÀÒ¾·Õ¹è Òí ÁÒãªáŒ Åд´Ñ á»Å§ä´Œ (Í¹Ñ ¹´éÕ ·Õ ÊÕè ´Ø ) 95 96

การคน้ หาภาพมาใชอ้ ยา่ งถูกลิขสิทธิ การคน้ หาภาพมาใช้อย่างถูกลิขสทิ ธิ https://pixabay.com https://www.freepik.com 97 98 การค้นหาภาพมาใช้อยา่ งถูกลิขสิทธิ https://piktochart.com// https://www.flaticon.com 99 100

https://www.canva.com https://powerpointschool.com/ 101 102 https://www.pinterest.com / https://www.showeet.com https://www.presentationgo.com https://hislide.io https://www.free-powerpoint-templates-design.com 103 104

https://thenounproject.com https://iconmonstr.com WORKSHOP http://www.icojam.com https://graphicburger.com 105 106