Brand Micro Interactions
DURATION
13 Weeks, Spring 2020
SKILLS
Frame by Frame Animation
Brand Design
Animation
TOOLS
Adobe After Effects
Adobe Photoshop
Figma
OVERVIEW
Choose any brand of your liking to develop a creative and expressive library of micro-interactions. The objective of this project is to go beyond the idea of functional and focus on what makes design as small as buttons, sliders, and toggles delightful, satisfying, and magical. Isolate elements of design and motion to communicate to users and encourage them to interact with your designs.
Client
I chose Converse as my client because I have adored and worn their products for as long as I can remember. I am inspired by their brand and message to society. They have been in the fashion industry for years and are still taking big steps to continue to be different than everyone else. One day, I hope to work for Converse and contribute my artistry to this iconic company.
Button
Designing this button, I want to create a frame by frame animation and use the oh so familiar image of the classic chuck. Thinking of the Converse brand, this shoe comes into mind and I wanted to play on its iconic silhouette. To inspire customers to get going, I want to make these shoes walk in the transition to the shopping experience.
Frame by Frame Process
Plain Loop
This loop of drawings started the ideation process of what the story of the button would tell. It grabs the user’s interest and attention, making them want to click the button.
Color Change
This option of a hover state would also encourage users to click the button to see what happens. However, I chose not to go with this route because it can be sensitive to the eye.
Red Fill
This option would be the hover state of the button. As the color fills up the sneaker, the user would feel inclined to click the button to see what happens.
Hover States
inactive
active
hover
clicked
transition
Toggle
This toggle will control what brand the user is shopping through the products of. Since Nike owns Converse, I thought a good use of a toggle would be to isolate each brand and its products. Straying away from the frame by frame technique, I chose to keep the animation simple but look a little deeper into color transitions and track mats.
Multi Toggle Switch
This multi toggle will be used to select shoe size. I wanted to tie in the use of line to the button animation. It was designed to resemble a foot measuring device and like that device, the user will see shoe sizes listed vertically and scroll through the numbers. When the numbers increase, the footprint will increase, and when the size decreases, the footprint will decrease.
Slider
This slider will be used to select a price range. To tie it into the Converse brand, I wanted to think of a way to use parts of the sneaker to be the actual slider. Laces and grommets were the perfect solution and worked well as images for markers of price on the line of the slider.
Radio Buttons
These radio buttons will select the color of the sneaker. Since it is a small interaction I wanted to keep it simple but include a small bit of detail. Using After Effects, the selected color will be traced by “stitches” and enlarged to emphasize its state.
Check Boxes
I chose to use checkboxes as filters for materials users can shop through. I wanted to keep this interaction simple because it will be relatively small on the website's interface.
Reflection
This project taught me a lot about consistency in design. Designing pertaining to a brand’s style and identity helped me gain an understanding of the importance of following brand guidelines. While staying uniform and limited to the brand of our choosing, this project also encouraged us to flex our creative muscles. Having freedom in this way was a refreshing change and made room for new, unique ideas that are uncommon in the world of interaction. Important note, this project was cut in half due to COVID-19. During this time, students were required to return home and professors adjusted their workloads for the mental health of their students.
say hello!
© 2022 hannah grace sarakin
