About

Burst! Creative Group is a creative agency that offers web development and design services to businesses of all sizes. During my internship, I supported the Senior Graphic Designer in various tasks related to the company's branding and advertising.

As the company updated its website and the Senior Graphic Designer created mockups for developers to code, I contributed by creating User Interface Motion Design Animated GIFs using Adobe After Effects and Adobe Premiere Pro. Additionally, I played a key role in producing mockups for the updated website, designing sticker GIFs for their Instagram and Giphy accounts, and handling various other graphic design projects for their clients: see "Maureen Foods".

Research & Brainstorming

For the Sticker GIFs uploaded on the company’s Giphy and Instagram accounts, I was tasked with illustrating and animating two topics: “Thank you” and “Burst x Waves Wednesday”. Every Wednesday, the company treats their staff to an outing at Waves Café, with the intention of featuring these Sticker GIFs in their Instagram posts. My role involved creating a GIF that symbolizes this special outing. Since this was my first time creating a GIF for the Giphy account, I researched how to upload it and familiarized myself with any specific requirements. Additionally, I searched for a transparent Waves Wednesday logo that could be integrated into the GIF. Before starting the project, I utilized a Mind Map brainstorming session to plan and organize my ideas.

Regarding the Handwritten Text UI Motion Design, I was provided with the desired font and conducted research to find tutorials on techniques. The tutorials and techniques consisted of how-to animate handwritten text while maintaining a transparent background when exported from Adobe After Effects.

For creating mockups that will be used on Burst’s website, I was provided with several links to free mockup resources to apply the images or artwork. Once a mockup file is downloaded to use, I make sure to check the license usage prior using the downloaded file. if all is well, I go ahead and starte the process of customizing the mockup.

Adobe Illustrator

For the Sticker GIFs such as the "Burst x Waves Wednesday" and "Thank you" Gifs, I had a one to two-day deadline to brainstorm ideas and complete the task. To create the image, I used Adobe Illustrator to illustrate the graphics indvidually for preparation, when importing the Adobe Illustrator file in Adobe After Effects.

For the Burger Menu displayed on their website, the company desired their logo to animate upon clicking the burger menu. To achieve this UI Motion Design, I received the logo in PNG format, which I then converted into SVG by recreating the logo in Adobe Illustrator for proper integration into Adobe After Effects. Similar to the preparation of the Stickers Gifs mentioned above.

Adobe After Effects

For the Burger Menu MP4 video and Sticker GIFs, I imported Adobe Illustrator file onto Adobe Effects where I then organize and rename each graphic image prior to animating. Once all the renaming is finish, I start the project by animating is each graphich image individually. Lastly, once the animation is finish, I then export the file to the proper settings required.

Adobe Premiere Pro

Once the animation is exported from Adobe After Effects, I import them into Adobe Premiere Pro by overlaying the Gif and Mp4 videos on top of an image. If the GIFs and Mp4 videos maintain transparency, I then submit the design to the Senior Graphic Designer for review. Upon approved, it is then sent to the CEO for approval.

Final Design

Burst - Social Media GIFs

Burst x Waves Wednesday

For the Sticker GIF "Burst x Waves Wednesday", I created 3 different text colored versions: black, blue, and white for a transparent background for their instagram account.

Thank You Gif

Burst Mobile - Burger Menu

For the Burger Menu, I designed 2 versions for the Senior Graphic Designer and CEO to choose from, and they selected the second version.

Burst - Handwritten Text

For the handwritten text, I animated a total of 14 videos plus exported 2 different versions of black text and white text each on transparent backgrounds. Below are a couple of Handwritten Text I did for Burst.

Observe the project in its live iteration:

Website Giphy

Recollect

Challenges

• Although I had learned Motion Graphics as school, making UI Animations for a website was a bit new to me. I found myself doing more research to easily create the burger menu. As the burger menu at Burst! Creative Group was a bit different as it required their logo instead of an “X”.
• The demand for more UI animated handwritten text. Since the animation process was a not simple task as it is time consuming with no shortcut. I felt the challenge was meeting their demands and fact that each animation had to be created for black and white background.
• After the CEO was happy with my Gif and animated Handwritten text, they requested more with little time left.

What I learnt

• How to make the background transparent in After Effects.
• How to Create smooth Handwritten text for Capital Letters and regular Calligraphy.
• How to create a Gif for a Giphy Account in After Effects.
• How to create better mockups for websites and clients