หลักการใช้สีสำหรับการออกแบบ web

3.2 การใช้สีพื้นหลัง มีทั้งแบบเป็นภาพ สีพื้น หรือเป็นลวดลาย
3.3 โทนสีโดยรวม โทนร้อนและโทนเย็น
3.4 สีกับหมวด ถ้าเป็นหน้าเวปไซด์ที่เกี่ยวกับข่าวสารสาระ ควรจะใช้สีในโทนที่เข้มๆ เพื่อให้ดูแบบน่าเชื่อถือ ตรงข้ามกับข่าวบันเทิง ทีจะใช้สีทีสดใส

ลักษณะของเมนู

หน้าเว็บแนวนอน

- ตัวอักษร
- ไอคอน

หน้าเว็บแนวตั้ง

- ตัวอักษร
- ไอคอน
- Dropdown
- รูปไอคอน
- ภาพนิ่ง
- ภาพเคลื่อนไหว
- Roll-Over


การจัดวางตำแหน่งของโลโก้ , เนื้อหา , ภาพ

หน้าเว็บแนวนอน

ส่วนหัว
- ชื่อเว็บ
- Logo หน้าเว็บ
- แถบ Login
- โฆษณา
- ปุ่มไอคอนต่าง ๆ
- แถบค้นหาข้อมูล
ส่วนเนื้อหา
- ข้อมูลต่าง ๆ
- รูปภาพ
- ข่าวสารต่าง ๆ
- ไอคอนข้อมูลต่าง ๆ
ส่วนท้าย
- ข้อมูลเพิ่มเติม
- ความคิดเห็น
- เว็บลิงค์ต่าง ๆ
- โฆษณา


ตำแหน่งของเมนู

หน้าเว็บแนวนอน

- แถบเมนู อยู่ ตรงกลางทางซ้ายของหน้าเว็บ

หน้าเว็บแนวตั้ง

- แถบเมนู อยู่ ส่วนบนของหน้าเว็บ
ส่วนตรงกลางทางซ้ายของหน้าเว็บ
ทางซ้ายของหน้าเว็บ
ส่วนท้ายของหน้าเว็บ

ลักษณะโครงสร้างเวปไซด์

ลักษณะโครงสร้างหน้าเวปไซด์

โครงสร้างหน้าเว็ปแบบแนวตั้ง

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





โครงสร้างหน้าเวปแบบสมดุล ขนาด 800*600

จะมีการจัดเนื้อหาพื้นที่พอดีโดยไม่ต้องมีสโครลบาร์ ซึ่งเหมาะกับเว็ป
ที่มีข้อมูลไม่มากนัก สามารถมองเห็นทุกส่วนของหน้าเว็ปได้ทั้งหมด




โครงสร้างหน้าเวปแบบแนวนอน

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

องค์ประกอบสี

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

ก่อนอื่นเรามารู้จักองค์ประกอบของสีกันก่อน
องค์ประกอบของสีในงานออกแบบนั้น มีคุณสมบัติอยู่ 3 ประการคือ
1. สี,เนี้อสี (Hue)
2. น้ำหนักสี (Value / Brightness)
3. ความสดของสี (Intensity / Saturation)

สี, เนื้อสี, ตัวสี Hue

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

1. สีของแสง (Coloured Light)
สีของแสง คือความแตกต่างสั้นยาวของคลื่นแสงที่เรามองเห็น เริ่มจากสีม่วงไปสีแดง
(เหมือนรุ่งกินน้ำที่เรามองเห็นหลังฝนตก)

2. สีของสาร (Coloured Pigment)
สีของสาร คือสีที่เรามองเห็นบนวัตถุต่าง ๆ ซึ่งเกิดจากการดูดซืมและสะท้อนของความ
ยาวคลื่นแสง

น้ำหนักสี Value

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

ความสดของสี Intensity / Saturation

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

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

1.Monochrome

Monochrome หรือโครงสีเอกรงค์ คือมีเนื้อสี Hue เดียว แต่ให้ความแตกต่างด้วยน้ำหนักสี
Value สีเอกรงค์นี้ ให้อารมณ์ ความรู้สึก สุขุม เรียบร้อยเป็นสากล ไม่ฉูดฉาดสะดุดตา และในด้าน
การออกแบบเป็นการใช้คู่สีที่ง่ายที่สุด แล้วออกมาดูดี เลือกแค่สีเดียวแล้วนำมาผสมขาว ผสมดำ หรือ
ปรับค่าความสว่าง Brightmess เพื่อเปลี่ยนน้ำหนักสี Analogus

2.Triads

Triads หรือโครงสี 3 สี คือ
1. เป็นการใช้สี 3 สี ในช่วงห่างระหว่างสีทั้ง 3 เท่ากัน ถ้าเราลากเส้นระหว่างสีทั้ง 3 สี
เราจะได้สามเหลี่ยมด้านเท่า
2. เป็นการใช้สี 3 สี ในช่วงห่างระหว่างสีทั้ง 3 ไม่เท่ากันคือมีช่วงห่าง 2 ช่วงเท่ากัน แต่
กับอีกอันหนึ่งช่วงห่างจะยาวกว่า ถ้าลากเส้นระหว่างสีแล้วจะได้สามเหลี่ยมหน้าจั่ว

3.Analogus

Analogus หรือโครงสีข้างเคียง คือสีที่อยู่ติดกัน อยู่ข้างเคียงกัน ในวงจรสี จะเป็น
ที่ละ 2 หรือ 3 หรือ 4 สีก็ได้ แต่ไม่ควรมากกว่านี้เพราสีอาจจะหลุดจากความข้างเคียง หรือ
หลุดออกจากโครงสีนี้ได้

4. Complementary Colors

หมายถึง สีสองสีที่อยู่ตรงข้ามกันบนวงจรสี ให้ความรู้สึกที่ขัดแย้งกันอย่างรุนแรง มี 6 คู่คือ
1. เหลือง (Yellow) กับ ม่วง(Violet)
2. แดง (Red) กับ เขียว(Green)
3. น้ำเงิน (Blue) กับ ส้ม(Orange)
4. ส้มเหลือง(Yellow-Orange) กับ ม่วงน้ำเงิน (Blue-Green)
5. ส้มแดง (Red-Orange) กับ เขียวน้ำเงิน (Blue-Green)
6. เขียวเหลือง (Yellow-Green) กับ ม่วงแดง (Red-Violet)



5. Split Complementary

หมายถึงการใช้สีหนึ่งกับสี สองสีที่อยู่ข้างสีคู่ตรงข้ามกันสองสี (โดยไม่ใช้สีคู่ตรงข้าม
ของ สีนั้น) เป็นการใช้สีที่ลดการ ตัดกันหรือลดความขัดแย้งกันอย่างรุนแรง
สีเหลือง ใช้กับ สีม่วงแดง - สีม่วงน้ำเงิน (ไม่ใช้สีม่วง)
สีแดง ใช้กับ สีเขียวเหลือง - สีเขียวน้ำเงิน (ไม่ใช่สีเขียว)
สีน้ำเงิน ใช้กับ สีส้มแดง - สีส้มเหลือง (ไม่ใช้สีส้ม)