Year

2018

Software Used
  • Sketch App
  • Principle
  • Adobe After Effects
  • Adobe Illustrator
  • Adobe Photoshop

“I love you, but i’ve chosen rock n’ roll.”

The Challenge: In this just for fun project, I decided to challenge myself to make an e-commerce music shop app and then animate it in Principle. I wanted to have something vibrant, intuitive, and easy to navigate through,

Year: 2018
Software Used: Sketch App, Principle, Adobe After Effects, Adobe Illustrator, Adobe Photoshop

User Flow

I started by mapping out the user flow that my final animation would take. For this project, since it was just for fun and not a production ready app, I didn’t show every single feature (i.e. search bar, shopping cart/purchase flow), but rather I wanted to focus on showing off the product carousel, bottom menu for the products with details/reviews/images, and then the main slide out navigation menu.

User Flow

I started by mapping out the user flow that my final animation would take. For this project, since it was just for fun and not a production ready app, I didn’t show every single feature (i.e. search bar, shopping cart/purchase flow), but rather I wanted to focus on showing off the product carousel, bottom menu for the products with details/reviews/images, and then the main slide out navigation menu.

Color Scheme

For the color scheme, I wanted to create a sort of “candy shop” aesthetic, where the instruments and products could pop off the page. I chose a pastel palette that spanned six colors to provide variety and contrast between different panels.

Color Scheme

For the color scheme, I wanted to create a sort of “candy shop” aesthetic, where the instruments and products could pop off the page. I chose a pastel palette that spanned six colors to provide variety and contrast between different panels.

Icons

In creating an icon set for this app, I wanted to utilize thin lines and do more of an “outlined” look. I needed two icons that were not standard for UI design, one for pickups, and one for the fretboard. I focused on creating abstract versions that were simplified for clarity at smaller screen sizes.

Icons

In creating an icon set for this app, I wanted to utilize thin lines and do more of an “outlined” look. I needed two icons that were not standard for UI design, one for pickups, and one for the fretboard. I focused on creating abstract versions that were simplified for clarity at smaller screen sizes.

Animations

For the animations, I wanted to create depth so I decided to have the elements parallax and layer in front of each other while swiping. I also wanted the color to transition, not just swipe away, but change shades and tones while becoming the next color. For the bottom menu, I wanted a sort of “spring” up and then back down to create some movement and personality. Lastly, I wanted the menu to slide in at an angle with each menu item “cascading” in one after another.

Animations

For the animations, I wanted to create depth so I decided to have the elements parallax and layer in front of each other while swiping. I also wanted the color to transition, not just swipe away, but change shades and tones while becoming the next color. For the bottom menu, I wanted a sort of “spring” up and then back down to create some movement and personality. Lastly, I wanted the menu to slide in at an angle with each menu item “cascading” in one after another.