Please enable JavaScript.
Coggle requires JavaScript to display documents.
หลังการออกเเบบเว็บไซต์, :, น.ส.ธัญวรัตน์ หินโบราณ ม.4/4 เลขที่20 - Coggle…
หลังการออกเเบบเว็บไซต์
-
ต่อให้ออกแบบเว็บไซต์ดีเลิศขนาดไหน แต่ถ้าหน้าเว็บไซต์โหลดช้าเกินไป แนวโน้มที่ผู้ใช้จะเบื่อและคลิกออกจากเว็บไปจะสูงมาก เพราะ Page Speed เป็นปัจจัยสำคัญอย่างนึงที่ต้องใส่ใจ โดยเฉพาะบนอุปกรณ์ mobile ที่มีข้อจำกัดเรื่องความเร็วเน็ตกับทรัพยากรประมวลผล
นอกเหนือการเลือกโฮสติ้งเว็บไซต์ที่เสถียร การออกแบบเว็บไซต์ก็สามารถช่วยเรื่อง Page Speed ได้เช่นกัน อย่างการใช้ภาพขนาดเล็ก การใช้ lazy loading โหลดภาพหรือองค์ประกอบเฉพาะส่วนที่ผู้ใช้มองเห็นก่อน การลดจำนวน HTTP Request ให้เหลือน้อยที่สุด หรือการเลือกใช้ CSS มากกว่ารูปภาพในการตกแต่ง รวมทั้งการใช้ browser caching เพื่อให้เว็บเบราว์เซอร์เก็บข้อมูลบางส่วนไว้ในเครื่องของผู้ใช้ จะยิ่งช่วยทำให้เว็บไซต์โหลดได้เร็วขึ้นอย่างเห็นได้ชัด
-
หัวใจสำคัญของการออกแบบเว็บไซต์ ข้อแรกคือการนึกถึงผู้ใช้เป็นหลัก (User-Centered Design) เริ่มตั้งแต่ทำความเข้าใจกลุ่มผู้ใช้เป้าหมายจนถ่องแท้ ว่าคือใคร มีความต้องการอะไร และพฤติกรรมการใช้งานเว็บไซต์เป็นอย่างไร เพื่อนำข้อมูลเหล่านี้มาประกอบการออกแบบเว็บ
ไม่ว่าจะการออกแบบ UI (User Interface) และ UX (User Experience) ให้ใช้งานง่าย เมนูไม่ซับซ้อน สามารถค้นหาข้อมูลที่ต้องการได้รวดเร็ว มีความสอดคล้องในทุกหน้าของเว็บไซต์ หรือกระทั่งการวาง layout อย่างเป็นระเบียบ รูปแบบและขนาดตัวอักษรที่อ่านง่าย ทั้งหมดล้วนทำเพื่อให้กลุ่มผู้ใช้งานเว็บไซต์เรา ได้รับประสบการณ์ที่พึงพอใจที่สุด
หมายความว่า การออกแบบหน้าเว็บไซต์ที่เน้นสวยเพียงอย่างเดียว จะไม่สามารถตอบโจทย์ความต้องการของผู้ใช้ได้แล้วในยุคนี้ เพราะสุดท้าย เว็บไซต์คือมีไว้เพื่อให้ผู้คนเข้ามาใช้งาน การทำความเข้าใจพฤติกรรมของกลุ่มเป้าหมาย ทั้งปัญหาที่พวกเขาเจอและสิ่งที่พวกเขาต้องการ จะล้วนมีประโยชน์ต่อการออกแบบพัฒนาเว็บไซต์ให้ดีขึ้นต่อไปได้
-
Responsive Design คือการออกแบบและพัฒนาเว็บไซต์ ให้สามารถปรับขนาดกับเลย์เอาท์ได้เหมาะกับหน้าจอของแต่ละอุปกรณ์ ไม่ว่าจะเปิดผ่านคอมพิวเตอร์ แท็บเล็ต หรือสมาร์ทโฟน ก็จะแสดงผลได้พอดีเสมอ ช่วยให้ใช้งานสะดวก
ในยุคที่ผู้ใช้งานส่วนใหญ่เข้าถึงอินเทอร์เน็ตผ่านอุปกรณ์ mobile อย่างสมาร์ทโฟนและแท็บเล็ต การออกแบบเว็บไซต์ให้แสดงผลได้ดีเฉพาะหน้าจอคอมพิวเตอร์ จะไม่สามารถตอบโจทย์ผู้ใช้ส่วนมาก ที่ใช้ mobile เข้าถึงเว็บไซต์จากอุปกรณ์ที่มีความกว้างกับความละเอียดของหน้าจอหลากหลายได้
การใช้ CSS media queries, Flexbox และ CSS Grid จึงเป็นเครื่องมือสำคัญ ที่ช่วยทำให้เว็บไซต์แสดงผลได้ยืดหยุ่นบนอุปกรณ์ต่าง ๆ ด้วยการปรับเปลี่ยนการจัดวางองค์ประกอบทุกอย่างในหน้าเว็บไซต์ตามขนาดหน้าจอ เช่น menu และ content ที่วางเรียงกันในแนวนอนบนจอคอม แต่จะปรับเป็นเรียงแนวตั้งเมื่อแสดงผลบนมือถือ รวมทั้งภาพประกอบ และวิดีโอที่ถูกปรับขนาดให้พอดีกับหน้าจอตามไปด้วย
-
Minimalist Design กำลังเป็นเทรนด์ออกแบบเว็บไซต์ที่นิยมส่วนใหญ่ตอนนี้ เพราะเน้นความเรียบง่าย และตัดทอนองค์ประกอบไม่จำเป็นออกไป แต่ยังคงรู้สึกดูดีและใช้งานง่าย สามารถช่วยโฟกัสความสนใจของผู้ใช้ไปยังเนื้อหาสำคัญได้ถูก และค้นหาข้อมูลที่ต้องการภายในเว็บไซต์ได้สะดวก
หลักการออกแบบหน้าเว็บไซต์แบบ Minimalist นั้น จะไม่ใช่แค่การลดทอนองค์ประกอบไม่จำเป็น แต่รวมไปถึงการใช้ Negative Space หรือพื้นที่ว่างให้เกิดประโยชน์ เพื่อสร้าง Visual Hierarchy ที่ช่วยให้ผู้ใช้รับรู้ถึงลำดับความสำคัญขององค์ประกอบต่าง ๆ บนหน้าเว็บ
การเลือกใช้สีที่เข้ากันก็เป็นอีกเรื่องสำคัญ โดยมักจะใช้สีที่เรียบง่าย อย่างสีหลัก (ขาว, ดำ, เทา) และสีรอง (เอิร์ธโทน, พาสเทล, สดใส) หรืออาจเลือกใช้สีที่สื่อถึงตัวตนของแบรนด์ไปเลย
-
ยุคที่สมาร์ทโฟนเป็นอุปกรณ์หลักที่ใช้เข้าถึงอินเทอร์เน็ต การออกแบบเว็บไซต์ปัจจุบัน จึงต้องเน้นไปที่ Mobile First มากขึ้น
แนวคิดนี้คือการออกแบบเว็บ ให้เหมาะสมกับหน้าจอขนาดเล็กของมือถือเป็นอันดับแรก และขยายไปยังหน้าจอขนาดใหญ่ขึ้นตามลำดับ ต่างจากแนวคิดเดิมที่ออกแบบเพื่อ Desktop ก่อนแล้วย่อลงมาให้เข้ากับมือถือ
การออกแบบเว็บไซต์แบบ Mobile First จะช่วยบังคับให้ต้องจัดลำดับความสำคัญของเนื้อหา เลือกเฉพาะสิ่งที่จำเป็น และต้องออกแบบ UI ในขนาดที่เหมาะกับนิ้วมือสัมผัส แถมแนวคิดนี้ยังช่วยแก้ปัญหาเรื่อง Page Speed ได้อีกทางหนึ่ง เพราะเว็บไซต์ถูกออกแบบให้เหมาะกับการเชื่อมต่ออินเทอร์เน็ตที่ไม่เสถียรบนมือถือ
-
ทั้งภาพและวิดีโอบนหน้าเว็บไซต์ สามารถใช้เพิ่มความน่าสนใจ และอธิบายเนื้อหาได้ชัดเจนยิ่งขึ้นได้ ดังคำกล่าวว่า "A picture is worth a thousand words." ภาพเพียงภาพเดียว สามารถสื่อความหมายได้มากกว่าตัวหนังสือนับพันคำ วิดีโอก็เช่นกัน เพราะช่วยอธิบายหรือสาธิตหัวข้อที่ซับซ้อนให้เข้าใจง่ายมากขึ้น การเลือกใช้ภาพหรือวิดีโอในเว็บไซต์ ควรจะต้องคำนึงตั้งแต่เรื่องคุณภาพ ขนาดไฟล์ ความเหมาะสมกับเนื้อหา และลิขสิทธิ์
-
ภาพที่ใช้ควรมีความคมชัด แต่ขนาดไฟล์ไม่ควรใหญ่จนกระทบ Page Speed และเลือกภาพที่สอดคล้องกับเนื้อหา มีความเฉพาะเจาะจง ไม่ใช้ภาพแบบกว้าง ๆ ทั่วไป หากเลือกใช้อย่างเหมาะสม จะยิ่งเสริมให้เว็บไซต์ดูน่าสนใจขึ้น และไม่ส่งผลเสียต่อประสิทธิภาพทำงานโดยรวม นอกจากนี้การใส่ Alt Text กำกับ ยังช่วยให้ Search Engine เข้าใจและจัดอันดับเว็บไซต์ได้ดีขึ้นได้ด้วย
-
Web Accessibility คือการออกแบบและพัฒนาเว็บไซต์สำหรับผู้ใช้ทุกคน รวมทั้งผู้พิการ ให้สามารถเข้าถึงและใช้งานเว็บได้ไม่มีปัญหา ระหว่างขั้นตอนการสร้าง ผู้พัฒนาจึงควรตระหนักเรื่องการออกแบบเว็บไซต์เพื่อผู้ใช้ที่หลากหลาย ไม่ใช่เพียงแค่กลุ่มใดกลุ่มหนึ่ง
ตั้งแต่การใส่ Alt Text ให้กับรูปภาพ การใช้ heading และ landmark ในการกำหนดโครงสร้างของเนื้อหา การใช้สีที่มีความคมชัดเพียงพอระหว่างข้อความกับพื้นหลัง การออกแบบให้รองรับการใช้งานคีย์บอร์ด การจัดทำ transcript สำหรับวิดีโอหรือไฟล์เสียง หรือการใช้ ARIA attributes เพื่ออธิบายหน้าที่แต่ละองค์ประกอบบนหน้าเว็บ สิ่งเหล่านี้ ล้วนช่วยขยายฐานผู้ใช้งานเว็บไซต์ให้กว้างขึ้นได้
-
-