The Jingle Jammer
Device Mock up
The other reason to use After Effects to create navimations is that you can really bring a concept to life by using an animation. Let’s say you have an idea for a mobile app and really need to communicate your vision to your team, or a potential investor. Providing an animation that you can create in a week can really save a ton of resources, time and money before you even write one line of code. It can force you to evaluate your idea and see if it “flows right”, can get support and move forward or go back to previous stages for further review and development.
So, in the spirit of the season, behold “The Jingle Jammer” music application concept, UI design and animation. Originally the “Merry Maker” this idea was for a holiday music maker, where the user could create short looping beats and share them with friends or add to their music collection. The design was influenced by early ipod design and other DJ apps but simplified and wanted to emphasize a retro tactile feel with a knob, buttons and sliders. Clearly a holiday inspired project, it has a red and green color scheme with white being the dominant color. The script font was selected to emulate the Gibson guitar company font as it would go well with the music theme and be fun and cheery. Meant to be light and fun, a “mini” promotional app like this could be sponsored by a entities like Soundcloud or Pandora.
Beginning as a loose idea, a phrase, a logo idea and a few preferences for clickables it came together around the music. 80% of the work. Audio led this project, so I created and mixed together the primary DNB jingle mix. Once that was completed, i had an idea of my timing. Kind of like the music for Fantasia existed for hundreds of years before they added visuals to it. I figured that would be the easier route. Once I had the key designs fleshed out, I created the animations in Photoshop and AfterEffects then put the whole thing together in AE and added the user finger presses and swipes. I added the waveform following this tutorial by PoshDesignsHD on youtube https://www.youtube.com/watch?v=NOONOFnu8bE
It has only been a week, but plan to continue improving it by adding “save” and “send” buttons, we can imagine these functions would be under the “settings” gear icon on the top right. Also, perhaps creating a “multi-denominational” version of my totally made up fantasy music app. Enjoy and Happy Holidays ICM 504! Wishing you and yours all the best in 2019 and beyond.
Stock images provided by:
Audio loops and sound effects provided by:
Shawn is an Information Technology manager in Washington D.C. and a graduate student at Quinnipiac University pursuing his masters in Interactive Media and Communications.
Recent Posts from the Graduate Series:
- Motion Across Media: The Final Project- Production Notes: "Back To School" Production Notes: This is a non-linear piece. A compilation of various projects I…
- Just Get Out There and Do It- SUMMARY OF CHAPTER 10 OF “ANIMATED STORYTELLING” BY LIZ BLAZER & UI EXAMPLES Over the past few months I have…
- The Final Chapter is only the Beginning.- SUMMARY OF CHAPTER 9 OF “ANIMATED STORYTELLING” BY LIZ BLAZER & UI EXAMPLES So we have had quite a journey.…
- Principles of Animation- Learning How to Imitate Life - Principles of Animation This week we were asked to do some searching and find at least…
- SRA Logo Stinger- Production Notes: I designed the Soccer Revolution Academy www.soccerevolutionacademy.com logo in 2010. They have been a long time…
- Sweat the Technique- SUMMARY OF CHAPTER 8 OF “ANIMATED STORYTELLING” BY LIZ BLAZER Up to this point we have done a lot of…