Mann up Website
-
CLIENT
MANN UP MAGAZINE
-
TIME
Q2 2023 - Q1 2024
![](/themes/md_beau/img/work-MannUp/mannupAbout-img-pc.jpeg)
Giới thiệu
Mann up là tạp chí đàn ông sở hữu một phong cách nội dung rất khác biệt, trong đó, từ hình ảnh đến văn phong của từng bài viết đều được thể hiện với chiều sâu lay động.
Vì thế, đối với dự án này, mục tiêu cao nhất của chúng tôi là phải truyền tải được một trải nghiệm đọc khác biệt từ trong thiết kế. Đây là một dự án sẽ bứt ra khỏi lối mòn trong cách thức trình bày của một trang thông tin điện tử truyền thống.
Trước khi triển khai, Beau cũng đã có thời gian đủ lâu để nghiên cứu và thấu hiểu về từ những giá trị căn bản trong branding của khách hàng và nghiên cứu về từ cấu trúc các hạng mục nội dung cho đến tần suất lên bài để có thể đề xuất ra một thiết kế về trải nghiệm có thể biểu đạt được những điểm mạnh trong nội dung của Mann up.
Giao diện dành cho những bài viết không tuổi
Khác với các trang thông tin điện tử và báo mạng thông thường, những bài viết của Mann up không phải là những thông tin tức thời và sẽ không còn được quan tâm chỉ sau vài ngày. Đối với một tạp chí về phong cách sống và văn hoá hưởng thụ, những bài viết của Mann up là những câu chuyện và chủ đề mà cho dù 10 năm sau, một độc giả mới khi nhìn thấy vẫn sẽ nhận thấy đó là những góc nhìn độc đáo được chia sẻ từ cảm nhận sâu sắc của người viết.
Vì thế, Beau đã thiết kế ra một giao diện thể giúp ngay cả những bài viết cũ của các tác giả cũng có thể được giới thiệu một cách ngẫu nhiên đến với người đọc. Ngay cả với những người theo dõi Mann up lâu năm, vẫn có rất nhiều bài viết mà họ tình cờ bỏ qua. Người dùng của website Mann up mới cũng đồng thời có thể làm mới feed hiển thị để tìm kiếm một nhóm bài viết mới của Mann up.
Trải nghiệm đọc mới của Mann up
Sau một quá trình dài để trao đổi và tìm hiểu về định hướng của người sáng lập, chúng tôi hiểu rằng một phần cốt lõi trong trải nghiệm đọc của Mann up đến từ một hoàn cảnh tương tác hai chiều. Khoảnh khắc đó bao gồm việc tác giả trong những giờ phút lắng đọng nhất viết ra những chia sẻ sâu sắc của mình; và độc giả ở một thời điểm tĩnh lặng trong ngày chợt cảm thấy một điểm chạm lay động với tâm trí của mình khi dõi theo một bài viết.
Bản thân từng hình ảnh và văn phong trong mỗi bài viết cũng được Mann up chuẩn bị một cách kỳ công. Vì thế, để tái hiện và tối ưu được trải nghiệm đọc ấy, Beau đã xây dựng một hệ thống layout tối ưu cho việc hiển thị nội dung. Đây là cách làm không giống với bất cứ trang thông tin điện tử nào ở Việt Nam hiện tại. Ngay cả vị trí đặt quảng cáo cũng được tính toán để tạo ra trải nghiệm liền mạch và phù hợp hoàn cảnh nhất khiến cho người đọc gần như không cảm thấy đó là quảng cáo.
Đây là một giao diện sẽ làm tôn nên tối đa chất lượng nội dung của Mann up, để cho hình ảnh và nội dung luôn được trình bày ở trạng thái ấn tượng nhất, tương đồng với lối đọc chậm và lắng đọng của những độc giả trung thành lâu năm. Khi được đi kèm với ngôn ngữ hình ảnh theo định hướng của Mann up, trải nghiệm sau cùng là một thứ mà chúng tôi tin rằng chưa có bất cứ đơn vị nào tại Việt Nam truyền tải được một thứ tương đồng.
Bên cạnh đó, phân nhánh chuyên về Typography của Beau cũng xây dựng riêng một bộ typeface display độc quyền để sử dụng làm điểm nhấn về nhận diện thương hiệu cho Mann up. Bộ typeface này hiện đang được ứng dụng trên tiêu đề, banner và các ấn phẩm truyền thông khác của Mann up. Việc sử dụng một bộ typeface riêng là một chi tiết đặc trưng truyền thống của những tờ báo lớn trên thế giới. Đồng thời, sự ra đời của một chi tiết đặc biệt như vậy cũng rất phù hợp với thời điểm kỷ năm 11 năm thành lập của một tạp chí về phong cách sống đặc biệt như Mann up.
Điều hướng và mở rộng
Một chi tiết mà chúng tôi cũng đặc biệt chú ý trong dự án này đó là phải tính toán được luồng trải nghiệm của người dùng trong mỗi lần đăng nhập.
Số trang xem trung bình trên mỗi lần visit của Mann up là 6.5, cao hơn nhiều so với một trang thông tin điện tử thông thường. Điều đó thể hiện rằng người đọc rất hứng thú với nội dung của tạp chí này. Vì thế, việc xây dựng được một luồng trải nghiệm liên tục và khép kín, giúp người đọc dễ dàng tìm kiếm các bài viết liên quan để đáp ứng nhu cầu tức thời về nội dung của mình là vô cùng cần thiết.
Website của Mann up được thiết kế với thuật toán riêng trong giai đoạn lập trình để đảm bảo luôn có thể suggest được những thông tin gần chủ đề với bài viết chính nhất có thể. Ngoài ra, người dùng cũng có thể dễ dàng tìm kiếm tất cả bài viết của một tác giả ưa thích hoặc theo dõi các series bài liên quan đến tag chủ đề hoặc một nhóm chủ đề đặc biệt.
Mời các bạn cùng xem qua những thiết kế của Beau trong dự án này.
Đọc case study chi tiết
Thu gọn
GIẢI PHÁP CỦA BEAU
Giao diện dành cho
những bài viết không tuổi
![](/themes/md_beau/img/work-MannUp/mannupGP-img-1.png)
![](/themes/md_beau/img/work-MannUp/mannupGP-img-2.png)
![](/themes/md_beau/img/work-MannUp/mannupGP-img-3.png)
![](/themes/md_beau/img/work-MannUp/mannupGP-bg-2.jpeg)
![](/themes/md_beau/img/work-MannUp/mannupGP-img-4.jpg)
![](/themes/md_beau/img/work-MannUp/mannupGP-img-5.png)
![](/themes/md_beau/img/work-MannUp/mannupTGDoc-bg-1.jpeg)
GIẢI PHÁP CỦA BEAU
Trải nghiệm đọc mới của Mann up
![](/themes/md_beau/img/work-MannUp/mannupTGDoc-img-1.png)
![](/themes/md_beau/img/work-MannUp/mannupTGDoc-img-2.png)
![](/themes/md_beau/img/work-MannUp/mannupTGDoc-img-3.jpg)
![](/themes/md_beau/img/work-MannUp/mannupTGDoc-img-5-text.jpg)
![](/themes/md_beau/img/work-MannUp/mannupTGDoc-img-5-text.jpg)
![](/themes/md_beau/img/work-MannUp/mannupTGDoc-img-5.jpg)
![](/themes/md_beau/img/work-MannUp/mannupMasonry-bg-pc.jpeg)
Cách sắp xếp dạng Mansory thích hợp nhiều định dạng hình ảnh
![](/themes/md_beau/img/work-MannUp/mannupMasonry-img-1.png)
![](/themes/md_beau/img/work-MannUp/mannupHalf-img-2.jpeg)
Các bài viết longform
![](/themes/md_beau/img/work-MannUp/mannupFoot-img-1.png)
Mann up - kênh nội dung với chất lượng hàng đầu
Phạm Hoàng Hà
LƯU KIÊN ĐỊNH
HUY LONG NGUYỄN
BÙI THỊ HOÀ
NHẬT QUANG NGÔ
ĐỨC ANH NGUYỄN THÁI
NGUYỄN THANH HẢI
PHẠM QUANG HUY
GRAPHIC DESIGNER
NHẬT QUANG NGÔ
© 2024 Beau Agency. All Rights Reserved