หน้าเว็บไซต์

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

1. เลือกเว็บไซต์ที่จะทำ
1.1 ชื่อเว็บไซต์
1.2 ข้อมูล ภาพรวมของเว็บไซต์
1.3 ปัญหาที่เกี่ยวกับการออกแบบเว็บไซต์
1.4 จุดมุ่งหมายของเว็บไซต์ (จากปัญหา)
1.5 กลุ่มเป้าหมาย
- ด้านกายภาพ
- ด้านจิตภาพ
- ด้านรสนิยม
1.6 แนวความคิด
1.7 อารมณ์และความรู้สึก เป็นลักษณะการเสนอบุคลิกภาพของเว็บไซต์


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


เว็บไซต์พอดีหน้า

เว็ปแนวนอน

ตัวอย่าง เว็ปแนวนอน

ขนาดของหน้าเว็ป :1600 *800 px
การจัดวางตำแหน่งของ LOGO เนื้อหา ภาพประกอบ
ส่วนหัว : LoveBento - This what we love
ส่วนกลาง : เมนูทางด้านซ้ายสุด ,ข้อความ ,รูปภาพ ทำการแบ่งเนื้อหาต่างๆเป็นบล็อคๆเรียงในแนวนอนจากด้านซ้ายไปขวา
ตำแหน่งของเมนู : อยู่ทางด้านซ้ายของเว็ป
ลักษณะของเมนู : เป็นรูปแบบตัวอักษร แนวเฉียงลง45องศา

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

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

- ขนาดของเวป 1024*768

- การจัดวางตำแหน่งของ LOGO

- เนื้อหาภาพประกอบส่วนหัว ชื่อเว็ป,หน้าหลัก,เกม,ท่องเที่ยว,ข่าวดารา,โหลดรูป,ลดราคา,

ฟรีเว็ป,มือถือ,ฟุตบอล,ติดต่อเรา

- ส่วนกลาง มีรูปภาพ,ข้อมูลต่าง ๆ

- ส่วนล่าง เว็ปมาใหม่,เว็ปเด่น,เพิ่มรายชื่อ,แจ้งลบ,แก้ไขเว็ปตำแหน่งข้อมูล

- Navigation Bar อยู่ด้านบนสุดลักษณะของเมนู

- แบบตัวอักษรการแบ่งหมวดหมู่ ชื่อเว็ป,หน้าหลัก,เกม,ท่องเที่ยว,ข่าวดารา,โหลดรูป,ลดราคา,ฟรีเว็ป,มือถือ,ฟุตบอล,ติดต่อเรา

3.หลักการใช้สีสำหรับการออกแบบเว็บไซต์

3.1 จำนวนของสีหลัก

3.2 การใช้สีพื้นหลัง

3.3 โทนสีโดยรวม

3.4 สีกับหมวดหมู่



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

4.1 สีของตัวอักษร ในเว็บควรจะใช้สีไร ตัวอักษร เช่น เข้ม กลาง อ่อน พื้นหลัง อ่อน/กาง , เข้ม/อ่อน,เข้ม/กลาง

4.2 ลักษณะตัวอักษร html(CSS) ,Font MS sanser,Font Arial,Font Geneva,ขนาด14-20 pt,หนา/เอียง,กะพริบ

4.3 จำนวนภาพกราฟิก คือ ภาพที่อยู่บทเว็บไซต์ 1ภาพ,1เสียง

4.4 ตำแหน่งในการวางภาพ

4.5 ขนาดของภาพ ไฟล์รูปภาพ JPEG,GIFเป็นภาพลายเส้น



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

5.1 การใช้ภาพเคลื่อนไหว มีส่วนของ LOGO Animatd มันต้องมี Intractive เช่น ปุ่ม แทบนำทาง ใช้ในส่วนของหน้าเว็บ แบบ Intro ใช้ Flash ทำภาพเคลื่อนไปในเนื้อหาไหวขึ้นมาก่อนที่จะเข้า

5.2 การใช้วิดีโอคลิป

5.3 การใช้เสียง

ภัยเงียบจากโลกไซเบอร์

วงจรสี

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

วงจรสี The coler Wheel

the color wheel is a simple andeffctive way to present concepts and terms
related to the study and use of color.

แม่สี

สีขั้นที่ 2

สีขั้นที่ 3

+ Hue = ฮิว = เนื้อสี หรือ ตัวสี

+ Saturation = แซดทูเรชั่น = ความเข้มของสี ความจัดของสี
+ Value = น้ำหนักของสี (สว่างหรือมืด)

Color of infinite variety can be created by altering the effects of three variables :
hub , saturation and value.

ระบบของสี + CMYK ใช้กับสิ่งพิมพ์ต่าง ๆ แม่สีด้วยกันทั้งหมด 4 สี คือ
Cyan น้ำเงิน , Magenta แดง , Yellow เหลือง , Black ดำ

Tints ความเข้มของสี แบ่งเป็น %
Combinning CMYK เวลาพิมพ์จะใช้พิมพ์สีทับกันทำให้เกิดสีใหม่ (100m, 100y)

+ RGB แม่สีทั้งหมด 3 สี คือ Red แดง , Green เขียว , Blue ฟ้า
Combinning แบบใช้แสงของหลอดภาพมารวมกัน เช่น 141r , 145g , 32b

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

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

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

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

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

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

FONT คนรักหัวควาย