5 ข้อ --> การออกแบบหน้าเว็ปไซด์

1.ลักษณะโครงสร้างหน้าเว็ป เป็นเว็ปแนวตั้ง
2.ขนาดหน้าจอเว็ป 1280 x 800
3.การจัดวางตำแหน่งของ Logo จะอยู่มุมซ้ายด้านบน / เนื้อหาเกี่ยวกับดาวน์โหลด อัฟโหลด บิดเทอเร้นท์ / และมีภาพ,ไอคอน,ฟอนต์ประกอบ
-การจัดวางส่วนหัว มีโลโก้ มีชื่อเว็ป มีโฆษณาการฝึกอบรม มีเมนูรายการต่าง ๆ แสดงรายชื่อผู้ใช้งาน มีแต้มคะแนนการโหลด มีเกมส์ มีจำนวนที่ดาวน์โหลดและอัฟโหลดทั้งสิ้น มีไอคอนแลกของรางวัล แจ้งเบอร์ไอพีแอดเดส มีตู้รับจดหมาย มีผลทายฟุตบอล และมีผลหวย ติดต่อทีมงาน
-การจัดวางส่วนเนื้อหา มี checkbox ให้เลือกเพื่อดาวน์โหลด ให้บริการค้นหาที่เราต้องการดาวน์โหลด แจ้งข้อความจดหมายใหม่ มีการแบ่งส่วนสำหรับดาวน์โหลด เช่น หนังไทย หนังฝรั่งเป็นต้น มีโฆษณา มีลำดับการดาวน์โหลดแบ่งเป็นส่วน ๆ ของแต่ละหน้า
-การจัดวางส่วนท้าย มีลำดับการดาวน์โหลด และการลำดับแบ่งเป็นส่วน ๆ ของแต่ละหน้า
4.เมนู ตำแหน่งของเมนูเรียงจากซ้ายไปขวา และจากบนลงล่าง แบ่งเป็นแถว ๆ แถวละ 8 บรรทัดมี 5 แถว ลักษณะเมนูเป็นแบบไอคอน มีภาพในไอคอน และมีฟอนต์ ไอคอนบอกจุดประสงค์เรื่องราว
5.การแบ่งหมวดหมุ่
-การแบ่งหมวดหมู่ส่วนแสดงสำหรับผู้ใช้งานทำได้ดี เพราะมีชื่อผู้ใช้งาน ไอพีแอดเดส มีคะแนน จำนวนการดาวน์โหลดและอัฟโหลด
-รายงานข่าวสาร และรายงานผลทายฟุตบอล หวย ตอบคำถามชิงรางวับ
-การแบ่งหมวดหมู่ของรายการอัฟโหลดดาวน์โหลด
-การแบ่งหมวดหมู่ประเภทการอัฟโหลดดาวน์โหลด

ตัวอย่างหน้าเว็ปไซด์

1.แนวตั้ง

2. แนวนอน

3. พอดีหน้าจอ

การนำ "Image" มาเล่นกับตัวอักษร

เป็นการนำ "ลายเส้น" หรือ "Image" มาเป็นส่วนประกอบกับตัวอักษร

การใช้สีของตัวอักษร

การใช้ตัวอักษร-->เลือก 4 แบบ

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

องค์ประกอบการออกแบบ (Element of Design)

สี

The Color Wheel (วงล้อสี)
สีขั้นที่1
1. RED-Primary
2. YELLOW-Primary
3. BLUE-Primary




Hue (ตัวสี)
Saturation (ความจัดของสี)
Value (ค่าน้ำหนักสี)


สี Color --> C M Y K


สี Color --> RGB
Red--> (R)
Green --> (G)
Blue --> (B)

หลักการเลือกสี Color Combination
1. Monochroatic การใช้สีเดียว สร้างความแตกต่างด้วยระดับความมืด-สว่างของสี
2. Triads การใช้สี 3 สีจากคู่สีที่อยู่ตรงข้ามกัน ควรทดลองใช้หลายรูปแบบ เพื่อสร้างความแตกต่าง
3. Analogous การใช้สีใกล้เคียงกัน โดยเลือกจากสีที่อยู่ถัดไปอีก 2-3 สี สามารถสร้างความกลมกลืนได้ดี
4. Complementary การใช้สีตรงข้ามกัน สามารถช่วยเน้นความโดดเด่นได้ดี ควรใช้สีดำหรือเทา เพื่อลดความรุนแรงของสี นอกจากนั้นการใช้สี 2 สีที่แตกต่างกันมาก จะทำให้มีความสำคัญเท่ากัน ดังนั้นจึงควรลดความเข็มของสีหนึ่งลง
5. Split-Complements การใช้สีแบบผสม เป็นการผสมผสานระหว่างสีโทนร้อนและเย็น โดยเริ่มจากการเลือกสีสดสีหจึ่ง และจับคู่กับอีก 2 สีในโทนสีตรงข้ามกัน จากตัวอย่าง สีส้มเพิ่มความสว่างขึ้น เพื่อลดการแข่งกันระหว่างสีแดง

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

การใช้ตัวอักษร (TYPOGRAPHY)

TYPO*

+ความหมาย

"TYPOGRAPHY"

การใช้ตัวอักษร หรือการจัดวางตัวอักษร

"FONT (TYPEFACES)"

ชุดรูปแบบของตัวอักษร

"FONT FAMILIES"

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

TYPO*

+ส่วนประกอบ

- SERIF แบบมีเชิง

- SANS SERIF แบบไม่มีเชิง

TYPO*

+ประเภท

1. SAN SERIF แบบมีหาง, มีฐาน, มีเชิง

2. SCRIPT, HAND-LETTERED แบบตัวเขียน

3. DINGBAT, ORNAMENT แบบฟอนต์ไอคอน

4. MONOSPACE แบบบล็อค ๆ

5. NOVELTY แบบแฟชั่น

TYPO*

+การผสมตัวอักษร

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

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

3. ตัวหลักและตัวรองไม่มีความแตกต่าง (อันนี้ไม่แนะนำให้นำไปใช้)

4. ความแตกต่างอย่างชัดเจนของตัวอักษร เหมาะสำหรับงานที่มีการพัฒนาแนวความคิด

5. เช่นเดียวกับ การผสมอักษร สามารถสร้างความแตกต่างได้อย่างหลากหลาย

ไอคอน

ICON = ภาพ = สัญรูป



การลดทอน
1. ลด
2. เน้น
การนำสัญรูปไปใช้งาน ควรมีการเน้นเส้นให้เหมาะสมกับขนาด


รูปร่าง รูปทรง
+องค์ประกอบ

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

โลโก้

Concept : ดีที่สุด

อารมณ์และความรู้สึก : เป็นทางการ/ทันสมัย/ความสะดวก

ขั้นตอนการเตรียมการ

- การรับทราบความคิดความต้องการ

- การค้นคว้าข้อมูลเพิ่มเติมแล้วนำมาวิเคราะห์

- การเขียนโจทย์ของการออกแบบ

- การกำหนดรูปแบบที่ใช้ในงาน


ขั้นตอนการออกแบบ

- การเลือกและสร้างองค์ประกอบ

- การจัดทำเลย์เอาท์แบบร่าง

- การประเมินผลงานออกแบบ


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

- รูปร่าง (Shape)

- รูปทรง (Form)


ชนิดและประเภทรูปร่างและรูปทรง

- เรขาคณิต

- เรขาคณิตซับซ้อน

- อิสระเสรี

- อิสระสื่อความหมาย



การสร้างโลโก้

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

หลักการออกแบบรูปร่าง และรูปทรง

- โครงสร้าง
- การลดทอน
- องค์ประกอบ

โครงสร้าง + รวมกัน

การรวมกันของรูปทรง สามารถสร้างรูปร่างที่เหมือนกัน หรือแตกต่างกัน ด้วยความหลากหลายของขนาด ทิศทางและตำแหน่ง

โครงสร้าง + ลบกัน
การสร้างรูปร่างใหม่ อาจทำได้โดยการลบออกจากรูปร่างเดิม

โครงสร้าง + คัดเลือก
รูปร่างสามารถถูกเลือกตัดเฉพาะส่วนที่ต้องการ หรือเลือกตัดภายในพื้นที่

โครงสร้าง + การซ้ำ
การซ้ำกันของรูปร่าง สามารถสร้างงานกราฟิกที่แปลกใหม่ เพื่อสื่อความหมายได้อย่างดี

โครงสร้าง + ตัวอย่าง
โลโก้ดังตัวอย่างได้จากกระบวกการสร้างรูปร่างรูปทรงใหม่ โดยการลบออก การเลือกตัด การหมุน ทิศทาง การซ้ำ และการกำหนดสี