INFOGRAPHIC HOẠT HÌNH: CÁCH TRUYỀN SỨC SỐNG CHO NỘI DUNG CỦA BẠN

Đây là thời của các nội dung chuyển động. Cho dù chúng là ảnh động hay các đoạn video, chúng dần trở thành loại nội dung được chia sẻ nhiều nhất trên mạng xã hội. Vậy điều gì khiến chúng hấp dẫn người dùng như vậy? Chúng ta hãy cùng tìm hiểu kĩ hơn một vài ví dụ tuyệt vời có thể truyền cảm hứng cho thiết kế đồ họa chuyển động tiếp theo của bạn.

Infographic hoạt hình là gì?

—

Infographic hoạt hình là một cách trực quan hóa thông tin sử dụng tổ hợp của hình ảnh, hình minh họa, biểu đồ, đồ thị, text và những thành phần khác được hoạt hình hóa để bổ sung chuyển động.

Qua 5 năm trở lại đây, infographic đã trở thành một công cụ được tin cậy để biến dữ liệu phức tạp trở nên đơn giản, trực quan. Nhưng những thứ từng tồn tại chủ yếu dưới dạng tĩnh này đã tiến hóa nhanh chóng để chứa cả những chi tiết chuyển động giúp diễn đạt ý tưởng hiệu quả và lôi cuốn hơn.

Infographic GIF from Giphy

Nguồn: Giphy

Vẻ đẹp của infographic luôn luôn nằm ở khả năng chia sẻ của nó. Cho dù nó là dạng ảnh động hoặc video, các infographic hoạt hình là những thông tin nội dung trực quan dễ hiểu và dễ chia sẻ trong cộng đồng.

Khởi động thiết kế infographic tĩnh của bạn

—

Khi những infographic đầu tiên nhận được sự chú ý trên không gian mạng, chúng chỉ là những tác phẩm minh họa tĩnh. Chúng thường xuất hiện dưới dạng những hình ảnh dài mà bạn sẽ cần cuộn trang xuống để có thể đọc hết, nhưng chúng cũng có sự quyến rũ của riêng mình. Hình khối, màu sắc, đồ họa minh họa và một cấu trúc trôi chảy là những lý do lớn đằng sau sự thành công của những thiết kế infographic dạng tĩnh. Việc cuộn trang chính xác là điều khiến trải nghiệm trở nên thú vị. Nó cũng bởi hành trình, câu chuyện mà mỗi thiết kế truyền tải.

Ngày nay trên mạng xã hội, những hình ảnh tĩnh không hấp dẫn người xem như những hình ảnh động. Vì thế, nếu bạn đã đầu tư vào những infographic tĩnh cho thương hiệu của bạn, có thể bạn sẽ muốn cân nhắc bổ sung những hiệu ứng chuyển động để mang tới cho chúng một cuộc sống mới.

Gần đây, chúng tôi đã tạo ra một infographic tĩnh để tưởng nhớ thiết kế của Bauhaus. Nhưng chúng tôi đã mong đợi nhiều hơn là một hình ảnh tĩnh để thực sự thổi hồn vào chủ đề này và tận dụng được nội dung nhiều hơn. Vì thế chúng tôi đã quyết định biến nó thành một infographic dạng video. Đây là cách chúng tôi thực hiện nó:

Nếu bạn muốn điều gì đó nhẹ nhàng, tinh tế hơn, một tùy chọn khác sẽ bổ sung cho infographic của bạn chút năng lượng mới mẻ là tích hợp những hiệu ứng hoạt hình quy mô nhỏ. Những hiệu ứng chuyển động nhỏ, tinh thế này có thể nhấn mạnh thông tin hoặc điểm có thể click vào trên thiết kế infographic của bạn. Đây là một ví dụ cho sơ đồ khối có thể click vào với hiệu ứng hoạt hình quy mô nhỏ (định dạng GIF) mà chúng tôi đã tạo ra gần đây:

flowchart with suble animations on clickable areas.

How to find a designer: một sơ đồ khối bỏ túi với những hiệu ứng chuyển động nhỏ trên đầu con trỏ chuột khi nó đi qua vùng có thể click vào.

Đây là điều bạn có thể làm với bất cứ infographic tĩnh nào. Hãy cùng điểm qua ba ví dụ này về những phong cách phổ biến của infographic tĩnh ngày nay và một vài gợi ý thêm về cách bạn có thể nâng tầm cho chúng với các hiệu ứng hoạt hình:

Những chi tiết hoạt hình bắt mắt

Thiết kế infographic tĩnh với nội dung “How to leave your worries behind” (tạm dịch: Cách bỏ lại những nỗi âu lo của bạn) thực hiện bởi Happify cung cấp những lời khuyên về cách cảm thấy hạnh phúc và ít âu lo hơn. Nó mang đến một tổ hợp đặc sắc của thiết kế sạch sẽ, màu sắc táo bạo và các lớp nội dung rõ ràng cùng với những hình minh họa đầy khơi gợi. Nó không dài dòng quá mức và được bóc tách nội dung một cách khôn ngoan.

How to Leave Your Worries Behind by Happify

Thiết kế bởi Happify

Trong khi họ đã hoàn thành tốt việc lựa chọn những icon và hình minh họa độc đáo nhưng gợi cảm giác quen thuộc – như một biểu tượng pin đang mờ dần đại diện cho niềm hạnh phúc đang tiêu tan của một nhân vật – thiết kế này thực sự có thể còn xuất sắc hơn nếu bổ sung những hiệu ứng hoạt hình.

Ở phần header, việc khiến người phụ nữ có thể thực sự nhảy lên – xuống chắc chắn sẽ bắt mắt người xem hơn. Biểu đồ trò đóng vai trò là ranh giới xung quanh một số icon có thể chuyển động vào sử dụng một hiệu ứng xòe quạt tròn để nhấn mạnh số phần trăm nó thể hiện. Và trong phần “How to Worry Less”, dấu tích và gạch chéo có thể chuyển động bằng một hiệu ứng zoom bật lên.

Những hiệu ứng hoạt hình nhấn mạnh nội dung quan trọng

Táo bạo và được định hướng tốt, infographic tĩnh có nội dung “Woman who run the world” thực hiện bởi USC Marshall đại diện cho nhóm những nhà nữ khởi nghiệp đang ngày càng đông đảo và đa dạng, cách họ chiếm lấy thị trường và những công ty họ đang điều hành.

The Female Entrepreneur: Women Who Run Their World - USC Marshall

Thiết kế bởi USC Marshall

USC Marshall đã sử dụng phong cách icon kinh doanh một cách hiệu quả trong infographic này, tận dụng các icon của những tòa nhà và ngân hàng như là các thành phần của biểu đồ để nhấn mạnh những số liệu phần trăm mà infographic nêu ra.

Tuy nhiên, những icon này đã có thể được làm rõ ràng hơn bằng cách cho chúng hiện ra từng số một để nhấn mạnh rằng chúng là sự biểu diễn trực quan của một con số phần trăm thay vì một vài icon bất kì trong dòng.

Cũng giống như infographic trước, biểu đồ trò ngăn cách một vài hình ảnh trong nó nên xuất hiện cùng với một hiệu ứng xòe quạt.

Hiệu ứng hoạt hình giải thích thông tin

Táo bạo ngay từ mở đầu, mọi thứ về infographic tĩnh có nội dung “How to avoid a hangover” (Tạm dịch: Cách tránh bị say rượu) thực hiện bởi Fix phù hợp với bản chất táo bạo của chủ đề này và cách người đọc có thể cảm thấy khi họ đọc nó.

How to Avoid a Hangover by Fix

Thiết kế cá tính mang tính thủ thuật này miêu tả nguyên nhân của việc say rượu và cách giải quyết nó. Thực hiện bởi Fix.

Khám phá, miêu tả một chủ đề mà tôi chắc là tất cả chúng ta đều đã từng trải qua ở một mức độ nào đó, thiết kế này đào sâu vào cơ chế dẫn tới say rượu và cách giải quyết một cách thông minh sử dụng những hình minh họa về những vật thể thực như chai hoặc cốc rượu, bia hoặc thức uống có cồn.

Trong phần “How a Hangover Affects the Body”, nơi nhắc tới các cơ quan nội tạng khác nhau, có thể phát huy hiệu quả cao hơn nếu sử dụng một số hiệu ứng hoạt hình để giúp thông tin rõ ràng hơn. Mỗi triệu chứng và giải pháp có thể di chuyển từ hướng của cơ quan nội tạng chúng có liên quan đến, làm rõ phần nào của cơ thể bị tác động. Và nơi những quốc gia với những cách giải rượu khác nhau nên được nhấn mạnh, đơn giản có thể là gắn thêm những lá cờ phấp phới sẽ bổ sung cá tính cho thiết kế và thu hút nhiều sự chú ý hơn cho thông điệp chính của phần này.

Những tác phẩm đồ họa hoạt hình dạng GIF

—

Theo sau sự nở rộ của infographic tĩnh chính là sự nổi lên của những thiết kế hoạt hình dạng ảnh động (GIF). Ưu điểm của việc sử dụng hiệu ứng hoạt hình vào infographic là nó giúp nhấn mạnh những thông tin và hình ảnh nhất định, khiến thiết kế của bạn thậm chí còn dễ hiểu hơn.

Điều tuyệt vời nhất về GIF là việc tạo ra chúng hoàn toàn không khó khăn gì. Bạn không cần phải biết về những phần mềm phức tạp như Adobe Premiere Pro hoặc After Effects. Bạn thực ra có thể tạo ra chúng bằng những phần mềm chỉnh sửa ảnh như Photoshop.

gif infographic on growth of a baby

Thiết kế bởi Tabletop Whale

Đây là một vài ví dụ infographic dạng GIF xuất sắc

Ví dụ 1: How to Build a Human thực hiện bởi Tabletop Whale

Sử dụng một vòng xoáy như là chi tiết tĩnh, cùng với các mốc thời gian là các tuần của thai kì, thiết kế này cho thấy một vòng lặp của phôi thai, dần dần phát triển thành những dạng khác nhau khi đi qua các mốc của thai kì và được “sinh ra” như là một đứa bé hoàn thiện.

Đây là một ví dụ tuyệt vời về sức mạnh mà hiệu ứng hoạt hình có thể mang tới cho một infographic. Một concept đơn giản được thực thi tốt, yêu cầu số ngôn từ tối thiểu để giải thích điều gì đang xảy ra.

Ví dụ 2: 7 Ways to Hack a Drought thực hiện bởi Column Five

Thiết kế này miêu tả những mẹo nhỏ có thể áp dụng khi bạn phải đối phó với một cơn lũ lụt, cho thấy hình minh họa hoạt hình có thể bổ sung cho thông tin nó hỗ trợ như thế nào.

7 Ways to Hack a Drought by Column Five

Thiết kế bởi Column Five.

Những con sóng nước đang di chuyển lên xuống ở phần đầu, gần tiêu đề truyền tải nội dung chính của infographic. Cấu trúc thứ bậc của text rất rõ ràng, từ những con số lớn cho tới tiêu đề từng phần cho đến phần nội dung chi tiết. Mỗi hình minh họa hoạt hình đã được lựa chọn kĩ càng để nhấn mạnh điều gì cần nhớ của mỗi thủ thuật, hơn là trích ra từ nó.

Ví dụ 3: 42 Butterflies of North America thiết kế bởi Tabletop Whale

Tương tự với “How to Build a Human”, infographic này sử dụng hiệu ứng hoạt hình một cách khôn ngoan chỉ với đôi cánh đang đập của mỗi loài bướm, Được sắp xếp trong một khung lưới, đây là một trải nghiệm “tự chọn hành trình khám phá của mình” với toàn bộ nội dung được dàn ra rõ ràng cho bạn để tìm hiểu theo bất cứ thứ tự nào bạn muốn.

42 Butterflies of North America by Tabletop Whale

Thiết kế bởi Tabletop Whale

Ví dụ 4: How Speakers Make Sound thiết kế bởi Jacob O’Neal

Tác phẩm này miêu tả nguyên lý hoạt động nói chung của một chiếc loa, cũng như các chi tiết kĩ thuật khác nhau của chúng, cho thấy mỗi thành phần có tên gọi và cách hoạt động như thế nào.

animated loudspeaker infographic

Nguồn: Animagraffs.

Đây là lợi thế của GIF, sử dụng chuyển động để thu hút mắt nhìn và bổ sung cách thức mọi thành phần được ghép nối với nhau và kể câu chuyện về cách hoạt động của chiếc loa.

Infographic hoạt hình dạng video

—

Từ GIF, infographic đã tiến hóa thành những infographic dạng video hoạt hình hoàn toàn. Sự nổi lên của những video hướng dẫn có điều gì đó tương đồng. Và nó có ý nghĩa lớn khi bạn xem xét tới sự hấp dẫn khi xem và nghe thứ gì đó đang được giải thích và giới thiệu một cách trực quan.

Những video hướng dẫn biến những chủ đề phức tạp trở nên đơn giản một cách hiệu quả để diễn giải thông qua việc đưa ra những bối cảnh trực quan. Chúng giải quyết cùng những vấn đề mà infographic dạng tĩnh hoặc GIF cố gắng giải quyết, và thậm chí mang đến nhiều sự kiểm soát về trải nghiệm hơn.

Ở bất cứ thời điểm nào trong một infographic dạng video, nhà sáng tạo nội dung hoàn toàn chịu trách nhiệm về những thứ xuất hiện trên màn hình và tốc độ nó được hiển thị. Đối với người xem, nó là một trải nghiệm thụ động hơn so với infographic dạng tĩnh (không cần cuộn xuống). Nhưng những chi tiết trực quan và âm thanh có thể đặt nội dung trong bối cảnh rõ ràng hơn cho người xem, khiến những ý tưởng phức tạp trở nên đơn giản hơn nhiều.

Ví dụ 1: Loneliness thực hiện bởi Kurzgesagt

Kurzgesagt chuyên việc khiến những ý tưởng lớn dễ tiếp cận hơn thông qua sự miêu tả cuốn hút và các hiệu ứng hoạt hình tinh tế

Nguồn: Kurzgesagt

Kênh này sử dụng những phép ẩn dụ hình ảnh để mang sự sống đến cho những thông tin, hình ảnh và ý tưởng – như concept của sự cô đơn, được minh họa ở đây như là một nhân vật với một lỗ thủng lớn trên ngực.

Ví dụ 2: Supreme | Patriot Act với người dẫn chương trình Hasan Minhaj

Hasan Minhaj, người dẫn chương trình “Patriot Act” trên Netflix, thường đùa về các tập của mình là những phần trình bày PowerPoint đã lên tới con số 11. Nhưng, như bạn có thể thấy trong video này, anh ấy thực sự đã không hề phóng đại.

Nguồn: Patriot Act

Mỗi tập có nội dung về một chủ đề khác nhau, và màu sắc và hình ảnh luôn thay đổi tương ứng với chủ đề được đề cập. Nhưng về cơ bản thì nó luôn là một infographic dài, kết hợp các trích dẫn, hình ảnh, đồ thị và nhiều nội dung khác. Những chi tiết đồ họa hoạt hình giống như người dẫn chương trình thứ hai trong trường hợp này và là yếu tố cơ bản để giữ chân người xem ở nội dung đó khi Minhaj cố gắng giải thích thứ gì đó phức tạp trong vòng cả 30 phút đồng hồ.

Ví dụ 3: How Toyota Changed The Way We Make Things | Bloomberg

Series “Then This Happened” của Bloomberg sử dụng một phong cách infographic thực sự đơn giản nhưng hiệu quả.

Nguồn: Bloomberg

Được xây dựng trên ý tưởng về một cuốn sổ phác thảo hoặc bảng phác họa, phong cách của họ hòa trộn tranh ảnh, đồ thị, text và nhiều thứ khác như là những lát cắt thông tin được biên tập với nhau trên bảng. Bảng màu với hầu hết là trắng và đen khiến mọi thứ rõ ràng và dễ hiểu. Nhưng bản thân concept này cũng mang lại cảm giác hấp dẫn và nghịch ngợm.

Ví dụ 4: Work, Simplified thực hiện bởi Slack

Thiết kế này cho bạn thấy thứ bạn làm sử dụng những icon đơn giản và dễ nhận diện – như email, tin nhắn và thời gian – hòa quyện chúng với hiệu ứng hoạt hình của con người đang tương tác trong một không gian hoạt hình.

Nguồn: Slack

Video này không sử dụng text trên màn hình cũng như không có giọng nói giải thích như những video hướng dẫn khác. Thay vào đó nó cho thấy Slack có thể làm gì cho bạn với những hành động quen thuộc, dễ nhận diện (như nhận một thông báo trên điện thoại thông minh) để giúp người xem hiểu được điều các ứng dụng có thể làm cho họ.

Ví dụ 5: Hybrid Cloud Flexibility | Microsoft

Video này là định nghĩa về điều khiến phong cách infographic hoạt hình lại hấp dẫn người tiêu dùng như vậy. Nó có một concept phức tạp – đám mây – và khiến nó dễ hiểu cách nó có thể giúp các doanh nghiệp.

Nguồn: Microsoft

Bằng việc hỗ trợ đoạn giải thích với các hiệu ứng hoạt hình cụ thể với bối cảnh (điều bắt đầu khi một máy chủ biến thành một tòa nhà và tòa nhà đó cuối cùng kết nối vào một đám mây và vân vân), nó truyền đạt một cách trực quan điều dịch vụ này có thể làm cho bạn theo cách đặc sắc hơn nhiều cách chỉ sử dụng số liệu hay đoạn băng.

Nguồn: 99designs.com

Bài viết khác

Hoạt động

SÁNG TẠO MÙA HÈ – DỒI DÀO Ý TƯỞNG

Tin Tức

15 xu hướng Thiết kế đồ họa 2023

Hoạt động || Tin Tức || Workshop

WORKSHOP “DESIGN THINKING & FUTURE DESIGN IMPACT BY A.I”