วันศุกร์ที่ 8 ตุลาคม พ.ศ. 2553

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

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องศา

วันศุกร์ที่ 1 ตุลาคม พ.ศ. 2553

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

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






- ขนาดของเวป 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 การใช้เสียง