การออกแบบเว็บไซต์ CMS: คู่มือการใช้งานเนื้อหาแบบไดนามิก

เผยแพร่แล้ว: 2022-03-11

เทคนิค UI/UX สำหรับโลกที่ขับเคลื่อนด้วยเนื้อหาแบบไดนามิกของสื่อออนไลน์

เว็บแอปพลิเคชันและแอปบนอุปกรณ์เคลื่อนที่ส่วนใหญ่ โดยเฉพาะอย่างยิ่งในพื้นที่สื่อออนไลน์ ขับเคลื่อนโดยระบบจัดการเนื้อหา (CMS) เช่น WordPress, Drupal และอื่นๆ ระบบเหล่านี้มีขึ้นเพื่อตอบสนองความต้องการของยุคอินเทอร์เน็ตที่เนื้อหามีความสำคัญและเป็นไดนามิก—เปลี่ยนแปลงอย่างต่อเนื่องและบ่อยครั้ง

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

ต่อไปนี้คือแนวทางสำหรับนักออกแบบดิจิทัลที่ต้องการขยายรายการเพลงของตนให้กว้างกว่าเว็บไซต์แบบคงที่และหน้า Landing Page และเริ่มออกแบบอย่างมีประสิทธิภาพสำหรับแอปพลิเคชันที่ขับเคลื่อนด้วยเนื้อหาแบบไดนามิก เช่น ไซต์ข่าว บล็อก หรือแม้แต่เครือข่ายโซเชียลที่ผู้ใช้เผยแพร่เนื้อหาเป็นประจำ ในการที่จะทำการเปลี่ยนแปลงนี้ นักออกแบบจะต้องเข้าใจว่าโดยทั่วไปแล้วประเภทของแอปพลิเคชันเหล่านี้มีโครงสร้างอย่างไร เช่นเดียวกับการนำแนวคิด "เน้นเนื้อหาเป็นอันดับแรก" มาใช้ในกระบวนการออกแบบ

CMS Web Design IA Patterns ในแอปพลิเคชันที่ขับเคลื่อนด้วย CMS

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

ไดอะแกรมของรูปแบบการออกแบบสถาปัตยกรรม CMS ทั่วไปสำหรับการออกแบบเว็บ CMS

หน้าแรก

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

หน้าโพสต์

หาก "โพสต์" เป็นหน่วยหลักของแอปพลิเคชันที่ขับเคลื่อนด้วย CMS หน้า โพสต์จะเป็นที่ที่มีการแสดงรายละเอียดสาธารณะทั้งหมดเกี่ยวกับโพสต์ อาจเป็นหน้าที่สำคัญอย่างแท้จริงเพียงหน้าเดียวในแอปพลิเคชัน และอาจเป็นหน้าบทความหรือหน้าข้อมูลเกี่ยวกับเหตุการณ์ บุคคล กลุ่ม ผลิตภัณฑ์ ฯลฯ ในแอปพลิเคชันที่ใหญ่กว่าบางรายการ อาจมีโพสต์และโพสต์หลายประเภท หน้าที่กำหนด

หน้ารายการ/หมวดหมู่

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

ค้นหาหน้า

หน้าเฉพาะสำหรับการค้นหาไม่จำเป็นสำหรับแอปพลิเคชันขนาดเล็ก แต่มีประโยชน์เสมอ บางครั้งสามารถรวมหรือรวมเข้ากับหน้าหมวดหมู่/รายการได้

โปรไฟล์ผู้ใช้/ผู้แต่ง

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

หน้าแรกผู้ใช้หรือแดชบอร์ด

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

การออกแบบ UI ที่ขับเคลื่อนด้วยเนื้อหาสำหรับเนื้อหาแบบไดนามิก

เนื้อหามาก่อนการออกแบบ การออกแบบในกรณีที่ไม่มีเนื้อหาไม่ใช่การออกแบบ แต่เป็นการตกแต่ง – เจฟฟรีย์ เซลด์แมน

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

พิจารณาเนื้อหาก่อนกำหนดสไตล์

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

ตัวอย่างการออกแบบเว็บไซต์แบบไดนามิก–The Verge

ตัวอย่างการออกแบบเว็บ CMS–Glamour Paris
ตัวอย่างจากเว็บไซต์ข่าวที่ขับเคลื่อนด้วย CMS สองแห่ง แสดงให้เห็นถึงรูปแบบตามเนื้อหา

ทำความรู้จักว่าใครจะสร้างเนื้อหาเป็นประจำ

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

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

DO ออกแบบด้วยเนื้อหาจริงที่เป็นไปได้

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

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

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

อย่าเจาะจงกับสไตล์มากเกินไป

เมื่อกำหนดรูปแบบภาพ อย่าเจาะลึกเนื้อหาโดยสะท้อนถึงอารมณ์ แนวเพลง เรื่องราว หรือหัวเรื่องเพียงเรื่องเดียว ให้เรียบง่ายและเป็นสากลโดยคำนึงถึงช่วงของโทนเสียงทั้งหมดที่อาจเข้ามามีบทบาทในเนื้อหา

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

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

ตัวอย่างการออกแบบ UI ของหน้าแรกสำหรับเว็บไซต์เนื้อหาแบบไดนามิก
ในสองแนวทางนี้ในการออกแบบเว็บไซต์แบบไดนามิกและรูปแบบภาพของแบรนด์ วิธีทางซ้ายไม่สามารถพิจารณาเนื้อหาทั้งหมดที่เข้ามาเล่น

ออกแบบแต่ละหน้าเป็น เทมเพลต สำหรับเนื้อหาที่หลากหลาย

คิดว่าหน้าแต่ละประเภทในแอปพลิเคชันเป็นเทมเพลตหรือพิมพ์เขียวสำหรับรายการสื่อต่างๆ (รูปภาพ วิดเจ็ต วิดีโอ บล็อกข้อความ ฯลฯ) ให้กรอก และรู้ว่ารายการใดบ้างที่อาจมีการเปลี่ยนแปลงและรายการใดบ้างที่สามารถแก้ไขได้ .

DO กำหนดกฎเกณฑ์และความสม่ำเสมอที่ชัดเจน

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

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

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

อย่าให้การออกแบบเฉพาะตัวกับโพสต์

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

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

อย่าทึกทักเอาเองว่าเนื้อหาจะพอดีกับพื้นที่ที่กำหนดเสมอ

ผลลัพธ์ที่หลีกเลี่ยงไม่ได้อย่างหนึ่งของลักษณะไดนามิกของแอปพลิเคชันที่ขับเคลื่อนด้วย CMS คือจำนวนข้อความที่ปรากฏในพื้นที่แสดงผลที่กำหนดอาจมีความยาวแตกต่างกันไป บ่อยครั้ง การจำกัดตัวอักษรสามารถวางบนข้อความใน CMS เพื่อให้สิ่งต่าง ๆ สมเหตุสมผล แต่นักออกแบบไม่ควรคิดสุ่มสี่สุ่มห้าว่ากลุ่มข้อความจะพอดีกับจำนวนบรรทัดที่แน่นอนเสมอ

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

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

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

ปล่อยให้เนื้อหาโดดเด่น

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

DO ล้อมรอบเนื้อหาแบบไดนามิกด้วยสีพื้นหลังที่สะอาด สว่าง และเป็นกลาง

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

ทำให้ภาพมีขนาดใหญ่และบังคับบัญชา

ภาพใหญ่ โดยเฉพาะภาพถ่าย ดึงดูดความสนใจของผู้เข้าชมได้อย่างมีประสิทธิภาพมากกว่าสิ่งอื่นใด

ทำพาดหัวและข้อความเนื้อหาให้ใหญ่และอ่านง่าย

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

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

อย่าออกแบบมากเกินไป

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

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

ตัวอย่างเว็บไซต์เนื้อหาไดนามิกที่ไม่ดี
แม้ว่านักออกแบบกราฟิกหลายคนอาจชื่นชอบความงามที่มีสไตล์สูงที่ใช้ในหน้าแรกของ The Outline แต่ก็บดบังเนื้อหา

อย่าใช้พื้นหลังสีใกล้กับภาพไดนามิก

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

ตัวอย่างการออกแบบส่วนท้ายด้วยเว็บไซต์เนื้อหาแบบไดนามิก

อย่าใช้พื้นหลังสีเข้มเพื่อปกปิดข้อความทั้งหน้า

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

ทำความเข้าใจว่ารูปภาพและสื่ออื่นๆ ทำงานอย่างไรที่ส่วนหลัง

ระบบการจัดการเนื้อหาอาจแตกต่างกันไปตามวิธีจัดการสื่อ เช่น รูปภาพ วิดีโอ และไฟล์แอนิเมชั่น และบางครั้งนักพัฒนาซอฟต์แวร์จะตั้งใจตั้งข้อจำกัดบนสื่อเพื่อวัตถุประสงค์ด้านประสิทธิภาพ

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

ค้นหาว่ารองรับรูปแบบสื่อใดบ้าง

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

ตัวอย่างเช่น จะช่วยให้ทราบว่าจะมีการสร้างเครื่องเล่นวิดีโอที่กำหนดเองหรือฝังวิดีโอ YouTube หรือ Vimeo บนหน้าเว็บเป็นตัวเลือกเดียว ในกรณีของ YouTube มีมาตรฐานและข้อจำกัดเฉพาะในการฝัง ปรับขนาด และสกินวิดีโอ

อย่ากำหนดครอบตัดและขนาดต่างๆ มากมายสำหรับรูปภาพ

แม้ว่าในทางเทคนิคแล้วมักจะมีความเป็นไปได้ที่จะสร้างการครอบตัดจำนวนมากแยกจากกันสำหรับรูปภาพ แต่มักจะมีผลกระทบด้านลบในการทำเช่นนั้น ตัวอย่างเช่น ตามค่าเริ่มต้น CMS ของ WordPress จะสร้างรูปภาพที่อัปโหลดหลายขนาดโดยอัตโนมัติในอัตราส่วนเดียว แต่ให้ตัวเลือกสำหรับการสร้างภาพขนาดย่อที่ครอบตัดแยกหนึ่งภาพเท่านั้น

การครอบตัดรูปภาพแต่ละภาพให้มีอัตราส่วนเพิ่มเติมไม่เพียงแต่ต้องติดตั้งปลั๊กอินพิเศษหรือเครื่องมือเฉพาะที่ต้องได้รับการพัฒนาล่วงหน้าเท่านั้น แต่ยังต้องมีความต้องการเพิ่มเติมสำหรับผู้แก้ไข เนื่องจากต้องการให้พวกเขาทำงานเพิ่มเติมสำหรับรูปภาพทุกภาพที่อัปโหลด บางครั้งสิ่งนี้ยังทำให้การเลือกภาพที่ใช้งานได้ยากขึ้น และทำให้เวิร์กโฟลว์ช้าลงไปอีก

เครื่องมือสื่อสำหรับผู้ดูแลระบบ WordPress พร้อมฟังก์ชันครอบตัดสำหรับเว็บไซต์เนื้อหาแบบไดนามิก
ระบบการครอบตัดเริ่มต้นใน WordPress CMS

พิจารณาว่าจำเป็นต้องสนับสนุนเนื้อหาเดิมหรือไม่

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

จัดเตรียมเครื่องมือแก้ไขเนื้อหาด้วยวิธีการต่างๆ ในการจัดรูปแบบข้อความ

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

แพลตฟอร์ม CMS ยอดนิยมมากมาย เช่น WordPress มีตัวเลือกการจัดรูปแบบข้อความตามค่าเริ่มต้น แต่ถ้าผู้ออกแบบไม่ได้วางแผนว่าจะปรับแต่งสไตล์เหล่านี้ให้เข้ากับการออกแบบอย่างไร ผลลัพธ์ก็จะออกมาเป็นแบบสุ่ม ธรรมดา หรือไม่พึงประสงค์

ออกแบบ DO สำหรับวิธีทั่วไปทั้งหมดที่สามารถจัดรูปแบบข้อความได้

โดยเฉพาะอย่างยิ่งสำหรับบล็อกและเว็บไซต์ข่าว ต้องใช้เวลาในการจัดหากฎของสไตล์ให้กับนักพัฒนาสำหรับวิธีการทั่วไปทั้งหมดที่สามารถจัดรูปแบบข้อความได้ รวมถึง: ข้อความตัวหนาและตัวเอียง หัวเรื่องและหัวข้อย่อย รายการที่มีหมายเลขและหัวข้อย่อย บล็อกโควต คำอธิบายภาพ และไฮเปอร์ลิงก์

ตัวอย่างการออกแบบหน้าโพสต์ที่มีและไม่มีสไตล์เพิ่มเติมให้ในการออกแบบเว็บไซต์แบบไดนามิก
ตัวอย่างหน้าโพสต์ที่มีและไม่มีสไตล์สำหรับไฮเปอร์ลิงก์และบล็อคโควตสำหรับเว็บไซต์เนื้อหาแบบไดนามิก

อย่าให้ผู้สร้างเนื้อหาควบคุมโวหารมากเกินไป

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

รูปแบบในอนาคตของการออกแบบที่ขับเคลื่อนด้วยเนื้อหา

ด้วยการถือกำเนิดของเทคโนโลยีใหม่ ๆ เช่น Augmented Reality (AR) กระบวนทัศน์ใหม่สำหรับการออกแบบที่ขับเคลื่อนด้วยเนื้อหาจึงเริ่มขึ้น แอปพลิเคชันที่ขับเคลื่อนด้วย CMS ในพื้นที่ความเป็นจริงเสริม/ผสม ซึ่งปัจจุบันยังอยู่ในช่วงเริ่มต้น ใช้วัตถุและ/หรือฉากในโลกแห่งความเป็นจริงเป็นส่วนสำคัญของเนื้อหา

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

การออกแบบแอพแบบไดนามิก: แอปพลิเคชั่น AR ในเนื้อหาข่าว
หน้าจอสองหน้าจอจากฟีเจอร์ AR ของแอป Quartz news แสดงกรณีการใช้งานที่แตกต่างกันซึ่งส่งผลต่อเนื้อหา

การออกแบบเว็บ CMS แตกต่างกันเล็กน้อย

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