Please enable JavaScript.
Coggle requires JavaScript to display documents.
หน่วยที่ 2 การออกแบบเว็บไซต์, w644, ระบายสีแมวกับหนู-724x1024, pngtree…
หน่วยที่ 2 การออกแบบเว็บไซต์
ความสำคัญของการออกแบบเว็บไซต์
ส่วนใหญ่จัดทำ
ขึ้นเพื่อนำเสนอข้อมูลผผ่านอินเทอร์เน็ต
เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี
การทำเว็บไซต์เพื่อการศึกษา
ลักษณะของเว็บไซต์ที่ใช้
การออกแบบเว็บไซต์อย่างมีประสิทธิภาพ
การออกแบบเว็บไซต์ที่ดีสามารถสร้างความน่าเชื่อถือและดึงดูดความสนใจของผู้ใช้คือเป็นพื้นฐานสำคัญของเว็บไซต์การออกแบบเว็บไซต์อย่างมีประสิทธิภาพมีองค์ประกอบดังนี้
ความเรียบง่าย
ความสม่ำเสมอ
ความเป็นเอกลักษณ์
เนื้อหามีประโยชน์
ระบบเนวิเกชั่นที่ใช้งานง่าย
มีลักษณะที่น่าสนใจ
การใช้งานอย่างไม่จำกัด
คุณภาพในการออกแบ
ระบบการใช้งานที่ถูกต้อง
เเนวคิดการออกเเบบเว็บไซต์
หลักสำคัญในการออกแบบเว็บไซต์ คือ การใช้รูปภาพ และ
องค์ประกอบต่าง ๆ เพื่อสื่อ ความหมายที่ชัดเจน น่าสนใจ
และเรียบง่าย สามารถสรุปหัวข้อได้ดังนี้
-เรียนรู้จากเว็บไซต์ ต่าง ๆ
-ประยุกต์รูปแบบจากสื่อพิมพ์
-ประยุกต์รูปแบบจากสิ่งรอบตัว
แนวคิดในการออกแบบเว็บไซต์ช่วยให้ผู้เรียนรู้เว็บไซต์ได้รวดเร็ว
และเข้าใจมากขึ้น เพราะผู้ใช้มีความคุ้นเคย หรือ รู้จักกับสิ่ง
นั้น ๆ เช่น แผ่นพับ โปสเตอร์ หนังสือ โทรทัศน์
ผู้ที่เกี่ยวข้องกับการพัฒนาเว็บไซต์
1) Webmaster ทำหน้าที่รับผิดชอบทุกอย่างเกี่ยวกบั เว็บไซต์ตั้งแต่เริ่มต้นกระบวนการ
การพัฒนาเว็บไซต์จนสิ้นสุดกระบวนการ
2) Web Design ทา หน้าที่ในการออกแบบเว็บไซต์กำหนดสีสัน ตา แหน่งการจดัวางของ
เว็บไซต์ทั้งหมดตามที่Webmaster กำหนดไว้
3) Web Content Editor / Writer ทา หน้าที่จดั ทา เน้ือหาบนเว็บไซต์รับผิดชอบในส่วน
ของเน้ือหาตามที่ไดร้ับมอบหมายจาก Webmaster
4) Web Programing ทำหนา้ที่พัฒนาเว็บไซต์ห้สามารถติดต่อประสานงานกับผู้ใช้คอย
ดูแลพัฒนาเว็บไซต์และตรวจสอบปรับปรุงแก้ไขจุดอ่อนของเว็บไซต์เสมอ
5) System Administrator ทำหน้าที่ควบคุม ดูแล เว็บเชิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และ
ซอฟตแวร์อื่นที่เกี่ยวขอ้ง สามารถวิเคราะห์และออกแบบระบบเพื่อการทำงานที่มีประสิทธิภาพ
6) Web Promoter ทำหน้าที่ประชาสัมพันธ์เว็บไซต์ให้เป็นที่รู้จักแก่บุคคลทั่วไปเป้าหมายเพื่อให้มีผู้เข้ามาเยี่ยมชมเว็บไซต์ปริมาณมาก
หลักในการออกแบบเว็บไซต์
ในการออกแบบเว็บไซต์ต้องนำข้อมูลต่างๆ เช่น วัตถุประสงค์ กลั่มผู้ใช้ตลอดจนเนื้อหาทั้งหมดมาวิเคราะห์จัดระบบ และสรุปเป็นแนวคิดเพื่อกำหนดและออกแบบเว็บไซต์
หลักในการออกแบบเว็บไซต์มี2ส่วนคือ
1.การออกแบบโครงสร้างเว็บไซต์ (Website Structure Design)
การออกแบบโครงสร้างเว็บไซต์เป็นการวางแผนเนื้อหาของเว็บไซต์
การออกแบบโครงสร้างเว็บไซต์ที่ดีมีดังนี้
1) ทุกเว็บเพจต้องมีลิงค์ทางออกเสมอ
2) ทุกเว็บเพจควรมีลิงค์กลับหน้าโฮมเพจ หรือจุดเริ่มต้น
3) ควรมีแสงSite Map ในกรณีเว็บไซต์มีจำนวนหน้ามาก
การออกแบบหน้าเว็บไซต์ (website lnterface Design)
การออกแบบหน้าเว็บไซต์ควรออกแบบให้ตรงตามความต้องการของผู้ใช้
ข้อสรุปการออกแบบหน้าเว็บไซต์ที่ดีมีดังนี้
1.ใช้งานง่ายและสะดวกโดยมีระบบNavigation หรือระบบนำทางที่ดีมีการใช้งานไม่ซับซ้อน
2.มีการออกแบบกราฟิกที่สวยงามและสื่อความหมายได้ดี
3.ไม่ควรเสียเวลาดาวน์โหลดภาพมากเกินไปโดยทั่วไปภาพกราฟิกรวมกันไม่ควรเกิน75kb
4.ภาพรวมทั้งหมดควรออกแบบในลักษณะแนวความคิดเดียวกัน
บทสรุป
หลักสำคัญในการออกแบบหน้าเว็บไซต์ คือการใช้รูปภาพและองค์ประกอบต่าง ๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาโดยมีเป้าหมายสำคัญเพื่อการสื่อความหมายที่ชัดเจนและน่าสนใจบนพื้นฐานของความเรียบง่ายและความสะดวกของผู้ใช้โดยแนวคิดในการออกแบบเว็บไซต์ควรศึกษาเรียนรู้จากเว็บไซต์ต่าง ๆ แผ่นพับโปสเตอร์และประยุกต์รูปแบบจากสิ่งรอบตัวเป็นต้น
โปรแกรมกราฟิกที่ใช้ออกแบบเว็บไซต์
โปรแกรม Adobe Photoshop
คุณสมบัติของโปรแกรม Adobe Photoshop
1) แก้ไขครั้งเดียว อัพเดททุกที่ที่มี Assets ที่เชื่อมโยง Assets ใน Creative Cloud
Libraries
2) ความเร็วในการส่งออกเร็วขึ้น ส่งออกภาพได้ง่ายขึ้น ช่วยให้ส่งออก Single Layer
Artboard
3) รักษาและแก้ไขภาพได้เร็วขึ้น การใช้เครื่องมือแก้ไขและแสดงผลได้อย่างรวดเร็ว
4) สนับสนุนการแสดงของ Windows HiDPI เพื่อให้สามารถมองเห็นภาพได้ละเอียด และ
แสดงภาพที่คมชัด
5) สนับสนุนการออกแบบที่มีประสิทธิภาพ เหมาะส าหรับการออกแบบที่ตอบสนองหน้าจอ
ช่วยให้สามารถสร้างเค้าโครงหลายขนาดแตกต่างกัน
6) เพิ่มรูปแบบเลเยอร์มากขึ้น รวมทั้งการลดเงา การท าขอบหนา แก้ไขรูปแบบได้ง่ายขึ้น
7) สามารถเรียกดู Glyphs ทั้งหมดที่มีอยู่ในตัวอักษร เพิ่มมุมมองทางเลือกสำหรับ Glyphs
ที่ใช้งานง่าย
9) ค้นหาภาพที่สมบูรณ์แบบหรือกราฟิกได้อย่างรวดเร็วจาก Adobe Stock Marketplace
ช่วยให้ค้นหา สิทธิ์การใช้งาน และการจัดรูปภาพ และวิดีโอจากภายในPhotoshop CC เลือกจาก
40 ล้าน Assets บันทึกการเลือกไปยัง Creative Cloud Libraries เพื่อใช้งานภาพได้เลย
8) ลดความซับซ้อนการทำโมเดล 3D ลดความละเอียดของโมเดล 3D เพื่อเพิ่มประสิทธิภาพการทำงานของ Photoshop และเพื่อขยายการเข้าถึงเนื้อหา 3D ที่มีคุณภาพสูงให้แท็บแล็ตสมาร์ทโฟน และอุปกรณ์อื่น ๆ
โปรแกรม Adobe Animate
คุณสมบัติของโปรแกรม Adobe Animate
1) การทำงานร่วมกันกับ Libraries การควบคุมให้ดูได้อย่างเดียว สร้างสรรค์Creative
Cloud Libraries เพื่อให้สามารถนำมาใช้กับสมาชิกในทีมแต่ไม่สามาถเปลี่ยนหรือลบได้
2) Updated Libraries Panel ค้นหาภาพที่ต้องการได้เร็วขึ้นด้วยการค้นหาใหม่ของ
Adobe Stock และไอคอนที่ทำให้ง่ายที่จะได้รับ Licensed จาก Adobe Stock
3) เครื่องมือ Brushes ที่เพิ่มขึ้น รูปแบบใหม่ของเครื่องมือ Brushes, Vector Brush
Smoothing และ Tiling ให้มีวิธีการสร้างผลงานได้มากขึ้น
4) ภาพขนาดย่อสัญลักษณ์กราฟิก รายละเอียดการเคลื่อนไหวของตัวละคร เช่น ปากและมือ
การแสดงตัวอย่างภาพได้เร็วขึ้นด้วย ซึ่งสามารถเพิ่มโดยตรงกับเส้นได้
5) การปรับปรุงตัวเลือกการเผยแพร่เว็บไซต์ Projects ที่สร้างมาจาก HTML5 ในขณะนี้
สนับสนุน HiDPI และ Retina Displays ผู้ลงโฆษณาสามารถสร้างและเผยแพร่โฆษณาจาก HTML5
ที่ขยายเมื่อคลิกหรือเลื่อนเมาส์
6) Transparent Layers สามารถแก้ไขปัญหาด้วยตนเอง ของการวาดด้านบนของ Layers
อื่น ๆ ภายในเคลื่อนไหว
7) แสดงผลงานด้วย Adobe Portfolio แม้ว่าจะปิดเว็บไซต์ก็สามารถเชื่อมโยงไปถึงการสร้าง
และแก้ไขแบบก าหนดเอง และ Contact Pages ให้ดีขึ้นเพื่อเชื่อมต่อกับผู้ชม
