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

1. เว็ปต้นฉบับ

2. ออกแบบใหม่

3. หลักการใช้สี

3. หลักการใช้สี
3.1 จำนวนของสีหลัก (เป็นสีชุดเดียวกัน) à ส่งเสริมภาพลักษณ์
Concept + Meed = Theme
3.2 สีพื้นหลังของเว็ป (เป็นลวดลาย, เป็นภาพ, เป็นสี)
ลวดลายตามความจำเป็น
เป็นภาพไม่รบกวนสายตา
เป็นสีโทนอ่อน
3.3 โทนสี
3.4 สีกับหมวดหมู่ เหมือนกับรสชาติของเว็ปไซด์

ส่วนเพิ่มเติม

สี เป็นการแสดงหรือถ่ายทอดความรู้สึกให้ผู้อื่นรับรู้เปรียบเหมือนสื่อกลางระหว่างผู้สร้างผลงานและผู้ดูผลงาน
1. การเลือกใช้สีแบบวรรณะ ในวงจรสีจำนวน 12 สี มี 2 วรรณะคือ
วรรณะร้อน ประกอบด้วย สีเหลือง ส้มเหลือง ส้ม ส้มแดง แดง ม่วงแดง และม่วง
วรรณะเย็น ประกอบด้วย สีเหลือง เขียวเหลือง เขียว เขียวน้ำเงิน น้ำเงิน ม่วงน้ำเงิน
การใช้สีต่างวรรณะใช้อัตราส่วน 50 : 50 , 60 :40 ., 80 :20
2. การใช้สีคู่ตัดกัน ถ้าเลือกสีคู่ตัดกันอย่างแท้จริงจะทำให้สีฉูดฉาด จึงควรลดความสดใสของสีใดสีหนึ่งลงในอัตราที่เหมาะสมจะทำให้ภาพนั้นดูแล้วไม่ขัดตา
3. การใช้สีโดยการกำหนด โครงการระบายสี คือ การจัดสีรวมกันเป็นหมู่เดียวกัน
4.การใช้สีลักษณะค่าของสี ทำได้ 2 ลักษณะคือ หลายสี โดยเรียงน้ำหนักสีจากอ่อนไปหาแก่ และ สีเดียว แล้วผสมด้วยสีขาวให้เป็นระยะๆ
5. การใช้สีโดเด่น เพื่อสร้างจุดสนใจโดยให้สีใดสีหนึ่งโดดเด่น ที่แวดล้อมด้วยสีหม่น
6. การใช้สีใกล้เคียง คือสีที่เรียงกันอยู่ในวงจรสีที่อยู่ใกล้เคียงกัน เช่น สีเขียว สีเขียวน้ำเงิน สีน้ำเงิน

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

4. การใช้ตัวอักษร
4.1 สีของตัวอักษร
4.2 ตัวอักษรที่ใช้กับเว็ปไซด์ ควรอยู่ระหว่าง 14-20 point หัวควรเป็นตัวใหญ่ ส่วนเนื้อหาควรเล็กกว่าหน่อย
4.3 จำนวนภาพ ควรมีความเหมาะสมกับเว็ปไซด์
4.4 ตำแหน่งการว่างตำแหน่งภาพ
4.5 ขนาดภาพควรคำนึงถึงการโหลดบนเว็ปไซด์

ส่วนเพิ่มเติม

การใช้ตัวอักษร (Typography)
ในการออกแบบเว็บเพจ สิ่งที่นักออกแบบต้องถูกจำกัดอยู่ประการหนึ่ง คือเรื่องของลักษณะของตัวอักษร ที่จะนำไปใส่ลงในเว็บเพจ เนื่องจากลักษณะของตัวอักษรที่มีให้นักออกแบบนำไปใช้ ได้ถูกจำกัดอยู่ 2 รูปแบบคือ Time Roman ที่เป็นแบบตัวอักษรมาตราฐานใน Netscape กับ Courier (ที่ให้เป็นมาตราฐานใน Microsoft Internet Explorer) ซึ่งในระบบการเขียน HTLM ตัวอักษร Time Roman เป็นตัวอักษรที่ถูกนำขึ้นมาใช้อย่างอัตโนมัติ หากนักออกแบบไม่ได้ระบุว่าต้องการตัวอักษรประเภทใด อย่างไรก็ตามถ้าต้องการใช้ตัวอักษรประเภทอื่น ที่ไม่ใช่ Time Roman แล้ว ตัวอย่างเช่นตัวอักษร Courier ต้องใส่เครื่องหมายคำสั่งลงไปด้วย โดยเครื่องหมายคำสั่งเหล่านี้คือ ,

 หรือ  อย่างใดอย่างหนึ่ง เครื่องหมาย  มักได้รับการใช้ก็ต่อเมื่อไม่ต้องการที่จะคงลักษณะของตัวอักษรไว้หรือ กล่าวคือผู้ชมสามารถเปลี่ยนตัวอักษรให้เป็นไปตามความต้องการของเขาเหล่านั้นได้ แต่ในทางกลับกัน คือ ไม่อยากให้รูปแบบนั้นเปลี่ยน ก็ต้องใช้คำสั่งเป็น 
 นอกจากนี้ สำหรับการกำหนดระยะห่างระหว่างบรรทัด และระยะห่างระหว่างตัวอักษรนั้น จะไม่สามารถกำหนดหรือควบคุมได้          นักออกแบบสามารถใช้ขนาดของตัวอักษรที่ถูกกำหนดมาแล้ว ให้มีลักษณะเป็นตัวเอียง (ltalic) หรือตัวหนาและเอียงได้ และตัวอักษรที่เราใส่ลงไปนั้น ก็สามารถใส่สีลงไปในตัวอักษรนั้นได้ด้วย อย่างไรก็ตามในการให้สีของตัวอักษร ไม่ควรใส่สลับกันมากเกินไป เพราะจะทำให้เว็บเพจที่ออกมามีความสับสน          การแสดงผลของรูปแบบตัวอักษรที่ออกแบบมา อาจแสดงผลออกมาแตกต่างกันไปตามลักษณะของบราวเซอร์แต่ละตัว บางตัวไม่สามารถกำหนดให้ตัวอักษร Time Roman หรือ Courier (2 ตัวอักษรนี้ มักถูกใช้ในการสร้างเว็บเพจ) เป็นตัวอักษรพื้นฐาน(Default)ได้ขณะเดียวกัน ผู้ใช้บางคนก็ได้เปลี่ยนตัวอักษรพื้นฐานเป็นตัวอักษรอื่นๆ นอกจากนี้ ไม่ใช่บราวเซอร์ทุกตัว จะสามารถแสดง ขนาด สี ตลอดจนรูปแบบของตัวอักษรที่เราสร้างขึ้นได้ และใช่ว่าจะมีข้อแตกต่างระหว่างบราวเซอร์ อย่างเดียว ความแตกต่างของระบบก็เป็นข้อควรระวังอีกประเภทหนึ่ง กล่าวคือ ขนาดของตัวอักษรชนิดเดียวกันซึ่งเปิดดูด้วยพีซี จะมีขนาดที่แตกต่างจากแมคอินทอช สำหรับข้อแก้ไขในเรื่องนี้ก็คือ เก็บข้อมูลว่าบราวเซอร์แบบใด ผู้ใช้นิยมมากแล้ว จึงออกแบบให้ใช้ได้กับบราวเซอร์นั้นๆ          ถึงแม้ว่าการสร้างเว็บเพจ จะต้องเผชิญกับข้อจำกัดในเรื่องของรูปแบบตัวอักษรที่จะใช้ แต่ทั้งนี้ด้วยข้อจำกัดของตัวอักษรที่มีอยู่ ก็สามารถนำมาใช้ประโยชน์ได้จาก ความแตกต่างของแบบตัวอักษรทีมีอยู่ แสดงถึงข้อแตกต่าง ระหว่างหัวข้อ วิธีการเรียงหัวข้อ โดยใช้ตัวอักษรที่แตกต่างบนเว็บนั้น สามารถทำได้โดยง่าย เนื่องจากข้อจำกัดที่เคยกล่าวไว้นั้นเอง ทำให้รูปแบบที่จะนำมาใช้มีให้เลือกน้อย การเน้นตัวอักษรให้แตกต่างนั้น อาจใช้สร้างหัวข้อนั้นๆ ให้เป็นรูปภาพ แล้วนำมาประกอบลงในเว็บเพจกได้เช่นกัน





5. การใช้สื่อประสมมัลติมีเดีย

5 การใช้สื่อประสมค์มัลติมีเดีย
5.1 การใช้ภาพ
5.2 การใช้ปุ่ม
5.3 การใช้คลิปบนเว็ป เช่น Youtube, Flash, Add-In
5.4 เสียง

ส่วนเพิ่มเติม

มัลติมีเดีย (อังกฤษ: multimedia) หรือ สื่อประสม หรือ สื่อหลายแบบ เป็นการใช้สื่อในหลายรูปแบบไม่ว่าจะเป็น ข้อความ เสียง รูปภาพ หรือ ภาพเคลื่อนไหว สำหรับให้ข้อมูลความรู้หรือให้ความสำราญต่อผู้ชม
ปัจจุบันความก้าวหน้า ของเทคโนโลยีคอมพิวเตอร์เอื้อให้นักออกแบบสื่อ มัลติมีเดีย สามารถประยุกต์สื่อต่างๆ ให้มารวมกันบนระบบคอมพิวเตอร์ ผู้ใช้ สามารถโต้ตอบกับระบบคอมพิวเตอร์ในรูปแบบต่างๆ กันได้ เทคโนโลยีเหล่านี้ ได้พัฒนาขึ้นพร้อมกับการพัฒนาฮาร์ดแวร์ เช่น การพัฒนาอุปกรณ์ที่ใช้อ่านและ บันทึกข้อมูล การพัฒนาหน่วยความจำให้มีขนาดที่เล็กลงแต่มีความจุมากขึ้น นอกจากนี้ ยังมีการพัฒนาเทคโนโลยีด้านอุปกรณ์ต่อพ่วงสำคัญต่างๆ เพื่อ ให้ติดต่อสื่อสารกับผู้ใช้งาน
มัลติมีเดีย การใช้สื่อมากกว่า 1 สื่อร่วมกันนำเสนอข้อมูลข่าวสาร โดยมีจุดมุ่งหมายให้ ผู้รับสื่อสามารถรับรู้ข่าวสารได้มากกว่า 1 ช่องทาง โดยผ่านการควบคุมการใช้ และโต้ตอบด้วยระบบคอมพิวเตอร์ส่วนบุคคลหรือเครือข่าย ปัจจุบันมีการพัฒนารูปแบบของมัลติมีเดียให้สอดคล้องกับปรัชญาการ เรียนรู้มากขึ้น สื่อประเภทนี้ไม่ได้เป็นเพียงรูปแบบของบทเรียนแบบโปรแกรม ที่ให้เพียงเนื้อหา คำถาม และคำตอบ แต่ได้รับการออกแบบให้เปิดกว้างสำหรับ การสำรวจกระตุ้นให้ผู้เรียนได้คิดค้น สืบค้นมากขึ้น
สื่อมัลติมีเดีย สื่อประสมหรือสื่อหลายแบบที่มีการใช้อุปกรณ์ต่างๆ เพื่อการนำเสนอข้อมูล เป็นหลัก โดยได้มีการออกแบบนำเสนอไว้อย่างเป็นระบบ มัลติมีเดียนั้นได้รวมเอาฮาร์ดแวร์และซอฟต์แวร์ไว้ด้วยกัน จะเน้นส่วนไหน มากน้อยนั้นขึ้นอยู่กับลักษณะการใช้งาน และจะเน้นผลผลิตที่เกิดจากการ นำเสนอข้อมูลหลากลายรูปแบบ เช่น ภาพนิ่ง ภาพเคลื่อนไหว เสียง และข้อความ
เทคโนโลยีมัลติมีเดีย เทคโนโลยีได้เข้ามามีบาทเป็นอย่างสูงสำหรับในยุคนี้ ซึ่งสามารถพิจารณา จากการพัฒนาคอมพิวเตอร์ ไม่ว่าจะเป็นด้านสมรรถนะของซีพียู รวมทั้งประสิทธิ์ภาพของอุปกรณ์ฮาร์ดแวร์และซอฟต์แวร์ในปัจจุบันนี้ ต่างก็พัฒนาขึ้น มาเพื่อรองรับความต้องการของเทคโนโลยีมัลติมีเดียมากขึ้น ตัวอย่างเช่น
1. ความสามารถของโปรเซสเซอร์ที่สามารถปะมวลผลข้อมูลอย่างรวดเร็ว เพื่อรองรับการคำนวณด้านคอมพิวเตอร์กราฟิกที่มีความซับซ้อนมากขึ้น
2. หน่วยความจำในเครื่องที่มีความเร็วสูงขึ้น และเพิ่มขยายได้มากขึ้น
3. การ์ดแสดงผลที่ช่วยให้แสดงภาพได้อย่างรวดเร็วและมีประสิทธิภาพในการแสดงผลสูง
4. จอภาพขนาดใหญ่
5. การ์ดเสียงและลำโพงที่สมบูรณ์แบบเทียบได้กับเครื่องเสียงราคาแพง ๆ
6. อุปกรณ์จัดเก็บข้อมูลที่มีความจุมากขึ้น เช่น ฮาร์ดดิสก์ เป็นต้น

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)


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

- เรขาคณิต

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

- อิสระเสรี

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



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

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

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

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

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

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

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

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

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

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

ประกวดคลิปสั้น “ภัยเงียบ”

ทีม The Best สมัครประกวด ภัยเงียบจากโลกไซเบอร์

เขียนโจทย์การออกแบบ + ภาพประกอบ (ต่อ) กลุ่มเป้าหมาย-Concept-อารมณ์ความรู้สึก

1. กลุ่มเป้าหมาย (บริษัท-การแข่งขัน)

2. Concept (ดีที่สุด-ถูกที่สูด)


3. อารมณ์และความรู้สึก (เป็นทางการ-ทันสมัย-ความสะดวก)

เขียนโจทย์การออกแบบ + ภาพประกอบ

รูปแบบโครงสร้าง (Mind Map)

คลิป แนะนำตัวเอง