Thiết kế blog: 7 ví dụ thiết kế tập trung vào người dùng

Chúng ta đều biết nội dung quan trọng như thế nào đối với bất kỳ chiến dịch tiếp thị nào.

Blog, một ví dụ đã trở thành nền tảng của bất kỳ trang web thành công nào; hướng người dùng với nội dung được nhắm đúng mục tiêu, có liên quan và hấp dẫn và cuối cùng thích thú với họ đến mức họ chuyển đổi và đăng ký để nhận được nhiều hơn. 

Thực tế là, nhiều người dùng sẽ vào trang web của bạn (và tìm thấy thương hiệu của bạn) thông qua các bài viết trên blog của bạn nhiều hơn bao giờ hết, vì vậy thiết kế blog của bạn cần tốt nhất có thể. 

Khi nói đến thiết kế blog, có rất nhiều yếu tố khác nhau để xem xét, bao gồm kích thước phông chữ, phân cấp, kêu gọi hành động và độ rộng văn bản, trong số những thứ khác. 

Với rất nhiều điều cần tính đến, có thể rất căng thẳng khi đảm nhận một thiết kế blog mới.

Đó chính xác là lý do tại sao tôi muốn biên soạn một số ví dụ tuyệt vời về cảm hứng thiết kế blog tập trung vào người dùng để giúp phân phối tốt nhất nội dung của bạn và khiến độc giả của bạn quay lại để biết thêm! 

Lưu ý của tác giả: Tất cả các blog này đang được xem trên 13 Macbook Pro. Những gì bạn xem có thể thay đổi dựa trên kích thước màn hình của bạn. Nhưng! Nó phải là một màn hình trải nghiệm người dùng nhất quán để màn hình. 

1.  Wistia 

Lời khuyên lớn nhất tôi có thể đưa ra khi thiết kế blog của mình cho người dùng là làm nó có thể đọc được. 

Ý tôi là gì? Đơn giản chỉ cần đặt, mức độ dễ đọc và tối ưu hoá. Sử dụng phông chữ sạch, tiêu đề và tập trung vào nội dung.

Wistia thực hiện một công việc tuyệt vời này trên blog của mình.

Chúng tôi được giới thiệu với một cái nhìn tổng quan ngắn gọn về các tác phẩm mới và nổi bật, cũng như một danh sách chủ đề ngắn, cụ thể.

Lưu ý 4 chủ đề ở đây như thế nào – không phải 25. Điều này hợp lý hóa trải nghiệm người dùng và giúp họ có được nội dung họ quan tâm nhất một cách dễ dàng và đưa việc phải đoán ra khỏi điều hướng. 

Tôi không thể nói cho bạn biết tôi đã vào blog bao nhiêu lần, chỉ để được chào đón với hàng tấn danh mục với một bài đăng trên blog. Tại sao? Có phải đó là cách tốt hơn!

Wistia cũng cung cấp cho bạn tất cả thông tin bạn cần để đánh giá bài đăng trước khi nhấp – danh mục, tiêu đề rõ ràng, cộng với một đoạn trích tuyệt vời khiến bạn muốn đọc thêm. 

Nó cũng làm nổi bật tác giả và khi nó được công khai, điều đó có vẻ nhỏ nhưng thực sự rất quan trọng. Người dùng muốn biết những gì họ đang đọc không bị lỗi thời và nó được viết bởi một chuyên gia.   

Phần cuối cùng làm cho trang danh sách của Wistia trở nên tuyệt vời trong cuốn sách của tôi, là hình ảnh đặc trưng theo ngữ cảnh của nó. Những hình ảnh này thực sự mang lại những trích đoạn cho cuộc sống và thu hút ánh mắt của bạn. 

Wistia cũng có một thiết kế bài viết siêu sạch và dễ đọc, tập trung vào nội dung và chỉ có nội dung.

Việc sử dụng hệ thống phân cấp phông chữ để chia nhỏ các phần giúp dễ đọc lướt hơn và việc không có thanh bên thực sự giúp khách truy cập tham gia vào nội dung không bị phân tâm.

2. Drift

Thiết kế blog của Drift là một thiết kế khác chắc chắn đạt điểm dễ đọc.

Trang blog của nó là một cột nhỏ, một cột với hình ảnh lớn, đẹp để thực sự khơi gợi sự quan tâm của người dùng và khiến họ đọc. 

Việc thêm thời gian đọc ước tính là điều gì đó bị lãng quên nhưng có thể cực kỳ quan trọng đối với người dùng của bạn.

Bạn đã bao giờ bắt gặp một bài báo bạn thực sự muốn đọc nhưng không nghĩ rằng bạn có đủ thời gian và không bao giờ đọc? Đưa ra một số hướng dẫn về số nỗ lực mà người dùng của bạn sẽ cần đóng góp là một cách tuyệt vời để cải thiện độc giả. Điều này cho phép người dùng biết khi nào họ nên đánh dấu một bài viết, thay vì đọc một phần tư và nhảy sang một bài khác. 

Thiết kế bài viết thực tế của Drift tạo ra ấn tượng là tốt.

Một lần nữa, đi theo lộ trình một cột và loại bỏ phiền nhiễu là một cách tuyệt vời để khuyến khích người đọc hoàn thành toàn bộ bài đăng trên blog và cuối cùng đạt đến điểm chuyển đổi mà bạn đã đặt ở vị trí chiến lược – hoặc nên đặt. 

Nhóm thực hiện tốt việc chia nhỏ các bài đăng của mình bằng hình ảnh trong cột.

Không có cách nào nhanh hơn để ngăn cản ai đó đọc nội dung của bạn hơn là làm cho nó trông giống như một trải nghiệm khó khăn. Phá vỡ các bài viết dài với tiêu đề phù hợp và hình ảnh tuyệt vời là một cách chắc chắn để tăng khả năng đọc và dễ đọc của bạn. 

Đó chính xác là lý do tại sao tôi phải có Drift như một ví dụ về cảm hứng thiết kế blog tập trung vào người dùng. 

3.  Sigstr

Một bố cục danh sách blog tuyệt vời khác có thể được nhìn thấy tại Sigstr.

Công ty chữ ký email sử dụng bố cục kiểu thẻ bài của Cameron, có thể được thực hiện rất tốt (trong trường hợp này) hoặc thực sự kém. 

Thông thường bạn sẽ thấy các trang liệt kê kiểu thẻ ba cột, có thể khiến nội dung khó tiêu hóa. Tuy nhiên, nhóm Sigstr đã chọn cách bố trí hai cột, điều này giới hạn số lượng tùy chọn trong tay và tránh gửi quá nhiều tin nhắn cùng một lúc.

Việc sử dụng các hình ảnh đặc trưng giúp làm nổi bật từng thẻ riêng lẻ và khiến người dùng muốn cuộn qua tất cả nội dung để xem những gì họ có thể tìm hiểu. 

Bản cập nhật duy nhất tôi khuyên bạn nên thực hiện là kéo dài đoạn trích bài đăng để cung cấp cho người dùng cái nhìn sâu sắc hơn một chút về nội dung của bài viết. Với tinh chỉnh đó, bạn đã có một người chiến thắng thực sự!

Nhìn vào thiết kế bài viết bên trong, nó rất hợp nhau và tập trung vào khả năng đọc của người dùng. 

Lựa chọn phông chữ và kích thước của trang cực kỳ dễ nhìn và giúp hướng dẫn bạn xuống trang.

Một trong những lý do chính mà tôi muốn đưa Sigstr vào danh sách cảm hứng thiết kế blog của mình là do việc sử dụng tuyệt vời các chiều cao phù hợp trên chúng nét chữ. Sử dụng sai chiều cao dòng, dù lớn hay quá nhỏ, có thể ảnh hưởng nghiêm trọng đến khả năng đọc của bạn. Quá lớn và nội dung cảm thấy bị lôi cuốn và khó khăn để đọc; Quá nhỏ và đó là một mớ hỗn độn lộn xộn biến thành một khối văn bản vững chắc. 

Bằng cách thực hiện trực quan chiều cao giữa các dòng, bạn sẽ giúp cung cấp nội dung linh hoạt mà nó cần có.

4.  Invision

Blog của InVision thực hiện rất nhiều điều thực sự tốt.

Điểm cộng lớn nhất đối với tôi là việc sử dụng các tiêu đề mô tả. Trong nội bộ, điều này loại bỏ sự cần thiết cho các trích đoạn bài đầy đủ hoạt động rất tốt với thanh trượt bài đặc trưng.

Thông thường tôi chống lại các thanh trượt hoặc scroll, nhưng đối với điều này, nó hoạt động tốt với các tiêu đề blog và hình ảnh nổi bật lớn trong nền.

Bên dưới thanh trượt bài đặc trưng, ​​inVision cũng sử dụng bố cục 3 cột với các đoạn trích ngắn và ngọt ngào, gần như mô tả một lớp lót.

Việc sử dụng không gian trắng cho phép mỗi bài đăng dễ thở và giúp người dùng tập trung vào việc tìm kiếm nội dung họ quan tâm thay vì bị quá tải bởi quá nhiều tùy chọn cùng một lúc – điều phổ biến với giao diện 3 cột. 

Thiết kế bài viết thực tế, như với các trang web cảm hứng thiết kế blog khác của chúng tôi, là đơn giản và cột đơn. 

Điều yêu thích của tôi mà InVision làm là lấy các nút chia sẻ xã hội và gọi hành động chính (CTA) và đặt chúng vào một thanh điều hướng dính ở dưới cùng của màn hình khi người dùng cuộn.

Đó là một cách tuyệt vời để giữ tâm trí của họ và dễ dàng chia sẻ, mà không thu hút sự chú ý. 

5.  Digital Marketer

Nhiều cảm hứng thiết kế blog có thể được tìm thấy trên Digital Marketer.

Tổ chức đào tạo đã chọn cách bố trí tương tự như InVision, nhưng không có thanh trượt/ scroll. Bởi vì đầu trang của bố cục không phải là trang danh sách blog điển hình của bạn, nên nó chắc chắn khơi gợi sự quan tâm của người dùng và khiến họ đọc. 

Digital Marketer cũng nêu bật bài đăng nổi bật của nó trong phần đầu tiên, giống như những người khác trong danh sách này, tận dụng một tiêu đề mô tả để quyến rũ người dùng và khiến họ đọc thêm. 

Phần yêu thích của tôi về bố cục này là cách bốn bài đăng gần đây nhất được hiển thị với các số thứ tự của chúng. Nó thu hút mọi ánh nhìn, mang lại cảm giác định hướng và giúp bạn đọc các tiêu đề gần như ngay lập tức.

Bên dưới phần nổi bật này, bạn sẽ có một bố cục blog truyền thống hơn với nguồn cấp dữ liệu ở bên trái và một thanh bên ở bên phải. Nguồn cấp dữ liệu bài đăng sử dụng các trích đoạn để giúp cung cấp cho người dùng nhiều ngữ cảnh hơn về nội dung của bài viết và bao gồm một nút đọc thêm nổi bật không thể bỏ qua.

Nhìn chung, Digital Marketer thực hiện một công việc tuyệt vời là không làm lộn xộn thanh bên của nó với quảng cáo hoặc CTA.

Nhóm đã lựa chọn một thanh tìm kiếm blog đơn giản, các bài đăng phổ biến nhất và CTA duy nhất theo bạn khi cuộn trang. 

6.  Sprout Social

Tiếp theo là Sprout Social. Tôi sẽ gọi nó là bố trí thẻ “toàn chiều rộng”; nó bị chặn nhưng mỗi bài đăng trên blog cá nhân không đấu tranh để thu hút sự chú ý trong mắt người dùng. 

Các hình ảnh nổi bật lớn của blog mang lại sự quan tâm trực quan tuyệt vời và hướng mắt người đọc đến tiêu đề. Bố cục này làm cho bạn muốn cuộn, hoặc vuốt, qua nhiều bài viết để xem những gì khác bạn có thể tìm hiểu. 

Kiểu chữ và phân cấp phông chữ của bố cục cũng rất sạch sẽ, và như với các ví dụ khác, giúp thu hút người đọc bằng cách làm cho nó dễ dàng đọc lướt và thực sự tiêu hóa nội dung.

Một điều lớn để làm nổi bật rằng Sprout Social và những người khác đang làm tốt là không sử dụng màu đen đầy đủ như màu phông chữ. 

Tôi đã thấy rằng màu đen đặc trên nền trắng có thể khiến mắt bạn mệt mỏi khi đọc, do đó, việc thay đổi màu thành màu xám đen hoặc than củi sẽ giúp dễ đọc.

Một cái gì đó tôi thực sự thích là cách Sprout Social làm mờ dần các biểu tượng chia sẻ xã hội theo bạn khi bạn đọc. 

Điều này đưa sự mất tập trung ra khỏi sự cân bằng nhưng vẫn cung cấp cho người dùng khả năng chia sẻ nếu họ muốn.  

7.  Help Scout

Cuối cùng, nhưng không kém phần quan trọng, blog của Help Scout sử dụng một kiểu thẻ bài khác, nhưng lần này có 3 cột in đậm. 

Nó bắt đầu với phần bài đăng lớn đặc trưng đẹp mắt ngay lập tức thu hút người dùng bằng hình minh họa, trước khi hiển thị phần lớn nội dung trong các cột. 

Như đã đề cập trước đó, bố cục 3 cột có thể dễ dàng gây mất tập trung, nhưng các tác phẩm của Help Scout. Các thẻ không có mô tả lớn và họ sử dụng hình ảnh lớn hơn, rực rỡ hơn để thu hút mắt và khiến chúng tham gia.

Trợ giúp Help Scout cũng khéo léo kết hợp các quảng cáo của Wap cùng với các bài viết nội dung thực tế của nó.

Bây giờ, bằng quảng cáo, không có nghĩa là các banner phải trả tiền, nhưng các mục quảng cáo nội bộ có liên quan như Nghiên cứu Mức lương Hỗ trợ Khách hàng 2017.

Đây là một cách thông minh để nhận được các ưu đãi nội dung cao cấp của bạn, mà không gây hấn hoặc spam. 

Thiết kế bài viết bên trong sử dụng chiều cao và phần đệm tuyệt vời để đảm bảo nội dung có thể thở và không cảm thấy quá khó khăn để đọc.

Tôi cũng là một fan hâm mộ lớn của phần Đọc thêm. Đây là một cách dễ dàng để tiếp tục hành trình của người dùng vào các bài đăng khác và tăng thời gian trên trang.

Phần kết luận

Luôn nghĩ đến người dùng trước. Sử dụng nguồn cảm hứng thiết kế blog này để giúp hướng dẫn họ thông qua nội dung của bạn và loại bỏ mọi phiền nhiễu có thể đưa họ ra khỏi mục tiêu trong tầm tay.

Phần quan trọng nhất của bất kỳ thiết kế nào là thử nghiệm nó với người dùng cụ thể của bạn để đảm bảo đó là trải nghiệm họ muốn và trải nghiệm mà công ty bạn cần. 

Nếu bạn đang cần một Công ty chuyên nghiệp thiết kế Website thì hãy liên hệ với BrandTechup nhé!!!