For my topic, Sloth, I chose to focus on typography and how the art of creating type has dwindled from artistry to simplicity. I chose to animate how a Blackletter ‘S’ would would sketched out, inked, and then filled in. Then it transforms to a computer screen with a cursor blinking to spell out the word ‘sloth’ in sans-serif type. This represents how typography has gone from a full-time occupation to a thing we all take for granted. Generations today who use technology don’t realize the time and effort it takes to create a typeface and how it affects our daily lives. The end takes you to a youtube link about the history of typography, which I think is appropriate for the importance of typography.
For this infographic, I chose to showcase the mass differences between the average income rates between New York state and Syracuse area. For the beginning portion, I chose to do a small introduction between the U.S., New York state and Syracuse. Each area is represented by a different opacity of red. At the end, the infographic allows the user to click on one of the three topics to go back and view the specific topic again.
For this doodle animation, I chose to represent my favorite actress Audrey Hepburn. I chose to represent all the places her movies have taken place and showcase a silhouette of her little black dress. The green vespa is an iconic image taken from her first big role in ‘Roman Holiday’ and I used it to represent her travel spree from Rome to Paris to London and then New York City.
The concept for this piece changed over time, many times, until I decided to make another infographic about the nuclear powers and the amount of nuclear weapons that each of them possesses. It is a topic that is always in flux, so I wanted to show the most current information (July 2013) in a simple way. I did so in a dark-humored sort of way, that might lend to the unease of the topic.
In order to elicit this dark humor, I decided to make things rather rustic and roughly done. However, I needed it to still be simple and easy to understand. To do this I used the basic and well-known shape of a bomb and some color organization of the countries throughout. The radioactive symbol at the beginning starts the whole piece off on a darker tone as well.
When it came to the colors and type, it all had to reflect back on wrath and the topic of nuclear weaponry. The colors were an easier element to implement, as one of the first colors that comes to mind when wrath, or nuclear war is uttered is that of red. In order to make the colors easier to differentiate, however, I extended the mix into oranges and pinks as well. They are all still in the warmer range of colors, but bright and pop against the crumpled paper background.
For the type, I eventually decided to do a handwritten type. To do this, I made my own typeface that was hand drawn and then implemented it for all of the type. It is rough and mainly in all caps so as to define hierarchy and also to make it bolder, as if the information is screaming at you.
Finally, the imagery was very simply done, but informative and powerful I believe. It not only provides information visually, but verbally as well through some hard numbers. The radioactive symbol at the start gets the user in the frame of mind for what will come next. Then the bomb I used is the typical little-man bomb that one often sees in association with 1950’s bomb types. The color blocks then emphasize what powers in the world hold the most nuclear threat, and it is made very clear with the interactivity.
Overall, I think that the animation illustrated the point of wrath when it comes to world powers and the threat of nuclear weapons. It communicated this information simply and with hierarchy so that the user can focus on the message that it is communicating.
My actual concept for design changed. However, I stuck with the same principle that I wanted to show the inner effects of wrath rather than the outward aggression. Therefore, my design was more focused on how wrath affects people internally by making their hearts and souls dark. I also wanted to show the opposite of wrath; that is why the heart begins red before turning black and that the ending message of the animation is “Be Kind.” I wanted to have a handwritten feel to my animation, so I put the animation on a paper background. I wanted my animation to be simple and clean.
My deadly sin was lust. I began with a very straightforward concept and completely did a turn around. The idea behind my project was to evoke the users mind to think “dirty”. Once this was accomplished the user would see that what they thought was sexual actually wasn’t. My intentions were to make it a funny iteractive that would make the user laugh at at how provocative and unprovocative it was at the same time. I think I accomplished this but I have to admit I think I can keep working on this project to take it to its full potential. Overall as frustrating as it was to make the interactivity work it was really rewarding to watch it function when I figured out the technical side of it.
The deadly sin that I selected was pride. Originally, I was using the allegorical story of the Tower of Babel as my inspiration, but through some wonky art direction, and new ideas thrown around, it ended up having more of a Tower of Pizza theme. The animation shows the tower being built, then the weather changes and the scene becomes slightly ominous as it tilts dramatically. It’s still a story about how, as humans, we are often very pride full in thinking that we have the greatest technology and innovations, but we can still fail when our pride gets in the way. The animation style is lighthearted and comical. I tried to keep the style simple and bright- nothing too serious.
My infographic shares the information the group Undergraduates for Better Education gathered by conducting surveys focusing on student’s Syracuse Education. The data I selected from the study is separated into three pie charts, each with a different focus. The three topics are how enthusiastic professors are in the classroom, how many options the students felt they had for selecting classes and how students evaluated teacher’s assistants.
The challenge I faced when it came to depicting education was representing it in a manner that is not over done. Because of this I opted to style my graphic in a clean, modern manner. For typography I choose the two typefaces Brandon and Chronicle. They compliment each other well in that they contrast styles. As for color selection, I wanted to have fun with the color scheme to bring some life and energy into my project, otherwise it would easily get too dry.
Class Morale screen:
For my Seven Deadly Sins project I got envy as my topic. I wanted to convey the danger of envy in this short animation. I created this feeling through using the inverted photos and flashing back and forth between that and the normal image. This reminds me of old horror movies and creates a sense of suspense and fear.
I wanted to focus on the eye because envy is seeing what others have and being jealous of that. I chose to break up the parts of the eye and animate them in separately. I think that this helps capture the audience’s attention because they cannot tell what it is at first.
As for the color scheme I wanted to keep things simple and mostly black and white. Envy is generally associated with the color green so I want to stick with that as the accent color to highlight specific things. . I wanted the background to be dark to convey that envy is a deadly sin.
I added the part at the end where the grey swirls animate in to show that envy can consume you and take over. I think that overall it came together nicely and I am happy with the finished product.
The sources I used were just handouts from previous classes because I did not do any animation that I had not previously tried.
Knife is displayed on screen and is animated to move up and down.
Click it and the stage animates in blood, first slowly, then quickly. The screen fills with blood until the whole thing is covered. And then WRATH appears. You can click the white knife to replay the animation.
I wanted my infographic to be playful and happy as opposed to dark and depressing, which is why I chose to research apples in New York State. I decided to show a tree growing and then have an apple fall off of it. The apple falls and eventually becomes the pie chart. Each of my sections where type heavy so I chose to do a click instead of a hover over for the info to appear. I made boxes up to that coordinate with the pie chart so one can click the boxes to see the section’s information.
I chose to use bright colors and I tried to stay within the color pallet of apples. This is a fun animation and the colors needed to reflect that.
What I learned
I learned how to add interactivity to my animation. I used the click and double click function. I also learned how to use the masking tool.
NOTE: This animation plays best on Google Chrome.
My sin was lust. I chose to use the female body to represent this. First you see a glass of wine and it transforms into the red dress with lips. This is because when you drink, your inhibitions are lowered. The eye winks and then the breasts grow. Everything in this is suppose to be slow and sultry. I added music that goes along nicely and emits a feeling of desire. I am very happy with how this project turned out.
Red, white, and black. I chose to stay simple here and have white and black be accent/background colors. I wanted red to be the main color because it is the color most often associated with love and lust.
What I learned
I learned how to think metaphorically. Usually I stay very literal, but this time, I was able to be more abstract, which I liked.
This project was inspired by the amount of political refugees in Syracuse. I used information from the Onondaga Citizen’s League project called the “World at our Doorstep,” which included the most recent statistics about refugee arrivals in the area. I wanted to highlight truly how international these numbers are, and how these people and families come from so many other places around the world. Another reason I wanted to highlight this was because people would never expect so many different nationalities having a large presence in Syracuse, NY, of all places.
I wanted to present this information in a really colorful way, and I wanted to incorporate either flags or countries. I chose flags, but I turned these flags into people so the numbers would feel more personable. With all of these people lined up next to one another, I was hoping to really hit home how diverse this area is, even if it is sheerly represented by colors on a flag. I chose a web typeface that was built into Edge that was clean but also looked hand drawn. I didn’t like how the sterile feel of a straight sans serif clashed with the personable project I was trying to build, so instead I chose something a little less rigid. I pulled the warm color palette for the type from various colors in the flags.
The following project draws on the injustices of America’s incarceration rates. It is no surprise that there are some major discrepancies between race and gender. This info-graphic plainly shows the discrepancies of Caucasian, African American and Latino men and women.
The graphs I chose to illustrate show effectively show the discrepancies in a visual aspect with dots representing the amount of people.
I chose to use variations of black, white, and orange for this project. The black and white is supposed to convey the seriousness of the issue at hand. The orange elements work to highlight the important information. Orange is also a color that people associate with prisoners and the garments that they wear.
The interactivity is simple and meant to guide the audience to the most important information. The info-graphic starts with an animation to introduce the topic and to highlight the outstanding overall statistic.
I believe all the elements of this project work well together to convey an important message about the discrepancies involved in the U.S. justice system.
My concept for this piece was that of sex trafficking and its increasing predominance in the United States. Sex trafficking is a topic that is often associated with countries beyond our borders, and I wanted to show that it is something very near to home. I decided to focus on identifying the typical victims and suspects of this crime in order to put a face to those abused and their abusers. I felt that this identification would make the information strike closer to home.
I wanted the overall tone and feel of the infographic to be very somber and ominous. In order to have the maximum effect, I wanted everything to be very simple and easy to understand so as to place emphasis on the subject. I also wanted this information to prompt some action as well from the user, even if it is just looking up the sources and informing themselves from there.
In order to reflect this somber and dreary mood, I needed to have the type and colors reflect as such. I decided to keep all of the colors very muted and neutral except for the colors denoting the victim and suspect. The victim’s color I made blue in order to denote a sense of calm and good, while the suspect’s color is notably red in order to signify danger. For the type, I wanted a rough-hewn quality to reflect the stained background that I had in place, so I used Veneer. Then to make the facts as legible as possible, I used Univers Condensed. It is still rigid, however, so it still conveys a certain tension.
The imagery was very basic, but simple and powerful I believe. I boiled my concept of identification down to the very simple idea of fingerprint identification. Everyone has a fingerprint, so that is a touchpoint that viewers can connect with. Then the interface is very easy to use because it is a simple act of choosing points on the fingerprints to reveal the information.
Overall I think that this animation illustrated my point and drove home the fact that there is a proliferation of human trafficking in the United States. It communicated this fact very simply and elegantly, which helps the user to focus on the content rather than the usability of the interface itself.
Tutorial URL Links
Lynda.com • Edge Animate Essential Training Videos
Lynda.com • Creating Animated Infographics
Heathrowe.com • Show/Hide Toggling