WebDesign (1)

Published on February 2017 | Categories: Documents | Downloads: 45 | Comments: 0 | Views: 284
of 51
Download PDF   Embed   Report

Comments

Content

Web Technology

Web Technology


เกิดอะไรขึ้นเมื่อคุณพิมพ์ URL (uniform resource locator) ใน
Web browser หรื อเมื่อคุณคลิ๊ก Link

Web Technology
1. Browser จะแบ่ง URL ออกเป็ น 3 ส่ วน ดังนี้
http://www.psu.ac.th/index.php
 โปรโตคอล (protocol) คือ “http”
 ชื่อเครื่ องแม่ข่าย คือ “www.psu.ac.th”
 ชื่อแฟ้ มข้อมูล (file) ที่เรี ยกดู คือ index.php
* หากไม่ระบุแฟ้ มข้อมูล เครื่ องแม่ข่ายจะตีความว่าหมายถึง
แฟ้ มข้อมูลที่ถูกตั้งไว้เป็ นค่าโดยปริ ยาย (default)

Web Technology
2. Web browser ส่ งคาขอไปยังเครื่ องแม่ข่าย

Web Technology
3. เครื่ องแม่ข่ายส่ งข้อมูลในรู ปแบบ html กลับมายัง Web browser

Web Technology
4. Web browser ตีความและแสดงผล

แนวคิดการออกแบบเว็บไซต์

องค์ประกอบการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ


ความเรี ยบง่าย (Simplicity)
หลักการสาคัญคือ การสื่ อสารเนื้อหาถึงผูใ้ ช้โดยใช้องค์ประกอบที่จาเป็ น
◦ บางครั้งการใช้กราฟิ กหรื ออักษรที่เคลื่อนไหว อาจทาให้เว็บไซต์
น่าสนใจแต่ขณะเดียวกันอาจรบกวนสายตาและสร้างความราคาญให้กบั
ผูใ้ ช้
◦ การใช้เลือกสี พ้นื หลังและตัวอักษรที่ฉูดฉาดก็มีผลในทานองเดียวกัน
◦ ลองดูเว็บบ.ใหญ่ๆ เช่น IBM, Microsoft

องค์ประกอบการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ


ความสม่าเสมอ (Consistency)
◦ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งสไตล์ของกราฟิ ก ระบบเนวิเก
ชัน (Navigation) โทนสี ฯลฯ หากสิ่ งเหล่านี้ต่างกันมากผูใ้ ช้จะสับสนว่า
อยูใ่ นเว็บไซต์เดียวกันหรื อไม่



ความเป็ นเอกลักษณ์ (Identity)
◦ การออแบบต้องคานึงถึงลักษณะขององค์กร เช่น เว็บไซต์ของธนาคาร
ไม่ควรดูเหมือนสวนสนุก การใช้ชุดสี ชนิดตัวอักษร รู ปภาพกราฟิ ก
ต้องมีความเหมาะสม

องค์ประกอบการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ


เนื้อหาที่มีประโยชน์ (Useful Content)
◦ เนื้อหาถือเป็ นสิ่ งที่สาคัญที่สุด คือ ต้องเป็ นที่ตอ้ งการของผูใ้ ช้ มีความถูก
ต้อง มีการปรับปรุ งให้ทนั สมัย



ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Navigation)
◦ ใช้กราฟิ กที่สื่อความหมาย มีคาอธิ บาชัดเจน รวมทั้งมีรูปแบบและลาดับ
ของรายการที่สม่าเสมอ เช่น วางไว้ตาแหน่งเดียวกันทุกหน้า

องค์ประกอบการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ


มีลกั ษณะที่น่าสนใจ (Visual Appeal)
◦ คุณภาพกราฟิ กต้องสมบูรณ์ ใช้ชนิดตัวอักษรที่อ่านง่าย สบายตา ใช้
โทนสี ที่เข้ากันอย่างสวยงาม



การใช้งานอย่างไม่จากัด (Compatibility)
◦ ไม่มีการบังคับให้ผใู ้ ช้ตอ้ งติดตั้งโปรแกรมเพิม่ เติม หรื อใช้ browser
ชนิดใดโดยเฉพาะสาหรับดู
◦ แสดงผลได้ในทุกระบบปฏิบตั ิการ และแสดงผลได้ในทุกความละเอียด
อย่างไม่มีปัญหา

องค์ประกอบการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ


คุณภาพในการออกแบบ (Design Stability)
◦ หากออกแบบไม่ดี เมื่อมีขอ้ มูลเพิ่มขึ้นก็จะเกิดปั ญหา ไม่สามารถสร้าง
ความน่าเชื่อถือจากผูใ้ ช้ได้



ระบบการใช้งานที่ถูกต้อง (Functional Stability)
◦ ระบบต่างๆใช้งานได้อย่างไม่มีปัญหา
◦ Link ต่างๆใช้งานได้จริ ง

ขนาดของหน้ าโฮมเพจ


ขนาดของหน้าโฮมเพจที่นิยมใช้กนั มี 2 ขนาด ดังนี้
800x600 pixels
1024x768 pixels (It’s popular)

ส่ วนประกอบสาคัญๆ ในหน้ าโฮมเพจ
ใ น ห น้ า โฮ ม เ พ จ ( ห น้ า แ รก ข อง เ ว็ บ ไ ซต์ ) นั้ น ค ว ร มี
ส่ วนประกอบสาคัญๆ อย่างครบถ้วน เพื่อให้ผชู ้ มเข้ามาใช้งาน
ได้ส ะดวก ซึ่ งหน้า โฮมเพจส่ ว นใหญ่ ม ัก มี ส่ ว นประกอบที่
สาคัญๆดังนี้








โลโก้ (Logo)
เมนูหลัก (Link Menu)
โฆษณา (Banner)
ภาพประกอบและเนื้อหา (content)

Logo


โลโก้มีประโยชน์อย่างไร
◦ ช่วยทาให้ผชู ้ มสามารถจดจาเว็บไซต์ของเราได้
◦ ทาให้เว็บไซต์ดูมีเอกลักษณ์



คุณค่าของการวางตาแหน่งโลโก้ (Logo Placement Value)
◦ บนซ้าย (Upper Left) = 84 %
◦ บนขวา (Upper Right) = 6 %



บนกลาง (Upper Center) = 6 %
ที่อื่นๆ (Others Position) = 4 %

การออกแบบโลโก้จะเน้นไปในทางด้านการออกแบบให้เรี ยบง่ายและ
สามารถอ่านชื่อเว็บไซต์ได้ชดั เจน

Logo

www.youtube.com

www.sanook.com

www.ksc.net

www.yahoo.com

www.google.co.th

www.yousendit.com

www.ebay.com

www.toyota.com

www.psu.ac.th

Link Menu


เมนูหลักเป็ นจุดเชื่อมโยงสิ่ งสาคัญๆ ที่รวบรวมไว้ในรู ปแบบของ
ปุ่ มหรื อข้อความ โดยผูเ้ ข้าชมจะสามารถรับรู ้ได้ว่าภายในเว็บไซต์
มีเรื่ องราวที่น่าสนใจอย่างไรบ้าง เช่น News, Shopping, Link เป็ น
ต้น รู ปแบบของเมนูหลักที่นิยมใช้กนั มักเป็ นเมนูแบบแนวตั้งและ
เมนูแบบแนวนอนตามลาดับ

Link Menu

Top bar menu

Link Menu

Side bar menu

Banner




เว็บไซต์ที่มีโฆษณาจะช่วยส่ งเสริ มภาพลักษณ์ ความน่าเชื่อถือ และช่วย
กระตุน้ ความสนใจเพราะมักมีการใช้ภาพเคลื่อนไหว (Gif Animation)
ประกอบซึ่งจะทาให้เว็บไซต์ดูตื่นตาตื่นใจมากขึ้น
จากการวิจยั การใช้ภาพเคลื่อนไหวทาให้เว็บไซต์ดูน่าสนใจมากขึ้นถึง
30 % เลยที เดี ยว แต่ไม่ควรให้มีโฆษณามากเกิ นไปและ ควรจัด
ตาแหน่งให้เหมาะสม

Banner

Content
เนื้อหาสาระที่น่ารู ้เป็ นส่ วนสาคัญอย่างยิง่ ที่จะทาให้ผเู ้ ข้าชมเข้ามา
ใช้บริ การอย่างสม่าเสมอ มีรูปแบบการจัดวางที่อ่านง่าย เนื้อหาไม่
ยาวหรื อสั้นจนเกินไป นอกจากนี้แล้วหากมีการใช้ภาพประกอบที่
สวยงามก็จะช่วยให้เนื้อหาดึงดูดใจมากยิง่ ขึ้น
 จากการวิ จ ัย พบว่ า การใช้ ภ าพและเนื้ อ หาที่ เ หมาะสม จะท า
เว็บไซต์น่าสนใจมากขึ้น 40-45 %


รู ปแบบการใช้ งานของหน้ าโฮมเพจ


รู ปแบบการใช้งานของหน้าโฮมเพจ ที่พบเห็นโดยทัว่ ไปแบ่งได้
เป็ น 3 รู ปแบบดังนี้

1
แบบ 1 ส่วนการใช้งานหรื อแบบอิสระ

1

2
แบบ 2 ส่วนการใช้งาน

1

2
แบบ 3 ส่วนการใช้งาน

3

รู ปแบบการใช้ งานของหน้ าโฮมเพจ
ในส่ วนการแบ่งพื้นที่ 1 ส่ วนหรื อแบบอิสระนั้น มักพบในเว็บไซต์ที่เน้น
การออกแบบให้สวยงามมากกว่าเน้นการใช้งาน และมักมีการออกแบบที่
สลับซับซ้อน
 สาหรับการแบ่งพื้นที่แบบ 2 ส่ วนและ 3 ส่ วน มักพบว่าเป็ นเว็บไซต์ของ
องค์กรและเว็บไซต์ขนาดใหญ่ เนื่องจากเป็ นรู ปแบบที่ใช้งานง่าย และมี
การแบ่งสัดส่ วนการใช้งานที่ชดั เจน


เลือกใช้ สีให้ เหมาะสม


การเลือกใช้สีมีผลอย่างมากในภาพรวมของเว็บไซต์ เนื่ องจากแต่ละสี น้ นั มี
ผลต่ออารมณ์และ ความรู ้สึกกับผูใ้ ช้ ดังนั้นจึงควรเลือกใช้สีให้เหมาะสมกับ
เว็บไซต์ ซึ่งแต่ละโทนสี กจ็ ะให้ความหมายและความรู ้สึกที่ต่างกัน เช่น

เลือกใช้ สีให้ เหมาะสม
◦ สี ฟ้า

ทาให้รู้สึกปลอดโปร่ ง เป็ นสี ที่ดูแล้วสบายตา นุ่มนวล

www.theloft.com.sg

เลือกใช้ สีให้ เหมาะสม
◦ สี น้ าเงิน

ทาให้รู้สึกถึงความจริ งจัง มัน่ คง สงบและ ปลอดภัย หรู หรา มีระดับ

www.hondacity4u.com

เลือกใช้ สีให้ เหมาะสม
◦ สี เขียว

ทาให้รู้สึกสดชื่นเย็นสบาย ธรรมชาติ สบายตา

www.midori-japan.co.jp

เลือกใช้ สีให้ เหมาะสม
◦ สี แดง

ทาให้รู้สึกร้อนแรง รุ นแรง มีพลัง ตื่นเต้น สนุกสนาน

www.manutd.com

ตัวอย่างการใช้ สีในเว็บไซต์
•สี เหลือง+ส้ม ทาให้รู้สึกสดใส ดึงดูดสายตา มีชีวิตชีวา ดูทนั สมัย

www.nothing.ch

ตัวอย่างการใช้ สีในเว็บไซต์
•สี เทา

ทาให้รู้สึกสุ ภาพ สุ ขมุ สงบ มัน่ คง

www.podspeakers.com

ตัวอย่างการใช้ สีในเว็บไซต์
•สี ขาว

ทาให้รู้สึกเรี ยบง่าย สะอาดสะอ้าน โล่งสบาย บริ สุทธิ์

www.bkkmenu.com

เลือกใช้ ตวั หนังสือให้ เหมาะสม


แต่ละแบบตัวหนังสื อจะให้ความรู ้สึกที่ต่างกัน เช่น
◦ แบบ Serif ให้ความรู้สึกของความคลาสสิ ค และเป็ นทางการ

◦ ABCDEFGH
◦ แบบ San Serif ให้ความรู ้สึกเรี ยบง่าย ทันสมัยและอ่านง่าย

◦ ABCDEFGH
◦ แบบ Script ให้ความรู ้สึกสนุกสนาน ไม่เป็ นทางการ เหมาะกับคาสั้นๆ
◦ ABCDEFGHI

เลือกใช้ ตวั หนังสือให้ เหมาะสม





แบบมีหวั ให้ความรู ้สึกเป็ นทางการ อ่านง่าย เหมาะกับบทความยาวๆ
วิชา เทคโนโลยีสารสนเทศและการจัดการ
แบบไม่มีหวั ให้ความรู ้สึกทันสมัย อ่านยาก เหมาะกับคาสั้นๆ
วิชา เทคโนโลยีสารสนเทศและการจัดการ

สามารถใช้ งานได้ อย่างเหมาะสม


พยายามออกแบบเว็บไซต์ให้สามารถใช้งานได้ง่าย เนื่องจากเว็บไซต์
ที่มีการใช้งานที่สลับซับซ้อนอาจทาให้ผใู ้ ช้รู้สึกหงุดหงิดและไม่อยาก
กลับมาใช้งานได้

สามารถแสดงผลได้ อย่างรวดเร็ว


การใช้ภ าพหรื อกราฟิ กประกอบ ควรจะคานึ งถึ งระยะเวลาในการ
แสดงผลเว็บ ไซต์ด้ว ย ยิ่ ง มี ภ าพประกอบมากก็ จ ะเสี ย เวลาในการ
แสดงผล มากตามไปด้วย

การใช้ สี


แม่สีและการผสมสี

วงล้อสี (Color Wheel)

ชุดสี ร้อน
ชุดสี เย็น

การใช้ชุดสี


ชุดสีแบบสีเดียว

การใช้ชุดสี


ชุดสีที่คล้ ายคลึงกัน

การใช้ชุดสี


ชุดสีตรงข้ าม

การใช้ชุดสี


ชุดสีตรงข้ ามข้ างเคียง

การใช้ชุดสี


ชุดสีตรงข้ ามข้ างเคียง 2 ด้ าน

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close