พื้นฐานการออกแบบเว็

1. 16/03/55
1
บทที่ 2
พื้นฐานการออกแบบเว็บ
ความหมายของการออกแบบเว็บ
การออก แบบเว็บไซต์นั้นไม่ได้หมายถึงลักษณะหน้าตาของเว็บไซต์
เพียงอย่างเดียว แต่เกี่ยวข้องตั้งแต่การเริ่มต้นกําหนดเป้าหมายของ
เว็บไซต์ ระบุกลุ่มผู้ใช้ การจัดระบบข้อมูล การสร้างระบบเนวิเก
ชัน การออกแบบหน้าเว็บ รวมไปถึงการใช้กราฟิก การเลือกใช้
สี และการจัดรปแบบตัวอักษร นอกจากนั้นยังต้องคํานึงถึงความ
ส และการจดรูปแบบตวอกษร นอกจากนนยงตองคานงถงความ
แตกต่างของสื่อกลางในการแสดงผลเว็บไซต์ด้วย สิ่งเหล่านี้
ได้แก่ ชนิดและรุ่นของบราวเซอร์ ขนาดของหน้าจอมอนิเตอร์ ความ
ละเอียดของสีในระบบ รวมไปถึง Plug-in ชนิดต่าง ๆ ที่ผู้ใช้มี
อยู่ เพื่อให้ผู้ใช้เกิดความสะดวกและความพอใจที่จะท่องไปในเว็บไซต์
นั้น ดังนั้นทุกสิ่งทุกอย่างในเว็บไซต์ทั้งที่คุณมองเห็นและมองไม่เห็น
ล้วนเป็นผล มาจากกระบวนการออกแบบเว็บไซต์ทั้งสิ้น
ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์
เว็บไซต์ แต่ละประเภทต่างมีเป้าหมายและลักษณะที่แตกต่าง
กัน ตัวอย่างเช่น เว็บไซต์ที่เป็น Search Engine ซึ่งเป็นแหล่ง
รวมที่อยู่ของเว็บไซต์ต่าง ๆ ทําหน้าที่เป็นประตูไปสู่เว็บไซต์อื่น
ๆ เว็บไซต์ประเภทนี้มีเป้าหมายที่จะให้ข้อมูลที่ผู้ใช้ต้องการอย่าง
ๆ ู ู
รวดเร็ว และจะมีผู้เข้ามาใช้บริการค้นหาข้อมูลเป็นจํานวนมากใน
แต่ละวัน ดังนั้นสิ่งที่สําคัญในการออกแบบเว็บไซต์ประเภทนี้
ก็คือสามารถแสดงหน้าเว็บ อย่างรวดเร็ว เมื่อผู้ใช้เปิดเข้ามา
และมีระบบสืบค้นข้อมูลที่มีประสิทธิภาพ เพื่อให้ได้ผลลัพธ์
ที่รวดเร็ว
เว็บไซต์ที่เป็น SEARCH ENGINE
ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์
สําหรับเว็บเพื่อความบันเทิงหรือเกี่ยวข้องกับศิลปะ
นั้น ผู้ใช้มักคาดหวังที่จะได้พบกับสิ่งที่น่า
ตื่นเต้น เรื่องราวที่สนุกสนาน เพลิดเพลิน หรืออาจจะ
ไ ้ รี ร้ส ร ่ ้ สํ ั ใ ร
ไดเรยนรูสาระบางอยางบาง ความสาคญในการ
ออกแบบเว็บไซต์เหล่านี้จึงมีมากพอกับเนื้อหาภายใน
เว็บไซต์ ส่วนเว็บทั่วไปที่ให้บริการข้อมูล ซึ่งไม่ได้มี
เป้าหมายที่จะให้ความบันเทิง ควรจะมีการจัดข้อมูล
อย่างเป็นระบบและมีรูปแบบที่เข้าใจง่าย เพื่อทําให้
สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว

2. 16/03/55
2
ออกแบบให้ตรงกับเป้าหมายและลักษณะของ
เว็บไซต์
ส่วนเว็บไซต์ขององค์กรธุรกิจที่มีเป้าหมายเพื่อขาย
สินค้าหรือบริการนั้น ยิ่งจําเป็นต้องให้ความสําคัญกับ
การออกแบบเว็บไซต์เป็นอย่างมาก เพราะผู้ใช้หรือ
้ ั ิ ใ ื้ ิ ้ ื ิ โ
ลูกค้าของคุณจะตดสินใจซือสินค้าหรือบริการ โดยดู
จากสิ่งที่พบเห็นในเว็บไซต์ ซึ่งลักษณะการออกแบบ
ของเว็บไซต์ก็จะสะท้อนถึงภาพลักษณ์ของธุรกิจนั้น จึง
ทําให้เว็บไซต์ที่ได้รับการออกแบบมาอย่างดีสามารถ
สร้างความน่าเชื่อถือและ ดึงดูดความสนใจของผู้ใช้ได้
มากกว่าเว็บไซต์อื่น

3. 16/03/55
3
องค์ประกอบของการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ
1. ความเรียบง่าย (Simplicity)
2. ความสม่ําเสมอ (Consistency)
3. ความเป็นเอกลักษณ์ (identity)
4 เนื้อหาที่มีประโยชน์ (Useful Content)
4. เนอหาทมประโยชน (Useful Content)
5. ระบบ Navigation ที่ใช้ง่าย (User-Friendly Navigation)
6. มีลักษณะที่น่าสนใจ (Visual Appeal)
7. การใช้งานได้อย่างไม่จํากัด (Compatible)
8. คุณภาพการออกแบบ (Design Stability)
9. ระบบการใช้งานที่ถูกต้อง (Functional Stability)
ความเรียบง่าย (Simplicity)
ถ้าลองสํารวจเว็บไซต์ของบริษัทใหญ่ เช่น Adobe, Apple, IBM
จะพบว่าเว็บของบริษัทเหล่านั้นมีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้
งานได้อย่างสะดวก แม้ว่าจะมีข้อมูลในเว็บไซต์นั้นอยู่มากมาย แต่แทบไม่
มีโอกาสเห็นกราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลาซึ่งจะรบกวน
สายตาและสร้างความรําคาญให้แก่ผู้ใช้ นอกจากนั้นยังใช้ชนิดและสีของ
ั ั ไ ่ ิ ไป ิ ั ใ ่ ั ื้ ็ ใ ้
ตัวอักษรไม่มากจนเกินไปจนเกิดความสับสน ในส่วนตัวเนือหาก็จะใช้
ตัวอักษรสีดําบนพื้นสีขาวตามปกติ
สรุปว่าหลักสําคัญของความเรียบง่ายก็คือ การสื่อเนื้อหาถึงผู้ใช้โดย
จํากัดองค์ประกอบเสริมที่เกี่ยวข้องกับการนําเสนอให้เหลือเฉพาะสิ่งที่
จําเป็นเท่านั้น

4. 16/03/55
4
ความสม่ําเสมอ (Consistency)
สามารถสร้างความสม่ําเสมอให้กับเว็บไซต์นั้นได้ โดยใช้รูปแบบ
เดียวกันตลอดทั้งเว็บไซต์ เนื่องจากผู้ใช้จะรู้สึกเหมือนกับว่า เว็บไซต์นั้น
เหมือนสถานที่จริง ถ้าลักษณะของแต่ละหน้าในเว็บเดียวกันนั้นแตกต่าง
กันมาก ผู้ใช้จะเกิดความสับสนและไม่แน่ใจว่ากําลังอยู่ในเว็บไซต์เดิม
ไ ั ั้ ้ ็ โ ่ใ ้
หรือไม่ ดังนันรูปแบบของหน้าเว็บ ระบบ Navigation และโทนสีทีใช้
ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์

5. 16/03/55
5
ความเป็นเอกลักษณ์ (identity)
การออกแบบต้องคํานึงถึงลักษณะขององค์กร เนื่องจากรูปแบบ
ของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์และของลักษณะขององค์กรนั้น
ได้ เว็บไซต์ของธนาคารจึงไม่ควรดูเหมือนกับสวนสนุก การใช้ชุดสี ชนิด
ตัวอักษร รูปภาพกราฟิกจะมีผลต่อรูปแบบของเว็บไซต์อย่างมาก
ู ู
ผู้ออกแบบจึงต้องเลือกใช้องค์ประกอบเหล่านี้อย่างเหมาะสม
เนื้อหาที่มีประโยชน์ (Useful Content)
เนื้อหาถือเป็นสิ่งที่สําคัญที่สุดในเว็บไซต์ ดังนั้น ในเว็บไซต์ควร
จัดเตรียมเนื้อหาและข้อมูลที่ใช้ต้องการให้ถูกต้องและสมบูรณ์ โดย
มีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อย่างสม่ําเสมอ
เนื้อหาที่สําคัญที่สุดคือ เนื้อหาที่สร้างขึ้นมาเองและไม่ซ้ํากับเว็บไซต์
ญ ุ
อื่นๆ เพราะจะเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามาในเว็บไซต์อยู่เสมอ ต่างจากที่
ลิงค์ไปเว็บไซต์อื่น ซึ่งเมื่อผู้ใช้รู้ถึงแหล่งข้อมูลจริงๆ แล้วก็ไม่จําเป็นต้อง
กลับมาที่ลิงค์เหล่านั้นอีก
ระบบ Navigation ที่ใช้ง่าย (User-Friendly Navigation)
ระบบ Navigation เป็นองค์ประกอบที่สําคัญมากของเว็บไซต์จะ
ออกแบบให้ผู้ใช้เข้าใจได้ง่ายและใช้งานสะดวก โดยใช้ภาพกราฟิกที่
สื่อความหมายร่วมกับคําอธิบายที่ชัดเจน รวมทั้งมีรูปแบบและ
ลําดับของรายการที่สม่ําเสมอ เช่น วางไว้ในตําแหน่งเดียวกันของ
ทุกๆ หน้านอกจากนั้นถ้าใช้ระบบ Navigation แบบภาพกราฟิกในส่วน
ของหน้าแล้ว อาจเพิ่มระบบ Navigation ที่เป็นตัวอักษรไว้ตอนท้าย
ของหน้า เพื่อช่วยอํานวยความสะดวกกับผู้ที่สั่ง Browse ไม่ให้
แสดงผลรูปกราฟิกเพื่อความสะดวกรวดเร็วในการดู

6. 16/03/55
6
มีลักษณะที่น่าสนใจ (Visual Appeal)
เป็นเรื่องที่ยากที่จะตัดสินใจว่า ลักษณะหน้าตาของเว็บไซต์แห่ง
ใดแห่งหนึ่งนั้นน่าสนใจหรือไม่ เพราะเกี่ยวข้องกับความชอบของแต่ละ
บุคคล อย่างไรก็ดีหน้าตาของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพ
ขององค์ประกอบต่างๆ เช่น คณภาพของรปภาพกราฟิกที่จะต้อง
ขององคประกอบตางๆ เชน คุณภาพของรูปภาพกราฟกทจะตอง
สมบูรณ์ไม่มีร่องรอยความเสียหายเป็นจุดด่าง หรือมีขอบเป็นบันได
ให้เห็น การใช้ชนิดตัวอักษรที่อ่านง่ายสบายตาและการใช้โทนสีที่เข้า
กันได้อย่างสวยงาม เป็นต้น
http://www.loungelizard.com/

7. 16/03/55
7
20 EXAMPLES OF
BAD WEB DESIGN
From : http://www.topdesignmag.com/20-
examples-of-bad-web-design/

8. 16/03/55
8
การใช้งานได้อย่างไม่จํากัด (Compatible)
ในการออกแบบเว็บไซต์นั้น จะต้องออกแบบให้คนส่วนใหญ่
เข้าถึงได้มากที่สุด โดยไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมใดๆ
เพิ่มเติม หรือต้องเลือกใช้ Browser ชนิดใดชนิดหนึ่งจึงจะสามารถเข้าถึง
เนื้อหาได้ สามารถแสดงผลได้ในทกระบบปฏิบัติการและที่ความละเอียด
เนอหาได สามารถแสดงผลไดในทุกระบบปฏบตการและทความละเอยด
หน้าจอต่างๆ กันได้อย่างไม่มีปัญหา สิ่งเหล่านี้จะมีความสําคัญมากขึ้น
สําหรับเว็บไซต์ที่มีผู้ใช้บริการจํานวนมาก หรือมีกลุ่มเป้าหมายที่
หลากหลาย
คุณภาพการออกแบบ (Design Stability)
ถ้าอยากให้ผู้ใช้รู้สึกว่าเว็บไซต์มีคุณภาพถูกต้อง และเชื่อถือได้ ก็
ควรให้ความสําคัญกับการออกแบบเว็บไซต์เป็นอย่างมาก
เช่นเดียวกันกับสื่อประเภทอื่นๆ ที่ต้องออกแบบและเรียบเรียงเนื้อหา
อย่างรอบคอบ เว็บไซต์ทําขึ้นอย่างลวกๆ ไม่ได้มาตรฐานการ
อยางรอบคอบ เวบไซตทาขนอยางลวกๆ ไมไดมาตรฐานการ
ออกแบบและการจัดระบบข้อมูลนั้น เมื่อมีข้อมูลเพิ่มมากขึ้นเรื่อยๆ
ก็จะเกิดปัญหาและไม่สามารถสร้างความน่าเชื่อถือได้
ระบบการใช้งานที่ถูกต้อง (Functional Stability)
ระบบการทํางานต่างๆ ในเว็บไซต์จะต้องมีความแน่นอนและทํา
หน้าที่ได้อย่างถูกต้องตัวอย่างเช่น ถ้ามีแบบฟอร์มให้ผู้ใช้กรอกข้อมูล
ก็ต้องแน่ใจว่าฟอร์มนั้นสามารถใช้งานได้จริง หรือ อย่างง่ายที่สุดก็
คือลิงค์ต่างๆ ที่มีอย่นั้นต้องเชื่อมโยงไปยังหน้าที่ปรากฏอย่จริงและ
คอลงคตางๆ ทมอยูนนตองเชอมโยงไปยงหนาทปรากฏอยูจรงและ
ถูกต้องด้วยความรับผิดชอบแรกคือการทําให้ระบบเหล่านั้นใช้งานได้จริง
ตั้งแต่หน้าแรกและยังคงต้องเว็บไซต์อื่นที่อาจมีการเปลี่ยนแปลงได้
ตลอดเวลา ซึ่งหน้าที่ตรงนี้จะเป็นของผู้ทดสอบระบบในขั้นตอน Post-
Product หลังจากนี้

9. 16/03/55
9
เ ว็ บ ไ ซ ท์ ข อ ง Apple
Computer เป็นตัวอย่างที่ดีของ
การออกแบบเว็บไซท์ โดยมี
จุดเด่นในเรื่องของรูปแบบที่เป็น
เอกลักษณ์และสัมพันธ์กับ
เอกลกษณและสมพนธกบ
ลั ก ษ ณ ะ ข อ ง ผ ลิ ต ภั ณ ฑ์ ,
ระบบเนวิเกชันที่เข้าใจง่าย, การ
ใช้งานสะดวก และมีกราฟิกที่
สวยงาม น่าสนใจ(Apple,2010)
ความสําคัญของการออกแบบเว็บไซต์
เว็บไซท์เป็นสื่อที่อยู่ในความควบคุมของผู้ใช้โดยสมบูรณ์ เพราะ
ผู้ใช้มีโอกาสที่จะเลือกคลิกและไม่คลิกที่ใดก็ได้ตามความต้องการ และ
สามารถไปยังทุกหนทุกแห่งได้อย่างง่ายดายด้วยการใช้เมาส์คลิกไปตาม
ลิงค์ต่างๆ
ในปัจจบันนี้ นอกจากจะมีเว็บไซท์อย่มากมายแล้วก็ยังมีเว็บไซท์
ในปจจุบนน นอกจากจะมเวบไซทอยูมากมายแลวกยงมเวบไซท
เกิดขึ้นใหม่ทุกวัน ผู้ใช้จึงมีทางเลือกมากขึ้นที่จะเข้าไปทดลองใช้บริการใน
เว็บต่างๆ เพื่อนํามาเปรียบเทียบหาเว็บที่ถูกใจมากที่สุด สิ่งเหล่านี้ล้วนเป็น
ผลมาจากความแตกต่างในการออกแบบเว็บไซท์นั่นเอง
การออกแบบเว็บไซท์จึงมีส่วนสําคัญในการสร้างความประทับใจ
ให้กับผู้ใช้บริการ และทําให้อยากกลับเข้ามาใช้อีกในอนาคต และนอกจาก
จะต้องพัฒนาเว็บให้ดีและมีประโยชน์แล้ว คุณต้องแข่งขันกับเว็บไซท์อื่นที่
ให้บริการเช่นเดียวกับเว็บของคุณในปัจจุบัน
(บริษัท อินเด็กซ์ลิฟวิ่งมอลล์ จํากัด,2010)
สร้างความได้เปรียบเหนือคู่แข่ง
สําหรับเว็บทางธุรกิจยิ่งจําเป็นต้องให้ความสําคัญกับการ
ออกแบบมากขึ้น เนื่องจากพฤติกรรมการใช้จ่ายบนเว็บนั้นมีลักษณะ
ไม่เหมือนกับการซื้อขายทั่วไปที่เราคุ้นเคย ลูกค้าสามารถเข้าไปในเว็บ
ไซท์หลาย ๆแห่งพร้อมกัน เพื่อเปรียบเทียบหาสินค้าและบริการที่ดี
ๆ
ที่สุดเท่าที่จะหาได้ โดยไม่ต้องเกรงใจผู้ขายเหมือนกันในร้านจริง คง
จะห้ามกันไม่ได้ถ้าผู้ใช้จะประเมินค่าของหน่วยงานหรือบริษัทตาม
ลักษณะของเว็บไซท์ที่ได้สัมผัส และมักจะเป็นสิ่งที่เกิดขึ้นบ่อยเสีย
ด้วย จึงเป็นช่องทางที่ร้านค้าขนาดเล็กสามารถออกแบบให้เว็บไซท์มี
ความยิ่งใหญ่และน่าเชื่อถือมากกว่าร้านค้าขนาดใหญ่ก็เป็นได้
ดังนั้นเว็บไซท์ของคุณจึงไม่ควรยอมให้มีการออกแบบที่ดูน่าเชื่อถือน้อย
กว่าคู่แข่งขัน ซึ่งจะทําให้คุณพลาดโอกาสทางธุรกิจไปอย่างน่าเสียดาย
(KangaWeb Technologies Pty Ltd,2005) (New Dream Network, LLC,2010)
เว็บไซท์ 2 แห่งนี้ให้บริการที่เหมือนกันคือให้เช่าพื้นที่
สําหรับเว็บไซท์ แต่มีลักษณะการออกแบบแตกต่างกัน ถ้าเว็บทั้ง 2
แห่งนี้มีราคาและการบริการที่ใกล้เคียงกัน คุณจะเชื่อใจบริษัทไหน
ได้มากกว่ากัน? ถึงแม้ว่าความแตกต่างของเว็บทั้งสองนี้จะไม่
ชัดเจน เพราะผู้ออกแบบของเว็บทั้งสองต่างก็พยายามอย่างดีที่สุด
้
แล้ว แต่สิ่งที่สําคัญนั้นอยู่ที่ว่า เมื่อนํามาเปรียบเทียบกันแล้ว เว็บที่
ดูดีกว่าย่อมมีโอกาสสร้างความประทับใจให้กับลูกค้าได้มากกว่า
เท่านั้นเอง

10. 16/03/55
10
(ND Technology,2010)
(Choon,2007)
(อนันทา,2008)
ตัวอย่างเว็บไซท์เกี่ยวกับเครื่องประดับของไทยหลายแห่งที่มี
การออกแบบแตกต่างกันอย่างมาก ซึ่งจะมีผลต่อความเชื่อถือในตัว
สินค้าและบริษัทแตกต่างกันไป แต่อย่าลืมว่าเมื่อผู้ใช้ต้องการซื้อสินค้า
บางอย่าง พวกเขามักจะเข้าไปในเว็บไซท์หลาย ๆ แห่งเพื่อเปรียบเทียบ
หาคุณภาพและบริการของเว็บไซท์ที่ดีที่สุด จึงทําให้เว็บที่มีการออกแบบ
สอดคล้องกับลักษณะสินค้ามีความได้เปรียบเหนือเว็บอื่นๆ เนื่องจาก
่ ้ ่
เครื่องประดับนั้นมีความเกี่ยวข้องโดยตรงกับความสวยงามและความมี
คุณค่า ดังนั้นเว็บไซท์ประเภทนี้จึงต้องมีรูปแบบที่สวยงามและ
ประณีตตามลักษณะของสินค้า แนวทางในการออกแบบจึงควรให้
ความสําคัญของคุณภาพและความสวยงามของกราฟิกและรูป
สินค้ามากกว่าการแสดงผลที่รวดเร็ว
ความสําเร็จของเว็บไซท์ไม่ได้เกิดจากการที่มีผู้ใช้หน้าใหม่เข้า
มาในเว็บไซท์จํานวนมาก ถ้าผู้ใช้เหล่านั้นเพียงเข้ามาที่หน้าโฮมเพจแล้ว
ก็จากไปโดยไม่ย้อนกลับมาอีก แม้ว่าคุณจะสามารถดึงผู้คนจํานวนมาก
ให้เข้ามาในเว็บได้ด้วยการทุ่มทุนโฆษณาอย่างหนัก แต่ถ้าเว็บไซท์ของ
ุ ุ
คุณไม่มีคุณภาพและการออกแบบที่ดีเพื่อสร้างความประทับใจให้กับ
ผู้ใช้แล้ว พวกเขาก็จะไม่ย้อนกลับเข้ามาดูซ้ําอีก
เหตุผลที่ผู้ใช้ส่วนใหญ่ชอบเข้าไปใช้บริการในบางเว็บไซท์อยู่เป็น
ประจํา (และไม่ยอมไปใช้เว็บไซท์อื่นๆ) อาจแบ่งได้เป็น 4 ข้อใหญ่ๆซึ่งเป็น
พื้นฐานในการออกแบบเว็บไซท์ที่ดี เพราะเป็นปัจจัยสําคัญที่ผู้ใช้ทุกคน
ต้องการจากเว็บไซท์
▶ มีเนื้อหาเป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ
ู
▶ มีการปรับปรุงเพิ่มเติมเนื้อหา และพัฒนาเว็บไซท์อยู่เสมอ
▶ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว
▶ การใช้งานที่สะดวก เข้าใจง่าย
เริ่มต้นออกแบบเว็บไซท์
คุณสามารถใช้โปรแกรมสําเร็จรูปช่วยสร้างเว็บไซท์ได้อย่าง
ง่ายดาย จึงไม่จําเป็นต้องใช้ความรู้ทางภาษา HTML เลย แต่ในความ
เป็นจริงแล้วการพัฒนาเว็บไซท์ที่ดีนั้นต้องอาศัยความรู้และทักษะ
้ ่ ั ่ ื้ ี่ ั HTML
หลายๆด้านร่วมกน เช่น พืนฐานเกียวกบภาษา HTML, ความสามารถ
ในการสร้างและออกแบบกราฟิกได้อย่างเหมาะสม, การจัดระเบียบ
ตัวอักษรและองค์ประกอบต่างๆ หรือการเลือกใช้ชุดสีอย่างเหมาะสม
เป็นต้น

11. 16/03/55
11
ด้วยเหตุนี้ ก่อนที่คุณจะลงมือสร้างเว็บไซท์ก็ควรศึกษาถึง
ขั้นตอนและหลักการออกแบบเว็บไซท์ที่ดีเสียก่อน เพื่อที่จะป้องกันไม่ให้
เกิดข้อผิดพลาดในการออกแบบขึ้น ซึ่งนอกจากจะทําให้ผู้ใช้เกิดความ
สับสนไม่พอใจแล้ว คุณยังต้องกลับมาแก้ไขเว็บเหล่านั้นใหม่อีก
ทีมงานพัฒนาเว็บไซท์
รายละเอียดต่อไปนี้จะช่วยให้คุณทราบถึงตําแหน่ง, หน้าที่ และ
ความสามารถของทีมงาน เพื่อใช้ในการเลือกสรรทีมงานพัฒนาเว็บ
ไซท์ได้อย่างเหมาะสม
Webmaster เป็นตําแหน่งที่มีความรับผิดชอบไม่แน่นอนมากที่สุด
โดยปกติแล้ว webmaster จะเป็นผ้ควบคมในเรื่องของการออกแบบ
โดยปกตแลว webmaster จะเปนผูควบคุมในเรองของการออกแบบ,
เนื้อหา และรายละเอียดทางเทคนิค รวมทั้งเป็นผู้ที่คอยคิดหาวิธีสร้าง
ความน่าสนใจให้กับเว็บไซท์เพื่อให้มีผู้เข้ามาใช้บริการมากๆ บุคคลผู้นี้
ควรมีความรู้เกี่ยวกับกระบวนการออกแบบเว็บไซท์, HTML, Perl, CGI,
JavaScript และ Unix พอสมควร
Information Architect ทําหน้าที่จัดระเบียบข้อมูลและทดสอบ
ประสิทธิภาพในการใช้งาน ตําแหน่งนี้ควรมีความเข้าใจในการจัดระบบ
ข้อมูลและระบบการใช้งานต่างๆ
Designer เป็นผู้ออกแบบลักษณะหน้าตาทั้งหมดของเว็บไซท์ ด้วยการ
ออกแบบกราฟิกและลักษณะต่างๆ ขององค์ประกอบ ควรเป็นผู้ที่มี
ใ โ
ความรู้ทางศิลปะและสามารถใช้โปรแกรมกราฟิกเช่น Photoshop หรือ
Illustrator ได้อย่างคล่องแคล่ว รู้จักวิธีการปรับขนาดไฟล์กราฟิกใน
โปรแกรม Fireworks หรือ ImageReady มีความสามารถในการใช้งาน
โปรแกรมช่วยสร้างเว็บอย่าง Dreamweaver หรือ FrontPage ได้
พอสมควรและถ้ามีพื้นฐานความรู้เกี่ยวกับรูปแบบตัวอักษรหรือ
Typography ก็จะเป็นประโยชน์มาก
HTML and JavaScript Coder รับผิดชอบการสร้างเว็บเพจโดยอาศัย
เครื่องมือ เช่น Dreamweaver, FrontPage หรือ HomeSite ซึ่งจะต้องมี
ความรู้เกี่ยวกับภาษา HTML, Cascading Style Sheets และ JavaScript
เป็นอย่างดี ควรรู้จักวิธีการลดขนาดไฟล์ HTML ให้เล็กลงโดยใช้เทคนิค
ต่างๆ
Developer/programmer เป็นผู้เขียนสคริปต์และโปรแกรมการใช้งาน
ต่างๆภายในเว็บไซท์ ช่วยพัฒนาระบบการทํางานที่มีประโยชน์ให้กับผู้ใช้
และอาจต้องเกี่ยวข้องกับระบบฐานข้อมูล ควรมีความรู้เกี่ยวกับ HTML,
DHTML, JavaScript, internet protocol, database development และ
relational database design
System Administrator ทําหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึง
ฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง สามารถวิเคราะห์และปรับตั้ง
ระบบเพื่อการทํางานที่มีประสิทธิภาพ ควรมีความรู้เกี่ยวกับ routing,
client/server programming และถ้ามีทักษะเกี่ยวกับภาษา Tk, Perl และ
Shell ก็จะเป็นประโยชน์ยิ่งขึ้น
Content Editor / Writer สําหรับเว็บที่มีการผลิตเนื้อหาเองจําเป็นต้องมี
บรรณาธิการกับนักเขียนหรือ content editor และ content writer
รับผิดชอบในการจัดเตรียมเนื้อหาทั้งหมดในเว็บไซท์ ด้วยการสร้างสรรค์
เนื้อหาที่มีประโยชน์และน่าสนใจให้กับผู้ใช้อยู่
โปรแกรมช่วยในการสร้างเว็บ
โปรแกรมช่วยสร้างเว็บมากมายให้คุณเลือกใช้ ทั้งที่เป็นแชร์แวร์
แจกจ่ายให้ใช้ฟรี และที่เป็นโปรแกรมสําเร็จรูปราคาแพง ที่ได้ยินกันบ่อยๆ
ได้แก่ CoffeeCup, Dreamweaver, FrontPage, GoLive, HomeSite,
HotDog Pro, HotMetalPro และ NetObjects Fusion
ต่อไปนี้ขอแนะนําโปรแกรมยอดนิยม 3 อันดับแรกของผู้ออกแบบ
ส่วนใหญ่ในปัจจุบัน ซึ่งก็คือ Dreamweaver, FrontPage และ
HomeSite โดยที่คุณสามารถเลือกใช้โปรแกรมเหล่านี้ได้ตามความ
เหมาะสม เพราะแต่ละโปรแกรมมีลักษณะเด่นและการใช้งานที่แตกต่าง
กันไป ดังรายละเอียดต่อไปนี้

12. 16/03/55
12
Macromedia Dreamweaver
Dreamweaver เป็นโปรแกรมช่วยสร้างเว็บที่ดีที่สุดโปรแกรมหนึ่งในปัจจุบัน
เนื่องจากประสิทธิภาพในการทํางานสูงจึงเป็นที่นิยมในผู้ออกแบบเว็บไซท์ระดับมือ
อาชีพ ผู้ออกแบบสามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ
(Roger,n.d.)
Microsoft FrontPage
FrontPage เป็นโปรแกรมช่วยสร้างเว็บที่เหมาะสําหรับเว็บไซท์ที่มี
เนื้อหาอยู่ในรูปแบบของโปรแกรม Microsoft Office เป็นส่วนใหญ่ โดยคุณ
สามารถเปลี่ยนไฟล์เอกสารที่เป็น Word, Access, และ PowerPoint ให้
เป็นไฟล์ HTML ได้อย่างง่ายดาย ซึ่งเป็นที่นิยมในผู้เริ่มต้นออกแบบเว็บ
ไซท์ที่ไม่ต้องการยุ่งเกี่ยวกับภาษา HTML
(Kuliahgsfame,2007)
MACROMEDIA HOMESITE
โปรแกรม HomeSite มีลักษณะเด่นในด้านที่ช่วยการเขียนโค๊ด
ภาษา HTML ด้วยคุณสมบัติที่เรียนกว่า Tag Insight และ Function
Insight ซึ่งจะแสดง แอตทริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่
คุณกําลังเขียนอยู่
ความผิดพลาดในการออกแบบเว็บไซท์ 10 อันดับแรก
ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม
 ใช้เทคโนโลยีขั้นสูงโดยไม่จําเป็น
ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา
มีที่อยู่เว็บไซท์ที่ซับซ้อน (URL) ยากต่อการจดจําและพิมพ์
ไ ่ ี ื่ ี่ ่ ็ ไ ์ ้ ็
ไม่มีการแสดงชือและทีอยู่ของเว็บไซท์หน้าเว็บเพจ
มีความยาวของหน้ามากเกินไป
ขาดระบบเนวิเกชันที่มีประสิทธิภาพ
ใช้สีของลิงค์ไม่เหมาะสม
ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย
เว็บเพจแสดงผลช้า
ก่อน หลัง
ปรับปรุงเว็บไซท์ให้ก้าวหน้าอยู่เสมอ
(Waybackmachine,n.d.)
 เว็บไซท์ DTAC มีการปรับปรุงรูปแบบที่ดีขึ้นด้วยการเปลี่ยนโครงสร้างหน้าเว็บมีระบบเนวิเกชันชัดเจนและ
เข้าถึงได้ตลอดเวลา, แสดงหัวข้อและชื่อในส่วนต่างๆอย่างชัดเจน และเพิ่มระบบเสิร์ชให้ผู้ใช้ค้นหาข้อมูลที่สนใจ
ได้อย่างรวดเร็ว
(Waybackmachine,n.d.)
 รูปแบบใหม่ของเว็บไซท์นี้ได้ลดจํานวนลิงค์ที่มีอยู่มากมาย มีการแสดงชื่อเว็บไซท์ที่ใหญ่และชัดเจนมากขึ้น
แสดงหัวข้อในส่วนต่างๆ เพิ่มข้อมูลที่น่าสนใจ และจัดระบบข้อมูลใหม่ให้เข้าใจได้ง่ายขึ้น

13. 16/03/55
13
กรณีศึกษา : การพัฒนาเว็บไซท์ อย.
ก่อนปรับปรุง
(Waybackmachine,n.d.)
หลังปรับปรุง
(สํานักงานคณะกรรมการอาหารและยา,2010).
ปัญหาที่สําคัญของการออกแบบเว็บ
สามารถจําแนกระดับความรุนแรงของปัญหาที่เกิดจากการออกแบบ
เว็บออกเป็น 3 ระดับ ดังนี้
ปัญหาที่มีระดับความรุนแรง (High Severity Problems) เป็น
ปัญหาที่ทําให้ผ้ชมเว็บไซต์ขาดความเชื่อมั่นต่อบริษัท และผลักดันให้
ปญหาททาใหผูชมเวบไซตขาดความเชอมนตอบรษท และผลกดนให
เลิกสนใจในผลิตภัณฑ์ของบริษัทออกจากเว็บไซต์นั้น เช่า ธนาคาร
ซึ่งต้องให้ข้อมูลกับลูกค้าเพื่อให้เกิดความเชื่อมั่นและกล้าที่จะนําเงิน
มาลงทุนด้วย
ปัญหาที่มีระดับความรุนแรงปานกลาง (Medium Severity
Problems) เป็นปัญหาที่รบกวนการทํางานของข้อมูล เช่น เว็บเพจ
นั้นมีข้อมูลครบถ้วน เพียงแต่การจัดวางข้อมูลอาจไม่เป็นระเบียบ
หรือขาดความสวยงาม เป็นต้น
ปัญหาที่มีระดับความรนแรงต่ํา (Low Severity Problems)
ปญห ทมระดบคว มรุนแรงต (Low Seve ty ob ems)
เป็นปัญหาเกี่ยวกับรูปลักษณ์ภายนอกของเว็บเพจที่ไม่เกี่ยวข้องกับ
ความบกพร่องของข้อมูล เช่น เว็บเพจนั้นมีข้อมูลครบถ้วน เพียงแต่
จัดวางข้อมูลอาจไม่เป็นระเบียบ หรือ ขาดความสวยงาม เป็นต้น
ตัวอย่างปัญหาที่เกิดจากการออกแบบเว็บที่สําคัญมี
ดังนี้
 ผู้ใช้ไม่สามารถค้นหาข้อมูล
ผู้ใช้ไม่สามารถค้นหาข้อมูลได้ เกิดจากสาเหตุสําคัญหลาย
ประการ ได้แก่ การเก็บรวบรวมข้อมูลสินค้าไม่ครบถ้วนการไม่ยอม
เปิดเผยข้อมูลสินค้า
ู
กราฟิกที่รบกวนการทํางาน
การออกแบบโดยใช้กราฟิกอาจต้องให้พื้นที่ข้อมูลมากขึ้น ยิ่งมี
ไฟล์กราฟิกมากเท่าใด ขนาดของพื้นที่ข้อมูลก็ยิ่งเพิ่มมากขึ้นด้วย ทําให้
การรับส่งข้อมูลต้องใช้เวลานานว่าจะดาวน์โหลดข้อมูลเสร็จ
ระบบนําทางขาดประสิทธิภาพ
“ระบบนําทาง (Navigation System)” เป็นหัวใจหลักในการ
เชื่อมโยงข้อมูลภายในเว็บ และยังเป็นป้ายบอกทางให้ผู้ใช้ไปถึงจุดหมาย
ปลายทางหรือข้อมูลที่ต้องการ ซึ่งถ้าเส้นทางมีความซับซ้อนมาก
การสร้างหน้าเว็บด้วยเฟรม
การสร้างหน้าเว็บด้วยเฟรม (Frame) เป็นปัญหาการออกแบบ
เว็บที่มีมานาน คือ ไม่สามารถระบุ URL ของเฟรมย่อยภายในเฟรมเซ็ต
นั้นได้ทั้งหมด ดังนั้นเมื่อมีการเปลี่ยนเฟรมย่อยภายในหน้าเว็บ

14. 16/03/55
14
การเปลี่ยนสถานะของลิงค์
หน้าเว็บจํานวนมากที่ไม่ได้กําหนดให้มีการเปลี่ยนแปลง
สถานะของลิงค์เชื่อมโยง หน้าเว็บที่ผู้ใช้กําลังเยี่ยมชมอยู่และหน้าเว็บที่
ผ่านการเยี่ยมชมแล้ว ซึ่งสถานะของลิงค์เป็นสิ่งที่ผู้ออกแบบไม่ควร
มองข้าม เพราะจะช่วยป้องกันไม่ให้ผู้ใช้เสียเวลาเยี่ยมชมข้อมูลซ้ําๆ
ใช้ตัวอักษรและการเน้นข้อความที่ไม่เหมาะสม
ตัวอักษรเป็นองค์ประกอบย่อยภายในหน้าเว็บ ที่เป็นพื้นฐาน
การนําเสนอข้อมูล โดยปัญหาที่เกิดจากการใช้ตัวอักษร คือ การ
กําหนดขนาดตัวอักษรไม่เหมาะสม
การปรับปรุงข้อมูลให้ทันสมัย
ผู้ออกแบบจะต้องคอยปรับปรุง (Update) ข้อมูลบนหน้าเว็บทุกครั้ง และ
แจ้งเตือนการปรับปรุงข่าวสารนั้นเสมอ โดยอาจระบุวันเวลาที่มีกรปรับปรุง
เพื่อให้ผู้ใช้ทราบว่าข้อมูลได้ถูกปรับปรุงแล้ว
ประเภทของการออกแบบเว็บไซต์
สามารถทําการจําแนกได้ตามลักษณะต่าง ๆ ดังนี้
ประเภทของเว็บไซต์แยกตามวัตถุประสงค์หลักในการพัฒนาเว็บ
- การพัฒนาเว็บไซต์เพื่อประชาสัมพันธ์องค์กรหรือหน่วยงานให้
เป็นที่ร้จัก
เปนทรูจก
- การพัฒนาเว็บไซต์เพื่อการทําธุรกิจ
- การพัฒนาเว็บไซต์เพื่อเผยแพร่ความรู้
- การพัฒนาเว็บไซต์เพื่อมุ่งเน้นการแลกเปลี่ยนความรู้
- การพัฒนาเว็บไซต์ที่เป็นอี – เลิร์นนิ่งหรือสื่อการสอน
- การพัฒนาเว็บไซต์เพื่อความบันเทิง
- การพัฒนาเว็บเพื่อการสร้างชุมชนออนไลน์
 ประเภทของเว็บแยกตามวิวัฒนาการของเว็บไซต์
- เว็บ 1.0
เว็บ 1.0 เป็นยุคของเว็บไซต์ที่เป็นลักษณะการนําเสนอเนื้อหา
ผ่านเว็บไซต์เพียงด้านเดียว
ผานเวบไซตเพยงดานเดยว
- เว็บ 2.0
เว็บ 2.0 เป็นยุคของการใช้เว็บไซต์ในการสร้างเครือข่ายสังคม
(Social Network) นั่น คือ ผู้เข้าชมเว็บสามารถแสดงออกซึ่งความ
คิดเห็น มีการแลกเปลี่ยนความรู้และประการณ์กันมากยิ่งขึ้น
- เว็บ 3.0
เป็นลักษณะของการเน้นการสื่อสารระหว่างเครื่อง
คอมพิวเตอร์กับเครื่องคอมพิวเตอร์ด้วยกัน (Machine to
machine)
 หลักการออกแบบและพัฒนาเว็บไซต์
สิ่งที่ต้องพิจารณาในการออกแบบและพัฒนาเว็บไซต์
- สงทตองพจารณาในการออกแบบและพฒนาเวบไซต
- สิ่งกําหนดเบื้องต้น ประกอบด้วย
- ความต้องการของผู้ใช้งานเว็บไซต์
- ระดับของเทคโนโลยีที่ผู้ใช้เว็บจะใช้ในการ
เข้าชมเว็บไซต์
- เป้าหมายที่จะพัฒนาเว็บไซต์ เพื่อ
- เพื่อเป็นเว็บไซต์ส่วนตัว
- เพื่อเป็นช่องทางในการทําธุรกิจ
- เซิร์ฟเวอร์ที่เก็บข้อมูลเว็บไซต์ จะเป็นที่ใด
- เป็นเซิร์ฟเวอร์ของผู้ให้บริการอินเทอร์เน็ต เชิง
พาณิชย์
- เป็นเซิร์ฟเวอร์ของสถานศึกษา

15. 16/03/55
15
- ประเภทของเนื้อหา เป็นแบบใด
- ข้อความ
- กราฟิก
- วิดีโอ
- เสียง
แอนิเมชั่น
- แอนเมชน
- ฟอร์มรับข้อมูล
- ข้อมูลที่ควรต้องมีในหน้าโฮมเพจ
- เนื้อหาที่จะปรากฏบนเว็บไซต์
ลักษณะของการออกแบบและพัฒนาเว็บไซต์
- เว็บไซต์ที่เน้นการใช้ประโยชน์จากเนื้อหลัก (Usability)
- เว็บไซต์ที่เน้นการใช้มัลติมีเดีย (Multimedia)
- เว็บไซต์ที่รวมการใช้ประโยชน์จากเนื้อหาและการใช้มัลติมีเดีย
ร่วมกัน