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.
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:
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.
My overall concept was to communicate that Syracuse high schools are not doing very well in terms of the average graduation rate. An average graduation rate of 48% should never be acceptable. I wanted to convey this as an extreme issue.
In order to do so I chose to use dark colors, including a dark red. Dark colors and the color red are usually associated with negative ideas and red usually symbolizes something bad or dangerous. By using these colors I hoped to grab the audiences’ attention and make them feel concerned.
The first info graphic that I chose to use is a group of people icons that represent the total student population. It starts with 100 red icons and then they start dropping off the screen symbolizing the students who drop out of school. Each one that drops out leaves behind a grey icon. It ends up with 48 red icons left representing the average percent of Syracuse high school students who graduate. I thought that this was an easy way for the audience to see and compare the amount of students who drop out to the amount that graduates.
The second info graphic used is the graph showing the graduation rate at each school in the Syracuse City School District. This is a way to show the extreme range of graduation rates within the same district that can be seen easily. This is also where the interactivity comes in. You can mouse over the name of each school and a box will pop up with the graduation rate and student to teacher ratio for that school.
I also created importance through typography. In the section that presents the main fact that only 48% graduate, I used different font weights and color to create hierarchy.
I did have a little bit of difficulty with the interactivity, but after watching various tutorials I was able to figure it out.
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.
For this project, I created and data visualization project in Edge. I had a lot of trouble thinking about how I was going to integrate interactivity in a unique way. I ended up using an extended introduction and leaving the interactive elements till the end.
Design-wise, I was actually pretty happy with the finished look. It is simple and light. The fonts I used were found in Edge: quicksand, sans serif and amatic-sc, sans serif. Because I was using rainbow elements, I decided to keep all other colors a simple black and white.
The interactivity elements I ended up using were fairly simple in concept. However, I was not able to properly execute them in practice. The idea is that religion is supposed to have a mouse-over affect that changes the circles to show information.
I chose to focus my info graphic on the differences between those in poverty and those who have wealth. In a Syracuse.com article, it was reported that we have hit another low in terms of unemployment. We’re worse off than we were last year. I decided to explore what that meant exactly. In the article, it explained more people than ever in the area are turning to shelters for help.
And as it terms out, the value of food stamps in our country are being debated. Many congressmen are trying to cut he budget for food stamps, leaving many citizens hungry. California congresswoman Jackie Speier called these leaders out on this by outing them for spending nearly $200 dollars a day on food while on a trip to Ireland. This is not the only example. She sites other congressman spending their stipend on luxury foods as well. Meanwhile, those on food stamps in New York can only spend about $5 a day on food.
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
For my project, I decided to work with the income rates in New York versus the income rates in Syracuse. It was amazing to me to see the difference between these two places, especially when Syracuse is a part of New York. I thought about focusing on the effect that income rates have on the education in the area but I decided that focusing solely on the income rates was what I wanted to do. It is crazy to think about all of the different things that income rates have an effect on in people’s lives that most people don’t even realize. I wanted my project to be a start for people to think about these things.
The typeface that I used for this project is Antic-Didone. It is one of the typefaces available in Edge. I used different shades of blue for my project to keep it looking a little more cohesive.
I learned a lot through this project. I learned to better use transitions and the Edge program. I also learned a lot about interactivity and how that works best with different kinds of projects. I had some trouble with the interactivity at first but I learned how to do it a different way and that worked better.
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.
My infographic is an interactive timeline illustrating the history of prehistoric sharks, starting from 455 Million years ago up until today. When the user clicks on one of the orange buttons, a box of information comes up.
Design strategy I chose to do sharks because I love them and wanted to share more information about them with others. I also found it an interesting topic to research. The design is clean and visually appealing while still allowing the information to be shared with the viewer.
Type Univers LT Std | Color blues, black, orange, white
What I learned I learned how to create buttons and make an object animate in using the coding panel. I also feel more comfortable with Edge than I did after the first project because I tried to play around with things.
I found this website by accident but it is amazing. I am not an astronomy lover but I still feel interested about it because this is a hot topic recently. The only focus for the site is to tell how far Mars is from the Earth. It supposes that “if the earth were 100 pixel wide”, and shows the distance by traveling. Also, it includes the moon. The simple design and simple goal I think could always attract more people.
There should not be any target group. Everyone will love it. Although it is about astronomy, the target group should not be astronomy lovers because this site is quite simple and direct. The main goal it to tell general people who has not clear idea about astronomy that how far it is to Mars. Maybe young people will feel more interested in it.
The design is quite simple without any extra decoration. The night sky with stars shows you are in universe. Simple earth, two dash circles, clear explanations…those are what I like. The earth, moon and mars are simply hand drawing. To have focus on information spreading, the color used for words is just white, which is professional and clear.
Same with the design, the functionality is also super simple. All you need to do is to click the arrow twice, one to go to the moon, and the other to go to the mars. The moon is used to show how far the mars is. When you traveling from the moon to the mars, some information will show up to avoid long boring time to wait. Users can easily feel that it is really a long way to go to the mars. If you want to try again, just simply click the arrow and travel one more time.
HERE IS MY FLASH PIECE: “ONE MORE TIME”
HERE IS THE MOVIE THAT PLAYS AT THE END OF MY FLASH PIECE: “ONE MORE TIME”
Vimeo: “One more time” by rebekah mackay <— click me
When I decided to tackle a new project I was happy to get away from the old start something new that I actually cared about. After fooling around in flash for the whole semester and not having my old project work I actually learned a lot of what to do and not to do…how to plan better and achieve a better outcome (faster).
This new flash piece is about what running means to me. When I thought about it, running means everything! So I had to focus my thoughts into one way of describing my feelings about running. Running is something very special to me because It has given me the opportunity to do things in life that I never would have without it.
Running has opened doors, and quite honestly it was all about timing – Running helped pay for my education at Syracuse University and with some set backs came another opportunity to stay for a 5th year and obtain my masters while still competing for the team.
(in this way running has given me a second chance – and one more time at achieving my goals both as an athlete and a student.)
My project is called “one more time” because my dedication and love for running has enabled me one more time to complete the goals I have set before me….I also presume this will not be the last time that running will be my “one more time” moment in life.
I have posted my multimedia piece that is embedded in my flash as3 on vimeo. This is my description when I had to describe/rationalize my video.
“What does running mean to you?” A question I was asked by my professor when I was assigned this project. So I thought…I like to live in the moment and look towards the future…so… to answer his question: right now running means “one more time”–one last chance to compete for Syracuse University xc and track. Time is ticking, and I want to make sure I enjoy every moment of it…&… Run for it, One more time.
As for my flash AS3 project :
I Chose to have a picture that I took while on a trip at Stanford university as my background. It may seem simple or cliché but its really not – the two shadows to the right are of my two coaches: Coach Fox and Coach Bell: they are an important part of my running because they have not only coached me to be a better runner, but also a better person. My shadow is the lower left – I like to think of it as resembling a relationship without being tacky.
The stop watch that drops down and is ticking was hand drawn and brought into illustrator and psd – I wanted it to have a ticking noise to have the audience know to click it. It is kind of like a sneak peak to the multimedia piece in the end.
When you click the watch it brings you to the page where my favorite quote is displayed in a timely fashion—and describes how I race and live life.
After the words exit the main piece (movie) slides in to the stage to give a final conclusion to the actual assignment.
p.s. no tutorials.