การแบ่งหมวดหมู่ของหน้าเว็บ

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

My Work
- About me
Contact
- Please feel free to contact me here contact@deanoakley.com or use the form below

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

สนุก
-ค้นหา
-สารบัญเว็บไทย
-ข่าว
-อีเมล์
-หาเพื่อนคิวคิว
-ฟังเพลง
-คลาสสิฟายด์
-ริงโทน
-เล่นเกมส์

สนุกทุกวัน

-Entertainments
--ดูดวง
--ฟังเพลงออนไลน์
--คลิปวิดีโอ
--เกมส์

-Shopping
--คลาสสิฟายด์ ซื้อ–ขาย
--ช้อปปิ้ง
--หาบ้าน
--หารถ
--หางาน
--คูปอง - ส่วนลดพิเศษ

-Community
--เว็บบอร์ด
--หาเพื่อนคิวคิว
--หาคู่ไทยเมท
--นกนก
--แชท

-Services
--แปลศัพท์
--อัลบั้มรูป
--ริงโทน - โหลดเพลง
--เลขเด่น - ดวงสด

-อีเมล์
--Widget - Glitter
--เว็บบนมือถือ
--ท็อปฮิต

-อ่านสนุก
--ข่าว
--ซุบซิบดารา
--ดูทีวี
--หนัง - ละคร
--เพลง - นักร้อง
--ท่องเที่ยว
--วัยรุ่น - วัยเรียน
--เซ็กส์ - ความรัก
--ผู้หญิง
--แม่และเด็ก
--กล้อง - มือถือ
--ฟอร์มูล่าวัน
--รถยนต์
--ไนท์ไลฟ์-Hipkingdom
--กีฬา

-ข่าว

-บันเทิง

-วาไรตี้

-เกมส์-ไอที

-กีฬา

-ฟังเพลงออนไลน์
--เพลงฮิต
--เพลงใหม่

-กิจกรรมชิงรางวัล

-เว็บไซต์แนะนำ

-สารบัญเว็บไทย

-อัตราการแลกเปลี่ยนเงิน

-ราคาน้ำมัน

-ราคาทอง

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

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

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

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

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

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

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

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

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

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

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

หน้าเว็บแนวนอน
ส่วนหัว
- มีชื่อเว็บ
- รูปภาพ
ส่วนเนื้อหา
- มีข้อมูลต่าง ๆ
- มีปุ่มไอคอน
ส่วนท้าย
- รูปภาพต่าง ๆ

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

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

ขนาดหน้าจอของหน้าเว็บ

แนวนอน

- มีขนาด 1024 x 768

แนวตั้ง

- มีขนาด 1024 x 768

ลักษณะโครงสร้างหน้าเว็บ

แนวนอน



แนวตั้ง

LOGO

แบบสีที่ใช้ในตัวอักษร

แบบ 1 สี


แบบ 2 สี


แบบ 3 สี


แบบ 4 สี

แถบรหัสสี

องค์ประกอบการออกแบบ ( Element of Design )
1.สี
แม่สีศิลปะประกอบด้วยสี แดง สีเหลือง และสีน้ำเงิน ซึ่งเมื่อนำแม่สีทั้งสามมาผสมกันในอัตราส่วนต่างๆก็จะเกิดสีขึ้นมามากมายซึ่งประโยชน์ จากการที่เรานำสีมาผสมกันทำให้เรา สามารถเลือกสีต่างๆมาใช้ได้ตามความพอใจสร้างสรรค์ผลงานศิลปะที่งดงามตามความพอใจขอผู้สร้าง สีที่เกิดจากการนำเอาแม่สีมา ผสมกัน เกิดสีใหม่เมื่อนำมาจัดเรียงอย่างเป็นระบบ รวมเรียกว่าวงจรสี

ภาพแสดงวงจรของสีที่เกิดจากการนำแม่สีมาผสมกัน
การเกิดสีดังภาพ เกิดจากการนำเอาแม่สีมาผสมกัน ในอัตราส่วนต่างๆกันซึ่งพอสรุปได้ดังนี้

สีขั้นที่1 (สีขั้นต้นหือแม่สี)(Primary Color) ประกอบด้วย สี แดง สีเหลือง และสีน้ำเงิน

สีขั้นที่ 2 (Binary Color) เกิดจากการนำเอาสีขั้นที่ 1 (แม่สี ) มาผสมในอัตราส่วนเท่าๆกันประกอบด้วยสี เขียว สีส้ม
และสีม่วง
•สีเขียว เกิดจากการนำเอา สีเหลือง กับ สีน้ำเงิน มาผสมกันในอัตราส่วนเท่าๆกัน
•สีส้ม เกิดจากการนำเอา สีเหลือง กับ สีแดง มาผสมกันในอัตราส่วนที่เท่าๆกัน
•สีม่วง เกิดจากการนำเอา สีน้ำเงิน กับ สีแดง มาผสมกันในอัตราส่วนที่เท่าๆกัน

•สีขั้นที่ 3 (Intermediate Color) เกิดจากการนำเอาสีขั้นที่ 2 ผสมกับสีขั้นต้นที่อยู่ใกล้เคียงกันได้สีแตกต่างออกไป
ได้แก่ สีเหลืองแกมเขียว สีน้ำเงินแกมม่วง สีแดงแกมม่วง สีแดงแกมส้ม สีเหลืองแกมส้ม และสีน้ำเงินแกมเขียว
• สีเหลืองแกมเขียว เกิดจาก การผสมกันระหว่างสีเหลืองกับสีเขียวอย่างละเท่าๆกัน
• สีน้ำเงินแกมม่วง เกิดจากการผสมกันระหว่างสีน้ำเงินกับสีม่วงอย่างละเท่าๆกัน
• สีแดงแกมม่วง เกิดจากการผสมกันระหว่างสีแดงกับสีม่วงอย่างละเท่าๆกัน
• สีแดงแกมส้ม เกิดจากการผสมกันระหว่างสีแดงกับสีส้มอย่างละเท่าๆกัน
• สีเหลืองแกมส้ม เกิดจากการผสมกันระหว่างสีเหลืองกับสีส้มอย่างละเท่าๆกัน
• สีน้ำเงินแกมเขียวเกิดจากการผสมกันระหว่างสีน้ำเงินกับสีเขียวอย่างละเท่าๆกัน

การใช้ตัวอักษร (Typography)
Typography : การใช้อักษรหรือการจัดวางตัวอักษร
Font ( Typefaces ) : ชุดรูปแบบของตัวอักษร
Font Families : ตระกลูของชุดแบบอักษร เช่น ตัวธรรมดา ตัวหนา ตัวเอียง

ส่วนประกอบ
1. แบบมีเชิง ( Serlf )
2. แบบไม่มีเชิง ( Sans Serif )
3. แบบแฟชั่น ( Novelty )
4. แบบลายมือ ( Script )
5. แบบตัว ๆ ( Monospace )
6. แบบสัญลักษณ์ ( Dingbat , Ornament )

ขนาดตัวอักษร
มีหน่วยเป็น Points แบบอักษรที่มีความแตกต่างกันที่ขนาด Points ที่ไม่เท่ากัน ไม่จำเป็นต้องมีความสูงเท่ากันก็ได้ เช่น 72 Points เท่ากับ 1 นิ้ว

การจัดตำแหน่ง
1. แบบชิดขวา
2. แบบชิดซ้าย
3. แบบกระจายทั่ว
4. แบบตรงกลาง

การผสมตัวอักษร
- ตัวอักษรไม่มีขา ตัวหนา และตัวอักษรที่มีขา ตัวบาง ตัวอักษรทั้ง 2 แบบ มีความแตกต่างกัน ตรงที่ด้วนน้ำหนักและขนาดทำให้เกิดความโดดเด่นได้ง่าย

- ตัวอักษรมีขา ตัวหนา และตัวอักษรไม่มีขา ตัวบาง การผสมอักษรแบบนี้ทำให้เกิดจุดเด่นของสัญลักษณ์อักษรได้ง่าย

- คำเตือน
- ตัวอักษรไม่มีขา ผสมกับตัวอักษรมีขา การผสมแบบนี้จะทำให้ไม่มีจุดเด่น เนื่องจากตัวอักษรทั้ง 2 แบบไม่มีความแตกต่างกันด้วยน้ำหนัก
- ความแตกต่างอย่างชัดเจนของตัวอักษรแบบนี้ เหมาะสำหรับงานที่มีการพัฒนาแนวความคิด
- การผสมอักษรสามารถสร้างความแตกต่างได้อย่างหลากหลาย