Why our designers use Adobe Animate to build engaging web banners
(Editor’s Note: ArcTouch design team members Bruna Teixeira and Mariana Machado co-authored this post.)
If you know ArcTouch, you already know that we build lovable apps. However, we also have deep expertise in building web-based products, including animated web banners.
Our motion design team specializes in creating engaging and visually striking banner ads that capture users’ attention and effectively communicate our clients’ messages. We work with clients like Volvo, Pringles, and Applebees.
We use a variety of design tools and techniques to create animations that are both seamless and eye-catching. In the past, Adobe Flash was the go-to for web designers and producers. When Flash was phased out, Adobe introduced a successor: Adobe Animate.
In this post, we review Adobe Animate — including its pros and cons — and explain why it’s become our tool of choice for designing animated web banners.
What exactly does Adobe Animate do?
Adobe Animate can be used by designers to create 2D animations and interactive content for websites, apps, games, videos, and more. The software has a timeline-based interface and also includes a wide range of tools for creating vector graphics for animations.
One of the main advantages of using Adobe Animate for banners is that the software is specifically designed for web development. It has built-in support for HTML5, JavaScript, and other standard web technologies, allowing us to create animations that are lightweight and perform well on both desktop and mobile devices.
Adobe Animate main project interface.
Adobe Animate vs. Google Web Designer
The two most popular tools for creating interactive and animated content for the web are Adobe Animate and Google Web Designer (GWD). While both have similar capabilities, there are some key differences.
Adobe Animate is considered a more advanced program for professionals. It has a wide range of features and supports ActionScript, a programming language originally created for Flash. ActionScript allows designers to add more advanced functionality to projects without needing to leave Animate’s interface.
GWD, on the other hand, is geared toward designers who may not have experience with programming or complex animation techniques. It has an intuitive user interface, but a more limited set of features than Adobe Animate.
ArcTouch’s motion designers choose Adobe Animate because of the more robust feature set.
Adobe Animate: Pros and cons
Most design tools have benefits and drawbacks. Adobe Animate is no exception. Here are some of the pros and cons our design team has experienced while using Animate.
Pros of using Adobe Animate
- Lightweight: Adobe Animate is a lightweight software package that doesn’t require a powerful computer and doesn’t use a lot of memory to run smoothly. It is stable and rarely crashes, making it a great choice for someone working on a complex project.
- Rich feature set: Adobe Animate enables designers to create a wide variety of animations, including different transition effects, interactions, links, and more.
- Ad platform compatibility: It’s compatible with popular ad delivery platforms, including the Google Marketing Platform, which simplifies pushing an ad campaign live.
- HTML templates: Adobe Animate allows designers to create and use HTML templates across projects. With templates, designers don’t need to edit the HTML code for each banner. Instead, we can create a preset template with code that defines settings for a campaign (e.g., a black border or a clickTag setting that fits a specific ad platform requirement).
- Organized export: When it comes time to finalize and export a banner, Animate generates HTML5 files and assets in a separate folder, helping to keep the projects organized.
Adobe Animate exports HTML assets to separate folders.
Cons of using Adobe Animate
-
- Lack of special effects: Adobe Animate does not support shadow or filter effects for HTML. In some cases, we’ve needed to find workarounds for this shortcoming. For example, to create a text blur, we have to export two assets — one of the normal text and one of the blurred text — then add a fade transition between them. In this Applebee’s banner, we used that workaround:
With other tools, we could apply a blur effect to the standard text and transition the effect out.
- Lack of special effects: Adobe Animate does not support shadow or filter effects for HTML. In some cases, we’ve needed to find workarounds for this shortcoming. For example, to create a text blur, we have to export two assets — one of the normal text and one of the blurred text — then add a fade transition between them. In this Applebee’s banner, we used that workaround:
- Limited preview modes: Animate doesn’t provide real-time previews when working with components, including videos or GIFs. This can be frustrating for designers, who have to regularly export their work to see what any changes look like. This adds additional steps and time.
Example of a GIF (shown at right) that won’t preview in Adobe Animate’s interface (left).
The verdict: We love Adobe Animate
Overall, our motion design team is glad to have Adobe Animate as part of our design stack. It offers a versatile mix of tools and broad compatibility with ad platforms, making it a great fit for the variety of web animation design work we regularly do.
Need help with web design and development?
If your company needs help creating web-based digital experiences, get in touch — we can bring your ideas from concept to launch.