บทที่ 2 กระบวนการพัฒนาเว็บไซต์
phase 1:สำรวจปัจจัยสำคัญ
1.รู้จักตัวเอง
2.เรียนรู้ผู้ใช้
3.ศึกษาคู่แข่ง
สิ่งที่ได้รับ
1.เป้าหมายหลักของเว็บ
2.ความต้องการของผู้ใช้
3.กลยุทธ์ในการแข่งขัน
phase 2:พัฒนาเนื้อหา
4.สร้างกลยุทธ์การออกแบบ
5.หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตเนื้อหาและการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
phase 3:พัฒนาโครงสร้างเว็บไซต์
6.จัดระบบข้อมูล
7.จัดทำโครงสร้างข้อมูล
8.พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตเนื้อหาและการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
phase 4:ออกแบบและพัฒนาหน้าเว็บ
9.ออกแบบลักษณะหน้าตาเว็บ
10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1.ลักษณะหน้าตาของเว็บ
2.เว็บต้นแบบที่จะใช้ในการพัฒนา
3.รูปแบบโครงสร้างของเว็บ
4.ข้อกำหนดในการพัฒนาเว็บ
phase 5:พัฒนาและดำเนินการ
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซต์
13.ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1.เว็บที่สมบูรณ์
2.เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3.แนวทางการดูแลและพัฒนาต่อไป
บทที่ 6 การออกแบบหน้าเว็บ
คือ
การใช้รูปภาพและองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ
บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ
- เรียนรู้จากเว็บไซต์ต่างๆ
- ประยุกต์รูปแบบจากสิ่งพิมพ์
- ใช้แบบจำลองเปรียบเที่ยบ(Metaphor)
- ออกแบบอย่างสร้างสรรค์
หลักการออกแบบหน้าเว็บ
1. ลำดับชั้นความสำคัญขององค์ประกอบ
จัดตำแหน่งและองค์ประกอบ
แสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ
เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา และจากบนลงล่าง
จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือทางซ้ายของหน้าอยู่เสมอ
เพื่อให้ผู้ใช้มองเห็นได้ก่ออน
2.สร้างรูปแบบ บุคลิก และสไตล์
-รูปแบบ
การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
-บุคลิก
บุคลิกที่ดีเหมาะสมกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดียิ่งขึ้น
-สไตล์
คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก ชนิดและการจัดตัวอักษร
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชั่นทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า
หมายถึง
ส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้ารวมบราวเซอร์ที่ยังไม่มีการเคลื่อนหน้าจอใดๆ
5.สร้างจุดสนใจด้วยความแตกต่าง
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ
เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย
แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป
7.ใช้กราฟิกอย่างเหมาสม
ควรใช้กราฟิกที่เป็นไอคอน
ปุ่ม ลายเส้น และสิ่งอื่นๆตามความเหมาะสมและไม่มากเกินไป
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์( Designing
Web Graphics )
กราฟฟิกเป็นองค์ประกอบที่สำคัญอยางหนึ่งของเว็บเพจ
ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น
GIF
ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต
ทำให้มีสีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล
เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจาก Joint
Photographic Experts Group
- มีข้อมูลสีขนาด
24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
PNG ย่อมาจาก Portable
Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต
และ 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส(Transparency)ในตัวเอง
ระบบการวัดขนาดรูปภาพ
หลักสำคัญในการออกแบบหน้าเว็บ
คือ การใช้รูปภาพและองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ
คือ การใช้รูปภาพและองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายและสะดวกของผู้ใช้
แนวคิดในการออกแบบหน้าเว็บ
- เรียนรู้จากเว็บไซต์ต่างๆ
- ประยุกต์รูปแบบจากสิ่งพิมพ์
- ใช้แบบจำลองเปรียบเที่ยบ(Metaphor)
- ออกแบบอย่างสร้างสรรค์
หลักการออกแบบหน้าเว็บ
1. ลำดับชั้นความสำคัญขององค์ประกอบ
จัดตำแหน่งและองค์ประกอบ แสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา และจากบนลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือทางซ้ายของหน้าอยู่เสมอ เพื่อให้ผู้ใช้มองเห็นได้ก่ออน
2.สร้างรูปแบบ บุคลิก และสไตล์
-รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
-บุคลิก บุคลิกที่ดีเหมาะสมกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดียิ่งขึ้น
-สไตล์ คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก ชนิดและการจัดตัวอักษร
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชั่นทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้ารวมบราวเซอร์ที่ยังไม่มีการเคลื่อนหน้าจอใดๆ
5.สร้างจุดสนใจด้วยความแตกต่าง
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป
7.ใช้กราฟิกอย่างเหมาสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆตามความเหมาะสมและไม่มากเกินไป
1. ลำดับชั้นความสำคัญขององค์ประกอบ
จัดตำแหน่งและองค์ประกอบ แสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับ เนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา และจากบนลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือทางซ้ายของหน้าอยู่เสมอ เพื่อให้ผู้ใช้มองเห็นได้ก่ออน
2.สร้างรูปแบบ บุคลิก และสไตล์
-รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู้ใช้ได้ดีขึ้น
-บุคลิก บุคลิกที่ดีเหมาะสมกับเนื้อหาย่อมทำให้ผู้ใช้เข้าถึงเนื้อหาได้ดียิ่งขึ้น
-สไตล์ คือลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก ชนิดและการจัดตัวอักษร
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์
ความสม่ำเสมอของโครงสร้างหน้าเว็บและระบบเนวิเกชั่นทำให้ผู้ใช้รู้สึกคุ้นเคยและสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอ
ส่วนบนของหน้า หมายถึง ส่วนแรกของหน้าที่จะปรากฏขึ้นในหน้ารวมบราวเซอร์ที่ยังไม่มีการเคลื่อนหน้าจอใดๆ
5.สร้างจุดสนใจด้วยความแตกต่าง
เราสามารถใช้ความแตกต่างของสีเข้ามาช่วยสร้างลักษณะเด่นในหน้าเว็บ เพื่อนำสายตาผู้อ่านไปยังส่วนสำคัญของเนื้อหาได้
6.จัดแต่งหน้าเว็บให้เป็นระเบียบและเรียบง่าย
เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่าย แยกเป็นสัดส่วน และดูไม่แน่นจนเกินไป
7.ใช้กราฟิกอย่างเหมาสม
ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น และสิ่งอื่นๆตามความเหมาะสมและไม่มากเกินไป
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์( Designing
Web Graphics )
กราฟฟิกเป็นองค์ประกอบที่สำคัญอยางหนึ่งของเว็บเพจ
ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น
ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ
การเลือกใช้รูปแบบรากฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป
โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก
ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ PNG)
GIF
ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล
เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจาก Joint
Photographic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
PNG ย่อมาจาก Portable
Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส(Transparency)ในตัวเอง
ระบบการวัดขนาดรูปภาพ
รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์
คือ หน่วยพิกเซล(Pixel) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ
รวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ
ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย
Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่
72 ppi ก้อเพียงพอแล้ว
ไม่มีความคิดเห็น:
แสดงความคิดเห็น