แนวคิดและแนวโน้มที่ยอดเยี่ยมสำหรับวิดเจ็ต Feature Post

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

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

ความแตกต่างของตัวพิมพ์

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

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

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

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

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

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

ความแตกต่างที่นี่ก็คือสีพื้นหลังแต่ละสีจะเป็นของแข็ง 100% คุณไม่เห็นภาพขนาดย่อทั้งหมด ส่วนเล็ก ๆ หายไปจากมุมมอง. แต่ข้อความชัดเจนชัดเจนซึ่งสามารถดึงดูดผู้เข้าชมครั้งแรกในหน้าแรกของ Digital Trends.

การหาปริมาณความเปรียบต่างที่เหมาะสมนั้นเป็นเรื่องยุ่งยาก บางเว็บไซต์เช่น TechCrunch พยายามวางข้อความไว้ข้างรูปขนาดย่อเพื่อลบปัญหานี้โดยสิ้นเชิง.

แต่ถ้าคุณชอบสไตล์การออกแบบของข้อความพาดหัวที่ด้านบนของภาพขนาดย่อที่คุณต้องการ พิจารณาความแตกต่างของปัจจัยในสมการ.

ขนาดภาพเป็นระยะ ๆ

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

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

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

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

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

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

ลักษณะรูปขนาดย่อที่กำหนดเอง

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

สไตล์ของภาพขนาดย่อแต่ละภาพมีผลต่อลักษณะที่วิดเจ็ตทั้งหมดส่งต่อผู้ชมของคุณ ยกตัวอย่างเช่นสไตล์วิดเจ็ตที่โดดเด่นที่พบใน The Verge.

ภาพย่อแต่ละภาพมีการไล่ระดับสีที่มีสีสันที่ด้านบนของภาพถ่าย สิ่งนี้ช่วยเพิ่มความเปรียบต่างและปรับปรุงความสามารถในการอ่าน แต่ยังเพิ่มความเก๋ไก๋ให้กับเว็บไซต์อีกด้วย.

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

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

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

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

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

วิดเจ็ตแบบหลายโพสต์

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

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

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

แต่ในด้านบวกเทคนิคนี้จะ ประหยัดพื้นที่ ในหน้าโดยการซ่อนเนื้อหาส่วนเกิน.

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

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

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

สรุป

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

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