Traveling with Hype
My first trip with Hype and I was Hyped.
While in High School I got my first glimpse into what animation was all about. It was all about Flash and my first experience of using Flash was a love hate relationship. When I got into college I was placed into a Digital Effects and I was shown another way to animate. That was new found animation was Hype. I loved Hype it was so simple to use. Everything seemed to come together and flow.
My first project in getting to know how to use Hype was an animated typography project. This would then lead to creating an infographic to go along with my final project. My final project was to create a UI Design for a user to interact with. I decided to do my project on Traveling around the world because that’s one of my goals in life. My ultimate goal was to have everything come together in a website that people could go to and have them know where to travel. Then I went to draw out my first animation typography project ideas on a Storyboard.
After my storyboard, I took those ideas and started to place files in a Hype document to see what they would look like. I started with some simple animations to get the job done. So, I ended up with this as my rough draft of a project.
After my rough draft, I went back to the drawing board to improve my initial idea. I wanted to make the transitions flow better and to pick a font and stick with it throughout the rest of my project. So, I went with the font Impact and Avenair. and chose the colors green and blue to go with the world idea of land and sea. After I chose the font and the colors things started to flow with the other projects. Then after I had done that I came back with something that I am proud of.
After I had done the animated typography I got started on the Infographic. For my infographic, I wanted to take the pictures that I had already used in the video. I took those photos from different locations and gathered information on each of them. I collected information on population, best food, form of transportation, and the best place to visit. My initial storyboard ended up being just a straight forward click and see more.
I got to learn so much about how Hype actually worked. The simple things I got to learn like getting a single item to repeat. Making different timelines and making items clickable. This made everything possible so that I could get my project to go from scene to scene without an issue. Once I really got working I got everything synchronized and working together. The infographic made the video come together. This video demonstrates how this infographic is meant to be used.
The final piece to the puzzle was creating a UI experience for the future travelers. I wanted to be able to take the users through a sort of experience where they could book an adventure. I decided to have the user pick where they wanted to go.
Then select the date they wanted to go and because this was a prototype I greyed out the areas that they were not supposed to click on. I wanted them to have the ability to see what it would look like if they were to choose a date but not just any date. I was able to do this with Hype by using different Timelines.
After they chose the date the user was directed to pick how they wanted to travel. Then once they selected a certain transportation method it would light up. As I was working though this section of my UI I was wondering how I would be able to have all of the transportation pieces light up and still function. While I was working on this I discovered that scenes were the best option. I was able to give the plane its own space to light up and when the other items would be selected it would just go to that timeline. It all worked together so that each transportation lead to the others and vice versa. Then in the end they would all lead to the next page.
Once everything was selected it lead them to a confirmation page where they could view all their details of the trip. Also on that page there are places to fill in all the important details. I wanted to give the user the opportunity to see everything in writing like a receipt. This would also allow them the opportunity to see how far their progress had come.
Upon 100% completion and trip reviewed the UI experience ended on a thank you page with confirmation email sent. I wanted to supply the reassurance that what they had done worked. Giving them the reassurance that they would need going forward with their travel plans.
After everything was done and the confirmation email was sent, I wanted the user to feel excited about their trip. Then it said, “Let the Adventure Begin!” This has always been such a fun phrase and it continues to be as people would set out on their adventure.
After taking this class I have a new love for animation. Hype is very easy to use and friendly. I was able to export things as a widget and place them with ease into certain files. I will definitely be using hype in the future to give things the wow factor that they need. Getting users involved and interacting is what Interaction Design is all about anyways. I am definitely grateful that I was able to learn about Hype and all of its capabilities. This will be one thing in my design tool box that will come in very handy.
Morgan Munson is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The article relates to (Digital Effects UI/UX Project) in the (DGM 2280 Course) and representative of the skills learned.
