การพัฒนาเว็บ
หลักการออกแบบเว็บเพจ หลักการออกแบบ สามารถทำได้หลายระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมาย ที่ต้องการนำเสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่นและนำเสนอข้อมูลเกี่ยวกับ ความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บเพจ ที่หลากหลายให้ลูกเล่นได้มากกว่าเว็บที่นำเสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ www.themegallery.com Company Logo
หลักการออกแบบเว็บเพจ (ต่อ) สามารถแบ่งได้ 3 ลักษณะ 1. แบบลำดับขั้น (Hierarchy) เป็นการจัดแสดงหน้าเว็บ เรียงตามลำดับกิ่งก้านแตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว www.themegallery.com Company Logo
หลักการออกแบบเว็บเพจ (ต่อ) 2. แบบเชิงเส้น (Linear) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว www.themegallery.com Company Logo
หลักการออกแบบเว็บเพจ (ต่อ) 3. แบบผสม (Combination) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้นและแบบเชิงเส้น www.themegallery.com Company Logo
หลักในการออกแบบเว็บไซต์ สร้างลำดับชั้นความสำคัญขององค์ประกอบ สร้างรูปแบบ บุคลิก และสไตล์ สร้างความสม่ำเสมอตลอดทั้งไซต์ จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ สร้างจุดสนใจด้วยความแตกต่าง จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย ใช้กราฟิกอย่างเหมาะสม www.themegallery.com Company Logo
สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี 1. ความแปลก ความแตกต่าง (Contrast) คือแยกความแตกต่างที่อยู่บนจอภาพให้เห็นชัดเจน เช่นการใช้ตัวหนังสือ เส้น สี ขนาด ฯลฯ เพราะจะสามารถดึงดูดความสนใจได้ดี 2. การย้ำซ้ำ (Repetition) คือแบบแผนหรือสไตล์ของผู้ออกแบบ จะต้องมีลักษณะรูปแบบ สอดคล้องกันทั้งหมด www.themegallery.com Company Logo
สิ่งที่ต้องคำนึงถึงในการออกแบบเว็บเพจที่ดี(ต่อ) 3. การจัดแถว การวางแนว (Alignment) คือ การจัดวางองค์ประกอบต่าง ๆ ต้องไม่สะเปะสะปะ ไร้เหตุผล ไม่ขัดกับความรู้สึก ของผู้อ่าน จัดให้ดูสะอาด 4. ความใกล้เคียง ความเกี่ยวเนื่อง (Proximity) คือ การจัดวางองค์ประกอบที่เกี่ยวเนื่องกัน ให้เป็นกลุ่มก้อนเดียวกัน www.themegallery.com Company Logo
องค์ประกอบของการออกแบบเว็บไซต์ 1. ความเรียบง่าย 2. ความสม่ำเสมอ 3. ความเป็นเอกลักษณ์ 4. เนื้อหาที่มีประโยชน์ 5. ระบบเนวิเกชันที่ใช้งานง่าย 6.ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่างๆ www.themegallery.com Company Logo
องค์ประกอบของการออกแบบเว็บไซต์ (ต่อ) 7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด 8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ www.themegallery.com Company Logo
กิจกรรมที่3 คำสั่ง นักเรียนศึกษาวิธีการ แนวทางเกี่ยวกับการวางแผนและออกแบบเว็บไซต์ โดยใช้คำสำคัญ(แนวทางการวางแผนออกแบบสร้างเว็บไซต์) จากนั้น ให้นักเรียน 1) นำเสนอการออกแบบการสร้างเว็บไซต์ (Wordpress) ในคาบเรียน 2) ส่ง mind map ภาพรวมของโครงงาน ด้วยการ Attach File www.themegallery.com Company Logo
ตัวอย่างภาพรวมของโครงงาน www.themegallery.com Company Logo
ตัวอย่างภาพรวมของโครงงาน www.themegallery.com Company Logo
ตัวอย่างภาพรวมของโครงงาน www.themegallery.com Company Logo
ตัวอย่างภาพรวมของโครงงาน www.themegallery.com Company Logo