WEEK 6

Scripting the CTA

I want to apply at least three motion effects to my Call to action button. One will be using an illustrated element of the brand, which I think will be the hands of Romeo and Juliet. The second is a text message, applying a different technique from the one learned last week, and the third would be something different. So I have been searching on the internet for an effect that can be used, such as a slide, rotation, jumping, waving, or some effect that will connect all the others.

I want to do a button to call the user's attention to buy tickets for the play, as I have been working in the Design Communications discipline in developing ticket selling system. I want to promote that with the motion design.

Brainstorming

The idea of making this CTA button is to communicate the message to my target audience about where to buy tickets for the play we are promoting to them.

How to communicate? The brand identity is developed for young adults and people who love Pop Culture.

In one of my research, I found a video teaching how to create a motion for your logo that looks like a sticker style. I then realise that sticking stickers is present in so many areas that my audience frequents, such as pubs, nightclubs and many public spaces and has become a style of art. So I decided to follow that tutorial and apply it to my CTA.

I believe that is a subtle way to communicate and a nice effect to be applied.

Storyboarding

The storyboard will represent the idea I stated before. The sticker effect will come when the other effects are done. First, it will start with the text rotation and the illustrated hand sliding in, pointing to the circle's centre. The text says, "Find your tickets here" this can be pointing or indicating around it, or it can also be the button itself, leading then to the ticket-selling system.

Developing CTA motion graphic

I draw the layers I want to animate on Illustrator, choosing colours, positions and typeface.

I exported the Illustrator files and separated them for a layers composition option.

Unlike what is said in the script and the storyboard, I realised that the sticker effect (Turn Page) would look nice if it were put at the end of the animation.

So I started editing this effect, choosing to begin and end anchor points and adjusting Fold Position, Fold Radius and opacity.

The second step is to animate the layers I brought to After Effects. I added Rotation to the Text "Find your tickets here" and also added movement to the hand of Romeo as if it is coming from the top and pointing to the centre of the CTA Animation.

Still Frames

Final Result for CTA

Hoover the mouse over the screen to initiate the video

Week Reflection

This week's development has been significant to me. I believe I did a great job applying the effects and creating the animation for the CTA button. I am happy to have learned something different from what I have learned before.

The animation seems pretty neat and the idea quite cool. I am just thinking about where to position and what will be the information surrounding the CTA on the website.