Lecture

บทที่6

ออกแบบหน้าเว็บ (Page Design)

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

-        หน้าเว็บหน้าแรกเป็นส่วนที่สำคัญมากเพราะมีหน้าที่เป็นสื่อกลางให้ผู้ใช้เข้าถึงข้อมูลและระบบงานของเว็บนั้นได้

หลักสำคัญในการออกแบบหน้าเว็บ

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

แนวคิดในการออกแบบหน้าเว็บ

-        เรียนรู้จากเว็บไซต์ต่างๆ (สิ่งที่ได้คือรูปแบบและเทคนิคใหม่ๆ)

-        ประยุกต์รูปแบบจากสิ่งพิมพ์

    http://www.cosmopolitan.com/   http://www.thairath.co.th/

-    
         ใช้แบบจำลองเปรียบเทียบ (Metaphor)

การใช้แบบจำลองเปรียบเทียบ คือ กาใช้สิ่งที่คุ้นเคยในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็นรูปภาพจากสิ่งพิมพ์หรือรูปแบบของร้านขายของ

   การใช้แบบจำลองมีด้วยกัน 3 ประเภท ดังนี้

1.  จำลองแบบการจัดระบบ (Organizational metaphor)

เช่น ร้านขายหนังสือ สามารถจำลองการแบ่งหมวด หมู่หนังสือได้ตามที่ใช้ในร้านหนังสือจริง https://www.se-ed.com/

2.  จำลองการใช้งาน (Functional metaphor)

เช่น เว็บของโรงภาพยนตร์ ที่ควรให้ผู้ใช้สามารถดูโปรแกรมหนัง,จองที่นั่งล่วงหน้า เหมือนกับไปโรงภาพยนตร์จริง https://www.sfcinemacity.com/

3.   จำลองลักษณะที่มองเห็น (Visual metaphor)

เช่น เว็บไซต์เกี่ยวกับดนตรีที่ให้บริการฟังเพลงบนเว็บได้ การนำลักษณะของปุ่มเล่น ปิดเพลง ที่ทุกคนรู้จักจากเครื่องเสียงมาใช้ ทำให้เข้าใจง่ายและรวดเร็ว

4.   ออกแบบอย่างสร้างสรรค์

     หลักการออกแบบหน้าเว็บ

1.   สร้างลำดับชั้นความสำคัญขององค์ประกอบ (Visual Hierarchy)

2.   สร้างรูปแบบ บุคลิกและสไตล์

3.   สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์

4.   จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ

5.   สร้างจุดสนใจด้วยความแตกต่าง

6.   จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย

7.   ใช้กราฟิกอย่างเหมาะสม

บทที่8

เลือกใช้สีสำหรับเว็บไซต์ (Designing Web Colors)

เลือกใช้สีสำหรับเว็บไซต์

-         สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี

-         เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา

-         การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน

-         การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้

-         การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูน่าชมมากยิ่งขึ้น

ประโยชน์ของสีในเว็บไซต์

-         สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้

-         สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน

-         สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน

-         สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน

-         สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ

ความรู้เบื้องต้นเกียวกับสี

แม่สีขั้นต้น (Primary color)

-         สีแดง

-         สีเหลือง

-         สีน้ำเงิน

การผสมสี (Color Mixing)

มี2แบบ

-         การผสมแบบบวก (Additive mixing)

เป็นรูปแบบการผสมของแสง

-         การผสมแบบลบ (Subtractive mixing)

การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง

วงล้อสี(Color Wheel)

-         วงล้อสีแบบลบ (Subtractive Color Wheel)

วงล้อสีแบบบวก(Additive Color Wheel)

บทที่9

ออกแบบกราฟฟิกสำหรับเว็บไซต์ (Designing Web Graphics)

-                        กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูน่าชมมากยิ่งขึ้น

-        ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิก คือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์

รูปแบบกราฟฟิกสำหรับเว็บ

-        GIF ย่อมาจาก (Graphic Interchange Format)

-        JPG ย่อมาจาก (Joint Photographic Experts Group)

-        PNG ย่อมาจาก (Portable Network Graphic)

โปรแกรมกราฟฟิกสำหรับเว็บ

ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ

-          Adobe Photoshop

-     Coreldraw

-      Gimp

คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ

-        ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)

-        เลือกรูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG

-        ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)