Lollipop Shiny

LECTURE

                                                     กระบวนการพัฒนาเว็บไซต์ 
   จัดระบบโครงสร้างข้อมูล (Information Architecture) การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ    การจัดระบบโครงสร้าง เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญ ที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์    จัดระบบโครงสร้างข้อมูล(Information Architecture) Phase 1 : สำรวจปัจจัยสำคัญ (Research) 1.รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม 2.เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ 3.ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง Phase 2 : พัฒนาเนื้อหา(Site Content) 4.สร้างกลยุทธ์การออกแบบ 5.หาข้อสรุปขอบเขตเนื้อหา Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure) 6.จัดระบบข้อมูล 7.จัดทำโครงสร้างข้อมูล 8.พัฒนาระบบเนวิเกชัน Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design) 9.ออกแบบลักษณะหน้าตาเว็บ 10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย Phase 5 : พัฒนาและดำเนินการ (Production & Operation) 11.ลงมือพัฒนาเว็บ 12.เปิดเว็บไซท์ 13.ดูแลและพัฒนาต่อเนื่อง





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

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




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




รูปแบบกราฟฟิกสำหรับเว็บ (GIF, JPG และPNG)
GIF ย่อมาจากGraphic Interchange Format

 -ได้รับความนิยมในยุคแรก
 - มีระบบสีแบบ index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุดถึง 256 สี
 - มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
กราฟฟิกรูปแบบ GIF
มีไฟล์นามสกุลเป็น .gif
ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
เป็นกราฟฟิกประเภทเดียวที่สามารถใช้ได้ทุกเบราเซอร์
มีคุณสมบัติในการแสดงภาพเคลื่อนไหว


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

มีข้อมูลสีขนาด 24 บิต(True Color) สามารถแสดงสีมากได้ถึง 16.7 ล้านสี
ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
ไฟล์ประเภทนี้ควรนำไปใช้กับรูปภ่ายหรือกราฟฟฟิกที่มีการไล่สีระดับสีอย่างละเอียด
 กราฟฟิกรูปแบบ JPG
มีไฟล์นามสกุลเป็น .jpg หรือ .jpeg
ใช้วิธีการบีบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
ไฟล์ประเภทนี้ไม่ยึดติดกับระบบปฏิบัติการใดๆ


PNG ย่อมาจาก Portable Network Graphic

สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต16 บิต 24 บิต
มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
-  ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe Photoshop
- Firework
- Gimp


ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รุปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใส และสีพื้นหลัง



ไม่มีความคิดเห็น:

แสดงความคิดเห็น