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

ขนาดของหน้าเว็ป 1024*768 px

การจัดวางตำแหน่งของ LOGO เนื้อหา ภาพประกอบ

ส่วนหัว ชื่อเว็ป , LOGO , ไดเรกทอรี , ลูกค้า WEB , อุปกรณ์สำนักงาน , การเขียนโปรแกรมและทดสอบ , ระบบปฏิบัติการ , ข่าวผู้หลิต , ค่าใช่จ่ายและการลงทุน , ANIT –VIRUS , บริษัท , แฮกเกอร์
ส่วนกลาง ตัวอักษรต่างๆ , ข้อความ , รูปภาพ
ส่วนท้าย สงวนลิขสิทธิ์

ตำแหน่งของเมนู แถบเนวิเกชั่น อยู่ข้างบนทางด้านซ้าย ใช้เมนูแบบ Hiperlink

ลักษณะของเมนู รูปแบบของตัวอักษร


การแบ่งหมวดหมู่

ชื่อเว็ป
LOGO
ไดเรกทอรี
ลูกค้า WEB
อุปกรณ์สำนักงาน
การเขียนโปรแกรมและทดสอบ
ระบบปฏิบัติการ
ข่าวผู้หลิต
ค่าใช่จ่ายและการลงทุน
ANIT –VIRUS
บริษัท
แฮกเกอร์

สีสำหรับเว็บไซต์

สีหลัก เขียวหัวเป็ด

สีพื้นหลัง เป็นสีโทนอ่อน มีรูปภาพแทรกไม่เยอะ

สีโดยรวม เป็นสีที่เข้ากับ theme หลัก

สีกับหมวดหมู่ หัวข้อหลัก=สีเขียวหัวเป็ด, หัวข้อย่อย = สีเขียวหัวเป็ด
การใช้ตัวอักษร+ภาพ+ออกแบบwebsite

สีตัวอักษรเนื้อหา เป็นสีเขียวสะท้อนแสง
ลักษณะตัวอักษร หัวข้อหลัก ขนาด 20 สีเขียวอ่อน , หัวข้อย่อย ขนาด 18 สีเขียวอ่อน

ภาพ เป็นภาพการ์ตูนต่างๆ ที่เข้ากับเนื้อหาภายในweb

ตำแหน่งของภาพ ซ้าย

ขนาดของภาพ เป็นภาพ JPG

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

ขนาดของหน้าเว็ป 800 *600 px

การจัดวางตำแหน่งของ LOGO เนื้อหา ภาพประกอบ

ส่วนหัว ชื่อเว็ป , LOGO , หน้าหลัก , กลิตเตอร์ , คลิปวีดีโอ , ดูทีวี , วอดเปเปอร์ , เนื้อ PR , ร้านเหรียญ ,เล่นเกมส์ , ซื้อหวย , โปรโมท , แลกเงิน , ฝาก
ส่วนกลาง ตัวอักษรต่างๆ , ข้อความ , รูปภาพ
ส่วนท้าย ตอบกระทู้ , โพสกระทู้ , ชื่อเวป

ตำแหน่งของเมนู แถบเนริเกชั่น อยู่ข้างบนสุด

ลักษณะของเมนู รูปแบบของตัวอักษร

การแบ่งหมวดหมู่ หน้าหลัก
กลิตเตอร์
คลิปวีดีโอ
ดูทีวี
วอดเปเปอร์
เนื้อ PR
ร้านเหรียญ
เล่นเกมส์
ซื้อหวย
โปรโมท
แลกเงิน
ฝาก

สีสำหรับเว็บไซต์

สีหลัก เป็นสีชุดเดียว

สีพื้นหลัง เป็นสีโทนอ่อน มีรูปภาพแทรกไม่เยอะ

สีโดยรวม เป็นสีที่เข้ากับ theme หลัก

สีกับหมวดหมู่ หัวข้อหลัก=สีชมพูเข้ม , หัวข้อย่อย = สีชมพูอ่อน

การใช้ตัวอักษร+ภาพ+ออกแบบwebsite

สีตัวอักษรเนื้อหา เป็นสีดำอ่อน

ลักษณะตัวอักษร หัวข้อหลัก ขนาด 20 สีดำอ่อน , หัวข้อย่อย ขนาด 18 สีดำอ่อน

ภาพ เป็นภาพการ์ตูนต่างๆ ที่เข้ากับเนื้อหาภายในweb

ตำแหน่งของภาพ ซ้าย-ขวา-กลาง

ขนาดของภาพ เป็นภาพ JPG และ Gif

การใช้สื่อประสมสำหรับwebsite

ภาพเคลื่อนไหว เช่น LOGO,ปุ่มหลัก

เสียงเพลง

LOGO

LOGO

LOGO

องค์ประกอบการออกแบบ (ELEMENT OF DESING)

องค์ประกอบการออกแบบ (ELEMENT OF DESING)



วงจรสี,สี
-hue แปลว่า อะไร เนื้อสี
-stion แปลว่า อะไร ความจัดจ้าน,ความสด
-value แปลว่า อะไร ค่าน้ำหนักของสี



ระบบของสี
-CMYK ระบบที่ใช้ในการพิมพ์
Cyan (C)
Magenta (M)
Yellow (Y)
Black (K)





-RGB ระบบที่ใช้ในจอภาพ
RED (R)
Green (G)
Blue (B)



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

-MONOCHROMATIC
การใช้สีเดียว สร้างความแตกต่างด้วยระดับความมืด-สว่างของสี
-TRIADS
การใช้สี 3สีจากคู่สีตรงข้ามกันเพื่อสร้างความแตกต่าง
-ANALOGOUS
การใช้สีใกล้เคียงกัน โดยเลือกจากสีที่อยู่ถัดไปอีก 2-3สี สามารถสร้างความกลมกลืนได้ดิ
-COMPLEMENTARY
การใช้สีตรงกันข้ามกัน สามารถช่วยเน้นความโดเด่นได้ดี ควรใช้สีดำหรือเทา เพื่อลดความรุนแรงของสี
นอกจากนั้นการใช้สี 2สีที่แตกต่างกันมาก จะทำให้มีความสำคัญเท่ากัน ดังนั้นจึงควรลดความเข้มของสีหนึ่งลง
-SPLIT-COMPLEMENTS
การใช้สีแบบผสม เป็นการผสมผสานระหว่างสีโทนร้อนและเย็น โดยเริ่มจากการเลือกสีใดสีหนึ่ง และจับคู่กัอีก 2สี ในแทบสีตรงกันข้ามกัน

การใช้ตัวอักษร

การใช้ตัวอักษร
Typo
ความหมาย
"TYPOGRAPHY"
การใช้ตัวอักษรหรือการจัดวางตัวอักษร

"FONT (TYPEFACES) "
ชุดรูปแบบของตัวอักษร

"FONT FAMILIES"
ตระกูลของชุดแบบตัวอักษร เช่น ตัวธรรมดา ตัวหนา ตัวเอียง ฯลฯ

Typo
ส่วนประกอบ

Typo
ขนาด

Typo
ประเภท

+ Sans Serif (ไม่มีเชิง)



+ Serif (มีเชิง)


+ Script (ลายมือ)


+ Monospace (เป็นบล็อค , เป็นช่องๆ)



+ Novelty (แฟชั่น , ตกแต่ง , ประดับ)




+ Dingbat , Ornament (รูปสัญลักษณ์)



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

Typo
การผสมอักษร
1.ตัวอักษรไม่มีขาตัวหนาผสมกับตัวอักษรมีขาตัวบาง ตัวอักษรทั้งสองแบบ มีความแตกต่างด้วยน้ำหนักและขนาด ทำให้เกิดความโดดเด่นได้ง่าย
2.ตัวอักษรมีขาตัวหนาผสมกับตัวอักษรไม่มีขาตัวบาง การผสมอักษรแบบนี้ทำให้เกิดจุดเด่นของสัญลักษณ์อักษรได้ง่าย
3.ตัวอักษรไม่มีขาผสมกับตัวอักษรมีขา การผสมอักษรแบบนี้ไม่มีจุดเด่น เนื่องจากตัวอักษรทั้งสองแบบไม่มีความแตกต่างกันด้วยน้ำหนัก // ไม่ควรใช้ !
4.ความแตกต่างอย่างชัดเจนของตัวอักษรแบบนี้ เหมาะสำหรับงานที่มีการพัฒนาแนวความคิด
5.เช่นเดียวกัน การผสมอักษรสามารถสร้างความแตกต่างได้อย่างหลากหลาย

Typo
การปรับระยะห่าง