กระบวนการออกแบบมัลติมีเดีย

กระบวนการ ออกแบบ มัลติมิเดีย

การนาเสนอส่ือมัลติมีเดีย จดุ ประสงคห์ ลกั ของบทเรยี น • รูห้ ลักการนาเสนอสอื่ มลั ติมีเดยี • รหู้ ลกั การออกแบบส่อื มัลติมีเดยี เพื่อการเรยี นการสอน

หลักการออกแบบมัลติมีเดีย (SDLC) กระบวนการและขน้ั ตอนการ การวิเคราะห์ ออกแบบส่ือมัลตมิ เี ดีย ส่งผลต่อประสทิ ธภิ าพ การประเมิน การออกแบบ ของบทเรียน ประกอบดว้ ย ขนั้ ตอนหลกั 5 ข้ัน ไดแ้ ก่ (SDLC) อ้างอิงจาก แบบจาลองของ Alessi และ Trollip การนาไปใช้ การพฒั นา (1991,2001)

สรุปกระบวนการสร้างมัลติมีเดีย 1. ข้นั ตอนการเตรยี ม การวเิ คราะห์ 2. ข้ันตอนการออกแบบ 3. ขั้นตอนการสร้างโปรแกรมการประเมิน การออกแบบ 4. ขน้ั ตอนการนาไปใช้งาน 5. ขนั้ ตอนการประเมิน การนาไปใช้ การพฒั นา ปรบั ปรุง และการเผยแพร่ ขอ้ มูล

ระยะดาเนินการโดยรวม 3 ระยะ • การอธบิ ายการออกแบบส่ือมัลติมีเดีย ซึ่งแบง่ เป็น 3 ระยะ ดาเนนิ การ ไดแ้ ก่ ระยะการเตรยี มการหรอื วางแผน (Planning) ระยะการ ออกแบบ (Design) และระยะการพฒั นา (Development) มีรายละเอยี ดดังน้ี 1. ระยะวางแผน (Planning) Planning Development 2. ระยะการออกแบบ (Design) 3. ระยะการพฒั นา (Development) Design

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

หลักสาคัญของการออกแบบ คือ 3) Idea & Creative คานึงถงึ ความแปลกใหมห่ รอื สร้างสรรค์สอ่ื ให้เขา้ กบั เหตกุ ารณ์หรอื ยคุ สมยั ซึ่งจะทาให้ได้สอ่ื มัลติมีเดีย ที่มคี วามน่าสนใจย่งิ ข้ึน

ขั้นตอนในการสร้างส่ือมัลติมีเดีย ในการสร้างส่อื มัลติมเี ดยี จะเรม่ิ ตน้ ด้วยกระบวนการดงั น้ี 1. การกาหนดหัวเร่ือง 6. การออกแบบ (Design) 2. เป้าหมาย 7. การพัฒนา (Development) 3. วัตถุประสงค์ 8. การสร้าง (Implementation) 4. กลุ่มเป้าหมายผู้ใช้ 9. การประเมินผล (Evaluation) 5. การวิเคราะห์ (Analysis) 10. นาออกเผยแพร่ (Publication)

ขั้นการเตรียม (PREPARATION) • กาหนดเปา้ หมาย • สื่อในการนาเสนอบทเรียน • วัตถปุ ระสงค์ • เรียนรูเ้ นือ้ หา (Learn Content) เช่น การสมั ภาษณ์ผเู้ ชี่ยวชาญ การ • รวบรวมขอ้ มูล การเตรยี มพรอ้ ม อา่ นหนงั สือหรือ เอกสารอื่นๆ ที่ ทางด้านของเอกสาร สารสนเทศ เก่ียวกับเนอ้ื หาบทเรียน (Information) ท่เี กยี่ วขอ้ ง • สรา้ งความคิด (Generate Ideas) • เตรยี มเนื้อหา (Meterials) ไดแ้ ก่ คอื การระดมสมองน่ันเอง ตารา หนงั สอื เอกสารทาง วิชาการ หนังสอื อา้ งอิง

ข้ันตอนการออกแบบบทเรียน (DESIGN INSTRUCTION) • ขัน้ ตอนการออกแบบบทเรียน • วิเคราะหง์ านและแนวความคิด เปน็ ขั้นตอนท่ีสาคญั ทีส่ ดุ ขั้นหน่งึ • ออกแบบบทเรยี นขัน้ แรก ในการกาหนดวา่ บทเรยี นจะ • ประเมินและแกไ้ ขการออกแบบ ออกมามีลักษณะใด

โครงสร้างของบทเรียนมัลติมีเดีย 1 โครงสรา้ งแบบเสน้ ตรง

โครงสร้างของบทเรียนมัลติมีเดีย 2 โครงสรา้ งแบบไมเ่ ป็นเสน้ ตรง

หลักการออกแบบเนื้อหา ประกอบดว้ ย 3 สว่ น คือ 1) การเตรียมเน้อื หา ไดแ้ ก่ วางโครงสรา้ งของเน้อื หา คดั เลอื ก เนือ้ หาทีจ่ ะนาเสนอ เรียงลาดบั หวั ขอ้ เนอื้ หา 2) การออกแบบเนือ้ หา บทเรยี น ประเภทตา่ งๆ ใช้ภาษาให้ เหมาะสม เนือ้ หาด้านทกั ษะและการปฏบิ ตั ิ 3) การออกแบบขอ้ คาถาม สาหรบั การประเมนิ กอ่ นเรียน หลัง เรียน การสรา้ งแบบฝกึ หดั

ขั้นตอนการเขียนผังงาน (FLOWCHART LESSON) เปน็ การนาเสนอลาดบั ข้นั โครงสรา้ ง ของ คอมพิวเตอร์ชว่ ยสอน ผังงาน ทาหน้าทเ่ี สนอข้อมูลเกยี่ วกับ โปรแกรม เชน่ อะไรจะเกิดขน้ึ เมื่อ ผเู้ รียน ตอบคาถามผดิ หรอื เม่อื ไหร่ จะมกี ารจบบทเรยี น และการเขยี น ผงั งานข้ึนอยูก่ บั ประเภทของ บทเรียน ด้วย

ขั้นตอนการสร้างสตอร่ีบอร์ด (CREATE STORYBOARD) เป็นข้นั ตอนการเตรยี มการ นาเสนอขอ้ ความ ภาพ รวมทงั้ ส่อื ในรปู แบบมัลตมิ เี ดียต่างๆ ลงบนกระดาษเพอ่ื ให้การ นาเสนอข้อความ และรูปแบบ ตา่ งๆ เหลา่ นีเ้ ปน็ ไปอย่าง เหมาะสมบนหนา้ จอ คอมพวิ เตอรต์ อ่ ไป

Storyboard

Storyboard • Storyboard จะชว่ ยให้ทีมงานท้งั หมดจินตนาการไดว้ ่าหนงั จะออกมา หนา้ ตาเป็น อย่างไร พวกเขาตอ้ งทาอะไรกันบา้ งเพือ่ ให้ไดผ้ ลลพั ธ์ ตามนั้นผู้ อานวยการสร้าง จะสามารถคานวณงบประมาณทจี่ ะใช้ในการ ถา่ ยทาได้ • Storyboard จะทาใหร้ วู้ า่ หนงั มีกชี่ อ้ ต กี่โลเกชั่น ฉากใหญโ่ ตแค่ไหน มี เทคนิคหรืออุปกรณพ์ เิ ศษมากนอ้ ยเพียงใดผจู้ ัดการกองฯ รู้วา่ การถ่าย ทาควรจะใชเ้ วลามากนอ้ ยแคไ่ หน ตอ้ งตระเตรียมอะไรบ้าง • Storyboard เปน็ เพยี งรปู ทีว่ าดง่ายๆกไ็ ด้ โดยมีจุดมุ่งหมายเพอื่ ถ่ายทอดไอเดยี ว่าภาพจะออกมาเป็นบนจอภาพยนตร์ ทม่ี า http://krukitchaya.wordpress.com/

HTTPS://WWW.STORYBOARDTHAT.COM

ขั้นตอนการสร้างและการเขียน โปรแกรม (PROGRAM LESSON) เปน็ กระบวนการ เปลย่ี นแปลง สตอร่บี อรด์ ให้กลายเป็น คอมพวิ เตอรช์ ่วยสอน ส่วนนี้ จะตอ้ งคานงึ ถงึ ฮารด์ แวร์ ลักษณะ และประเภทของ บทเรยี นท่ตี ้องการสรา้ ง โปรแกรมเมอรแ์ ละงบประมาณ

ขั้นตอนการประกอบเอกสารประกอบบทเรียน (PRODUCE SUPPORTING MATERIALS) เอกสารประกอบบทเรยี นอาจแบง่ ออก ไดเ้ ป็น 4 ประเภท คอื คู่มอื การใช้ของ ผเู้ รียน คูม่ ือการใชข้ อง ผู้สอน คู่มอื สาหรบั แกป้ ัญหาเทคนิคต่างๆ และ เอกสารประกอบเพม่ิ เตมิ ท่ัวๆ ไป ผ้เู รียนและผสู้ อนย่อม มคี วามตอ้ งการ แตกตา่ งกนั คมู่ ือจงึ ไมเ่ หมือนกนั คู่มือ การแก้ปัญหาก็จาเปน็ หากการตดิ ต้งั มี ความ สลบั ซบั ซ้อนมาก

ขั้นตอนการประเมินผลและแก้ไข บทเรียน (EVALUATE AND REVISE) บทเรยี นและ เอกสารประกอบทัง้ หมด ควรทีจ่ ะไดร้ ับการประเมนิ โดยเฉพาะ การประเมินการทางานของบทเรยี น ในสว่ นของการนาเสนอนั้นควรจะทา การประเมินกค็ ือ ผทู้ ม่ี ีประสบการณใ์ น การออกแบบมากอ่ นในการ ประเมนิ การทางานของบทเรียนนัน้ และควร สร้างแบบทดสอบก่อนเรยี น หลังเรยี น เพอ่ื วัดความร้คู วามสามารถของผ้เู รียน ด้วย

5 แนวทาง การออกแบบมัลติมีเดีย ปฏิสัมพันธ์ อย่างมีประสิทธิภาพ 1. กาหนดเป้าหมาย (Goal) ช่วยใหส้ ามารถสรา้ งสื่อฯ ได้ตรงกับ ความตอ้ งการมากทส่ี ุด โดยสามารถจาแนก เปา้ หมายไดด้ งั น้ี - เพือ่ ถา่ ยทอดความรู้ - เพ่ือสรา้ งทักษะ - เพื่อสนบั สนุนการทางาน 2. ศึกษาพฤตกิ รรมของผูเ้ รยี น โดยจะต้องศึกษาวา่ ผเู้ รียนคิดอย่างไร ยอมรบั นวัตกรรมใหม่ รปู แบบนหี้ รือไม่ ผู้เรียนเรยี นร้จู าก Concept หรอื ศึกษากระบวนการกอ่ นน าไปพัฒนาความเขา้ ใจใน เน้อื หา 3. พจิ ารณาถึงประสบการณท์ ด่ี ีท่สี ดุ ของผู้เรียน เพ่ือใหผ้ เู้ รียนรสู้ ึกมีส่วนรว่ มกับสอื่ ฯ 4. ศึกษาความคงทนของเน้ือหา พจิ ารณาว่าเน้อื หามคี วามคงทนน าไปใชง้ านไดน้ านแคไ่ หน มี การ เปลย่ี นแปลงบ่อยคร้ังหรอื ไม่ อยา่ งไร 5. ใช้เทคนคิ ของนาผูเ้ ช่ียวชาญหลายๆ ทา่ นนาเสนอความรู้ ผสมผสานกบั ผเู้ รียนออก ความเห็นของส่อื

การออกแบบส่ือมัลติมีเดีย การเลือกใช้สี ทีม่ า http://infographic.in.th/infographic

วรรณะของสี วรรณะร้อน (warm tone) ประกอบดว้ ย สเี หลอื ง สสี ม้ สี แดง สมี ว่ ง /ความรสู้ กึ ต่นื เตน้ เรา้ ใจ กระฉบั กระเฉง ถอื วา่ เป็นวรรณะรอ้ น วรรณะเยน็ (cool tone) ประกอบดว้ ย สเี หลอื ง สเี ขยี ว สนี ้าเงนิ สมี ว่ ง / เยน็ ตา ให้ ความรสู้ กึ สงบ สดชน่ื

การใช้สีต่างวรรณะ หลกั การท่วั ไป ใช้อตั ราส่วน 80% ต่อ 20% ของวรรณะสี คอื ถ้าใชส้ ีวรรณะรอ้ น 80% สีวรรณะเยน็ ก็ 20% Background สีเข้ม ตวั หนงั สือ ควรเป็นสีอ่อน ตวั หนงั สอื สีออ่ น Background ควรเป็นสีเข้ม ไม่ควรใชอ้ ัตราสว่ นทเ่ี ทา่ กนั เพราะจะทาใหไ้ ม่มีสีใดเดน่ ไมน่ ่าสนใจ ท่มี า http://infographic.in.th/infographic

ท่มี า http://infographic.in.th/infographic



การเลือกใช้รูปภาพ (GRAPHIC &PHOTO) การใชร้ ปู ภาพมอี ยู่ 2 จุดประสงค์ คือ เพอ่ื เพิม่ ความ สวยงามและดงึ ดูดความ สนใจในการเขา้ ชมเพ่ือแสดงขอ้ มลู และรายละเอยี ดเร่ืองของสื่อตา่ งๆ ทั้งนี้ รูปภาพดงั กล่าวจะมีทงั้ รปู ท่ีเปน็ ภาพจรงิ (Photo) และภาพท่ีวาดขึน้ โดยใช้ เทคนิคตา่ ง ๆ (Graphic) ท่ีมา http://infographic.in.th/infographic

ท่มี า http://infographic.in.th/infographic

เลือกใช้ ภาพ BITMAP กับ VECTOR

Bitmap มีลกั ษณะเป็นชอ่ งๆ เหมือนตาราง แตล่ ะ บิตกค็ ือส่วนหน่งึ ของข้อมูลคอมพวิ เตอร์ สวิตซป์ ิดเปิด ยังหมายถงึ สีดาและสีขาว ลกั ษณะเหมอื นกัน Pixel เปน็ องค์ประกอบพืน้ ฐานของภาพบติ แมป



มีจุดโฟกัส ทม่ี า https://idxw.net

มีความต่อเน่ือง อยา่ งภาพประกอบดา้ นล่างเราจะเห็นภาพกลุ่มเมฆ ภเู ขา พืน้ ดิน กอ้ นหนิ ท่ีเป็นเส้นแนวนอนตอ่ เนอ่ื งกันมาในขณะท่โี ฟกสั ของ ภาพคือหญงิ สาวกบั กระดานทเี่ ปน็ เส้นแนวตง้ั ประเดน็ ของเร่อื ง้นก่ี ารใช้เส้นซ้าในแนวนอนนนั่ เอง ท่ีทาใหภ้ าพนดี้ ลู งตวั และ นา่ สนใจ ท่มี า https://idxw.net

ท่มี า https://idxw.net

ตัวหนังสืออ่านง่าย สีและความคมชัด ตวั อย่างดา้ นล่างโชว์ใหเ้ ห็นการใชส้ เี ขม้ ออ่ นเนน้ ตัวอกั ษรอยา่ งคาวา่ Wilson ใหโ้ ดด เด่น ในขณะทีส่ ่วนอืน่ กย็ ังคงดเู ขา้ กนั และมีสไตลย์ อ้ นยคุ อยา่ งทตี่ ั้งใจ ทีม่ า https://idxw.net

มีความตัดกัน ( CONTRAST ) ตวั อยา่ งด้านลา่ ง Contrast ถูกถา่ ยทอดผา่ นกราฟฟิกสเี จ็บๆทว่ี างบนพน้ิ ขาว นัน่ ทาใหร้ ูปทรงต่างๆดูชดั เจนและเค รียร์มาก ทัง้ ท่ีมีสีเหลืองทค่ี วามเขม้ สจี ะอ่อนมาก แต่ก็ยังมองเห็นเปน็ ชนิ้ เดยี วกันได้ เพราะการเลือกพื้นหลังท่ีตดั กัน มากๆน่นั เอง ทมี่ า https://idxw.net

โทนสีท่ีกลมกลืน ท่ีมา https://idxw.net

HTTPS://PIXABAY.COM/

WWW.SHUTTERSTOCK.COM/

HTTP://WWW.FREEPIK.COM/

HTTP://WWW.FREEPIK.COM/

ภาพยนตร์และเสียงประกอบ (MOVIE AND SOUND) จะทาใหส้ ื่ออิเล็กทรอนิกสม์ คี วามนา่ สนใจและดึงดดู ใจผู้เขา้ ชมมากขึ้น นอกจากเพิม่ ความ สวยงามและความสมจรงิ ของขอ้ มลู แล้ว ยงั เปน็ การง่ายตอ่ ผู้ใช้ทีจ่ ะรับรู้ขอ้ มลู ข่าวสารต่าง ๆ

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

การใช้ข้อความ

การใช้ข้อความ เล่นกับ FONT ท่มี า Download Font : http://www.f0nt.com/

งาน LAB วิชาส่ือประสม • ใหน้ ักศึกษาออกแบบสื่อประชาสมั พันธ์ สถานที่ทอ่ งเท่ยี วในภาคอสี าน เลอื กมา 1 ที่ • เพือ่ ส่งเสริมและประชาสัมพันธก์ ารท่องเทย่ี วในประเทศ • โดยใช้หลกั การออกแบบจากเนือ้ หาทีเ่ รยี น • สามารถใช้โปรแกรมท่ีถนัด / หรือเวบ็ ไซตอ์ อกแบบตกแตง่ https://magic.piktochart.com • SAVE เปน็ ไฟลภ์ าพ แล้วอัพโหลดลงใน wordpress ต้งั ช่ือ page วา่ poster • พรอ้ มบรรยาย กระบวนการในการพฒั นางานน้ี 1. ข้ันตอนการเตรยี ม มกี ารเตรียมขอ้ มูลอย่างไร 2. ขั้นตอนการออกแบบ ใช้หลักการออกแบบในเรื่องสีสัน ข้อความ กราฟฟิกอย่างไร 3. ขั้นตอนการสรา้ งโปรแกรม ใชโ้ ปรแกรมอะไรพฒั นา 4. ขั้นตอนการนาไปใชง้ าน กลุม่ เป้าหมายของสือ่ นีค้ ือใคร 5. ข้ันตอนการประเมินปรับปรงุ และการเผยแพรข่ อ้ มูล มกี ารนาไปเผยแพรท่ ใ่ี ด