Lecture

 

 

การออกเเบบหน้าเว็บไซต์

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

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

ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ
การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor)
คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์
3. จำลองลักษณะที่มองเห็น (Visual metaphor)
คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป

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

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

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

3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์
ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน

 

4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น

5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไป
ยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน

6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ
เนือ้หาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป

7.ใช้กราฟฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป
เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1
เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด

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

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

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

ประโยชน์ของสีในเว็บไซต์ สีเป็นเครื่องมืออเนกประสงค์อย่างหนึ่งที่มีความสำคัญมากในการออกแบบเว็บไซต์ เนื่องจากสีสามารถสื่อถึงความรู้สึกและอารมณ์ และยังช่วยสร้างความสัมพันธ์ระหว่างสถานที่กับเวลาอีกด้วย ดังนั้นสีจึงเป็นปัจจัยสำคัญอย่างหนึ่งที่จะช่วยเสริมสร้างความหมายขององค์ประกอบให้กับเว็บเพจได้ อย่างดี ประโยชน์ของสีในรูปแบบต่างๆ มีดังนี้ สีสามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจ ผู้อ่านจะมีการเชื่อมโยงความรู้สึกกับบริเวณของสีในรูปแบบที่คาดหวังได้ การเลือกเฉดสีและตำแหน่งของสีอย่างรอบคอบในหน้าเว็บ สามารถนำทางให้ผู้อ่านติดตามเนื้อหาในบริเวณต่างๆ ตามที่เรากำหนดได้ วิธีนี้จะเป็นประโยชน์อย่างมากเมื่อคุณต้องการให้ผู้อ่านให้ความสนใจกับส่วนใดส่วนหนึ่งในเว็บไซต์เป็นพิเศษ เช่น ข้อมูลใหม่ โปรโมชั่นพิเศษ หรือบริเวณที่ไม่ค่อยได้รับความสนใจมาก่อน สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน ผู้อ่านจะมีความรู้สึกว่าบริเวณที่มีสีเดียวกันจะมีความสำคัญเท่ากัน วิธีการเชื่อมโยงแบบนี้ช่วยจัดกลุ่มของข้อมูลที่มีความสัมพันธ์อย่างไม่เด่นชัดเข้าด้วยกันได้ สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน ทำนองเดียวกับการเชื่อมโยงบริเวณที่มีสีเหมือนกันเข้าด้วยกัน แต่ในขณะเดียวกันก็เป็นการแบ่งแยกบริเวณที่มีสีต่างกันออกจากกัน สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่านสายตาผู้อ่านมักจะมองไปยังสีที่มีลักษณะเด่น หรือผิดปกติเสมอ การออกแบบเว็บไซต์ด้วยการเลือกใช้สีอย่างรอบคอบ ไม่เพียงแต่จะกระตุ้นความสนใจของผู้อ่านเพียงเท่านั้น แต่ยังช่วยหน่วงเหนี่ยวให้พวกเขาอยู่ในเว็บไซต์ได้นานยิ่งขึ้น ส่วนเว็บไซต์ที่ใช้สีไม่เหมาะสม เสมือนเป็นการขับไล่ผู้ชมไปสู่เว็บอื่นที่มีการออกแบบที่ดีกว่า สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ และกระตุ้นความรู้สึกตอบสนองจากผู้ชมได้นอกเหนือจากความรู้สึกที่ได้รับจากสีตามหลักจิตวิทยาแล้ว ผู้ชมยังอาจมีอารมณ์และความรู้สึกสัมพันธ์กับสีบางสีหรือบางกลุ่มเป็นพิเศษ สีช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น การใช้สีแยกส่วนระหว่างหัวเรื่องกับตัวเรื่อง หรือการสร้างความแตกต่างให้กับข้อความบางส่วน โดยใช้สีแดงสำหรับคำเตือน หรือใช้สีเทาสำหรับสิ่งที่เป็นทางเลือก นอกเหนือจากการใช้สีช่วยในการออกแบบแล้วสียังสามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ ได้ ด้วยการใช้สีที่เป็นเอกลักษณ์ขององค์กรมาเป็นโทนสีหลักของเว็บไซต์ การออกแบบเกี่ยวกับสีไม่ใช่เรื่องง่าย แม้ว่าจะมีกฎเกณฑ์ต่างๆ ที่ช่วยในการสร้างชุดสี (color scheme) ที่มีประโยชน์มากมาย แต่ก็มีแนวทางและความเข้าใจผิดจำนวนมากที่จะนำไปสู่การสร้างชุดสีที่ให้ความรู้สึกไม่เหมาะสม ในบางสถานการณ์อาจใช้สีเป็นเพียงเครื่องประดับอย่างหนึ่งในการออกแบบ แต่ในทางตรงกันข้าม การใช้สีที่มากเกินไป อาจทำให้ไปบดบังองค์ประกอบอื่นๆ ในหน้าเว็บเพจได้ ดังนั้นการเลือกใช้สีให้เหมาะสมและเกิดประโยชน์จึงเป็นเรื่องสำคัญ แม้ว่าการเลือกชุดของสีมาใช้ในเว็บเพจค่อนข้างจะขึ้นอยู่กับความชอบของแต่ละคน อย่างน้อยเราควรมีความเข้าใจถึงหลักการใช้สีเบื้องต้น ที่จะช่วยในการเลือกใช้สีชุดใดชุดหนึ่งจากชุดสีพื้นฐานอื่นๆได้อย่างเหมาะสมกับลักษณะของเว็บไซต์ อย่างไรก็ตามทฤษฎีเหล่านี้จะไม่ทำให้คุณสามารถเลือกชุดสีได้ในทันทีทันใด แต่อย่างน้อยก็จะช่วยนำคุณไปในทิศทางที่ถูกต้องได้

 

การออกแบบกราฟิกสำหรับเว็บไซต์

 

 

รูปแบบกราฟฟิกสำหรับเว็บ มีรูปแบบหลัก 2 ประเภท คือ GIF และ JPG

GIF ย่อมาจากคำว่า Graphic Interchange Format

ได้รับความนิยมในยุคแรก มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี

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

JPG ย่อมาจากคำว่า Joint Photographic Experst Group

มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี

ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)

ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียดระบบการวัดความละเอียดของรูปภาพ

ระบบการวัดความละเอียดของรูปภาพที่แสดงผลบนมอนิเตอร์ควรใช้หน่วย pixel por inch (ppi)

การใช้งานจะนำหน่วย dor per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi

ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi

 

 

บทที่ 10 การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์

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

Ascenderส่วนบนของตัวอักษรพิมพ์เล็ก ที่สูงกว่าความสูง x-height ของตัวอักษร

Descenderส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline ของตัวอักษร

Baselineเส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่

Cap height ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่

x-heightหมายถึง ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักจะใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง

point sizeระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร

ช่องว่างระหว่างตัวอักษร (Tracking) และช่องว่างระหว่างคำ

  ความรู้สึกของตัวอักษรอาจจะเป็นผลมาจากพื้อที่ว่างโดยรอบ ที่อยู่ระหว่างตัวอักษร ระหว่างคำ หรือระหว่างบรรทัด คุณสามารถปรับระยะของช่องว่างเหล่านี้เพื่อให้อ่านได้ง่ายขึ้น แม้ว่าตัวอักษรจะถูกออกแบบมาให้มีระยะห่างที่เหมาะสมอยู่แล้ว แต่ในบางสถานการณ์ อาจมีความต้องการให้ตัวอักษรดูแน่นหรือหลวมเป็นพิเศษ อย่างเช่นตัวอักษีที่ใช้ ตัวพิมพ์ใหญ่ทั้งหมด (UPPERCASE) จะดูค่อนข้างแน่นเพราะถูกออกแบบให้ใช้ร่วมกับตัวพิมพ์เล็กดังนั้นคุณควรเพิ่มช่องว่างระหว่างตัวอักษรให้มากขึ้นเล็กน้อย สำหรับคำที่ใช้ตัวพิมพ์ใหญ่ทั้งหมด

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

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

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