การออกแบบหน้าเว็ปไซด์

1. เว็ปต้นฉบับ

2. ออกแบบใหม่

3. หลักการใช้สี

3. หลักการใช้สี
3.1 จำนวนของสีหลัก (เป็นสีชุดเดียวกัน) à ส่งเสริมภาพลักษณ์
Concept + Meed = Theme
3.2 สีพื้นหลังของเว็ป (เป็นลวดลาย, เป็นภาพ, เป็นสี)
ลวดลายตามความจำเป็น
เป็นภาพไม่รบกวนสายตา
เป็นสีโทนอ่อน
3.3 โทนสี
3.4 สีกับหมวดหมู่ เหมือนกับรสชาติของเว็ปไซด์

ส่วนเพิ่มเติม

สี เป็นการแสดงหรือถ่ายทอดความรู้สึกให้ผู้อื่นรับรู้เปรียบเหมือนสื่อกลางระหว่างผู้สร้างผลงานและผู้ดูผลงาน
1. การเลือกใช้สีแบบวรรณะ ในวงจรสีจำนวน 12 สี มี 2 วรรณะคือ
วรรณะร้อน ประกอบด้วย สีเหลือง ส้มเหลือง ส้ม ส้มแดง แดง ม่วงแดง และม่วง
วรรณะเย็น ประกอบด้วย สีเหลือง เขียวเหลือง เขียว เขียวน้ำเงิน น้ำเงิน ม่วงน้ำเงิน
การใช้สีต่างวรรณะใช้อัตราส่วน 50 : 50 , 60 :40 ., 80 :20
2. การใช้สีคู่ตัดกัน ถ้าเลือกสีคู่ตัดกันอย่างแท้จริงจะทำให้สีฉูดฉาด จึงควรลดความสดใสของสีใดสีหนึ่งลงในอัตราที่เหมาะสมจะทำให้ภาพนั้นดูแล้วไม่ขัดตา
3. การใช้สีโดยการกำหนด โครงการระบายสี คือ การจัดสีรวมกันเป็นหมู่เดียวกัน
4.การใช้สีลักษณะค่าของสี ทำได้ 2 ลักษณะคือ หลายสี โดยเรียงน้ำหนักสีจากอ่อนไปหาแก่ และ สีเดียว แล้วผสมด้วยสีขาวให้เป็นระยะๆ
5. การใช้สีโดเด่น เพื่อสร้างจุดสนใจโดยให้สีใดสีหนึ่งโดดเด่น ที่แวดล้อมด้วยสีหม่น
6. การใช้สีใกล้เคียง คือสีที่เรียงกันอยู่ในวงจรสีที่อยู่ใกล้เคียงกัน เช่น สีเขียว สีเขียวน้ำเงิน สีน้ำเงิน

4. การใช้ตัวอักษร

4. การใช้ตัวอักษร
4.1 สีของตัวอักษร
4.2 ตัวอักษรที่ใช้กับเว็ปไซด์ ควรอยู่ระหว่าง 14-20 point หัวควรเป็นตัวใหญ่ ส่วนเนื้อหาควรเล็กกว่าหน่อย
4.3 จำนวนภาพ ควรมีความเหมาะสมกับเว็ปไซด์
4.4 ตำแหน่งการว่างตำแหน่งภาพ
4.5 ขนาดภาพควรคำนึงถึงการโหลดบนเว็ปไซด์

ส่วนเพิ่มเติม

การใช้ตัวอักษร (Typography)
ในการออกแบบเว็บเพจ สิ่งที่นักออกแบบต้องถูกจำกัดอยู่ประการหนึ่ง คือเรื่องของลักษณะของตัวอักษร ที่จะนำไปใส่ลงในเว็บเพจ เนื่องจากลักษณะของตัวอักษรที่มีให้นักออกแบบนำไปใช้ ได้ถูกจำกัดอยู่ 2 รูปแบบคือ Time Roman ที่เป็นแบบตัวอักษรมาตราฐานใน Netscape กับ Courier (ที่ให้เป็นมาตราฐานใน Microsoft Internet Explorer) ซึ่งในระบบการเขียน HTLM ตัวอักษร Time Roman เป็นตัวอักษรที่ถูกนำขึ้นมาใช้อย่างอัตโนมัติ หากนักออกแบบไม่ได้ระบุว่าต้องการตัวอักษรประเภทใด อย่างไรก็ตามถ้าต้องการใช้ตัวอักษรประเภทอื่น ที่ไม่ใช่ Time Roman แล้ว ตัวอย่างเช่นตัวอักษร Courier ต้องใส่เครื่องหมายคำสั่งลงไปด้วย โดยเครื่องหมายคำสั่งเหล่านี้คือ ,

 หรือ  อย่างใดอย่างหนึ่ง เครื่องหมาย  มักได้รับการใช้ก็ต่อเมื่อไม่ต้องการที่จะคงลักษณะของตัวอักษรไว้หรือ กล่าวคือผู้ชมสามารถเปลี่ยนตัวอักษรให้เป็นไปตามความต้องการของเขาเหล่านั้นได้ แต่ในทางกลับกัน คือ ไม่อยากให้รูปแบบนั้นเปลี่ยน ก็ต้องใช้คำสั่งเป็น 
 นอกจากนี้ สำหรับการกำหนดระยะห่างระหว่างบรรทัด และระยะห่างระหว่างตัวอักษรนั้น จะไม่สามารถกำหนดหรือควบคุมได้          นักออกแบบสามารถใช้ขนาดของตัวอักษรที่ถูกกำหนดมาแล้ว ให้มีลักษณะเป็นตัวเอียง (ltalic) หรือตัวหนาและเอียงได้ และตัวอักษรที่เราใส่ลงไปนั้น ก็สามารถใส่สีลงไปในตัวอักษรนั้นได้ด้วย อย่างไรก็ตามในการให้สีของตัวอักษร ไม่ควรใส่สลับกันมากเกินไป เพราะจะทำให้เว็บเพจที่ออกมามีความสับสน          การแสดงผลของรูปแบบตัวอักษรที่ออกแบบมา อาจแสดงผลออกมาแตกต่างกันไปตามลักษณะของบราวเซอร์แต่ละตัว บางตัวไม่สามารถกำหนดให้ตัวอักษร Time Roman หรือ Courier (2 ตัวอักษรนี้ มักถูกใช้ในการสร้างเว็บเพจ) เป็นตัวอักษรพื้นฐาน(Default)ได้ขณะเดียวกัน ผู้ใช้บางคนก็ได้เปลี่ยนตัวอักษรพื้นฐานเป็นตัวอักษรอื่นๆ นอกจากนี้ ไม่ใช่บราวเซอร์ทุกตัว จะสามารถแสดง ขนาด สี ตลอดจนรูปแบบของตัวอักษรที่เราสร้างขึ้นได้ และใช่ว่าจะมีข้อแตกต่างระหว่างบราวเซอร์ อย่างเดียว ความแตกต่างของระบบก็เป็นข้อควรระวังอีกประเภทหนึ่ง กล่าวคือ ขนาดของตัวอักษรชนิดเดียวกันซึ่งเปิดดูด้วยพีซี จะมีขนาดที่แตกต่างจากแมคอินทอช สำหรับข้อแก้ไขในเรื่องนี้ก็คือ เก็บข้อมูลว่าบราวเซอร์แบบใด ผู้ใช้นิยมมากแล้ว จึงออกแบบให้ใช้ได้กับบราวเซอร์นั้นๆ          ถึงแม้ว่าการสร้างเว็บเพจ จะต้องเผชิญกับข้อจำกัดในเรื่องของรูปแบบตัวอักษรที่จะใช้ แต่ทั้งนี้ด้วยข้อจำกัดของตัวอักษรที่มีอยู่ ก็สามารถนำมาใช้ประโยชน์ได้จาก ความแตกต่างของแบบตัวอักษรทีมีอยู่ แสดงถึงข้อแตกต่าง ระหว่างหัวข้อ วิธีการเรียงหัวข้อ โดยใช้ตัวอักษรที่แตกต่างบนเว็บนั้น สามารถทำได้โดยง่าย เนื่องจากข้อจำกัดที่เคยกล่าวไว้นั้นเอง ทำให้รูปแบบที่จะนำมาใช้มีให้เลือกน้อย การเน้นตัวอักษรให้แตกต่างนั้น อาจใช้สร้างหัวข้อนั้นๆ ให้เป็นรูปภาพ แล้วนำมาประกอบลงในเว็บเพจกได้เช่นกัน





5. การใช้สื่อประสมมัลติมีเดีย

5 การใช้สื่อประสมค์มัลติมีเดีย
5.1 การใช้ภาพ
5.2 การใช้ปุ่ม
5.3 การใช้คลิปบนเว็ป เช่น Youtube, Flash, Add-In
5.4 เสียง

ส่วนเพิ่มเติม

มัลติมีเดีย (อังกฤษ: multimedia) หรือ สื่อประสม หรือ สื่อหลายแบบ เป็นการใช้สื่อในหลายรูปแบบไม่ว่าจะเป็น ข้อความ เสียง รูปภาพ หรือ ภาพเคลื่อนไหว สำหรับให้ข้อมูลความรู้หรือให้ความสำราญต่อผู้ชม
ปัจจุบันความก้าวหน้า ของเทคโนโลยีคอมพิวเตอร์เอื้อให้นักออกแบบสื่อ มัลติมีเดีย สามารถประยุกต์สื่อต่างๆ ให้มารวมกันบนระบบคอมพิวเตอร์ ผู้ใช้ สามารถโต้ตอบกับระบบคอมพิวเตอร์ในรูปแบบต่างๆ กันได้ เทคโนโลยีเหล่านี้ ได้พัฒนาขึ้นพร้อมกับการพัฒนาฮาร์ดแวร์ เช่น การพัฒนาอุปกรณ์ที่ใช้อ่านและ บันทึกข้อมูล การพัฒนาหน่วยความจำให้มีขนาดที่เล็กลงแต่มีความจุมากขึ้น นอกจากนี้ ยังมีการพัฒนาเทคโนโลยีด้านอุปกรณ์ต่อพ่วงสำคัญต่างๆ เพื่อ ให้ติดต่อสื่อสารกับผู้ใช้งาน
มัลติมีเดีย การใช้สื่อมากกว่า 1 สื่อร่วมกันนำเสนอข้อมูลข่าวสาร โดยมีจุดมุ่งหมายให้ ผู้รับสื่อสามารถรับรู้ข่าวสารได้มากกว่า 1 ช่องทาง โดยผ่านการควบคุมการใช้ และโต้ตอบด้วยระบบคอมพิวเตอร์ส่วนบุคคลหรือเครือข่าย ปัจจุบันมีการพัฒนารูปแบบของมัลติมีเดียให้สอดคล้องกับปรัชญาการ เรียนรู้มากขึ้น สื่อประเภทนี้ไม่ได้เป็นเพียงรูปแบบของบทเรียนแบบโปรแกรม ที่ให้เพียงเนื้อหา คำถาม และคำตอบ แต่ได้รับการออกแบบให้เปิดกว้างสำหรับ การสำรวจกระตุ้นให้ผู้เรียนได้คิดค้น สืบค้นมากขึ้น
สื่อมัลติมีเดีย สื่อประสมหรือสื่อหลายแบบที่มีการใช้อุปกรณ์ต่างๆ เพื่อการนำเสนอข้อมูล เป็นหลัก โดยได้มีการออกแบบนำเสนอไว้อย่างเป็นระบบ มัลติมีเดียนั้นได้รวมเอาฮาร์ดแวร์และซอฟต์แวร์ไว้ด้วยกัน จะเน้นส่วนไหน มากน้อยนั้นขึ้นอยู่กับลักษณะการใช้งาน และจะเน้นผลผลิตที่เกิดจากการ นำเสนอข้อมูลหลากลายรูปแบบ เช่น ภาพนิ่ง ภาพเคลื่อนไหว เสียง และข้อความ
เทคโนโลยีมัลติมีเดีย เทคโนโลยีได้เข้ามามีบาทเป็นอย่างสูงสำหรับในยุคนี้ ซึ่งสามารถพิจารณา จากการพัฒนาคอมพิวเตอร์ ไม่ว่าจะเป็นด้านสมรรถนะของซีพียู รวมทั้งประสิทธิ์ภาพของอุปกรณ์ฮาร์ดแวร์และซอฟต์แวร์ในปัจจุบันนี้ ต่างก็พัฒนาขึ้น มาเพื่อรองรับความต้องการของเทคโนโลยีมัลติมีเดียมากขึ้น ตัวอย่างเช่น
1. ความสามารถของโปรเซสเซอร์ที่สามารถปะมวลผลข้อมูลอย่างรวดเร็ว เพื่อรองรับการคำนวณด้านคอมพิวเตอร์กราฟิกที่มีความซับซ้อนมากขึ้น
2. หน่วยความจำในเครื่องที่มีความเร็วสูงขึ้น และเพิ่มขยายได้มากขึ้น
3. การ์ดแสดงผลที่ช่วยให้แสดงภาพได้อย่างรวดเร็วและมีประสิทธิภาพในการแสดงผลสูง
4. จอภาพขนาดใหญ่
5. การ์ดเสียงและลำโพงที่สมบูรณ์แบบเทียบได้กับเครื่องเสียงราคาแพง ๆ
6. อุปกรณ์จัดเก็บข้อมูลที่มีความจุมากขึ้น เช่น ฮาร์ดดิสก์ เป็นต้น