Introduction to 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 we need 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 A WEBSITE ?
เว็บไซต์ คือ อะไร
บทเรียนบนเว็บ คือ อะไร

6. เว็บไซต์ หรือ บทเรียนบนเว็บ คืออะไร
เว็บไซต์ หมายถึง ข้อมูลหรือสารสนเทศ
ที่สามารถแสดงผลในรูปแบบของ
ไฮเปอร์มีเดียบนระบบเครือข่าย world wide web (www)
หน้าแรกเรียกว่า Homepageหน้าต่อไปเรียกว่า Webpage
เรียกรวมกันว่า Website
Web-Based Instruction: WBI

7. WEBSITE STRUCTURE
โครงสร้างของเว็บไซต์

8. โครงสร้างของเว็บไซต์
About Us
Services
Products
Partners
Contact Us
FAQ’s
Search
Feedback
Sitemap
Home Page
แบบพื้นฐาน

9. โครงสร้างของเว็บไซต์ (ต่อ)
www.unaids.org/en/

10. โครงสร้างของเว็บไซต์ (ต่อ)
www.lakme.com/ENG/index.htm

11. TYPE OF WEBSITES
รูปแบบของเว็บไซต์

12. รูปแบบของเว็บไซต์
There are many 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
WEB DESIGN
โครงสร้างพื้นฐาน
ของการออกแบบเว็บ

14. ?
โครงสร้างพื้นฐานของการออกแบบเว็บ

15. โครงสร้างพื้นฐานของการออกแบบเว็บ
A two column layout for a simple basic website

16. โครงสร้างพื้นฐานของการออกแบบเว็บ
www.geocities.com/nankingatrocities/Introduction/introduction.htm

17. โครงสร้างพื้นฐานของการออกแบบเว็บ
A three column layout for a simple basic website

18. โครงสร้างพื้นฐานของการออกแบบเว็บ
www.undp.org/

19. โครงสร้างพื้นฐานของการออกแบบเว็บ
www.ebay.com/
www.fedex.com/us/

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
TOP LEFT RIGHT
www.kodak.com www.who.int www.undp.org.in

27. องค์ประกอบสาคัญในการออกแบบโฮมเพจ
Website Navigation Continued . . .ตัวนาทางในการท่องไปในโฮมเพจ
www.unaids.org/

28. องค์ประกอบสาคัญในการออกแบบโฮมเพจ
Always Design for Consistency
ต้องออกแบบโดยรักษาความคงเส้นคงวา
Homepage
Inside Page

29. COLOURS
สีสันของเว็บเพจ

30. COLORSสีสัน
Always use a 3 Color palette for aweb
BBC website
MSN website

31. -การใช้สีผิดเพี้ยนไปจากเดิม เป็นสาเหตุให้ผู้เยี่ยมชมจากไป
-การใช้หลากหลายสีทาให้หน้าเว็บดูยุ่งเหยิง เนื้อหายุ่งยาก
COLOURS
หลักง่ายการใช้สีในหน้าเว็บ

32. COLOURS
An example of a website with baddesign

33. COLOURs
หลักการ
ไม่ควรใช้สีเกิน 3 สี ในหนึ่งเว็บไซต์
Brightสีสันให้ความสว่างไสว
Corporate สีสันให้ความเป็น ส่วนร่วม
Pleasantสีสันให้ความสนุกสนาน
Relaxingสีสันผ่อนคลาย

34. CONTRAST
ความแตกต่างของ
สีตัวอักษรและสีพื้น

35. -A well balanced contrastbetween text and its background color is what you need to keep in mind
-อาศัยหลักแห่งความสมดุลของสีพื้นและสีตัวอักษร
CONTRAST

36. CONTRAST
Black text on white backgroundstands out the best
ตัวอักษรสีดา บน พื้นสีขาว
ถือเป็นมาตรฐานที่ดีที่สุด แต่ควรหลีกเลี่ยงการใช้งาน หรือใช้ในคราวที่จาเป็น

37. CONTRAST
At times a color maybe good
for the background but may
not be applicable for your text
สีบางสีเหมาะกับการเป็นสีพื้น
ไม่เหมาะสาหรับการเป็นตัวอักษร

38. The website below shows how information maybe lost if there isn’t much contrast
Sport website
CONTRAST

39. TYPOGRAPHY
เทคนิคทางการพิมพ์

40. เทคนิคทางการพิมพ์
หลักการเลือกใช้ตัวอักษรบนเว็บไซต์
-เหมาะสมกับเว็บไซต์หรือบทเรียนของคุณ
-ง่ายต่อการอ่านของผู้ชม ผู้เรียน
-สามารถใช้ได้กับเบราว์เซอร์จานวนมาก และระบบปฏิบัติการทั่วไป

41. There are basically two types of fonts: serif and sans serif.
เทคนิคทางการพิมพ์ (ต่อ)

42. The most popular font types
Arial
ABCDEFabcdef
Verdana
ABCDEFabcdef
Times New Roman
ABCDEFabcdef
เทคนิคทางการพิมพ์ (ต่อ)

43. The ideal size for you to use and for the users to
read is between 11–12pt
เทคนิคทางการพิมพ์ (ต่อ)

44. Good text size and easy readability
www.grist.org
เทคนิคทางการพิมพ์ (ต่อ)

45. A few websites with good text size and easy readability
www.msn.com
เทคนิคทางการพิมพ์ (ต่อ)

46. Avoid making text long horizontally as it becomes harder to read
หลีกเลี่ยงการใช้ข้อความยาวๆ จะทาให้อ่านยาก
เทคนิคทางการพิมพ์ (ต่อ)

47. IMAGES FOR THE WEB
ภาพประกอบเว็บเพจ

48. ภาพประกอบเว็บเพจ
ภาพ ทาให้เกิดความมีชีวิตชีวา
แก่โฮมเพจ
แต่...ไม่ควรมีมากเกินความจาเป็น
ต้อง...เป็นภาพที่เกี่ยวข้องกับเว็บเพจ
หรือเกี่ยวข้องกับบทเรียนเท่านั้น

49. A page without images can
look dull and bore your users
หน้าเว็บที่ไม่มีภาพ.....
อาจดูหมองคล้า.....
และสร้างความเบื่อหน่ายแก่ผู้ชม
ภาพประกอบเว็บเพจ(ต่อ)

50. Adding an image or 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 examples of the websites using images …
Entertainment website
Homepage
ภาพประกอบเว็บเพจ(ต่อ)

53. www.mondomix.com
Some examples of the websites using images …
Entertainment website
Inside page
ภาพประกอบเว็บเพจ(ต่อ)

54. www.unicef.org
Some examples of the websites using images …
NGO website
Homepage
ภาพประกอบเว็บเพจ(ต่อ)

55. หลักการออกแบบเว็บเพจ
โดยสรุป
Always design for
SimplicityandConsistency
เรียบง่าย และคงเส้นคงวา
Don’t confuse the user!
ไม่สร้างความสับสนแก่ผู้ใช้ผู้เรียน