designing of web-based instruction of education
DESCRIPTION
Introduction to Designing of Web-Based Instruction of EducationTRANSCRIPT
![Page 1: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/1.jpg)
Asst.Prof. Tawee Sranamkam, Ph.D.Faculty of Education
Khon Kaen University
DESIGNING FOR WBI Web-Based Instruction
การออกแบบบทเรยนบนเวบ
![Page 2: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/2.jpg)
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 เนอหาหลก
![Page 3: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/3.jpg)
WHY DO WE NEED DESIGN ?
ความจ าเปนทตองออกแบบเวบ
![Page 4: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/4.jpg)
ความจ าเปนทตองออกแบบเวบ
1. เพอใหการแสดงหนาเวบมล าดบขน
2. เพอใหมความสวยงามตามหนาทแตละสวน
3. เพอใหเกดเขาใจไดถกตอง
4. เพอใหผใชเกดความสบายตาDE
SIG
N
![Page 5: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/5.jpg)
WHAT IS A WEBSITE ?
เวบไซต คอ อะไร บทเรยนบนเวบ คอ อะไร
![Page 6: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/6.jpg)
เวบไซต หรอ บทเรยนบนเวบ คออะไร
เวบไซต หมายถง ขอมลหรอสารสนเทศทสามารถแสดงผลในรปแบบของไฮเปอรมเดยบนระบบเครอขาย world wide web (www)หนาแรกเรยกวา Homepageหนาตอไปเรยกวา Webpageเรยกรวมกนวา Website
Web-Based Instruction: WBI
![Page 7: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/7.jpg)
WEBSITE STRUCTUREโครงสรางของเวบไซต
![Page 8: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/8.jpg)
โครงสรางของเวบไซต
About Us Services Products Partners Contact Us
FAQ’s Search Feedback Sitemap
Home Page
แบบพนฐาน
![Page 9: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/9.jpg)
โครงสรางของเวบไซต (ตอ)www.unaids.org/en/
![Page 10: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/10.jpg)
โครงสรางของเวบไซต (ตอ)www.lakme.com/ENG/index.htm
![Page 11: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/11.jpg)
TYPE OF WEBSITESรปแบบของเวบไซต
![Page 12: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/12.jpg)
รปแบบของเวบไซตThere are many different types of websites. Some of the most common ones are listed below:
Corporatewww.thiekos.com
E-Commercewww.amazon.com
Newswww.bbc.co.uk
Entertainmentwww.mtv.com
Personalwww.hillmancurtis.com
Blogswww.blogger.com/start
![Page 13: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/13.jpg)
BASIC LAYOUT FORWEB DESIGN
โครงสรางพนฐานของการออกแบบเวบ
![Page 14: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/14.jpg)
?
โครงสรางพนฐานของการออกแบบเวบ
![Page 15: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/15.jpg)
โครงสรางพนฐานของการออกแบบเวบA two column layout for a simple basic website
![Page 16: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/16.jpg)
โครงสรางพนฐานของการออกแบบเวบwww.geocities.com/nankingatrocities/Introduction/introduction.htm
![Page 17: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/17.jpg)
โครงสรางพนฐานของการออกแบบเวบA three column layout for a simple basic website
![Page 18: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/18.jpg)
โครงสรางพนฐานของการออกแบบเวบwww.undp.org/
![Page 19: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/19.jpg)
โครงสรางพนฐานของการออกแบบเวบwww.ebay.com/ www.fedex.com/us/
![Page 20: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/20.jpg)
DESIGN FOR SIMPLICITYการออกแบบอยางเรยบงาย
![Page 21: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/21.jpg)
การออกแบบเวบอยางเรยบงายKISS Principle is “Keep It Simple and Sweet”
หลกของความเรยบงาย
- งายตอการเขาถงเวบไซตหรอบทเรยน
- ไมใหเวบรบกวนผเขาชมหรอผเขาเรยน
- มความเรยบงายแตใหดเปนมออาชพ
- ใชองคประกอบทถกใจผใชหรอผเรยน
![Page 22: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/22.jpg)
การออกแบบเวบอยางเรยบงาย
หลกการคอ ลดความยงเหยง เพมพนทสขาว
Example of Bad Web DesignUnorganized
Lots of Clutter/ Poor Use of White Space
Example of Good Web DesignOrganized
No Clutter and Proper use of White Space
![Page 23: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/23.jpg)
ELEMENTS OF HOMEPAGE DESIGN
องคประกอบส าคญในการออกแบบโฮมเพจ
![Page 24: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/24.jpg)
องคประกอบส าคญในการออกแบบโฮมเพจ- 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
![Page 25: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/25.jpg)
องคประกอบส าคญในการออกแบบโฮมเพจ
Navigation คอ เสนน าทางในหนาเวบ มหนาท 2 ประการ
1. เพอบอกผใชวาก าลงอยต าแหนงใดของเวบ
2. เพอน าผใชไปยงต าแหนงใดๆ ของเวบไซตกได
![Page 26: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/26.jpg)
องคประกอบส าคญในการออกแบบโฮมเพจNavigation
TOP LEFT RIGHT
www.kodak.com www.who.int www.undp.org.in
![Page 27: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/27.jpg)
องคประกอบส าคญในการออกแบบโฮมเพจ
Website Navigation Continued . . . ตวน าทางในการทองไปในโฮมเพจ
www.unaids.org/
![Page 28: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/28.jpg)
องคประกอบส าคญในการออกแบบโฮมเพจ
Always Design for Consistencyตองออกแบบโดยรกษาความคงเสนคงวา
Homepage Inside Page
![Page 29: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/29.jpg)
COLOURSสสนของเวบเพจ
![Page 30: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/30.jpg)
COLORS สสนAlways use a 3 Color palette for a web
BBC website MSN website
![Page 31: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/31.jpg)
- การใชสผดเพยนไปจากเดม เปนสาเหตใหผเยยมชมจากไป
- การใชหลากหลายสท าใหหนาเวบดยงเหยง เนอหายงยาก
COLOURS
หลกงายการใชสในหนาเวบ
![Page 32: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/32.jpg)
COLOURS
An example of a website with bad design
![Page 33: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/33.jpg)
COLOURs
หลกการไมควรใชสเกน 3 ส ในหนงเวบไซต
Bright สสนใหความสวางไสว
Corporate สสนใหความเปนสวนรวม
Pleasant สสนใหความสนกสนาน
Relaxing สสนผอนคลาย
![Page 34: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/34.jpg)
CONTRASTความแตกตางของสตวอกษรและสพน
![Page 35: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/35.jpg)
- A well balanced contrast between text and its background color is what you need to keep in mind
-อาศยหลกแหงความสมดลของสพนและสตวอกษร
CONTRAST
![Page 36: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/36.jpg)
CONTRAST
Black text on white backgroundstands out the best
ตวอกษรสด า บน พนสขาว ถอเปนมาตรฐานทดทสดแตควรหลกเลยงการใชงาน หรอใชในคราวทจ าเปน
![Page 37: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/37.jpg)
CONTRAST
At times a color maybe good for the background but maynot be applicable for your text
สบางสเหมาะกบการเปนสพนไมเหมาะส าหรบการเปนตวอกษร
![Page 38: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/38.jpg)
The website below shows how information maybe lost if there isn’t much contrastSport website
CONTRAST
![Page 39: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/39.jpg)
TYPOGRAPHYเทคนคทางการพมพ
![Page 40: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/40.jpg)
เทคนคทางการพมพ
หลกการเลอกใชตวอกษรบนเวบไซต
- เหมาะสมกบเวบไซตหรอบทเรยนของคณ
- งายตอการอานของผชม ผเรยน
- สามารถใชไดกบเบราวเซอรจ านวนมากและระบบปฏบตการทวไป
![Page 41: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/41.jpg)
There are basically two types of fonts: serif and sans serif.
เทคนคทางการพมพ (ตอ)
![Page 42: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/42.jpg)
The most popular font types
Arial
ABCDEFabcdef
VerdanaABCDEFabcdef
Times New Roman
ABCDEFabcdef
เทคนคทางการพมพ (ตอ)
![Page 43: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/43.jpg)
The ideal size for you to use and for the users to
read is between 11–12pt
เทคนคทางการพมพ (ตอ)
![Page 44: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/44.jpg)
Good text size and easy readabilitywww.grist.org
เทคนคทางการพมพ (ตอ)
![Page 45: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/45.jpg)
A few websites with good text size and easy readabilitywww.msn.com
เทคนคทางการพมพ (ตอ)
![Page 46: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/46.jpg)
Avoid making text long horizontally as it becomes harder to read
หลกเลยง การใชขอความยาวๆ จะท าใหอานยาก
เทคนคทางการพมพ (ตอ)
![Page 47: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/47.jpg)
IMAGES FOR THE WEB
ภาพประกอบเวบเพจ
![Page 48: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/48.jpg)
ภาพประกอบเวบเพจ
ภาพ ท าใหเกดความมชวตชวาแกโฮมเพจ
แต...ไมควรมมากเกนความจ าเปนตอง...เปนภาพทเกยวของกบเวบเพจหรอเกยวของกบบทเรยนเทานน
![Page 49: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/49.jpg)
A page without images can look dull and bore your users
หนาเวบทไมมภาพ.....อาจดหมองคล า.....และสรางความเบอหนายแกผชม
ภาพประกอบเวบเพจ (ตอ)
![Page 50: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/50.jpg)
Adding an image or two canmake the page much more visually appealing
การมภาพสกภาพสองภาพ....อาจท าใหหนาเวบสามารถดงดดสายตาผชมได
ภาพประกอบเวบเพจ (ตอ)
![Page 51: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/51.jpg)
www.bbc.co.uk
News website
Homepage
Some examples of the websites using images …
ภาพประกอบเวบเพจ (ตอ)
![Page 52: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/52.jpg)
www.mondomix.com
Some examples of the websites using images …
Entertainment website
Homepage
ภาพประกอบเวบเพจ (ตอ)
![Page 53: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/53.jpg)
www.mondomix.com
Some examples of the websites using images …
Entertainment websiteInside page
ภาพประกอบเวบเพจ (ตอ)
![Page 54: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/54.jpg)
www.unicef.org
Some examples of the websites using images …NGO website
Homepage
ภาพประกอบเวบเพจ (ตอ)
![Page 55: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/55.jpg)
หลกการออกแบบเวบเพจโดยสรป
Always design forSimplicity and Consistency
เรยบงาย และ คงเสนคงวา
Don’t confuse the user!ไมสรางความสบสนแกผใชผเรยน
![Page 56: Designing of Web-Based Instruction of Education](https://reader033.vdocuments.us/reader033/viewer/2022052316/558cf4dcd8b42a8f0f8b46bb/html5/thumbnails/56.jpg)