top of page
INTERACTION DESIGNER / PRODUCT DESIGNER
ADIDAS Motion Graphics
Motion Graphics Design, Visual Design, Storytelling
A motion graphics which can narrative the brand trait and story of Adidas.
ROLE
Motion Graphics
Concept & Research
Visual Design
Storytelling
User Experience
TOOLS
Adobe Illustrator
Adobe After Effects
COLLABORATORS
Individual
PROJECT OVERVIEW
This project asks us to mimic, embellish, and/or offer a novel approach to the existing UX/UI element of an application. We need to describe the narrative structure by using a clear visual depiction of the motion design.
PROJECT BACKGROUND
Storytelling is a fundamental tool for designers, it can hold the key to unlocking creativity and innovation because it empowers us to share ideas in a way that meaningfully connects with our audiences. It is necessary to consider storytelling in the context of user experience.
How might we translate a core brand trait or story into an interactive narrative element, material design characteristic, or other motion graphics elements?
LEADING QUESTIONS
FINAL MOTION GRAPHICS
PROCESS WORKS
Identify the Application
I need to choose the APP which I want to develop before I start to work on the motion graphics. I also need to analyze its identifiable brand traits and/or story and describe how those traits/stories are reflected in the visual and motion design. This is the best way for me to understand the brand and create better and suitable motion graphic elements to the APP.
The brand I chose for this project is Adidas. The traits of Adidas are basically sporting, comfort, and fashion. Most people know that the typical colors of Adidas are white and black, which are the two main colors that are used for their website and APP. The interface of the APP and website is very clean and simple, there are no extra decorations on the interface, and it can be used by the people of all ages.
Exploration & Proposal
After I decided the App, then I explored and document the user experience for motion design elements and areas that could utilize motion design elements. According to different Pros and Cons of those motion design elements, I proposed the interaction/ animation to each of the functions.
Storyboard
The next step is to make the storyboard of my motion graphics. I chose some of the proposals and made the storyboard in Illustrator, which will be the guideline for me to animate them. I mimic the layout of this application because I think it is very concise, and it can clearly show the products to the users. I made the mainframes to multiple individual pages and also added some instruction for the main interactive elements. The three UI elements which I chose are searching, selecting the general category, and selecting the product category.
Animation
I imported all the needed visual elements into Adobe After Effects to animate the final motion graphics, according to the storyboard which I did in the last step. During the
process, I did some little changes for the content and also added an iPhone mockup to make the animation more realistic.
Then adjusted the data of different parameters, such as the position, the opacity, etc.
Also, added a blur effect when the general category is opened.
Added the easing effect to some of the elements, which can give them a speed feeling and they are suitable for Adidas. I adjusted the value of the parameter to the proper one which can provide the best visual effect.
REFLECTION & LEARNING
The most significant impact of this project on me was to realize the usefulness of storytelling. It can make the material more memorable, and also can powerfully persuade where facts cannot, allowing the audience to come to the desired conclusion on their own. Storytelling can be a very handy ability for me to use in other further projects. Overall, I feel satisfied with the final result. During the process, I also improved and learned a lot about AE skills.
bottom of page