Về web hoạt họa cho các nhà thiết kế motion

id web animation cho nha thiet ke motion

Các nhà thiết kế motion và animation bắt đầu tìm kiếm những điều thú vị trong thế giới của Web và phát triển phần mềm.

Nhưng làm thế nào để bạn có thể chuyển sang làm việc trên web? Bạn cần có những kỹ năng nào? Trong cuộc phỏng vấn dưới đây, họa sĩ truyện tranh - nay là người tiên phong cho các web hoạt họa - Rachel Nabors sẽ cho bạn nhiều lời khuyên bổ ích.

Bài phỏng vấn Rachel Nabors

Trong vài năm gần đây, thuật ngữ “thiết kế motion” đã bùng nổ với nhiều ý nghĩa khác nhau và rải rác khắp nhiều lĩnh vực. Vậy với bạn điều đó có ý nghĩa gì?

Trong lĩnh vực thiết kế web và phát triển ứng dụng, nhà thiết kế motion có nghĩa là “những người thiết kế ứng dụng hoặc các trang web có hoạt ảnh.” Đó là một thuật ngữ rất rộng bao gồm tất cả mọi thứ từ việc chuyển động hóa hình minh họa đến thiết kế giao diện người dùng. Các giao diện dựa trên cảm ứng đặc biệt yêu cầu sự kết hợp animation cùng các cử chỉ hoặc các mảnh ghép của chúng. Điều thú vị là cộng đồng phát triển thiết kế ứng dụng và web thường quên rằng thuật ngữ này đã tồn tại với định nghĩa tương đối ít nếu không có sự tương tác bên ngoài ngành công nghiệp tương ứng. Vì vậy, nếu bạn thấy “thiết kế motion” trong thiết kế web hoặc vị trí prototyping, họ sẽ không nhắc gì về kiểu thiết kế motion mà bạn đã sử dụng. Thứ mà họ đang nghĩ là: “Phải làm gì để đáp ứng trải nghiệm người dùng? Tương tác thế nào sẽ sáng tạo và thú vị nhất?”. Chính vì điều này công việc thiết kế motion giống với thiết kế tương tác hơn là làm phim hoạt hình.

Sự khác biệt (nếu có) giữa “thiết kế motion” và “web animation”?

“Thiết kế motion” là công việc thiết kế với hình động. “Web animation” là việc phân phối hoạt ảnh được sử dụng các công nghệ web như CSS, JavaScript WebGL.

“Thiết kế motion” có thể được tạo ra và thích ứng với nhiều phần mềm khác nhau, từ After Effects đến Toon Boom. Tuy nhiên, việc sản xuất “web animation” phải luôn đáp ứng những yêu cầu về code. Chỉ có một số ít chương trình có thể tạo và xuất hình animation cho web; phần nhiều, những thứ mà họ tạo ra quá rời rạc để được sử dụng trong một hệ thống lớn hơn: Animatron có thể giúp bạn ghép một khung cảnh tương tác vào một Flash, nhưng bạn cần phải biết CSS để tạo hiệu ứng parallax hoặc drop-down để làm việc trên toàn bộ trang web. Ứng dụng mới của Google có tên Web Designer có thể di chuyển đến quảng cáo banner HTML, nhưng bạn không thể xây dựng một trang web bằng ứng dụng này!

Hiện tại, các nhà thiết kế motion thường tạo ra animation trong After Effects; các nhà phát triển sau đó sẽ chuyển đổi video thành code. Nhưng mọi thứ sẽ tốt hơn nhiều nếu các nhà thiết kế motion nắm bắt được code mà các nhà phát triển đang sử dụng. Ngay bây giờ, nơi tốt nhất để bắt đầu là CSS AnimationsTransitions.

Đối với animation phức tạp thì JavaScript là một điều vô cùng cần thiết. GreenSock là một thư viện animation JavaScript, nó bắt đầu như là thư viện Flash! Nhưng Web Animations API hứa hẹn sẽ trở thành một công nghiệp vượt bậc trong năm năm tới.

id web animation 1

Nếu lướt nhanh qua trang Motionographer, bạn có thể hiểu các kỹ năng mà nhiều nhà thiết kế motion đang có. Vậy càng có nhiều kĩ năng thì càng nhiều cơ hội để làm web animation? Có đúng như vậy không?

Gần đây tôi làm việc cho Microsoft, thứ tôi thích nhất là kho lưu trữ phần mềm của thư viện. Nhìn vào sự phát triển của thiết kế phần mềm qua nhiều năm, có thể thấy rõ ngay từ đầu, các nhà phát triển cũng là người thiết kế phần mềm. Phần mềm khi đó tuy rất hữu ích nhưng nó không phải là một yếu tố trực quan, và thành thật mà nói, nó không được “đẹp” cho lắm.

Vâng, giờ thì mọi thứ đã thay đổi, tất cả mọi người đều có thể tạo ra phần mềm. Hệ sinh thái đã phát triển. Người dùng có nhiều sự lựa chọn hơn; và chính những designer cũng đang thiết kế phần mềm.

Phần mềm không đảm bảo sẽ cung cấp trải nghiệm người dùng một cách tối ưu. Với sự xuất hiện của các giao diện cảm ứng, đặc biệt là những màn hình nhỏ trên điện thoại di động, thiết kế motion là một điều cần thiết để làm cho những tương tác đó mượt mà. Mọi người không sử dụng bút stylus để lướt qua giao diện nữa: họ mong đợi cử chỉ, họ mong muốn thiết kế đáp ứng nhu cầu của họ, họ mong muốn tương tác và hơn thế nữa.

Trong năm năm qua tôi đã quan sát cộng đồng web animation phát triển, tôi đã thấy “thiết kế motion” ngày càng xuất hiện trong danh sách công việc cho prototyper, data-visualizer, nhà thiết kế UX và nhà thiết kế sản phẩm. Bạn có thể nói rằng các vị trí này tồn tại trong bộ kỹ năng, và ở đâu đó giữa “nhà thiết kế game” và “nhà thiết kế motion”.

Web animation không giới hạn ở 2D vì sự phát triển thực tế ảo và tăng cường bắt đầu trên cả web và trong phát triển tự nhiên; vì vậy thiết kế trải nghiệm 3D nhanh chóng trở thành mối quan tâm. Ở đây, các kỹ năng với phần mềm 3D rất hữu ích và chắc chắn sẽ mang lại các vị trí thú vị và tương tác tốt hơn.

id web animation 2

Nếu ai đó muốn chuyển sang làm việc trên web, bạn có lời khuyên nào không?

Làm việc trên web có thể là một trong những bước tiến nghề nghiệp bổ ích mà một người sáng tạo luôn mong muốn - và nó giống như một người họa sĩ đạt giải với tác phẩm của mình! Mức lương là rất lớn, dự án công việc và thậm chí khởi nghiệp cũng có nhiều cơ hội để làm việc. Nhưng việc chuyển đổi có thể sẽ gặp khó khăn. Bạn có thể là một nhà thiết kế motion tương đối thành công nhưng sau đó khi bạn tham gia phát triển web, có thể bạn sẽ gặp phải những thử thách. Truyền đạt giá trị của những gì bạn mang lại có thể rất khó, đặc biệt là từ khi người ta phát triển web vẫn có xu hướng nghĩ animation như là một thứ để trang trí, sự tao nhã của thời đại Flash microsites đã đi qua.

Bạn muốn đảm bảo rằng những người bạn cùng làm việc sẽ hiểu về animation nhiều hơn. Animation là điều cần thiết để kết nối hành động với phản ứng, để củng cố thương hiệu, hướng dẫn người sử dụng trong hành trình của họ. iPhone không hoạt động mà thiếu những cử chỉ. Cử chỉ yêu cầu animation. Các sản phẩm có animation sẽ cạnh tranh tốt hơn so với các sản phẩm mà không có tính năng so sánh. Cách tốt nhất để gia nhập vào phát triển web là làm quen và giới thiệu với mọi người những gì bạn có thể làm và những gì họ mong muốn có trong dự án của họ. Bắt đầu bằng cách xây dựng một danh mục các tương tác mockup, giống như những gì được tìm thấy trong “UI animation” trên Dribbble. Lấy cảm hứng từ các trang web giống như trên Awwwards, nhưng bạn hãy tự trải nghiệm và tìm ra phong cách của riêng mình.

Bạn muốn tham gia các buổi họp mặt thiết kế trang web UX và thiết kế web. Nhưng các buổi họp không diễn ra nơi bạn sống? Hãy đăng ký các bản tin về các chủ đề, tham gia vào slack của những người lập trình sáng tạo. Bạn muốn thực sự gây ấn tượng với tiềm năng của đồng đội? Hãy tham gia vào học CSS Animations và Transitions hoặc Greensock và chuyển đổi một số mockup UI của bạn thành code trên CodePen.

id web animation 3

Bạn thấy những người mới gặp khó khăn gì nhất?

Một trong những thách thức lớn nhất mà tôi thấy là những người mới đang cố gắng nói chuyện với các nhà phát triển như thể họ là những nhà thiết kế. Họ không nhìn thấy mọi thứ giống cách bạn làm. Hầu hết các nhà phát triển không thể thấy sự khác biệt giữa nào trong hai mươi lần nhìn đầu tiên của họ. (Và có thể cả 20 lần tiếp theo!) Các nhà lãnh đạo dự án có thể yêu cầu sự cần thiết để dành thời gian cho các hoạt hình “phù phiếm” theo một lịch trình chặt chẽ hoặc ngân sách eo hẹp. Nhưng những người này cũng thích xem thiết kế định lượng trong công việc.

  1. Sử dụng các từ của bạn để giải thích cách mà animation mang lại lợi ích cho thiết kế, giải thích lợi ích cho người dùng: Nút ‘thêm vào danh sách mong muốn’ chuyển thành mục điều hướng danh sách mong muốn, hiển thị cho người dùng nơi cần tìm kiếm danh sách mong muốn của họ trong tương lai. Bằng cách sử dụng những từ ngữ tốt đẹp để làm “niềm vui” của riêng mình. Bạn càng diễn giải cho animation, càng làm tăng thêm giá trị cho trải nghiệm người dùng tổng thể, thì điều đó cần được ưu tiên cao hơn.
  2. Dành ưu tiên cho animation như trên biểu đồ này. Tôi đi sâu vào việc làm thế nào để làm điều này trong cuốn sách của tôi, nhưng ý tưởng là để biểu đồ animation của bạn có các tính năng tùy theo lợi ích mà nó mang lại cho người dùng, so với mức độ nỗ lực họ thực hiện. Nếu một animation rơi vào nửa trên của biểu đồ này, nó sẽ biến thành sản phẩm. Đó là những gì bạn muốn có được. Bạn cần trình bày cho các bên liên quan rằng bạn sẵn sàng từ bỏ một số yếu tố mà bạn tâm đắc nhưng kém hiệu quả và điều đó cho thấy rằng bạn đã quan tâm đến sự cần thiết và giúp họ xem những gì thực sự không “phù phiếm”.
  3. Storyboard và/hoặc tạo hoạt hình mockup mà bạn có thể tường thuật về các animation được ưu tiên hàng đầu. Việc trình bày thường có tính thuyết phục hơn cho những người có liên quan hơn là nói.

Đi theo các bên liên quan thông qua quá trình trên và hoàn thiện bằng cách chứng minh dự án của họ thực sự có thể trông như thế nào, nó sẽ trông rất thuyết phục và chắc chắn sẽ giành được sự quan tâm của họ.

Cá nhân mà nói, kinh nghiệm của bạn là gì và làm thế nào bạn tìm thấy con đường của bạn vào thế web hoạt họa?

Những người trong phát triển web thường nghĩ rằng tôi là một người nhà animation chuyên nghiệp, trước khi tôi trở thành một chuyên gia web animation. Nhưng tôi thực sự là một nhà vẽ tranh biếm họa từng đoạt giải thưởng, làm truyện tranh trên web cho các bạn trẻ đọc để kiếm sống. Tôi đã học được rất nhiều về kể chuyện, tường thuật và hướng mắt với công việc đó. Nhưng tôi cần bảo hiểm sức khoẻ, thậm chí những nhà vẽ tranh biếm họa nổi tiếng cũng gặp rắc rối ở Hoa Kỳ. Tôi đã xây dựng các trang web để quảng cáo và bán các truyện tranh của tôi một thời gian, và nó chỉ mất 20 giờ để phát triển web và đã được trả hơn 60 giờ khi làm phim hoạt hình.

Vì vậy, tôi đã tham gia vào phát triển web, cụ thể là phát triển front-end, nó liên quan đến CSS và JavaScript, nền tảng của sự phát triển tương tác hiện đại. Tôi luôn muốn xem các nhân vật truyện tranh cũ của tôi trong một hình ảnh động, và khi tôi tìm ra làm thế nào để dùng CSS thật tuyệt , tôi đã thành công! Chẳng bao lâu tôi đã cố gắng để làm sinh động tất cả những điều tôi đang xây dựng cho web.

Làm thế nào để cuốn sách mới nhất của bạn giúp những người muốn bắt đầu với web animation ?
Animation at work là cuốn sách tôi đã ước mình có năm năm trước lúc tôi khám phá cách làm sống động thiết kế web của mình. Nó cho thấy khoa học và sự thật đằng sau những lý do tại sao animation trông đẹp - và chúng có thể giúp người dùng bằng cách giảm tải nhận thức. Nó cho thấy làm thế nào để xác minh, ưu tiên và mã hóa giao diện UI trên các nhóm, thuộc tính và giải thích cho các nhà phát triển web hiểu các ngôn ngữ để nhận ra sáng tạo của bạn. Nếu bạn đang suy nghĩ về việc thiết kế cho các trang web hoặc ứng dụng, cuốn sách này sẽ giúp bạn bước chân vào thiết kế với chuyển động có ý nghĩa.

Người dịch: Thao Lee

Nguồn: motionographer