Download as PDF, PPTX
Uploaded bykhon Kaen University
Designing of Web-Based Instruction of Education
Introduction to Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
- 1. Asst.Prof. Tawee Sranamkam,Ph.D. Faculty of Education KhonKaenUniversity DESIGNINGFOR WBI Web-Based Instruction การออกแบบบทเรียนบนเว็บ
- 2. 1.Why do weneed design ? 2.What is a website ? 3.Website structure 4.Types of website 5.Basic layout for web design 6.Design for simplicity 7.Elements for homepage design 8.Color 9.Contrast 10.Typography 11.Images for the web TOPICS เนื้อหาหลัก
- 3. WHY DO WE NEED DESIGN ? ความจาเป็นที่ต้องออกแบบเว็บ
- 4. ความจาเป็นที่ต้องออกแบบเว็บ 1. เพื่อให้การแสดงหน้าเว็บมีลาดับขั้น 2. เพื่อให้มีความสวยงามตามหน้าที่แต่ละส่วน 3. เพื่อให้เกิดเข้าใจได้ถูกต้อง 4. เพื่อให้ผู้ใช้เกิดความสบายตา DESIGN
- 5. WHAT IS AWEBSITE ? เว็บไซต์ คือ อะไร บทเรียนบนเว็บ คือ อะไร
- 6. เว็บไซต์ หรือ บทเรียนบนเว็บคืออะไร เว็บไซต์ หมายถึง ข้อมูลหรือสารสนเทศ ที่สามารถแสดงผลในรูปแบบของ ไฮเปอร์มีเดียบนระบบเครือข่าย world wide web (www) หน้าแรกเรียกว่า Homepageหน้าต่อไปเรียกว่า Webpage เรียกรวมกันว่า Website Web-Based Instruction: WBI
- 7.
- 8. โครงสร้างของเว็บไซต์ About Us Services Products Partners Contact Us FAQ’s Search Feedback Sitemap Home Page แบบพื้นฐาน
- 9.
- 10.
- 11. TYPE OF WEBSITES รูปแบบของเว็บไซต์
- 12. รูปแบบของเว็บไซต์ There aremany different types of websites. Some of the most common ones are listed below: Corporate www.thiekos.com E-Commerce www.amazon.com News www.bbc.co.uk Entertainment www.mtv.com Personal www.hillmancurtis.com Blogs www.blogger.com/start
- 13. BASIC LAYOUTFOR WEBDESIGN โครงสร้างพื้นฐาน ของการออกแบบเว็บ
- 14.
- 15. โครงสร้างพื้นฐานของการออกแบบเว็บ A twocolumn layout for a simple basic website
- 16.
- 17. โครงสร้างพื้นฐานของการออกแบบเว็บ A threecolumn layout for a simple basic website
- 18.
- 19.
- 20. DESIGN FOR SIMPLICITY การออกแบบอย่างเรียบง่าย
- 21. การออกแบบเว็บอย่างเรียบง่าย KISS Principleis“Keep It Simple and Sweet” หลักของความเรียบง่าย -ง่ายต่อการเข้าถึงเว็บไซต์หรือบทเรียน -ไม่ให้เว็บรบกวนผู้เข้าชมหรือผู้เข้าเรียน -มีความเรียบง่ายแต่ให้ดูเป็นมืออาชีพ -ใช้องค์ประกอบที่ถูกใจผู้ใช้หรือผู้เรียน
- 22. การออกแบบเว็บอย่างเรียบง่าย หลักการ คือลดความยุ่งเหยิงเพิ่มพื้นที่สีขาว Example of BadWeb Design Unorganized Lots of Clutter/ Poor Use of White Space Example of GoodWeb Design Organized No Clutter and Proper use of White Space
- 23. ELEMENTS OFHOMEPAGE DESIGN องค์ประกอบสาคัญใน การออกแบบโฮมเพจ
- 24. องค์ประกอบสาคัญในการออกแบบโฮมเพจ -Logo -Banner/Title(Organization Name) -Search Feature -Feedback & Interactive -Color and Images (Give life to Homepage) -Navigation (Primary, Secondary and Global) -Prioritizing Information on the Homepage
- 25. องค์ประกอบสาคัญในการออกแบบโฮมเพจ Navigationคือ เส้นนาทางในหน้าเว็บมีหน้าที่ 2 ประการ 1. เพื่อบอกผู้ใช้ว่ากาลัง อยู่ตาแหน่งใดของเว็บ 2. เพื่อนาผู้ใช้ไปยังตาแหน่ง ใดๆ ของเว็บไซต์ก็ได้
- 26. องค์ประกอบสาคัญในการออกแบบโฮมเพจ Navigation TOPLEFT RIGHT www.kodak.com www.who.int www.undp.org.in
- 27. องค์ประกอบสาคัญในการออกแบบโฮมเพจ Website NavigationContinued . . .ตัวนาทางในการท่องไปในโฮมเพจ www.unaids.org/
- 28. องค์ประกอบสาคัญในการออกแบบโฮมเพจ Always Designfor Consistency ต้องออกแบบโดยรักษาความคงเส้นคงวา Homepage Inside Page
- 29.
- 30. COLORSสีสัน Always usea 3 Color palette for aweb BBC website MSN website
- 31. -การใช้สีผิดเพี้ยนไปจากเดิม เป็นสาเหตุให้ผู้เยี่ยมชมจากไป -การใช้หลากหลายสีทาให้หน้าเว็บดูยุ่งเหยิงเนื้อหายุ่งยาก COLOURS หลักง่ายการใช้สีในหน้าเว็บ
- 32. COLOURS An exampleof a website with baddesign
- 33. COLOURs หลักการ ไม่ควรใช้สีเกิน3 สี ในหนึ่งเว็บไซต์ Brightสีสันให้ความสว่างไสว Corporate สีสันให้ความเป็น ส่วนร่วม Pleasantสีสันให้ความสนุกสนาน Relaxingสีสันผ่อนคลาย
- 34.
- 35. -A well balancedcontrastbetween text and its background color is what you need to keep in mind -อาศัยหลักแห่งความสมดุลของสีพื้นและสีตัวอักษร CONTRAST
- 36. CONTRAST Black texton white backgroundstands out the best ตัวอักษรสีดา บน พื้นสีขาว ถือเป็นมาตรฐานที่ดีที่สุด แต่ควรหลีกเลี่ยงการใช้งาน หรือใช้ในคราวที่จาเป็น
- 37. CONTRAST At timesa color maybe good for the background but may not be applicable for your text สีบางสีเหมาะกับการเป็นสีพื้น ไม่เหมาะสาหรับการเป็นตัวอักษร
- 38. The website belowshows how information maybe lost if there isn’t much contrast Sport website CONTRAST
- 39.
- 40. เทคนิคทางการพิมพ์ หลักการเลือกใช้ตัวอักษรบนเว็บไซต์ -เหมาะสมกับเว็บไซต์หรือบทเรียนของคุณ -ง่ายต่อการอ่านของผู้ชม ผู้เรียน -สามารถใช้ได้กับเบราว์เซอร์จานวนมาก และระบบปฏิบัติการทั่วไป
- 41. There are basicallytwo types of fonts: serif and sans serif. เทคนิคทางการพิมพ์ (ต่อ)
- 42. The most popularfont types Arial ABCDEFabcdef Verdana ABCDEFabcdef Times New Roman ABCDEFabcdef เทคนิคทางการพิมพ์ (ต่อ)
- 43. The ideal sizefor you to use and for the users to read is between 11–12pt เทคนิคทางการพิมพ์ (ต่อ)
- 44. Good text sizeand easy readability www.grist.org เทคนิคทางการพิมพ์ (ต่อ)
- 45. A few websiteswith good text size and easy readability www.msn.com เทคนิคทางการพิมพ์ (ต่อ)
- 46. Avoid making textlong horizontally as it becomes harder to read หลีกเลี่ยงการใช้ข้อความยาวๆ จะทาให้อ่านยาก เทคนิคทางการพิมพ์ (ต่อ)
- 47. IMAGES FOR THEWEB ภาพประกอบเว็บเพจ
- 48. ภาพประกอบเว็บเพจ ภาพ ทาให้เกิดความมีชีวิตชีวา แก่โฮมเพจ แต่...ไม่ควรมีมากเกินความจาเป็น ต้อง...เป็นภาพที่เกี่ยวข้องกับเว็บเพจ หรือเกี่ยวข้องกับบทเรียนเท่านั้น
- 49. A page withoutimages can look dull and bore your users หน้าเว็บที่ไม่มีภาพ..... อาจดูหมองคล้า..... และสร้างความเบื่อหน่ายแก่ผู้ชม ภาพประกอบเว็บเพจ(ต่อ)
- 50. Adding an imageor two can make the page much more visually appealing การมีภาพสักภาพสองภาพ.... อาจทาให้หน้าเว็บสามารถ ดึงดูดสายตาผู้ชมได้ ภาพประกอบเว็บเพจ(ต่อ)
- 51. www.bbc.co.uk News website Homepage Some examples of the websites using images … ภาพประกอบเว็บเพจ(ต่อ)
- 52. www.mondomix.com Some examplesof the websites using images … Entertainment website Homepage ภาพประกอบเว็บเพจ(ต่อ)
- 53. www.mondomix.com Some examplesof the websites using images … Entertainment website Inside page ภาพประกอบเว็บเพจ(ต่อ)
- 54. www.unicef.org Some examplesof the websites using images … NGO website Homepage ภาพประกอบเว็บเพจ(ต่อ)
- 55. หลักการออกแบบเว็บเพจ โดยสรุป Alwaysdesign for SimplicityandConsistency เรียบง่าย และคงเส้นคงวา Don’t confuse the user! ไม่สร้างความสับสนแก่ผู้ใช้ผู้เรียน