Designing of Web-Based Instruction of Education
-
Upload
khon-kaen-university -
Category
Education
-
view
463 -
download
1
description
Transcript of Designing of Web-Based Instruction of Education
Asst.Prof. Tawee Sranamkam, Ph.D.Faculty of Education
Khon Kaen University
DESIGNING FOR WBI Web-Based Instruction
การออกแบบบทเรยนบนเวบ
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 เนอหาหลก
WHY DO WE NEED DESIGN ?
ความจ าเปนทตองออกแบบเวบ
ความจ าเปนทตองออกแบบเวบ
1. เพอใหการแสดงหนาเวบมล าดบขน
2. เพอใหมความสวยงามตามหนาทแตละสวน
3. เพอใหเกดเขาใจไดถกตอง
4. เพอใหผใชเกดความสบายตาDE
SIG
N
WHAT IS A WEBSITE ?
เวบไซต คอ อะไร บทเรยนบนเวบ คอ อะไร
เวบไซต หรอ บทเรยนบนเวบ คออะไร
เวบไซต หมายถง ขอมลหรอสารสนเทศทสามารถแสดงผลในรปแบบของไฮเปอรมเดยบนระบบเครอขาย world wide web (www)หนาแรกเรยกวา Homepageหนาตอไปเรยกวา Webpageเรยกรวมกนวา Website
Web-Based Instruction: WBI
WEBSITE STRUCTUREโครงสรางของเวบไซต
โครงสรางของเวบไซต
About Us Services Products Partners Contact Us
FAQ’s Search Feedback Sitemap
Home Page
แบบพนฐาน
โครงสรางของเวบไซต (ตอ)www.unaids.org/en/
โครงสรางของเวบไซต (ตอ)www.lakme.com/ENG/index.htm
TYPE OF WEBSITESรปแบบของเวบไซต
รปแบบของเวบไซต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
BASIC LAYOUT FORWEB DESIGN
โครงสรางพนฐานของการออกแบบเวบ
?
โครงสรางพนฐานของการออกแบบเวบ
โครงสรางพนฐานของการออกแบบเวบA two column layout for a simple basic website
โครงสรางพนฐานของการออกแบบเวบwww.geocities.com/nankingatrocities/Introduction/introduction.htm
โครงสรางพนฐานของการออกแบบเวบA three column layout for a simple basic website
โครงสรางพนฐานของการออกแบบเวบwww.undp.org/
โครงสรางพนฐานของการออกแบบเวบwww.ebay.com/ www.fedex.com/us/
DESIGN FOR SIMPLICITYการออกแบบอยางเรยบงาย
การออกแบบเวบอยางเรยบงายKISS Principle is “Keep It Simple and Sweet”
หลกของความเรยบงาย
- งายตอการเขาถงเวบไซตหรอบทเรยน
- ไมใหเวบรบกวนผเขาชมหรอผเขาเรยน
- มความเรยบงายแตใหดเปนมออาชพ
- ใชองคประกอบทถกใจผใชหรอผเรยน
การออกแบบเวบอยางเรยบงาย
หลกการคอ ลดความยงเหยง เพมพนทสขาว
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
ELEMENTS OF HOMEPAGE DESIGN
องคประกอบส าคญในการออกแบบโฮมเพจ
องคประกอบส าคญในการออกแบบโฮมเพจ- 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
องคประกอบส าคญในการออกแบบโฮมเพจ
Navigation คอ เสนน าทางในหนาเวบ มหนาท 2 ประการ
1. เพอบอกผใชวาก าลงอยต าแหนงใดของเวบ
2. เพอน าผใชไปยงต าแหนงใดๆ ของเวบไซตกได
องคประกอบส าคญในการออกแบบโฮมเพจNavigation
TOP LEFT RIGHT
www.kodak.com www.who.int www.undp.org.in
องคประกอบส าคญในการออกแบบโฮมเพจ
Website Navigation Continued . . . ตวน าทางในการทองไปในโฮมเพจ
www.unaids.org/
องคประกอบส าคญในการออกแบบโฮมเพจ
Always Design for Consistencyตองออกแบบโดยรกษาความคงเสนคงวา
Homepage Inside Page
COLOURSสสนของเวบเพจ
COLORS สสนAlways use a 3 Color palette for a web
BBC website MSN website
- การใชสผดเพยนไปจากเดม เปนสาเหตใหผเยยมชมจากไป
- การใชหลากหลายสท าใหหนาเวบดยงเหยง เนอหายงยาก
COLOURS
หลกงายการใชสในหนาเวบ
COLOURS
An example of a website with bad design
COLOURs
หลกการไมควรใชสเกน 3 ส ในหนงเวบไซต
Bright สสนใหความสวางไสว
Corporate สสนใหความเปนสวนรวม
Pleasant สสนใหความสนกสนาน
Relaxing สสนผอนคลาย
CONTRASTความแตกตางของสตวอกษรและสพน
- A well balanced contrast between text and its background color is what you need to keep in mind
-อาศยหลกแหงความสมดลของสพนและสตวอกษร
CONTRAST
CONTRAST
Black text on white backgroundstands out the best
ตวอกษรสด า บน พนสขาว ถอเปนมาตรฐานทดทสดแตควรหลกเลยงการใชงาน หรอใชในคราวทจ าเปน
CONTRAST
At times a color maybe good for the background but maynot be applicable for your text
สบางสเหมาะกบการเปนสพนไมเหมาะส าหรบการเปนตวอกษร
The website below shows how information maybe lost if there isn’t much contrastSport website
CONTRAST
TYPOGRAPHYเทคนคทางการพมพ
เทคนคทางการพมพ
หลกการเลอกใชตวอกษรบนเวบไซต
- เหมาะสมกบเวบไซตหรอบทเรยนของคณ
- งายตอการอานของผชม ผเรยน
- สามารถใชไดกบเบราวเซอรจ านวนมากและระบบปฏบตการทวไป
There are basically two types of fonts: serif and sans serif.
เทคนคทางการพมพ (ตอ)
The most popular font types
Arial
ABCDEFabcdef
VerdanaABCDEFabcdef
Times New Roman
ABCDEFabcdef
เทคนคทางการพมพ (ตอ)
The ideal size for you to use and for the users to
read is between 11–12pt
เทคนคทางการพมพ (ตอ)
Good text size and easy readabilitywww.grist.org
เทคนคทางการพมพ (ตอ)
A few websites with good text size and easy readabilitywww.msn.com
เทคนคทางการพมพ (ตอ)
Avoid making text long horizontally as it becomes harder to read
หลกเลยง การใชขอความยาวๆ จะท าใหอานยาก
เทคนคทางการพมพ (ตอ)
IMAGES FOR THE WEB
ภาพประกอบเวบเพจ
ภาพประกอบเวบเพจ
ภาพ ท าใหเกดความมชวตชวาแกโฮมเพจ
แต...ไมควรมมากเกนความจ าเปนตอง...เปนภาพทเกยวของกบเวบเพจหรอเกยวของกบบทเรยนเทานน
A page without images can look dull and bore your users
หนาเวบทไมมภาพ.....อาจดหมองคล า.....และสรางความเบอหนายแกผชม
ภาพประกอบเวบเพจ (ตอ)
Adding an image or two canmake the page much more visually appealing
การมภาพสกภาพสองภาพ....อาจท าใหหนาเวบสามารถดงดดสายตาผชมได
ภาพประกอบเวบเพจ (ตอ)
www.bbc.co.uk
News website
Homepage
Some examples of the websites using images …
ภาพประกอบเวบเพจ (ตอ)
www.mondomix.com
Some examples of the websites using images …
Entertainment website
Homepage
ภาพประกอบเวบเพจ (ตอ)
www.mondomix.com
Some examples of the websites using images …
Entertainment websiteInside page
ภาพประกอบเวบเพจ (ตอ)
www.unicef.org
Some examples of the websites using images …NGO website
Homepage
ภาพประกอบเวบเพจ (ตอ)
หลกการออกแบบเวบเพจโดยสรป
Always design forSimplicity and Consistency
เรยบงาย และ คงเสนคงวา
Don’t confuse the user!ไมสรางความสบสนแกผใชผเรยน