Posts Tagged ‘animation’
The following project draws on stories from the bible that can teach lessons about the 7 deadly sins. The Tower of Babel is a famous story about pride. I choose to go with a simple design that used an “icon” to represent the story. The tower is the symbol for this story. With the design of the tower, I chose to use layers of metaphors to allude to both the story and “pride.”
The tower is unfinished and is composed as “detached” because I wanted to represent something that was unaccomplished. This is what happens in the story. In a sense, I am trying to tell the story before one actually reads the story.
I chose to use variations of purple for this project. Purple is a color that represents pride. Color acts as another layer of metaphor to allude to the sin. My goal was to create something that could “say pride” even if the word did not appear on it.
The interactivity is simple. Two things are clickable. The cloud leads you to the bible story, and the word pride leads you to the virtue lesson for the sin. My audience is younger and therefore, I didn’t want to complicate it.
I believe all the elements of this project work well together to not only convey the sin of pride but to also teach a lesson on how to overcome that sin.
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.
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.
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.
As stated in class the strategy to designing an inforgraphic is to make information and statics human. Therefore for my project, the goal was to make the statistics indicating a small percentage of black South Africa actually goes on to achieve a college education appear human. To show this I used a series of three phases, which were facts I obtained from The Economist. By having the viewer click on a person, they are figuratively being the one who causes the high drop out rate. I thought this figurative action would help humanize and help make the situation of education in South Africa more empathetic.
Typeface Information: Comfortaa, 34, R05 G109 B106
Source Typeface: Arial, 18, R225 B225 G225
“Higher Education In” Typeface: Asap, 72, R68 G49 B38
“South Africa” Typeface: Asap; 89, R , G57 B5
Light Red: R 99 G38 B38
Medium Red: R 78 G0 B0
Dark Red: R53 G1 B1
What I learned:
I learned the basics of interactivity in the program Edge. I realized that there are multiple ways to create the interactivity effect that you want, and that keeping the interactivity design simple works more efficiently; I mean that a linear timeline works better than having symbols within symbols that need to be called upon to play. It is very important to pay attention to detail while coding, the small deletion of a “;” could make your interactivity not work. By having to create interactivity, I really learned the importance of a good naming-structure, more so than I learned in the first project.
Lynda.com reading assignments.
This is an autobiographical visual representation of me, Chris Azar. It features three sections, an introduction, a heart section and a head section. The mood of the piece is surprisingly more dark/creepy than I had previously imagined. However, once I recognized the organic elements I threw out my word mark (which is clean and in helvetica) and replaced it with my hand written signature. That signature for now is one of three elements of navigation. I will continue to add to functionality of every section in the site.
This is merely a work in progress..
I spent far too long in photoshop and developing content for this project and there a lot of things I didn’t get to or couldnt get to work in the action script. For example I created a new portfolio page over the weekend to be the target of an iframe but couldn’t get a function to work.I however am not defeated and will get shit to work. I also wanted the pencil to link to my blog. I will probably also add a small music player and a pre-loader for the next round. I would also like the heart/head items to go in reverse back into place, Finally, I would like to add tool tips to all the items in the heart/head sections. (Especially because a portion of the heart section is in french.)
So far what I have are three stop action sequences and a bunch of tweens. I’ll start with the heart items. They all pour out of a masked hole where my heart may be. They have a red tint that fades as it loads over 30 seconds. The items on the left represent my immediate family. My parents split in 99 and now live in separate towns in RI. The towns (bristol and tiverton) are located on either side of the mount hope bridge (pictured in green). Rhode Island is the Ocean State and a golden anchor is featured on the state flag. The phrases in french read Tout le monde coule.. mais je demeure. In a french poem “le point” (the bridge) represents stability and values while the water represents life as flowing and constant. So the french phrase in English is the world flows.. but I remain. I love the symbolism and the physical division that the bridge is in my life. It’s just a bonus that the bridge is visually beautiful. So my parents flank the bridge. My mom is 100% irish and is represented by the clovers. My dad is 100% lebanese and is represented next to the cedar of Lebanon. Ever since they split my kid sister (16 year old Maggie Azar) has packed up and traveled with me every week on Sunday night to the other parent’s house. She is the beautiful butterfly that floats between the two parents. She has always been an avid reader and is seen against a couple bookshelves. She is the first one to emerge from my heart intentionally. The images that are on the right are images of friends from RI. There are a lot of inside jokes connected to the things in the carriage. I will add otto and sports symbols (running and biking and red sox) to the right side as well.
This site was very therapeutic even through the frustrations with as3. I didnt realize that making a rationale would entail my life story haha.
The head items are for my portfolio and my blog. I will add social networking links and a link to my resume in there too.
This site was made very selfishly. It was crafted primarily with the subject in mind (me). I guess prospective employers interested in seeing my portfolio/flash skills/creativity, would be my audience. But in reality, my mom, (who has a flash player and a monitor wide enough to accommodate
950px wide stage) is probably my main audience.
A wicked lotta shit..
lynda is easy.
ended up getting addicted to learning and bought a subscription.
This is what I used to install a tooltip.
The tutorials on this blog.
Special thanks to you harper for sorting through that batch of errors for me. It really got me started.
I have a few more bookmarked that I haven’t used yet but will.
The drawn branch is the only element to survive form project 1 to project 2. I threw out the textured backgrounds, mountains, flowers and a whole bunch of other crap to create this stripped down scene.
I like how each state is just a small window of the overall whole.
The site opens up on the branch, with a sketched version of myself swinging from the tree on the bottom of the frame and a clothesline to the right with links to my portfolio.
One of the most popular reactions to the site so far is that it is “very me” which I guess is the goal.
Most of the illustrations were hand-drawn in illustrator using a wacom tablet and the pen tool. Since this website is about me, I made sure all of the elements were self-generated.
The animations are relatively simple (although we all know simple in flash can still mean hours of tweaking!).
The transitions are simple shifts and zooms to match the simplicity of the site. When you click on the clothesline thumbnails, the site zooms in. In the future I will embed players to view all the images in each portfolio. I am also still working on creating tooltips.
I definitely referenced a bunch of tutorials, especially those on the blog, but here are a few I remember::
I lost the folder with my inspiration images when my thumb drive crashed in the beginning of the semester but I looked at a bunch japanese style paintings for inspiration for the branch and the bird as well as searching those terms in iStock photo. Suggestions from Harper and DMillz led to the creation of the tire swing and the portfolio clothesline.