การใช้สื่อประสม สำหรับออกแบบเว็บไซต์

- การใช้ภาพเคลื่อนไหว
ใช้เพื่อสร้างสีสันในส่วนของโลโก้ (LOGO Animated)
Interactive คลิกแร้วใหญ่ขึ้น อยู่ที่ปุ่มต่างๆ แถบเมนูนำทาง
วิเคราะห์ว่าเว็บมีภาพเคลื่อนไหวมั้ย มีลักษณะอย่างไร
- การใช้วีดีโอคลิป
- การใช้เสียง
เว็บที่เกี่ยวกับข่าว หรือไม่เกี่ยวกับบันเทิงก็ไม่ควรมี
แบ่งตามลักษณะหมวดหมู่ด้วย

การใช้ตัวอักษร และภาพกราฟฟิก

- สีของตัวอักษร
เข้ม พื้น อ่อน/กลาง
กลาง พื้น เข้ม/อ่อน
อ่อน พื้น เข้ม/กลาง
- ลักษณะตัวอักษร
html (css) การกำหนดสีด้วยภาษาคอมพิวเตอร์ โดยการเขียนโปรแกรม
ฟอนต์มาตรฐานที่ใช้กับหน้าเว็บ Ms san serif , Arial , Geneva , Helvetija 14-20 pt
ซึ่งอ่านง่าย
ถ้าเป็นหัวข้ออาจกำหนดความเด่นชัด เช่น หนา เอียง ขีดเส้นใต้ ตัวกระพิบ
- จำนวนของภาพกราฟฟิก
ภาพที่ใช้ประกอบในเว็บไซต์
ขึ้นอยู่กับความเหมาะสมของเนื้อหา
อาจเป็นการใช้กับภาพหนึ่งภาพ เช่น หนึ่งภาพหนึ่งเรื่อง
- ตำแหน่งในการวางภาพ
ควรจะอยู่ด้านซ้าย ขวา หรือกลาง ขึ้นอยู่กับเนื้อหาของเรา
มองจากซ้ายไปขวา
- ขนาดของภาพ
JPEG , GIF

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

หลักการใช้สีสำหรับการออกแบบเว็บไซต์
1. จำนวนจองสีหลัก
สีหลัก ให้เลือกตาม Concept + Mood Tone หรือ Theme เพื่อแสดงให้ถึงภาพลักษณ์
2. การใช้สีพื้นหลัง
ภาพ ลวดลาย สี
3. โทนสีโดยรวม
โทนร้อน โทนเย็น
4. สีกับหมวดหมู่
หมวดข่าว บันเทิง
อยู่ลักษณะเนื้อหาของหมวดหมู่

การออกแบบมัลติมีเดีย (เว็บไซต์)

1. ชื่อโครงการ เช่น โครงการออกแบบเว็บไซต์เพื่อสร้างเครือข่าย
2. ข้อมูลและภาพรวม เช่น ที่มา ความเป็นมา ความสำคัญ
3. ปัญหา เกิดความไม่น่าสนใจของโครงการ เช่น มีผู้เข้าชมเว็บลดน้อยลง
4. จุดมุ่งหมาย ออกแบบเว็บไซต์เพื่อเผยแพร่ข้อมูล PR สร้างภาพลักษณ์ที่ดี
5. กลุ่มเป้าหมาย ให้ระบุสองด้าน เช่น กลุ่มเป้าหมายของสถานีโทรทัศน์ เป็นชายหรือหญิง มีอายุเท่าไหร่ สถานะภาพ นิสัย รสนิยม
6. แนวความคิด
7. อารมณ์ความรู้สึก หรือ บุคลิกของงาน หรือ คีย์เวิร์ด
8. รูปแบบและการนำเสนอ ให้ร่างหน้าเว็บไซต์
8.1 ลักษณะโครงสร้างของหน้าเว็บ แนวตั้ง แนวนอน พอดีหน้าจอ
8.2 ขนาดหน้าจอ 800*600 1024*768
8.3 การจัดวางตำแหน่ง
1. ส่วนหัว วิเคราะห์โครงสร้างหน้าเว็บ เช่น ส่วนหัวจะประกอบไปด้วย โลโก้ ชื่อเว็บ เมนู หรือระบบนำทาง(Navigatino Bar) มีหลายแบบ เช่น ตัวอักษร (Hyperlink หรือ Hypertext) ป้ายโฆษณาบนเว็บ(Web Banner) บอกด้วยว่าอยู่ตำแหน่งใด
2. ส่วนเนื้อหา ช่วงกลางของเว็บไซต์ การจัดวางตัวอักษร อาจมีภาพประกอบ มีเนื้อหาเกี่ยวกับอะไร อธิบายว่ามีอะไรบ้าง
3. ส่วนท้าย อาจมีข้อมูลเพิ่มเติม ระบบนำทาง ลิขสิทธิ์ ติดต่อผู้ดูแล
4. ตำแหน่งของเมนู ที่เหมาะสม บนสุด กับล่างสุด หรือเมนูย่อยที่อยู่ด้านข้าง เช่น ในเว็บไซต์นี้มีตำแหน่งเมนูที่อยู่ด้านซ้าย เพื่อให้อ่านง่าย
5. ลักษณะของเมนู อาจเป็นตัวอักษร ภาพ Drop-Down Roll-Over
6. การแบ่งหมวดหมู่ของเมนู
- หมวดข่าว
- หมวดรายการ

แบบเว็บไซต์

Logo

โครงการคลิปวีดีโอส่งประกวดเรื่อง "ภัยร้ายจากโลกไซเบอร์"

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

3.หลักการใช้สีสำหรับการออกแบบเว็บไซต์
3.1 จำนวนของสีหลัก
3.2 การใช้สีพื้นหลัง

- ภาพ
-ลวดลาย
-สี
3.3 โทนสีโดยรวม 

-โทนร้อน
-โทนเย็น
3.4 สีกับหมวดหมู่

4. การใช้ตัวอักษรและภาพกราฟฟิก
4.1 สีของตัวอักษร

- เข้ม
- กลาง
- อ่อน
4.2 ลักษณะตัวอักษร
4.3 จำนวนของภาพกราฟฟิก
4.4 ตำแหน่งการวางภาพ
4.5 ขนาดของภาพ

5. การใช้สื่อประสม สำหรับออกแบบเว็บไซต์
5.1 การใช้ภาพเคลื่อนไหว   

-ใช้เพื่อสร้างสีสันในส่วนของโลโก้ (LOGO Animated) Interactive คลิกแร้วใหญ่ขึ้น อยู่ที่ปุ่มต่างๆ แถบ เมนูนำทาง วิเคราะห์ว่าเว็บมีภาพเคลื่อนไหวมั้ย มีลักษณะอย่างไร
5.2 การใช้วีดีโอ
5.3 การใช้เสียง 

-เว็บที่เกี่ยวกับข่าว หรือไม่เกี่ยวกับบันเทิงก็ไม่ควรมีแบ่งตามลักษณะหมวดหมู่ด้วย

เว็บไซต์

ลักษณะโครงสร้างของหน้าเว็บไซต์ แบบพอดีหน้าจอ

ขนาด 1024 * 768

การจัดวางตำแหน่ง

-ส่วนหัว

มีโลโก้ และมีชื่อเว็บอยู่ด้านล่างโลโก้

-ส่วนกลาง

มีลิงก์ให้สมัครสมาชิก ที่เป็นตัวอักษร (Hypertext)

-ส่วนล่าง

มีป้ายโฆษณา (Web Banner) อยู่กึ่งกลาง
 


ลักษณะโครงสร้างของหน้าเว็บไซต์ แบบแนวตั้ง

ขนาด 800 * 600

การจัดวางตำแหน่ง

-ส่วนหัว

โลโก้อยู่มุมบนซ้ายมือ ถัดลงมามีรายละเอียดเกี่ยวกับเว็บไซต์

ด้านบนกลางมีปุ่ม Search

- ส่วนกลางกึ่งกลางมีเนื้อหาของเว็บไซต์

ลักษณะโครงสร้างของหน้าเว็บไซต์ แบบแนวนอน

ขนาด 1024 * 768

การจัดวางตำแหน่ง

- ส่วนหัว
มีโลโก้ อยู่ด้านข้างซ้าย

ด้านบนมีเมนูเป็นตัวอักษร (Hyperlink)

กึ่งกลาง มีชื่อเว็บไซต์

- ส่วนกลาง

กึ่งกลางมีเนื้อหาของเว็บไซต์

ด้านล่างมีรายละเอียดเกี่ยวกับเว็บไซต์

มีปุ่ม Search

 

แถบสี

องค์ประกอบการออกแบบ

องค์ประกอบการออกแบบ (ELEMENT OF DESIGN)วงจรสี The Color Wheel

คือ การใช้แม่สีมาผสมกัน จนกลายเป็นสีใหม่

มี 3 ขั้น

1. PRIMARY

2. TERTIARY

3. SECONDARY

คำศัพท์ที่เกี่ยวกับสี

การกำหนดค่าของสี

- Hue เนื้อสี

- Saturation ความจัดจ้านของสี

- Value คือ ค่าน้ำหนักของสี

C M Y K

ระบบสี CMYK เป็นระบบสีที่ใช้กับเครื่องพิมพ์ CMYK ย่อมาจาก cyan (ฟ้าอมเขียว) magenta (แดงอมม่วง) yellow (เหลือง) key (ดำ) ซึ่งเป็นชื่อสีที่นำมาใช้ การผสมสีทั้งสี่นี้ จะทำให้เกิดสีได้อีกหลายร้อยสี นำมาใช้ในการพิมพ์สีต่าง ๆ

R G B

RGB ย่อมาจาก red, green และ blue คือ กระบวนการผสมสีจากแม่สี 3 สี คือสีแดง สีเขียว และสีน้ำเงิน การใช้สัดส่วนของสี 3 สีนี้ต่างกัน จะทำให้เกิดสีต่างๆ ได้อีกมากมาย

ระบบสี RGB เป็นระบบสีที่เกิดจากการรวมกันของแสงสีแดง เขียว และน้ำเงินโดยมีการรวมกันแบบ Additive ซึ่งโดยปกติจะนำไปใช้ในจอภาพแบบ CRT (Cathode ray tube) ในการใช้งานระบบสี RGB ยังมีการสร้างมาตรฐานที่แตกต่างกันออกไปที่นิยมใช้งานได้แต่ RGBCIE และ RGBNTSC

หลักการเลือกสี

COLOR COMBINATION

- MONOCHROMATIC

การใช้สี สีเดียว แต่ให้แตกต่างด้วยการเลือกระดับความสว่าง - ความมืดของสี

-TRIADS

การใช้สี 3 สีที่อยู่ตรงข้ามกัน ควรทดลองใช้หลายรูปแบบ เพื่อสร้างความแตกต่าง

ANALOGOUS

การใช้สีใกล้เคียงกัน โดยเลือกจากสีที่อยู่ถัดไปอีก 2- สามารถสร้างความกลมกลืนได้ดี

COMPLEMENTARY

การใช้ที่ตรงข้ามกัน สามารถช่วยเน้นความโดดเด่นได้ดี ควรใช้สีดำหรือเทา เพื่อลดความรุนแรงของสี

นอกจากนั้นการใช้สี 2 สีที่แตกต่างกันมากจะ ทำให้มีความสำคัญเท่ากัน ดังนั้นจึงควรลดความเข้มของสีหนึ่งลง

SPLIT-COMPLEMENTS

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

รูปแบบของ Font 4 แบบ

องค์ประกอบการออกแบบ (Element of design )

 The Color Wheel (วงจรสี)

การแบ่งสีตามหลักการ

สีขั้นที่ 1 คือ แดง น้ำเงิน เหลือง

สีขั้นที่ 2 คือ เกิดจากการนำสีขั้นที่ 2 มาผสมกัน

สีขั้นที่ 3 คือ การน้ำสีขั้นที่ 2 และ 1 มาผสมเข้าด้วยกัน

Hue – ความแตกต่างของสีบริสุทธิ์แต่ละสี ซึ่งเราจะเรียกเป็นชื่อสี เช่น สีแดง สีน้ำตาล สีม่วง เป็นต้น โดยแบ่ง            เนื้อสีออกเป็น 2 ชนิด

Saturation – ความเข้มของสี, ความจัดของสี

Value – ค่าน้ำหนักของสี

สี (Color)

1 CMYK คือ ระบบการพิมแบบระบบ 4 สี CMYK ย่อมาจาก cyan (ฟ้าอมเขียว) magenta (แดงอมม่วง) yellow (เหลือง) key (ดำ) ซึ่งเป็นชื่อสีที่นำมาใช้ การผสมสีทั้งสี่นี้ จะทำให้เกิดสีได้อีกหลายร้อยสี นำมาใช้ในการพิมพ์สีต่าง ๆ

2 RGB คือ กระบวนการผสมสีจากแม่สี 3 สี คือสีแดง สีเขียว และสีน้ำเงิน การใช้สัดส่วนของสี 3 สีนี้ต่างกัน จะทำให้เกิดสีต่างๆ ได้อีกมากมาย

หลักการเลือกสี (COLOR COMINATION)

MONOCHROMATIC คือ การใช้สีเดียวเพื่อสร้างความแตกต่างด้วยการเล่นระดับสี

TRIEADS คือ การใช้สี 3 สี ที่อยู่ตรงข้ามกันเพื่อสร้างความแตกของสี

ANALOGOUS คือ การใช้สีที่อยู่ติดกันบนวงจรสี ช่วยสร้างความกลมกลืน

COMPLEMENTARY คือ การใช้สีแบบดูเด่นๆ เป็นสีที่ตรงข้ามกันโดยสิ้นเชิงในวงจรสี

SPLT-COMPLEMENTS คือ การใช้แบบผสมผสาน ใช้สีที่เป็นโทนร้อนและโทนเย็น