Getting Louder with Hype
A set of three projects that helped introduce me to the Tumult Hype Tool.
Up until the Spring semester of my sophomore year at Utah Valley University, I had never used the Tumult Hype tool. In fact, before my DGM 2280 class, I hadn’t even heard of it. I was also an avid PC user, which could also explain why I hadn't up to that point. Learning Hype was challenging at first. Timelines and scenes were difficult to understand, and when it came to interactions… let’s just say that I almost broke my brand new Mac a couple of times out of frustration.
The Breakdown
In order to learn this animating program, I was instructed to create three different projects: a Kinetic Typography video, an Infographic, and UI Project for either a mobile device or a website. To complete this assignment, I would be required to combine the first two smaller projects (kinetic typography, and infographic) into the third and final UI project.
For this concept I asked myself, “what is one the most universal mediums that connects and brings everyone together, that transcends all languages and cultures, something that we develop a great affinity for from the time we are very young?” The most obvious answer for me was of course: music.
Music, in my opinion, was that worldly concept that I could incorporate into my project that would provide a sort of, kinetic energy that everyone could relate to. But how to take that concept and create something practical that anyone could use and benefit from? I needed something more, something cohesive that could unite a person’s interests and the way they learn more about the things they love. Unfortunately for me, I was at a bit of an impass in the idea department. I was confident that I was on the right path but a low-hanging fog seemed to hinder my progress. On the plus side however, one of my long-standing favorite punk rock bands, Rise Against (RA), had just released their 8th studio album, Wolves; a fist-pumping, political power punch that I had definitely been overindulging in at that time. In fact, I had become so immersed with that particular album, I began to investigate tour dates to see when/if the band would be coming to a venue near me. It was during this time that the idea of a music app, one that would allow you to follow your favorite bands via an immersive map, as well as check out nearby venues to peep shows and events, cut through the fog and illuminated my way once again.
Project One: Kinetic Typography
For part one in this three part project, I chose to do the lyrics from one of the album’s singles called, “Breakdown”. It was fun, fast, and the strained scratch of Tim McIlrath’s voice made it one of my favorites. I began by storyboarding my plans and laying out my vision.
This task, in and of itself, was simple enough. The project didn’t have to be too long (a minimum of 20 seconds, give or take), and the storyboarding segment of this project turned out to be the easiest part to my beginning. By creating a mood board, I was able to get a feel for the colors and typography that I’d be using, and really outline which direction I wanted to take my vision.
Breaking Timelines
The next step in this project would be to learn how the timelines of each element worked together. At one point, I realized that I needed to add linear scenes to help my artboards not be over crowded with items. This proved to be a bit of a struggle at first, but through a combination of trial and error and experimentation, I eventually learned how to manipulate each element and in the end I was very satisfied with how everything turned out.
Project Two: Infographic
By the time I started my infographic, I was getting the hang of using timelines and how each element worked with each other. I was now ready to add in more scenes with different interactions. Because my project had turned from linear to dynamic by this point, different actions would link to special animations and information depending on what decision a person were to make. Venue information in particular had become pivotal in this project as I began to follow Rise Against more closely on social media (something I had initially done to gather more photo content for my infographic), especially when considering that they had just finished touring in Europe, a place well known for some pretty spectacular venues.
Because I wanted my audience to have a more immersive experience, each scene had become adorned with buttons, links, and pop-ups allowing a person to explore my infographic map. All told there were a total of 13 scenes which were comprised of the beginning scene and the 12 venues. Each scene had 12 buttons, enabling my audience to “choose their own adventure” instead of having to start from the beginning each time they wanted to switch venues; these were followed by a 13th button to close that venues pop-up. Pop-ups included information about the venue and three to four images. One image of the venue itself, and two to three of RA’s performances. Keeping everything in order became a chore, one that tested my patience.
Project Three: The UI Integration, tying everything together.
At the beginning of this journey I explained how I was informed early on that I would need to create a third project that would neatly tie my other two projects together. To accomplish this task, I set out to create a mock music app that reminded me of something akin to the early days of MySpace, when the original intent was discovering bands and following their small tours as a favored past time.
Before I ventured too far down that path however, I began to brainstorm name ideas for my app. And what better way to pay homage to the spirit of rock and roll that had inspired this whole project, than to do a search for the word, “loud” translated into different languages. After a little time sifting through the many variations and toying with different ideas, I finally stumbled upon the Latin translation of the word I had been searching for: Clarus. With just a small tweak I was able to alter that word and produce my own version: Clarous. This all made perfect sense to me as my project had turned into the loudest in the class thus far, so why not keep that ball rolling?
Now that I had a name for my mock-up, it was time to stretch my UX design muscles and sketch out my user interactions and design board. It was then that I discovered that I could change the size of my artboard… my third project in and I finally realized that this was a possibility the entire time; information that would have been paramount in the earlier stages of this project. The lesson being to always check your programs full capabilities. This also meant that I had to resize my prior projects to make everything cohesive.
At the end of all my research, planning, sketching, and execution, I was able to produce something that I could be proud of: a music app where you not only stalk the bands you know and love and become a total groupie, but can also check out the different venues and other artists that you could perhaps fall in love with as well by favoriting both venues, and artists.
Shelly Gardner is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to Hype Tool Projects in the DGM 2280 course and representative of the skills learned.
