Tối ưu hóa hình ảnh bài viết trên Spiderum

Xin chào, hôm nay mình muốn chia sẻ cách tối ưu hóa hình ảnh bài viết trên Spiderum. Đây là kinh nghiệm tự mình đúc kết qua một thời gian đọc và viết bài ở đây. 

Nếu bạn có nhu cầu muốn hình ảnh bài viết của mình trông đẹp hơn, chỉn chu hơn, thì có thể tham khảo bài này. Còn nếu bạn theo "trường phái" thuần chữ, như Anh Minh hay Elbe chẳng hạn, thì bài này có thể không hữu ích cho lắm.

Để tối ưu hóa hình ảnh bài viết trên Spiderum, theo mình, có 5 yếu tố cần chú trọng: 

Nếu không nhìn tên người đăng, điều gì khác khiến bạn click vào xem một bài viết? Hẳn là tiêu đề (title) và thumbnail. Thumbnail chính là ảnh đại diện của bài viết khi bạn xem trên trang chủ. Tiêu đề hay thì tốt mà thumbnail bắt mắt thì càng tuyệt.

Hiện tại, Spiderum chưa cho phép người dùng chỉnh sửa thumbnail trực tiếp trên trang. Hệ thống tự động lấy ảnh đầu tiên trong bài, cắt lại thành cỡ 674 x 200 để làm thumbnail. Nó sẽ hiện ra như này:

Nhiều bức ảnh bị mất đầu mất chân trông không chẳng ra gì cả. Giải pháp mà mình đề xuất là ưu tiên đăng những ảnh có chiều ngang (landscape) thay vì chiều dọc (portrait). Và trọng tâm bức ảnh nên nằm ở phần giữa. Có thể dùng một số chương trình xử lý ảnh để chỉnh sửa sao cho trọng tâm ảnh nằm vào giữa.

Dưới đây có một bài viết mà theo mình người viết ý thức về việc làm thumbnail như trên: 

Điều mình thích ở Spiderum là công cụ soạn thảo văn bản được tối giản. Không cần phải chọn kiểu chữ, cỡ chữ, màu chữ, màu nền... Về vị trí và cỡ ảnh, cũng chỉ có 5 lựa chọn: align center (width: 700px), align right, align left (width: 450px), align cover (width: 950px) và fullscreen (width: 100%).

Nhờ đó, người viết sẽ tránh được nhiều bối rối. Đồng thời, hình thức các bài viết trên trang cũng nhất quán hơn.

Thoạt trông thì đơn giản, nhưng thực sự nếu biết tận dụng, bạn có thể tạo ra một loại hình thức bài viết đang được nhiều người ví như "đỉnh cao của web content" hiện nay: long form, tức dạng bài có nội dung chuyên đề và hình ảnh được thiết kế phục vụ nội dung, thành tổng thể hài hòa, đẹp mắt.

Zing có hẳn một mục long form. Tuổi trẻ Online thì đặt tên mục đó là MegaStory. Kênh 14 thì có eMagazine (khác là có đụng vào phần code một chút).

Mỗi bài báo dạng long form đều có một ảnh đầu trang, tạm gọi là title image. Title image có thể chứa cả hình lẫn chữ, tóm lược nội dung và gợi lên cảm giác tiên khởi ở người đọc trước khi bước vào bài. Nó được định dạng fullscreen như đã nói ở trên.

Tuy nhiên, ở Spiderum, title image lại gắn liền với thumbnail. Điều này thực sự gây trở ngại lớn cho việc sáng tạo hình thức bài viết. Nếu title image được phép tồn tại độc lập, chúng ta có thể tạo ra những đầu đề rất ngầu lòi như sau:

Vì hạn chế đó, chúng ta có thể mất thời gian hơn một chút nếu muốn có một bài viết chỉn chu, công phu.

Nhưng mọi thứ đều có cái giá của nó. Nếu bạn vừa biết graphic design lại vừa biết viết, hãy thử thực hiện một challenge kiểu "30 bài viết long form ở Spiderum", tự tay viết, tự tay vẽ minh họa, tự tay thiết kế. 

Cam đoan với bạn, chỉ cần hoàn thành cái challenge ấy và bỏ đường dẫn trang người dùng vào CV xin việc, bạn sẽ là ứng cử viên sáng giá cho vị trí web content writer khi đi xin việc đấy.

Mình sẽ bàn sâu hơn về bản chất của thiết kế ảnh cho bài báo long form ở phía dưới.

Có thể thấy, Spiderum hỗ trợ định dạng một đoạn text thành:

Tuy nhiên, như vậy có thể chưa đủ tạo ra độ tương phản về trọng lượng giữa tiêu mục (heading) và chữ trong đoạn văn. Hơn nữa, nó trông khá đơn điệu.

Một trong những chiêu thức làm tăng tính thẩm mỹ cho bài viết thường thấy ở các bài báo long form là biến tiêu mục từ dạng text thông thường sang dạng hình ảnh (như mình đã làm với bài viết này).

Có thể xem một số ví dụ sau:

 

Giờ ta sẽ nói về bản chất hình ảnh trong các bài báo long form. Những người thiết kế bài báo long form chủ trương xóa nhòa ranh giới giữa ảnh chụp/hình vẽ và chữ, nhằm tạo ra sự hòa hợp giữa chữ và hình.

Họ làm điều đó bằng nhiều cách. Có thể kể đến như: Cắt rời các đối tượng trong ảnh chụp ra và ghép trên nền đơn sắc, xóa mờ hoặc làm gãy đường biên giữa hình và nền, chèn chữ vào trong hình và cố tình để chữ trượt ra khỏi khung hình, hòa lẫn vào nền.

Những thao tác trên chỉ có thể thực hiện được hiệu quả khi ta làm chủ được không gian âm (negative space). Không gian âm là vùng không có đối tượng nào cả, dù là ảnh chụp, hay chữ hay hình vẽ. Người thiết kế sẽ tận dụng không gian âm để làm những vùng "trong suốt" như thể nhìn thấu đến nền của giao diện (trong khi trên thực tế, đó chỉ là một mảng màu trùng với màu nền mà thôi).

Trong lịch sử Spiderum, có một nhân vật sử dụng không gian âm này cực kỳ nhiều. Đó chính là WannaTell. Những câu chuyện với dấu chấm của WannaTell khi xem ta cứ tưởng như được vẽ trên nền giao diện vậy, nhưng thực ra là do nền của tranh vẽ trùng với nền trắng của giao diện.

Khi chèn chữ vào trong hình, có một điều quan trọng mà bạn cần lưu ý: kích cỡ chữ. Nếu chữ trong hình quá bé mà để định dạng hình là align left chẳng hạn, người xem trên mobile có thể không đọc được chữ (dù theo một số liệu mình tìm được thì số người dùng Spiderum trên mobile chỉ khoảng 34% mà thôi). Mình đã mắc phải lỗi này khi thiết kế bài này:

Quote, hay trích dẫn, là một yếu tố khác có thể giúp tối ưu hóa hình ảnh bài viết trên Spiderum. 

Nó có thể dùng để trang trí, để nhấn mạnh những ý quan trọng, và cũng để khiến người đọc không bị mỏi mắt khi đọc một bài chỉ toàn chữ là chữ.

Mình không thích công cụ trích dẫn của Spiderum. Nó tạo ra một đoạn văn nhỏ xíu, khó đọc. 

Thay vào đó, mình biến trích dẫn từ text thành hình ảnh (tương tự heading), kèm theo một số ký hiệu hay biểu tượng để cho người đọc biết đó là câu trích dẫn. Bên cạnh là một ví dụ.

Cách này cũng được áp dụng rất nhiều trong các bài báo long form.

Trên đây là toàn bộ những gì mình biết về việc thiết kế bài báo sao cho đẹp hơn. Hy vọng có ích với mọi người.