2. สมาชิก กลุ่ม ced2
นางสาวกมลรัตน์ ทองลา หัส 533410080301
นางสาวจิรารัตน์ เทศารินทร์ รหัส 533410080306
นางสาวสุวรรณี ปะทะโก รหัส 533410080330
นายชัยยา ปุริสมัย รหัส 533410080336
ปี 4 หมู่ 3
สาขาคอมพิวเตอร์ศึกษา
มหาวิทยาลัยราชภัฏมหาสารคาม
ภาคเรียนที่ 1 ปีการศึกษา 2556

3. นอกจากการเลือก Font มาใช้งานแล้ว การวางตาแหน่งตัวอักษรก็เป็นอีก
เรื่องหนึ่งที่มีความสาคัญกับการทางาน สาหรับการวางตาแหน่งตัวอักษร มีข้อควร
คานึงถึงไว้ให้อยู่ 3 ข้อคือ
1. ธรรมชาติการอ่านของคนไทยจะอ่านจากซ้ายไปขวา และบนลงล่าง โดย
มีรัศมีการกวาดสายตาตามลาดับ ดังนั้นถ้าอยากให้อ่านง่าย ควรจะวางเรียงลาดับให้
ดีด้วย ไม่เช่นนั้นจะเป็นการอ่านข้ามไปข้ามมาทาให้เสียความหมายของข้อความไป
2. จุดเด่นควรจะมีเพียงจุดเดียว หรือพูดง่าย ๆ ก็คือ มีตัวอักษรตัวใหญ่ๆ
อยู่เพียงชุดเดียว จึงจะเป็นจุดเด่นที่มองเห็นได้ง่าย ไม่สับสน ส่วนจุดอื่น ๆ ขนาด
ควรจะเล็กลงมาตามลาดับความสาคัญ
3. ไม่ควรใช้ Font หลากหลายรูปแบบเกินไป จะทาให้กลายเป็นงานที่อ่าน
ยากและชวนปวดศีรษะมากกว่าชวนอ่าน ถ้าจาเป็นจริง ๆ แนะนาให้ใช้ Font เดิม
แต่ไม่ตกแต่งพวกขนาด, ความหนาหรือกาหนดให้เอียงบ้าง เพื่อเพิ่มความน่าสนใจ
ไม่ให้งานดูน่าเบื่อแบบนี้จะดีกว่า
คานา
เอกสารฉบับนี้จัดทาขึ้นเพื่อประกอบการเรียนวิชาโปรแกรมสร้างเว็ปเพื่อ
การศึกษา โดยมีจุดประสงค์เพื่อการศึกษาความรู้เกี่ยวกับเรื่องทฤษฎีและ
การออกแบบเว็ปไซต์ ซึ่งจะนาความรู้ที่ได้จากเรื่องทฤษฎีและการออกแบบเว็ปไซต์
ไปประยุกต์ใช้ในชีวิตประจาวัน
ทางคณะผู้จัดทาหวังเป็นอย่างยิ่งว่ารายงานฉบับนี้จะเป็นประโยชน์แก่ผู้ที่
สนใจจะศึกษาไม่มากก็น้อย หากรายงานฉบับนี้มีความผิดพลาดประการใดต้องขอ
อภัยไว้ ณ โอกาสนี้

4. เว็บไซต์คือ
หน้าเว็บหลายหน้าที่เชื่อมต่อทางไฮเปอร์ลิงค์ ทาขึ้นเพื่อเสนอข้อมูลผ่านทาง
internetให้เป็นแหล่งข้อมูลต่างๆผ่านใน www
องค์ประกอบของการออกแบบเว็บไซต์
การออกแบบเว็บไซต์ที่มีประสิทธิภาพนั้นต้องคานึงถึง องค์ประกอบสาคัญดังต่อไปนี้
1. ความเรียบง่าย (Simplicity)
หมายถึง การจากัดองค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลัก
กล่าวคือในการสื่อสารเนื้อหากับผู้ใช้นั้น เราต้องเลือกเสนอสิ่งที่เราต้องการนาเสนอ
จริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและภาพเคลื่อนไหว ต้องเลือกให้
พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้างความคาราญต่อผู้ใช้
ตัวอย่างเว็บไซต์ที่ได้รับการออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่น
Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็บไซต์ในรูปแบบที่เรียบ
ง่าย ไม่ซับซ้อน และใช้งานอย่างสะดวก
2. ความสม่าเสมอ ( Consistency)
หมายถึง การสร้างความสม่าเสมอให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจ
เลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์
นั้นมีความแตกต่างกันมากจนเกินไป อาจทาให้ผู้ใช้เกิดความสับสนและไม่แน่ใจว่า
กาลังอยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์ในแต่ละหน้าควรที่
จะมีรูปแบบ สไตล์ของกราฟิก ระบบเนวิเกชั่น (Navigation) และโทนสีที่มีความ
คล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ (Identity)
ในการออกแบบเว็บไซต์ต้องคานึงถึงลักษณะขององค์กรเป็นหลัก เนื่องจาก
เว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี
รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเรา
ต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและกราฟิกมากมาย อาจทา
ให้ผู้ใช้คิดว่าเป็นเว็บไซต์ของสวนสนุกซึ่งส่งผลต่อความเชื่อถือขององค์กรได้
วิธีเลือก Font ไปใช้ในงานออกแบบ
การเลือก Font ไปใช้ในงานออกแบบมีข้อควรคานึงง่าย ๆ อยู่ 2 ข้อคือ
1. ความหมายต้องเข้ากัน หมายความว่า ความหมายของคาและ Font ที่
เลือกใช้ควรจะไปด้วยกันได้ เช่น คาว่าน่ารักก็ควรจะใช้ Font ที่ดูน่ารักไปด้วย ไม่
ควรใช้ Font ที่ดูเป็นทางการดังภาพตัวอย่าง
2. อารมณ์ของฟอนต์ และอารมณ์ของงานต้องไปในทิศทางเดียวกัน เช่น งานที่
ต้องการความน่าเชื่อถือก็จะเลือกใช้ Font แบบ Serif ที่ดูหนักแน่น น่าเชื่อถือ ส่วน
งานที่ต้องการความฉูดฉาดอย่างโปสเตอร์ลดราคาก็ควรจะเลือกใช้ Font ที่เป็น
กันเองไม่เป็นทางการมากนักอย่าง Font ในกลุ่ม Script เป็นต้น
ภาพตัวอย่าง อารมณ์ของฟอนต์ และอารมณ์ของงานที่เป็นไปในทิศทางเดียวกัน

5. รู้จักตัวอักษรที่ใช้อยู่ให้ดีขึ้นอีกสักนิด (Typography)
สาหรับการเลือกใช้งานตัวอักษรที่เหมาะสม เราจะต้องมารู้จักกับคุณสมบัติ
หลัก ๆ ที่สาคัญของตัวอักษร เช่น ส่วนประกอบหลัก ๆ และชนิดกันก่อน
Body & Proportion
Body หลัก ๆ จะประกอบไปด้วยตัว Body เอง และส่วนแขนขา และที่
สาคัญที่สุดที่จะส่งผลถึงการเลือกใช้งาน Font ก็คือส่วนของ “เชิง” หรือ
“Serif” (ในตัว Body ของ Font อาจจะแยกย่อยได้เป็นตา หรือไหล่ได้อีก และใน
เบื้องต้นให้รู้จักกันไว้ในชื่อของ Body ก่อน)
ส่วนของ Proportion ของ Font จะหมายถึง ลักษณะการตกแต่งเพื่อนา
ไปใช้งาน เช่น ตัวหนา หรือตังเอียง โดยปกติแล้ว Proportion ของ Font จะมีอยู่ 3
แบบคือ Normal คือ แบบปกติไม่ได้กาหนดอะไรเพิ่มเติม Bold คือ แบบที่เป็น
ตัวหนาและ Italic คือ แบบที่เป็นตัวเอียง
นอกจากทั้ง 3 แบบที่กล่าวมาแล้ว ในบางครั้งอาจจะเจอแบบที่ย่อยลงไป
อีก เช่น Bold Italic ที่เป็นตัวหนาและเอียงหรือ Narrow ที่มีลักษณะแคบๆ ผอมๆ
ก็เป็นไปได้
4. เนื้อหา (Useful Content)
ถือเป็นสิ่งสาคัญที่สุดในเว็บไซต์ เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับ
การปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ผู้ใช้
ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สาคัญที่สุดคือเนื้อหาที่ทีมผู้พัฒนา
สร้างสรรค์ขึ้นมาเอง และไม่ไปซ้ากับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามา
เว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ทราบ
ว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่จาเป็นต้องกลับมาใช้งานลิงค์เหล่านั้นอีก
5. ระบบเนวิเกชั่น (User-Friendly Navigation)
เป็นส่วนประกอบที่มีความสาคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้
เกิดความสับสนระหว่างดูเว็บไซต์ ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง
ดังนั้นการออกแบบเนวิเกชั่น จึงควรให้เข้าใจง่าย ใช้งานได้สะดวก ถ้ามีการใช้
กราฟิกก็ควรสื่อความหมาย ตาแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่าเสมอ
เช่น อยู่ตาแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิก
ก็ควรเพิ่มระบบเนวิเกชั่นที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วยอานวยความสะดวก
ให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราเซอร์
6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)
ลักษณะที่น่าสนใจของเว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสาคัญ
แต่โดยรวมแล้วก็สามารถสรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่าง ๆ ควรมี
คุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได้ให้เห็น ชนิดตัวอักษร
อ่านง่ายสบายตา มีการเลือกใช้โทนสีที่เข้ากันอย่างสวยงาม เป็นต้น
7. ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility)
การใช้งานของเว็บไซต์นั้นไม่ควรมีขอบจากัด กล่าวคือ ต้องสามารถใช้งาน
ได้ดีในสภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอื่นใด
เพิ่มเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บที่แสดงผลได้ดีในทุก
ระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์
ที่มีผู้ใช้บริการมากและกลุ่มเป้าหมายหลากหลายควรให้ความสาคัญกับเรื่องนี้ให้มาก

6. 8. ความคงที่ในการออกแบบ (Design Stability)
ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้
ความสาคัญกับการออกแบบเว็บไซต์เป็นอย่างมาก ต้องออกแบบวางแผนและเรียบ
เรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทาขึ้นอย่างลวก ๆ ไม่มีมาตรฐานการ
ออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหาและ
ทาให้ผู้ใช้หมดความเชื่อถือ
9. ความคงที่ของการทางาน (Function Stability)
ระบบการทางานต่าง ๆ ในเว็บไซต์ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับ
การออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ ในเว็บไซต์
ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่ เพราะเว็บไซต์อื่นอาจมีการ
เปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจากลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้บ่อยเป็น
ปัญหาที่สร้างความราคาญกับผู้ใช้เป็นอย่างมาก
กระบวนของการออกแบบเว็บไซต์
กาหนดเป้าหมายของเว็บไซต์
ขั้นตอนแรกของการออกแบบเว็บไซต์ คือการกาหนดเป้าหมายของ
เว็บไซต์ให้แน่ชัดเสียก่อน เพื่อจะได้ออกแบบการใช้งานได้ตรงกับเป้าหมายที่ได้ตั้ง
เอาไว้ โดยทั่วไปมักจะเข้าใจว่าการทาเว็บไซต์มีจุดมุ่งหมายเพื่อบริการข้อมูลของ
หน่วยงานหรือองค์กรเท่านั้น แต่ในความเป็นจริงแล้ว เว็บไซต์แต่ละแห่งก็จะมี
เป้าหมายของตนเองแตกต่างกันออกไป
เทคนิคการนาสีไปใช้งานมีอยู่มากมายหลายวิธี แต่ทุกวิธีจะชี้ไปที่
วัตถุประสงค์เดียวหลัก ๆ คือ ใช้สีเพิ่มความโดดเด่นให้กับจุดเด่นในภาพ และใช้สี
ตกแต่งส่วนอื่นๆ ของภาพให้ได้ภาพรวมออกมาในอารมณ์ที่ต้องการ
เทคนิคการเลือกสีจะมีสูตรสาเร็จให้เลือกใช้งานอยู่บ้าง คือ วิธีโยง
ความสัมพันธ์จากวงล้อสี ก่อนนะทางานทุกครั้ง และนาว่าให้เปิดไฟล์วงล้อสีขึ้นมา
แล้วเลือกสีหลัก ๆ สาหรับใช้ในการทางานก่อน
เทคนิคการเลือกใช้สีแบบสูตรสาเร็จจะมีอยู่หลายรูปแบบ แต่แบบที่นิยมให้
งานกันเป็นหลักจะมีอย่าง4รูปแบบ คือ
Mono หรือเอกรงค์ จะเป็นการใช้สีที่ไปในโทนเดียวกันทั้งหมด เช่น จุดเด่น
เป็นสีแดง สีส่วนที่เหลือจะเป็นสีที่ใกล้เคียงกับสีแดง โดยใช้วิธีลดน้าหนักความเข้ม
ของสีแดงลงไป
Complement คือ สีที่ตัดกันหรือสีตรงกันข้าม เป็นสีที่อยู่ตรงข้ามกันใน
วงจรสีเช่น สีฟ้าจะตรงข้ามกับสีส้ม หรือสีแดงจะตรงข้ามกับสีเขียว สามารถนามา
ใช้งานได้หลายอย่าง และก็สามารถส่งผลได้ทั้งดีและไม่ดี หากไม่รู้หลักพื้นฐานใน
การใช้งาน การใช้สีตรงข้ามหรือสีตัดกัน ไม่ควรใช้ในพื้นที่ปริมาณเท่ากันในงาน
ควรใช้สีใดสีหนึ่งจานวน 80% อีกฝ่ายหนึ่งต้องเป็น 20% หรือ 70-30
โดยประมาณ บนพื้นที่ของงานโดยรวม จะทาให้ความตรงข้ามกันของพื้นที่น้อย
กลายเป็นจุดเด่นของภาพ
Triad คือ การเลือกสีสามสีที่ระยะห่างเท่ากันเป็นสามเหลี่ยมด้านเท่ามาใช้
งาน
Analogicหรือสีข้างเคียงกัน การเลือกสีใดสีหนึ่งขึ้นมาใช้งานพร้อมกับสีที่อยู่
ติดกันอีกข้างละสี หรือก็คือสีสามสีอยู่ติดกันในวงจรสีนั่นเอง

7. ตัวอย่างภาพที่ออกแบบโดยการเลือกใช้สีต่างๆ
นอกจากแต่ละสีจะสร้างความรู้สึกด้วยตนเองแล้ว เมื่อนามาใช้ร่วมกันเรายังสามารถ
แบ่งสีออกเป็น 2 วรรณะ เพื่อสร้างอารมณ์ที่แตกต่างกันออกไปเมื่อใช้งานร่วมกันได้
อีกคือ สีทีอยู่ในวรรณะร้อน (Warm Tone Color) ได้แก่ สีเหลืองส้ม สีส้ม สีแดง
และสีม่วงแดง สีกลุ่มนี้เมื่อใช้ในงานจะรู้สึกอบอุ่น ร้อนแรง สนุกสนาน
สีที่อยู่ในวรรณะ (Cool Tone Color) ได้แก่ สีเขียว สีฟ้า สีม่วงคราม สีกลุ่มนี้เมื่อใช้
งานจะได้ความรู้สึกสดชื่น เย็นสบาย
การแบ่งสีออกเป็นสีโทนร้อนและสีโทนเย็น
ภาพตัวอย่างงานออกแบบสีโทนเย็น และสีโทนร้อน
กาหนดกลุ่มผู้ใช้เป้าหมาย
ผู้ออกแบบเว็บไซต์จาเป็นต้องทราบกลุ่มผู้ใช้เป้าหมายที่เข้ามาใช้บริการ
เว็บไซต์ เพื่อที่จะได้ตอบสนองความต้องการของผู้ใช้ได้อย่างชัดเจน ตัวอย่างเช่น
เว็บไซต์ที่มีกลุ่มผู้ใช้หลากหลาย เช่น เซิร์ชเอ็นจิน เว็บท่า และเว็บไดเรกทอรี่ แต่
เว็บไซต์ส่วนใหญ่นั้นจะตอบสนองความต้องการเฉพาะกลุ่มเท่านั้น ไม่สาหรับทุกคน
เพราะคุณไม่สามารถตอบสนองความต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว
สิ่งที่ผู้ใช้ต้องการจากเว็บ
หลังจากที่ได้เป้าหมายและกลุ่มเป้าหมายของเว็บไซต์แล้ว ลาดับต่อไปคือ
การออกแบบเว็บไซต์เพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่งที่น่าสนใจ
เพื่อดึงดูดผู้ใช้โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่
- ข้อมูลและการใช้งานที่เป็นประโยชน์
- ข่าวและข้อมูลที่น่าสนใจ
- การตอบสนองต่อผู้ใช้
- ความบันเทิง
- ของฟรี
ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
เมื่อเราทราบถึงความต้องการที่ผู้ใช้ต้องการได้รับเมื่อเข้าชมเว็บไซต์หนึ่ง ๆ
แล้ว เราก็ออกแบบเว็บไซต์ให้มีข้อมูลที่ผู้ใช้ต้องการ ซึ่งข้อมูลต่อไปนี้ เป็นสิ่งที่ผู้ใช้
ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าไปชมเว็บไซต์
- ข้อมูลเกี่ยวกับข้อง
- รายละเอียดของผลิตภัณฑ์
- ข่าวความคืบหน้าและข่าวจากสื่อมวลชน
- คาถามยอดนิยม
- ข้อมูลในการติดต่อ

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

9. สีเกิดจากหมึกสีในการพิมพ์ เกิดจากการผสมหมึกพิมพ์ทั้ง 4 สีในเครื่องพิมพ์
คือ สีฟ้า, สีม่วงแดง, สีเหลือง และสีดา เรียก
รวมกันว่า CMYK จนได้ออกมาเป็นสีสันต่าง ๆ
ตามที่ต้องการ ในการทางานกราฟิก ถ้าหากว่า
เป็นงานที่นาไปพิมพ์ตามแท่นพิมพ์แล้ว นัก
ออกแบบก็ควรจะเลือกใช้โหมดสีแบบนี้ทุกครั้ง
เพื่อให้ได้ผลลัพธ์ที่ออกมาตรงกับที่เห็นในจอคอมฯ ที่ทางานอยู่
สีที่เกิดจากธรรมชาติเป็นสีที่ได้จากธรรมชาติ จากกระบวนการสังเคราะห์ทาง
เคมี 3 สีคือ สีแดง สีเหลืองและสีน้าเงิน หลังจากนั้นจึงนามาผสมกันจนเกิดเป็นสี
อื่นๆ แหล่งกาเนิดสีแบบที่เราเรียนกันมาในคลาสศิลปะตั้งแต่เด็กจนโต ที่เรียกกันว่า
แม่สีก็คือสีแบบนี้นั่นเอง การผสมสีไว้ใช้งานจะใช้งานจะใช้วิธีผสมจากสีที่เกิดจากสีที่
เกิดธรรมชาติ โดยเริ่มผสมจากแม่สี หรือสีขั้นที่หนึ่ง ไปจนเป็นสีขั้นที่สองและขั้นที่
สามตากลาดับภาพแต่ละสีมีความหมายอย่างไร?
การออกแบบโครงสร้างเว็บไซต์
เว็บไซต์ในปัจจุบัน จะมีหลักการอกแบบที่แตกต่างไม่มากนัก ซึ่งจะมีวิธีการ
ออกแบบหน้าตาของเว็บไซต์อยู่ 3 รูปแบบ คือ
1.ออกแบบหน้าเว็บไซต์ที่เน้นการนาเสนอเนื้อหามากๆ
เป็นการออกแบบเว็บไซต์ที่มีการนาเสนอเนื้อหามากกว่ารูปภาพ โดยจะใช้โครงสร้าง
ของตารางเป็นหลัก เพื่อใส่ข้อความแบบหน้าสารบัญ และรูปภาพที่เป็นชิ้นเล็กๆได้
2.ออกแบบหน้าเว็บไซต์ที่เน้นภาพกราฟิกเป็นหลัก
เป็นการออกแบบเว็บไซต์ที่มีภาพกราฟิกที่สวยงามถูกจัดวางไว้ในหน้าโฮมเพจ ซึ่ง
แตกต่างจากข้อแรกมากเพราะจะไม่ค่อยมีข้อความในเว็บเพ็จ แต่จะเป็นการ Link
ที่ภาพเพื่อเข้าไปยังหน้าเว็บเพ็จอื่นๆต่อไป การสร้างเว็บไซต์แบบนี้จะให้โปรแกรม
Photoshop สาหรับตกแต่งภาพก่อนนาไปใช้บนหน้าเว็บ
3.ออกแบบหน้าเว็บไซต์ที่มีทั้งภาพและเนื้อหา
เป็นการออกแบบหน้าเว็บไซต์ที่ผสมกันระหว่างข้อ1 และ 2 ข้างต้น โดยจะเน้นการ
จัดวางภาพที่ตัดแบ่งเป็นชิ้นเล็กๆก่อน หลังจากนั้นจึงใส่ข้อความประกอบภาพลงไป
เพื่อให้เว็บไซต์ของเรามีความสวยงามด้วยภาพกราฟิกที่นามาประกอบและใส่เนื้อหา
ได้อย่างสมบูรณ์ด้วยเว็บไซต์ (Web site)

10. ส่วนประกอบของหน้าเว็บไซต์
ส่วนประกอบของหน้าเว็บไซต์แบ่งออกเป็น 3 ส่วนหลักๆ คือ
1. ส่วนหัวของเว็บเพ็จ (Page Header)
เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สาคัญที่สุดของหน้า
เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์มักใส่ภาพกราฟิกเพื่อ
สร้างความประทับใจส่วนใหญ่ประกอบด้วย
- โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็น
อย่างดี และยังทาให้เว็บน่าเชื่อถือ
- ชื่อเว็บไซต์
- เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของ
เว็บไซต์
2.ส่วนของเนื้อหา (Page Body)
เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่ง
ประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนู
หลักหรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย
สาหรับส่วนเนื้อหาควรแสดงใจความสาคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมี
ความกระชับ ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็น
ระเบียบ
3. ส่วนท้ายของหน้า (Page Footer)
เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนา
ทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายใน
เว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์,
คาแนะนาการใช้เว็บไซต์ เป็นต้น
ตัวอักษร (Type)
ตัวอักษรเป็นสิ่งสาคัญไม่เป็นรองใคร เมื่อต้องทางานกราฟิกดีไซน์ ในเรื่อง
งานกราฟิกที่ดีบางงาน นักออกแบบอาจจะใช้เพียงแค่ตัวอักษรและสีเป็น
ส่วนประกอบเพียงสองอย่าง เพื่อสร้างสรรค์งานที่สามารถสื่อความหมายออกมา
ได้ในดีไซน์ที่สวยงาม ดังนั้น เรื่องนี้จะต้องยกไปอธิบายให้ละเอียดมากขึ้นในหัวข้อ
ใหญ่ ๆ ต่อไปจากเรื่องสี
สีและการสื่อความหมายในอารมณ์ต่างๆ
ถ้าจะรู้จักสีให้ลึกซึ้งถึงขั้นเลือกใช้ได้อารมณ์ที่ต้องการได้ ก็ต้องมาทาความเข้าใจกับ
3 เรื่องเหล่านี้ คือ สีเกิดจากอะไร, แต่ละสีมีความหมายอย่างไร และเทคนิคการนาสี
ไปใช้ให้ได้อย่างใจต้องการทาอย่างไรกันก่อน
สีเกิดจากอะไร?
ในปัจจุบันแหล่งกาเนิดสีจะมีอยู่ 3 ชนิดคือ
สีที่เกิดจาแสง เกิดจากการหักเหของแสงผ่านแท่งแก้ว
ปริซึมมี 3 สีคือ สีแดง (Red), สีเขียว (Green) และสีน้า
เงิน (Blue) เรียกรวมกันว่า RGB นามาผสมกันจนเกิดเป็น
สีสันต่าง ๆ มากมาย ตัวอย่างอุปกรณ์ที่ใช้แหล่งกาเนิดสี
แบบนี้ เช่น โทรทัศน์หรือจอคอมฯ ของเรานั่นเอง

11. ที่ว่าง (Space)
อาจจะจะเกิดจากความตั้งใจหรือไม่ตั้งใจของนักออกแบบก็ได้ ที่ว่างไม่ได้
หมายความถึงพื้นที่ว่างเปล่าในงานเพียงอย่างเดียว แต่หมายถึงรวมไปถึงพื้นที่ที่ไม่
สาคัญหรือ Background ด้วย ในการออกแบบงานกราฟิก ที่ว่างจะเป็นตัวช่วยใน
งานดูไม่หนักจนเกินไป และถ้าควบคุมพื้นที่ว่างนี้ให้ดี ๆ ที่ว่างก็จะเป็นตัวที่ช่วย
เสริมจุดเด่นให้เห็นได้ชัดเจนมากขึ้น
สี (Color)
สีของงานกราฟิก ถือเป็นหัวใจหลักสาคัญเลยก็ว่าได้ เพราะการเลือกใช้สีจะ
แสดงถึงอารมณ์ที่ต้องการได้ชัดเจนมากกว่าส่วนประกอบอื่นๆ ทั้งหมด เช่น สีโทน
ร้อน สาหรับงานที่ต้องการความตื่นเต้น ท้าทาย หรือสีโทนเย็นสาหรับงาน
ต้องการให้ดูสุภาพ สบายๆ สาหรับเรื่องสีเป็นเรื่องที่ต้องพูดถึงละเอียดมากกง่า
หัวข้ออื่น ๆ ดังนั้นจึงขอยกไปอธิบายไว้เป็นเรื่องใหญ่ๆ ในหัวข้อต่อไป
รูปโครงสร้างเว็บไซต์ที่เหมาะสม
ส่วนประกอบย่อยอื่นๆ ที่จาเป็น
1. Text เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่น
ต่างๆ ดังเช่นโปรแกรมประมวลคา
2. Graphic ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย
3. Multimedia ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง
4. Counter ใช้นับจานวนผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ของเรา

12. 5. Cool Links ใช้เชื่อมโยงไปยังเว็บไซต์ของตนเองหรือเว็บไซต์ของคนอื่น
6. Forms เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด แล้ว
ส่งกลับมายังเว็บไซต์
7. Frames เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่
แตกต่างกันและเป็นอิสระจากกัน
8. Image Maps เป็นรูปภาพขนาดใหญ่ที่กาหนดส่วนต่างๆ บนรูป เพื่อ
เชื่อมโยงไปยังเว็บไซต์อื่นๆ
9. Java Applets เป็นโปรแกรมสาเร็จรูปเล็กๆ ที่ใส่ลงในเว็บไซต์ เพื่อให้
การใช้งานเว็บไซต์มีประสิทธิภาพมากยิ่งขึ้น
องค์ประกอบงานกราฟิก (Element of Design)
องค์ประกอบหลัก ๆ ในงานกราฟิกจะแบ่งออกเป็น 8 ชนิดคือ เส้น, รูปร่าง,
รูปทรง, น้าหนัก, พื้นผิว, ที่ว่าง, สี และตัวอักษร
เส้น (Line)
ลักษณะของเส้น (Line) แบบต่าง ๆ ตามตารางมาตรฐานแล้วจะพูดถึงเรื่องนี้ว่าเป็น
เรื่องของจุด เส้น ระนาบ แต่ถ้าจะเอาให้เข้าใจง่าย ๆ ก็เพียงแต่เข้าใจว่าความหมาย
ของเส้นก็คือ การที่จุดหลาย ๆ จุด ถูกน มาวางต่อเนื่องจนกลายเป็นเส้นรูปทรงต่าง
ๆ ขึ้นมา รูปทรงของเส้นที่จะสื่อออกมาถึงความรู้สึกที่แตกต่างกันออกไป
พื้นผิว (Texture)
ในงานออกแบบกราฟิก พื้นผิวจะเป็นอีกหนึ่งองค์ประกอบที่ช่วยสื่ออารมณ์
ของงานออกมาได้ชัดเจนมากขึ้น เช่น ถ้าเราเลือกพิมพ์งานลงในกระดาษ
Glossy ที่เงาและแวววาว งานนั้นจะสื่อกอกไปได้ทันทีว่า “หรู มีระดับ” หรือ
ถ้าเราใส่ลวดลายที่ดูคล้าย ๆ สนิม หรือรอยเปื้อนลงไปในงานก็จะสื่อได้ทันทีถึง
“ความเก่า” ดังนั้นในการทางาน นักออกแบบจึงควรเลือกสร้างพื้นผิวทั้งใน
องค์ประกอบต่าง ๆ ที่ใส่ลงไปในภาพ รวมทั้งวัสดุที่ใช้พิมพ์งานดังกล่าวลงไป ก็
จะสามารถช่วยสื่อความหมายที่ต้องการได้อย่างเหมาะสม

13. รูปร่าง (Shape), รูปทรง (Form) ,น้าหนัก (Value)
รูปร่าง : เป็นองค์ประกอบต่อเนื่องมาจากเส้น เกิดจากการนาเส้น
แบบต่าง ๆ มาต่อกันจนได้รูปร่าง 2 มิติที่มีความกว้างและความยาว (หรือ
ความสูง) ในทางศิลปะจะแบ่งรูปร่างออกเป็น 2 แบบคือ รูปร่างที่คุ้นตา
แบบที่เห็นแล้วรู้เลยว่านั่นคืออะไร เช่นดอกไม้ หรือคน และอีกแบบหนึ่งจะ
เป็นรูปร่างแบบฟรีฟอร์ม เป็นแนวที่ใช้รูปร่างสื่อความหมายที่จินตนาการไว้
ออกมา ไม่มีรูปทรงที่แน่นอน แต่ดูแล้วเกิดจินตนาการถึงอารมณ์ที่ต้องการ
สื่อได้
รูปทรง : เป็นรูปร่างที่มิติเพิ่มขึ้นมากลายเป็นงาน 3 มิติคือ มีความ
ลึกเพิ่มเข้ามาด้วย
น้าหนัก : เป็นส่วนที่มาเสริมให้ดูออกว่ารูปทรงมีน้าหนักขนาดไหน
เบา หรือหนัก ทึบ หรือโปร่งแสง น้าหนักจะเกิดจากการเติมสีและแสงแร
เงาลงไปในรูปทรงจนได้ผลลัพธ์ออกมาตามที่ต้องการ
ในการทางานกราฟิกรูปร่างจะมีผลอย่างมากต่ออารมณ์ของงาน
เช่น ถ้าต้องการงานที่อารมณ์ผู้หญิงจัด ๆ เพียงแค่ใส่รูปของดอกไม้ลงไปก็
จะสามารถแสดงอารมณ์ได้อย่างชัดเจน หรือในงานที่ต้องการให้มีมิติมาก
ขึ้นก็อาจจะเป็นรูปทรงของดอกไม้ในมุมมองที่แปลกตา ก็จะสามารถสื่อ
อารมณ์ที่ต้องการออกไปได้พร้อมกับเป็นการสร้างความน่าสนใจเพิ่มขึ้นมา
อีกด้วย
 เส้นแนวนอน ให้ความรู้สึกสงบ ราบเรียบ
 เส้นตรงแนวตั้ง ให้ความรู้สึกมั่นคงแข็งแรง
 เส้นทแยง ให้ความรู้สึกไม่มั่นคง รวดเร็ว แสดงถึงเคลื่อนไหว
 เส้นตัดกัน ให้ความรู้สึกประสาน แข็งแกร่ง หนาแน่น
 เส้นโค้ง ให้ความรู้สึกอ่อนช้อย อ่อนน้อม
 เส้นประ ให้ความรู้สึก โปร่ง ไม่สมบูรณ์ หรือในบางกรณีอาจจะใช้เป็น
 สัญลักษณ์ในการแสดงถึงส่วนที่ถูกซ่อนเอาไว้
 เส้นโค้งก้นหอย ให้ความรู้สึกเคลื่อนไหวไม่มีที่สิ้นสุด
 เส้นโค้งแบบคลื่น ให้ความรู้สึกถึงการเคลื่อนไหวอย่างนิ่มนวล
 เส้นซิกแซ็ก ให้ความรู้สึก น่ากลัว อันตราย
ส่วนใหญ่แล้วเส้นจะมีอยู่ทุกๆ งานออกแบบ โดยถูกนาไปใช้ร่วมกับ
องค์ประกอบต่างๆ จนสื่อถึงอารมณ์ของผลงานออกมาได้ ในแบบที่ต้องการ ดังนั้น
การเลือกใช้เส้นเข้ามาเป็นส่วนประกอบในงานของเราจึงถือว่าเป็นสิ่งที่ต้องคานึงถึง
เป็นอันดับแรก