หลักการออกแบบเว็บเพจ

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

การสร้างลำดับความสำคัญขององค์ประกอบ [กลับไปด้านบน]

ในเว็บเพจหนึ่งหน้าควรมีการแบ่งลำดับขั้นความสำคัญของส่วนประกอบต่างให้เป็นลำดับขั้นว่าสิ่งใดสำคัญมากหรือน้อยกว่าสิ่งใด เพื่อการออกแบบจะได้เน้นให้ผู้ใช้สังเกตและเข้าถึงสิ่งที่เราต้องการเน้นได้ง่าย ในทางปฏิบัติการเน้นความสำคัญของส่วนประกอบอาจทำได้โดย

ใช้การจัดวางตำแหน่งและลำดับ
สิ่งสำคัญควรปรากฏด้านบนสุด และตามด้วยสิ่งที่รองลงมา หรือสิ่งที่สำคัญกว่าอยู่ทางด้านซ้ายสุดแล้วตามด้วยสิ่งที่รองลงมา

ใช้การกำหนดขนาด
สิ่งที่สำคัญกว่าควรมีขนาดใหญ่กว่าสิ่งที่สำคัญรองลงมา

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

ภาพเคลื่อนไหว
ใช้ภาพเคลื่อนไหวเพื่อดึงดูดความสนใจของผู้ใช้ว่าส่วนนั้นเป็นจุดเน้น

การออกแบบเว็บให้เหมาะสมกับเนื้อหา [กลับไปด้านบน]

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

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

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

สไตล์ – หมายถึงลักษณะการจัดโครงสร้าง ชนิดตัวอักษรที่ใช้ ชุดสีที่ใช้ ควรคำนึงถึงความเหมาะสมกับเนื้อหาด้วย

ควรมีความสม่ำเสมอตลอดทั้งเว็บไซต์ [กลับไปด้านบน]

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

จัดวางส่วนประกอบให้เป็นระเบียบ [กลับไปด้านบน]

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

ใช้รูปภาพประกอบอย่างเหมาะสม [กลับไปด้านบน]

การใช้ภาพประกอบเป็นสื่อที่ให้ความหมายได้ดีกว่าตัวอักษร แต่สิ่งที่เราต้องคำนึงถึงคือภาพที่นำมาใช้นั้นต้องมีความหมายตรงกับเนื้อหา มีความเข้ากันได้กับสไตล์ของเว็บ ขนาดของภาพที่นำมาใช้ไม่ควรใหญ่มาก และไม่ควรใช้มากเกินไป

คำนึงถึงสภาพแวดล้อมในการใช้งาน [กลับไปด้านบน]

ระบบปฏิบัติการ – ระบบปฏิบัติการที่ต่างกันจะส่งผลให้การแสดงเว็บเพจต่อผู้ใช้แตกต่างกันไปด้วย เราควรสำรวจว่าผู้ใช้ของเราใช้ระบบปฏิบัติการใดบ้าง แล้วจึงทำการออกแบบให้รองรับการทำงานของระบบปฏิบัติการเหล่านั้นทั้งหมด

ความละเอียดหน้าจอ – เนื่องจากผู้ใช้สามารถกำหนดความละเอียดในการแสดงผลหน้าจอของตนเองได้จึงทำให้การแสดงผลเว็บของเราอาจไม่ตรงตามที่เราต้องการให้ผู้ใช้เห็น ดังนั้นการออกแบบของเราควรรองรับความละเอียดหน้าจอที่ผู้ใช้ทั่วไปใช้ (800 x 600) หรืออาจมีข้อความแนะนำว่าควรใช้ความละเอียดระดับไหนในการเข้าชม

Browser – Browser แต่ละชนิดอาจจะแสดงผลเว็บเดียวกันไม่เหมือนกันทั้งนี้เนื่องจากการแปลชุดภาษา HTML ที่ต่างกันดังนั้นในการออกแบบเราควรกำหนดว่าเราจะออกแบบให้ทำงานกับ Browser อะไร รุ่นไหน เพื่อให้เราทราบข้อกำหนดว่าเราจะสามารถใช้ลูกเล่นอะไรได้บ้างจึงจะทำให้เว็บทำงานกับ Browser ที่กำหนดได้สมบูรณ์ และแจ้งให้ผู้ใช้ทราบก่อนเข้าชม

การแสดงภาษาและการเลือกตัวอักษร – ปกติการแสดงตัวอักษรในเว็บเพจนั้นผู้ออกแบบสามารถกำหนดรูปแบบของตัวอักษรให้กับข้อความต่างๆได้อย่างอิสระ แต่ในขณะที่เว็บแสดงต่อผู้ใช้นั้นถ้าผู้ใช้ไม่มีตัวชุดอักษรในรูปแบบที่เรากำหนดในเว็บเพจผู้ใช้จะไม่สามารถอ่านข้อความเหล่านั้นได้เลย โดยเฉพาะการทำเว็บที่ใช้ภาษาไทยเราจึงควรระวังเป็นอย่างยิ่ง วิธีการที่นิยมคือการเลือกใช้รูปแบบอักษรที่คาดว่าจะมีในเครื่องคอมพิวเตอร์ของผู้ใช้ทุกคนเช่น Ms Sans Serif สำหรับภาษาไทย หรือ Times New Roman สำหรับภาษาอังกฤษเป็นต้น