ออกแบบหน้าเว็บไชค์

1.ต้นฉบับ












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

โลโก้

Icon

ICON = ภาพ = สัญรูป

การลดทอน

1. ลด

2. เน้นการนำสัญรูปไปใช้งาน ควรมีการเน้นเส้นให้เหมาะสมกับขนาด

รูปร่าง รูปทรง+องค์ประกอบ

- เครื่องหมายสัญลักษณ์นี้ ประกอบด้วยรูปร่างที่ซ้ำกัน- การจัดวางองค์ประกอบ สามารถจัดวางรูปร่างภายในรูปร่าง- รูปร่างวงกลมจัดวางรวมกับรูปร่างอิสระในตำแหน่ง- รูปร่างต่าง ๆ สามารถจัดวางร่วมกันกับรูปร่างสีต่าง ๆ เป็นพื้นฐานในการสร้างลวดลายหรืองานกราฟิก- รูปร่างที่สื่อความหมายจัดวางบนรูปร่างนามธรรมช่วยส่งเสริมกันแลกันในการจัดวางองค์ประกอบ- การใช้ภาพแทนความหมาย สามารถสร้างจากรูปร่างพื้นฐาน จัดวางองค์ประกอบเพื่อสร้างเป็นสัญรูป และงานกราฟิก

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

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

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

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

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

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)ได้ขณะเดียวกัน ผู้ใช้บางคนก็ได้เปลี่ยนตัวอักษรพื้นฐานเป็นตัวอักษรอื่นๆ นอกจากนี้ ไม่ใช่บราวเซอร์ทุกตัว จะสามารถแสดง ขนาด สี ตลอดจนรูปแบบของตัวอักษรที่เราสร้างขึ้นได้ และใช่ว่าจะมีข้อแตกต่างระหว่างบราวเซอร์ อย่างเดียว ความแตกต่างของระบบก็เป็นข้อควรระวังอีกประเภทหนึ่ง กล่าวคือ ขนาดของตัวอักษรชนิดเดียวกันซึ่งเปิดดูด้วยพีซี จะมีขนาดที่แตกต่างจากแมคอินทอช สำหรับข้อแก้ไขในเรื่องนี้ก็คือ เก็บข้อมูลว่าบราวเซอร์แบบใด ผู้ใช้นิยมมากแล้ว จึงออกแบบให้ใช้ได้กับบราวเซอร์นั้นๆ ถึงแม้ว่าการสร้างเว็บเพจ จะต้องเผชิญกับข้อจำกัดในเรื่องของรูปแบบตัวอักษรที่จะใช้ แต่ทั้งนี้ด้วยข้อจำกัดของตัวอักษรที่มีอยู่ ก็สามารถนำมาใช้ประโยชน์ได้จาก ความแตกต่างของแบบตัวอักษรทีมีอยู่ แสดงถึงข้อแตกต่าง ระหว่างหัวข้อ วิธีการเรียงหัวข้อ โดยใช้ตัวอักษรที่แตกต่างบนเว็บนั้น สามารถทำได้โดยง่าย เนื่องจากข้อจำกัดที่เคยกล่าวไว้นั้นเอง ทำให้รูปแบบที่จะนำมาใช้มีให้เลือกน้อย การเน้นตัวอักษรให้แตกต่างนั้น อาจใช้สร้างหัวข้อนั้นๆ ให้เป็นรูปภาพ แล้วนำมาประกอบลงในเว็บเพจกได้เช่นกัน

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

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. การใช้สีใกล้เคียง คือสีที่เรียงกันอยู่ในวงจรสีที่อยู่ใกล้เคียงกัน เช่น สีเขียว สีเขียวน้ำเงิน สีน้ำเงิน

ส่วนประกอบของเว็ปไซค์

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