หลักในการออกแบบเว็บไซต์

งานนำเสนอเรื่อง: "หลักในการออกแบบเว็บไซต์"— ใบสำเนางานนำเสนอ:

1 หลักในการออกแบบเว็บไซต์
สร้างลำดับชั้นความสำคัญขององค์ประกอบ สร้างรูปแบบ บุคลิก และสไตล์ สร้างความสม่ำเสมอตลอดทั้งไซต์ จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ สร้างจุดสนใจด้วยความแตกต่าง จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย ใช้กราฟิกอย่างเหมาะสม

2 สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี
1. ความแปลก ความแตกต่าง (Contrast) คือแยกความแตกต่างที่อยู่บนจอภาพให้เห็นชัดเจน เช่นการใช้ตัวหนังสือ เส้น สี ขนาด ฯลฯ เพราะจะสามารถดึงดูดความสนใจได้ดี 2.  การย้ำซ้ำ (Repetition) คือแบบแผนหรือสไตล์ของผู้ออกแบบ จะต้องมีลักษณะรูปแบบ สอดคล้องกันทั้งหมด

3 สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี(ต่อ)
3. การจัดแถว การวางแนว (Alignment) คือ การจัดวางองค์ประกอบต่าง ๆ ต้องไม่สะเปะสะปะ ไร้เหตุผล ไม่ขัดกับความรู้สึก ของผู้อ่าน จัดให้ดูสะอาด 4. ความใกล้เคียง ความเกี่ยวเนื่อง (Proximity) คือ การจัดวางองค์ประกอบที่เกี่ยวเนื่องกัน ให้เป็นกลุ่มก้อนเดียวกัน

4 องค์ประกอบของการออกแบบเว็บไซต์
1. ความเรียบง่าย 2. ความสม่ำเสมอ 3. ความเป็นเอกลักษณ์ 4. เนื้อหาที่มีประโยชน์ 5. ระบบเนวิเกชันที่ใช้งานง่าย 6.ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ

5 องค์ประกอบของการออกแบบเว็บไซต์ (ต่อ)
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด 8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ 9.ระบบการใช้งานที่ถูกต้อง การใช้แบบฟอร์มสำหรับกรอกข้อมูลต้องสามารถกรอกได้จริง ใช้งานได้จริง

6 กระบวนการสร้างและออกแบบเว็บเพจ
1. การวางแผน (Planning) ผู้สร้างเว็บจะต้องรวบรวมข้อมูลที่ต้องการจะนำมาสร้างเว็บ กำหนดวัตถุประสงค์และกลุ่มเป้าหมาย 2. การออกแบบ (Design) การลงมือปฏิบัติ จัดพิมพ์เนื้อหา และคุณลักษณะอื่นที่ต้องใช้ในเว็บ การออกแบบก็จะเน้นที่การจัดหน้าจอของเว็บให้สอดคล้องกัน 3. การพัฒนา (Development) เน้นไปที่การตกแต่งและเสริมเครื่องมือต่าง ๆ สำหรับเว็บ

7 กระบวนการสร้างและออกแบบเว็บเพจ
4. การติดตั้ง (Publishing) การนำเว็บที่ได้สร้างขึ้นเข้าไปติดตั้งในเว็บเซอร์เวอร์เพื่อให้แสดงผลได้ในระบบอินเทอร์เน็ต หรือจะเรียกว่า การอับโหลด (Up load)   5. การบำรุงรักษา (Maintenance) เป็นขั้นตอนประเมินผลและติดตามผลการติดตั้งเว็บไซต์ว่ามีข้อขัดข้องหรือต้องปรับปรุงเปลี่ยนแปลงเว็บเพิ่มเติมให้ทันสมัยอยู่เสมอ อาจจะเรียกได้ว่าขั้นตอนการอับเดท (Up date)

8 หลักเกณฑ์ในการเลือกภาพ Graphic
ขนาดไฟล์ไม่ควรเกิน 80 กิโลไบต์ เพื่อความรวดเร็วในการแสดงผล ใช้ไฟล์แบบ JPEG สำหรับรูปถ่าย หรือรูปที่มีสีเกิน 256 สี ใช้ไฟล์แบบ GIF สำหรับภาพวาดหรือภาพการ์ตูนที่มีสีไม่เกิน 256 สี เลือกภาพที่มีความน่าสนใจและดึงดูด เพื่อไม่ให้เสียเวลาที่เสียไปในการ Download ภาพเปล่าประโยชน์

9 ไฟล์ภาพกราฟิกที่นำมาใช้ในการทำเว็บ
ไฟล์ฟอร์แมต JPG, JPEG ไฟล์ฟอร์แมต GIF ไฟล์ฟอร์แมต PNG

10 ขั้นตอนการพัฒนาเว็บเพจ
วางแผนการพัฒนาเว็บเพจ กำหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ สร้างภาพ หรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหา แล้วจัดเก็บไว้ในไดเร็กทรอรี่ที่สร้างไว้ สร้างเอกสารเว็บ โดยกำหนดชื่อไฟล์เอกสารเว็บ ตามข้อกำหนดของผู้ดูแลระบบเครือข่าย (Web System Administrator) และจัดเก็บไว้ในไดเร็กทรอรี่ที่สร้างไว้ ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์ ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทำการตรวจสอบผลการเรียกดูจากเครื่องแม่ข่าย

11 ขั้นตอนการพัฒนาเว็บไซต์
(1) สำรวจและวางแผนการสร้างเว็บไซต์ กำหนดเป้าหมายของเว็บไซต์ กำหนดกลุ่มผู้ใช้งานเว็บไซต์ กำหนดความสามารถของเว็บไซต์ (2) กำหนดขอบเขตเนื้อหา

12 ขั้นตอนการพัฒนาเว็บไซต์
(3) กำหนดโครงสร้างเว็บไซต์

13 ขั้นตอนการพัฒนาเว็บไซต์
(4) การกำหนดการเชื่อมโยงเว็บเพจ

14 ขั้นตอนการพัฒนาเว็บไซต์
(5) การตั้งชื่อไฟล์และโฟลเดอร์ 1. การสร้างโฟลเดอร์ 2. การตั้งชื่อไฟล์

15 การกำหนดชื่อไฟล์ และนามสกุลของไฟล์เอกสารเว็บ
ควรใช้ตัวอักษร a - z หรือตัวเลข หรือผสมกัน ตัวอักษร a - z ควรเป็นตัวพิมพ์เล็ก ห้ามตั้งชื่อไฟล์เป็นภาษาไทย ชื่อไฟล์แรกของเอกสารเว็บ มักจะใช้ชื่อ index หรือ default

16 ขั้นตอนการพัฒนาเว็บไซต์
(5) ออกแบบหน้าเว็บเพจ (6) ดำเนินการสร้างและใช้งานเว็บไซต์

17 ตัวอย่างการออกแบบหน้าจอ