Ý tưởng và xu hướng rực rỡ cho các widget Bài đăng nổi bật nổi bật

Điều hành một tạp chí trực tuyến thành công đòi hỏi một lượng khán giả vững chắc và nhiều bài viết chất lượng cao. Nhưng bố cục của tạp chí cũng đóng một yếu tố quan trọng trong sự tham gia của khách truy cập. Một kỹ thuật là tạo ra một bài viết đặc trưng ở đầu trang chủ. Bài viết này giới thiệu các bài viết phổ biến gần đây nhất để thu hút người đọc lý tưởng hơn vào trang web.

Trong bài đăng này, tôi muốn đề cập đến các kỹ thuật thiết kế có thể được sử dụng để tạo một tiện ích bài đăng nổi bật thành công. Mặc dù tiện ích này thường hoạt động tốt nhất trên bố cục kiểu tạp chí, bạn cũng có thể áp dụng tiện ích này cho các blog nhỏ hơn hoặc các trang web nội dung động.

Tương phản kiểu chữ

Hầu hết các bài viết nổi bật dựa trên hình ảnh thu nhỏ để thu hút sự chú ý. Điều này thường có dạng một hình ảnh nền gắn liền với mỗi tiêu đề bài viết.

Kỹ thuật này có vẻ tuyệt vời nhưng nó khó xây dựng độ tương phản đáng chú ý giữa kiểu chữ và hình nền động. Bằng cách nghiên cứu các tạp chí khác, bạn có thể chọn các kỹ thuật tinh tế để giúp cải thiện khả năng đọc.

Next Web là một tạp chí trực tuyến lớn với tiện ích bài viết nổi bật trên trang chủ. Mỗi hình thu nhỏ khác nhau về kích thước nhưng tất cả đều sử dụng độ dốc tối để cải thiện độ tương phản.

Tiêu đề bài viết được đặt ở dưới cùng của khối hình thu nhỏ trên đỉnh của gradient tối. Các văn bản nhẹ dễ tiêu thụ trên nền tối, nhưng nó cũng không bao gồm toàn bộ hình ảnh.

Những tiến bộ hiện đại trong CSS3 cho phép các nhà phát triển tạo lại các hiệu ứng này một cách dễ dàng. Độ dốc cố định là hoàn hảo nếu bạn có thể đưa chúng đến chảy tự nhiên trên đầu mỗi hình thu nhỏ và vẫn khoe đủ hình ảnh thu hút sự chú ý.

Một kỹ thuật hơi khác được sử dụng trên trang chủ của Xu hướng số. Widget bài này sử dụng nền rắn tương phản cao đằng sau văn bản để làm cho mỗi tiêu đề sắc nét và sống động.

Sự khác biệt ở đây là mỗi màu nền là 100% rắn. Bạn không thể xem toàn bộ ảnh thu nhỏ các phần nhỏ bị mất khỏi tầm nhìn. Nhưng văn bản rõ ràng dễ đọc, có thể hấp dẫn đối với khách truy cập lần đầu tiên hạ cánh trên trang chủ của Xu hướng số.

Tìm đúng số lượng tương phản là khó khăn. Một số trang web như TechCrunch cố gắng đặt văn bản bên cạnh hình thu nhỏ để loại bỏ hoàn toàn vấn đề này.

Nhưng nếu bạn thích phong cách thiết kế của văn bản tiêu đề trên đầu hình thu nhỏ bạn sẽ muốn xem xét làm thế nào các yếu tố tương phản vào phương trình.

Kích thước hình ảnh lẻ tẻ

Giá trị của một widget bài nổi bật là nội dung tính năng trên đầu của trang. Không đối xứng là một cách tuyệt vời để thu hút sự chú ý đối với một cái gì đó, và trong trường hợp này kích thước hình thu nhỏ không đối xứng hoạt động tuyệt vời.

Lấy ví dụ trang chủ của ZDNet. Trong tiện ích nổi bật của họ, bài viết lớn nhất ở phía bên trái sử dụng hình ảnh thu nhỏ rộng nhất để chiếm nhiều không gian hơn và hy vọng thu hút được nhiều sự chú ý hơn. Hình thu nhỏ đặc trưng khác rơi vào kích thước nhỏ hơn với tiêu đề nhỏ hơn.

Lưu ý cách cấu trúc lưới này tự nhiên dẫn mắt bạn xung quanh trang. Mỗi cái nhìn của khách truy cập có xu hướng rơi vào một khu vực cụ thể, sau đó di chuyển giữa mỗi hình thu nhỏ cho đến khi một cái gì đó nhảy ra.

Ngoài ra ZDNet đặt một gradient tối trên mỗi hình ảnh thu nhỏ để xây dựng tương phản typographic cho văn bản dễ đọc hơn. Về cơ bản, đây là một trong những thiết kế widget bài nổi bật nhất mà tôi từng thấy.

Một phong cách thiết kế rất giống nhau có thể được tìm thấy trên trang chủ của CNET. Hình thu nhỏ lớn nhất chiếm vị trí ở phía bên trái vì hầu hết khách truy cập đọc từ trái sang phải.

Khi thiết kế tiện ích bài đăng nổi bật của riêng bạn, bạn không cảm thấy bắt buộc phải tuân theo kỹ thuật này. Bạn có thể đi với bất kỳ kích thước hình thu nhỏ nào miễn là chúng khớp với nhau một cách cố định và tạo thành một bố cục lưới thống nhất.

Kiểu hình thu nhỏ tùy chỉnh

Lựa chọn thiết kế rất khác nhau từ bố trí đến bố trí để không có một giải pháp hoàn hảo. Các widget bài nổi bật chắc chắn phức tạp hơn để thiết kế, vì vậy chúng đòi hỏi nghiên cứu và kiên nhẫn để phù hợp với bố cục tùy chỉnh.

Phong cách của mỗi hình thu nhỏ ảnh hưởng đến cách toàn bộ tiện ích nhìn vào đối tượng của bạn. Lấy ví dụ như kiểu widget nổi bật được tìm thấy trên The Verge.

Mỗi hình thu nhỏ có một gradient đầy màu sắc trên đầu ảnh. Điều này giúp tăng độ tương phản và cải thiện khả năng đọc, nhưng nó cũng thêm một sự tinh tế nhất định cho trang web.

Một số người không thích phong cách này bởi vì họ thấy nó lòe loẹt hoặc không hấp dẫn. Nhưng nó cũng khá phổ biến đối với độc giả Verge và các nhà thiết kế khác đang bắt chước phong cách này.

Nhưng màu sắc và kỹ thuật ưa thích không phải là yếu tố duy nhất để xem xét. Các lưới và kích thước hình thu nhỏ cũng phải được chọn một cách cẩn thận vì chúng giúp xác định kiểu tổng thể của bài đăng nổi bật.

Có lẽ một trong những ví dụ tốt nhất là thiết kế của Mashable đã trải qua nhiều giai đoạn trong nhiều năm. Hiện được coi là nguồn chính của tin tức, Mashable hoạt động để nhồi nhét một số lượng lớn bài đăng lên trang chủ để dễ dàng duyệt.

Một số bài đăng sử dụng hình thu nhỏ hình vuông nhỏ trong khi bảng thành tích chính của họ sửa biểu ngữ hình thu nhỏ kích thước đầy đủ cho bài viết. Điều này phải yêu cầu thêm công việc từ biên tập viên để đảm bảo rằng tất cả các bài đăng đều có ảnh phù hợp với kích thước chính xác.

Nhưng ngay sau khi hạ cánh trên trang web, bạn sẽ nhận thấy rằng nó đưa ra một cảm giác đáng tin cậy. Phong cách này cảm thấy rất chủ đạo và có thể được sử dụng bởi hầu hết mọi loại tạp chí trực tuyến để tạo niềm tin với độc giả. Vấn đề duy nhất là viết đủ nội dung để lấp đầy trang!

Widgets nhiều bài

Một số vật phẩm bài nổi bật hiển thị bài viết trong một lưới tĩnh. Đây thường là lựa chọn phổ biến nhất vì nó có thể thực hiện đáp ứng và pha trộn độc đáo vào bất kỳ bố cục nào.

Các vật dụng khác dựa trên các tương tác động như trình chiếu. Lấy ví dụ trang chủ của Vanity Fair với khối bài đăng nổi bật của họ ở đầu trang. Mỗi lần chỉ có một bài được hiển thị nhưng bài viết mới sẽ hiển thị khi di chuột qua một tiêu đề cụ thể.

Cả hình thu nhỏ và tiêu đề tự động cập nhật với một tương tác di chuột đơn giản. Một điều cần lưu ý là điều này có thể rất khó hiểu đối với người dùng Internet không quen với kỹ thuật di chuột động này.

Nhưng về mặt tích cực, kỹ thuật này sẽ tiết kiệm không gian trên trang bằng cách ẩn nội dung thừa.

Cố gắng không nghĩ các widget bài nổi bật là đen trắng. Chúng chỉ là các phần trang được sử dụng để giới thiệu các bài viết thú vị hoặc phổ biến nhất. Các kỹ thuật mà bạn hoàn thành nhiệm vụ này luôn có thể được mở để tranh luận.

Tạp chí phức tạp sử dụng màn hình trình chiếu đầy đủ cho widget đặc trưng của họ. Mỗi bài đăng có một hình thu nhỏ đặc trưng cùng với độ dốc dưới cùng cho độ tương phản chính tả.

Nhưng thay vì đặt từng hình thu nhỏ cạnh nhau, các bài viết truyền động thông qua một hộp trình chiếu. Điều hướng có thể được đặt tự động hoặc điều khiển bởi các liên kết mũi tên. Thiết kế này tiết kiệm rất nhiều không gian và giúp người dùng sẵn sàng tương tác với trang hơn.

Gói lại

Không có thiết kế đúng hay sai khi nói đến màn hình hiển thị bài đăng nổi bật. Tất cả đều có chung đặc điểm nhưng mỗi tạp chí sử dụng phong cách riêng để tổ chức nội dung nổi bật.

Tôi hy vọng bài đăng này cung cấp các mẹo thiết thực để sử dụng khi thiết kế tiện ích bài đăng nổi bật của riêng bạn. Nếu bạn cảm thấy bế tắc, hãy tìm đến những tạp chí khác để tìm cảm hứng. Tìm những đặc điểm mà bạn thích và tìm ra cách tái tạo chúng để hòa trộn vào thiết kế tạp chí của riêng bạn.