Project Introduction

Web banners are a staple of any designers toolkit, but an interactive banner that really draws attention from viewers is a thing all its own. Our client has requested that we revisit our web banner campaign, and create one for the same series that is both animated, and interactive to grow the strength of the campaign.

There is a huge difference between ANIMATED and INTERACTIVE, and we are going to use both disciplines during this project. Our Web banner needs to include a seamlessly looping animation (to draw the attention of the viewer, when not directly interacting with it), and an interactive element (to keep the focus of the viewer by responding to them in some way. Additionally, the web banner should fit into the exact same campaign as the previous static collection you made a few weeks back in order to keep the messaging and tone the same.

Your Interactive Web Banner needs to include:

1. A Working Hyperlink: Make sure that the banner actually WORKS! In the real world, this would link directly to our Landing Page that we designed in order to have the clients click inside the banner, then immediately visit our website to download the app… but for obvious reasons, we can’t actually build that pipeline. Have the link go to your own portfolio’s home page or something simple. The point is to show that you COULD link it to anywhere.
2. At least 1 Interactive Element: This is pretty self explanatory. When the user interacts with the banner ad, it needs to respond and change to provide feedback that the user and the banner are interacting with one another. It can be tricky to come up with a creative and interesting way to provide this feedback, but at this point in our journey your creative brain should be in overdrive!
3. Seamlessly Looping Animation: The web banner should always have some form of motion animation playing, even when not being interacted with. The idea here is to draw the viewer into the web banner, in the hopes of getting them to interact with it (and hopefully, click through to our website). Seamless looping is not a new idea for us, but getting it done in Animate rather than a simple GIF file should be a new challenge!

“On a scale from 0-10 of how hard this project is, I would place it at about a 7 since we are so new to Animate. However, nothing that this project requires is not something that you should have any real trouble accomplishing if you have been really digging into your online tutorials and videos.” – GD

Sample Interactive Web Banner

Again, due to the restrictions of using our WordPress platform for the use of this class site, I cannot actually embed a functional HTML5 Banner here, so I have sourced a GIF file that shows you what it would look like while being interacted with. Notice that when the user clicks a dot, it changes what product is being shown, there is also a button that the user could click to visit the intended website. The only thing missing here is a looping animation… what will you do for yours?

---

Project Requirements & Helpful Links

• Build a functional and attractive HTML5 Interactive Web Banner (of any dimensions you choose from one of your campaign from week 4). You pick the banner you choose for this project.
• Be sure that your design includes a Hyperlink, Interactive and Animated elements to complete the project.
  • Discuss your idea with the Instructor before you begin your work to ensure that your goals can be met in time, and would satisfy the project requirements.
  • Project 5 in the Adobe Animate ACATestPrep online training video is about this exact project. You should use that content as well as you can to perfect your banner ad.
• Export your Interactive Web Banner for use in a Google Chrome tab. Just like the website, you will turn in your assignment via USB Drive in a neatly organized ZIP file, and showcase it to the whole class on the projector.
  • Have your banner fully tested BEFORE you try to present, to make sure that everything is working properly before you present it!

---

Project Grading Rubric

The grade for this project include your ability to produce the required media, as well as follow all of the directions. Your final grade is comprised of your ability to create an attractive HTML5 web banner that is animated, interactive and works with a functional hyperlink. The banner must load properly in a Google Chrome tab and display all of its functions. The dimensions of the ad makes no matter on the grade, it’s only your ability to produce an effective and functional banner ad using Adobe Animate.

AMAZING 90-100	GREAT 80-89	GOOD 70-79	SUB PAR 60-69	POOR <60
Student showcased an complete mastery over this project meeting all of the requirements in an industry relevant way.	Student was able to follow almost all of the requirements, but may have missed one key aspect.	Student did make the video, but it suffered from a lack of design skill, or did not follow more than one of the requirements.	Student did the absolute bare minimum, and produced a less than acceptable product, and didn’t meet all of the requirements.	Student did not follow directions, did not produce remotely acceptable work, or didn’t cover almost any of the requirements.