nattacha: กรกฎาคม 2012

หลักการออกแบบ (Web designing)

1. ความหมายเว็บ (Web)
งานออกแบบเว็บกลายเป็ นส่วนหนึ่งในชีวิตประจําวันของคนหลายคน และมีจํานวนมาก
ขึ้นเรื่อย ๆ สิ่งหนึ่งที่เป็นปัจจัยหลักในการสร้างเว็บก็คือ ความสวยงาม มีการสํารวจกันว่า การ
ออกแบบหน้าตาของเว็บ (Web Interface Design) ได้ดีและน่าสนใจ จะมีอิทธิพลต่อการดึงดูดใจ
ผู้ท่องอินเทอร์เน็ตให้เข้าชมเว็บของเรา ดังนั้นอาชีพนักออกแบบเว็บ จึงเป็นที่ต้องการของ
ตลาดแรงงานเป็นอย่างมาก

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

ประโยชน์และความสําคัญของเว็บสามารถสรุปได้ดังนี้

1. เป็นสื่อออิเล็กทรอนิกส์ทางอินเทอร์เน็ต ใช้เพืออการโฆษณา ประชาสัมพันธ์ ให้ข้อมูลข่าวสาร
และสร้างภาพลักษณ์ที่ดีแก่องค์กร
2. สามารถนํามาใช้เป็นร้านค้าออนไลน์เพืออจําหน่ายสินค้าและบริการ

3. มีประสิทธิภาพในการสืออสาร เข้าถึงกลุ่มเป้าหมายได้ทั่วโลก
4. เสียค่าใช้จ่ายในการผลิตตํ่ากว่าสื่ออื่นๆ แต่มีอายุการใช้งานยาวนาน
5. กลุ่มเป้าหมายสามารถเข้าถึงสื่อได้โดยสะดวกและรวดเร็วผ่านอินเทอร์เน็ตได้ตลอดเวลา

โปรแกรมที่ใช้ในการออกแบบและพัฒนาเว็บ

- Macromedia DreamweaverCS3 สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัย
เครื่องมือต่าง ๆ โดยไม่จําเป็ นต้องรู้เกี่ยวกับภาษา HTML มีหน้าจอในการแสดงผลหน้าจอการ
ออกแบบและหน้าจอคําสั่งทํางานจากรูปภาพแล้วแปลงไปเป็นโค้ดคําสั่งได้ทันที

- Microsoft FrontPageลักษณะการทํางานใกล้เคียงกับโปรแกรมอื่น ๆ ที่อยู่ ในชุด Office มี
ระบบอํานวยความสะดวกแบบ Wizard
- Allaire HomeSite ช่วยในการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติที่เรียกว่า Tag Insight
และ Function Insight ซึ่งจะแสดงแอตตริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กําลังเขียน
เหมาะสําหรับนักออกแบบเว็บที่ถนัดในการใช้ภาษา HTML

- NetObjects Fusionลักษณะการทํางานใกล้เคียงกับโปรแกรมทั่วไปด้านการออกแบบ
กราฟิก หรือออบเจ็ค จะมีระบบอํานวยความสะดวกแบบ Wizard ช่วยในการทํางานอย่างง่าย

- EditPlus คือ text editor ตัวหนึ่งที่ใช้ในการพัฒนาสคริปต์โปรแกรมต่าง ๆ ไม่ว่าจะเป็น
HTML, PHP,JAVA ซึ่งเป็นเครื่องมือที่เขียนโค้ดคําสั่งต่าง ๆ

ประเภทของเว็บ

1 ประเภทส่วนตัว
2 ประเภทบันเทิง
3 ประเภทให้ความรู้
4 ประเภทให้บริการ
5 ประเภทค้นหาข้อมูล

องค์ประกอบทั่วไปของเว็บ

1โลโก้(Logo) คือสิ่งหนึ่งที่จําเป็นของเว็บที่ควรจะมี เพราะจะบ่งบอกถึงความเป็ นเอกลักษณ์หรือ
ตัวแทนของเว็บ

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

3 ส่วนเมนูหลัก(Link Menu) เมนูหลักหรือลิงค์ เป็นจุดเชื่อมโยงไปสู่ส่วนของเนื้อหาเว็บไซต์
ส่วนมากจะเป็นแนวตั้งด้านซ้ายของเว็บ แต่แนวนอนก็มี หรือบางครั้งอาจจะเป็ นปุ่มก็ได้

4 ส่วนเนื้อหา (Body) คือส่วนที่ใช้ในการแสดงเนื้อหา โดยจะประกอบไปด้วยข้อความ รูปภาพ

หรือวีดีโอ ฯลฯ การวางเนื้อหาให้ดี น่าเข้าชม จะต้องมีการจัดวางอย่างเป็นหมวดหมู่ เป็นสัดส่วน
โดยใช้ตาราง หรือใช้เลเยอร์ เป็นเครื่องมือช่วยในการสร้างให้เป็นระเบียบ

5 ส่วนล่างสุด (Footer) เป็ นส่วนที่อยู่ด้านล่างสุดของเว็บไซต์ ส่วนมากจะเป็น ลิขสิทธิ์
คําแนะนําในการเข้าชมเว็บไซต์ หรือทีอยู่ สําหรับติดต่อกลับ เป็นต้น

6 แบนเนอร์(Banner) เป็นส่วนประชาสัมพันธ์ หรือไว้สําหรับเช่าพื่นที่โฆษณา ส่วนมากจะเป็น
ภาพเคลื่อนไหว เพื่อดึงดูดใจผู้เข้าชมเว็บไซต์

การแบ่งพื้นที่ให้กับเว็บเพจ

การแบ่งพื้นที่ของแต่ละเว็บเพจ สามารถแบ่งได้ดังนี้
1 Logo สัญลักษณ์หรือ สื่อแทนองค์กร
2 Header ส่วนหัวสําหรับออกแบบกราฟิกหรือภาพเคลื่อนไหว
3 Body ส่วนเนื้อหา เพื่อนําเข้าสู่รายละเอียดต่าง ๆ
4 Menu ส่วนสําหรับลิงค์ไปยังเนื้อหาต่าง ๆ
5 Footer ส่วนท้ายบอกลิขสิทธิ์ หรือที่อยู่สําหรับติดต่อกลับ

หลักการออกแบบเว็บ (Web Design Principle)

1. มีการออกแบบโครงสร้างที่ดี
2. มีการออกแบบหน้าของเว็บที่ดี
3. มีการกําหนดเป้าหมายของเว็บที่ชัดเจน

มาตรฐานในการออกแบบเว็บ

1 ความเรียบง่าย(Simplicity)
2 ความเป็นเอกลักษณ์(Identity)
3 เนื้อหามีประโยชน์และทันสมัย (Useful And Update Content)
4 มีความสม่ําเสมอ มาตรฐานเดียวกัน (Consistency Standard Theme)
5 มีคุณภาพและมาตรฐานในการออกแบบ (Design Stability)

สาเหตุการออกแบบเว็บไซต์ที่ไม่ประสบความสําเร็จ

1 การแสดงผลช้า (Slow Display)
2 ข้อมูลเก่า ไม่ทันสมัย(No Update Data)
3 ใช้เทคโนโลยีสูงโดยไม่จําเป็น(High Technology)
4 ใช้ตัวหนังสือหรือภาพเคลื่อนไหวตลอดเวลา (Dynamic Animations)
5 สีไม่เหมาะสม(No Compatible Color)
6 ชื่อของเว็บยาว ซ้ําซ้อน(Long Name Website)

ข้อมูลหลักที่ควรมีในเว็บ

จากการสํารวจความต้องการของกลุ่มคนทั่วไป ธวัชชัย ศรีสุเทพ (2547) ได้สรุปข้อมูล
หลักที่ควรมีอยู่ในเว็บได้ 5 ส่วน ซึ่งจัดเป็นกลุ่ม ๆ และหมวดหมู่ จากความต้องการพื้นฐานทั่วไป
แต่อย่างไรก็ตามข้อมูลเหล่านี้อาจจะใช้ไม่ได้กับทุก ๆ เว็บไซต์

1 ข้อมูลเกี่ยวกับองค์กร (About the Organization)
2 รายละเอียดผลิตภัณฑ์หรือกิจกรรมต่าง ๆ (Product Information or Activity Personal)
3 ข่าวสารใหม่ ๆ หรือโปรโมชั่นต่าง ๆ (News or Promotion)
4 การมีส่วนร่วม (Cheer And Share)

แนวคิดการสร้างจุดขายให้กับการออกแบบและพัฒนาเว็บ

1 แสวงจุดร่วม สงวนจุดต่าง สรรค์สร้างจุดเด่น
2 สร้างสรรค์ ความครบวงจร
3 คุณภาพและมาตรฐาน

แนวคิดในการออกแบบหน้าเว็บที่ดี (Homepage Design of The Brain)

1 มีความคิดสร้างสรรค์
กล้านําเสนอรูปแบบใหม่ ๆ ที่มีความแตกต่างอย่ายึดติดกับรูปแบบเดิม ๆ เช่นนําระบบมัลติมีเดีย
หรือภาพกราฟิกนําเสนอกลุ่มเป้าหมายต้องชัดเจนกล้านําเสนอจุดเด่นที่แตกต่างอย่างสร้างสรรค์

2 เรียนรู้และออกแบบจากเว็บต่าง ๆ

บางทีการด้อยประสบการณ์ที่ผลึกไปสู่การออกแบบที่ดีเลิศยังน้อยนิด วิธีที่จะเรียนรู้
อย่างรวดเร็วคือการสํารวจเว็บที่ประสบความสําเร็จยอดนิยม ถูกหลักการออกแบบ จากเว็บต่าง ๆ มาผสม ผสาน บูรณาการ นําไปสู่การออกแบบหน้าเว็บอย่างลงตัว