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:
- “Mary & Bessie” A Mini Documentary - "Mini-Documentary" Video Project Production Notes: This is just a good old fashioned ghost story. I wanted to try…
- This Course Ruined Me for Life! - FINAL THOUGHTS AND REFLECTIONS ON ICM508DE Final Thoughts and Reflections on the Course This course has ruined me for life!…
- Pure Illumination - LIGHTING, ADVERSITY AND DOCUMENTARIES 5400K is an important number to remember. It is the Kelvin scale color temperature measurement of…
- All-Pro PBJ, A “How To” Video - "How To" Video Project Production Notes: For this project I wanted to go in a different direction. Instead…
- Vary Interesting Line - SUMMARY OF READINGS - BASIC SEQUENCES & DIRECTION Variety is the spice of life. It is also what makes for…
- Simon Says “Cut!” - EDITING & POST PRODUCTION READING SUMMARY Alright, lets play a game. You are Simon, and Simon says “Look at the…