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!ไมสรางความสบสนแกผใชผเรยน