Project 3 – Sloth

December 13, 2013 |  by  |  Project Three, Student Edge Projects, Student Work  |  , , ,  |  Comments Off on Project 3 – Sloth

Screen Shot 2013-12-13 at 5.35.06 PM Screen Shot 2013-12-13 at 5.35.34 PM Screen Shot 2013-12-13 at 5.35.46 PM Screen Shot 2013-12-13 at 5.36.01 PM

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.

Project 2 – Syracuse vs. New York state Income Rates

December 13, 2013 |  by  |  Project Two, Student Edge Projects, Student Work, Student Work, unfathomable  |  , ,  |  Comments Off on Project 2 – Syracuse vs. New York state Income Rates

Screen Shot 2013-12-13 at 5.18.57 PM

Screen Shot 2013-12-13 at 5.20.11 PM

Screen Shot 2013-12-13 at 5.20.34 PM

Screen Shot 2013-12-13 at 5.19.54 PM

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.

Infographic: Undergraduates for Better Education

December 13, 2013 |  by  |  Project Two, Student Edge Projects, Student Work  |  ,  |  Comments Off on Infographic: Undergraduates for Better Education

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.


Home screen:


Screen Shot 2013-12-13 at 1.26.50 AM

Class Morale screen:

Screen Shot 2013-12-13 at 1.27.03 AM

Kelly Project Two

December 11, 2013 |  by  |  Project Two, Student Edge Projects, Student Work  |  Comments Off on Kelly Project Two

Screen Shot 2013-12-11 at 3.30.18 PM

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.

Kleeburg Project 2

November 20, 2013 |  by  |  Project Two, Student Work  |  Comments Off on Kleeburg Project 2

Screen Shot 2013-11-20 at 3.34.58 PM Screen Shot 2013-11-20 at 3.33.20 PM

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.

Tierra Taylor- Interactive Infographic

November 20, 2013 |  by  |  Project Two, Student Edge Projects, Student Work  |  , , ,  |  Comments Off on Tierra Taylor- Interactive Infographic

Screen Shot 2013-11-20 at 3.32.16 PMScreen Shot 2013-11-20 at 3.31.10 PMScreen Shot 2013-11-20 at 3.31.31 PMScreen Shot 2013-11-20 at 3.31.50 PM


Tierra Taylor

Info-graphic Summary

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.

Sara Easterling- Project 2

November 20, 2013 |  by  |  Project Two, Student Work, unfathomable  |  Comments Off on Sara Easterling- Project 2

Screen Shot 2013-11-20 at 3.06.24 PMScreen Shot 2013-11-20 at 3.06.14 PM

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.

Hutton-Project 2

November 20, 2013 |  by  |  Project Two, Student Work  |  Comments Off on Hutton-Project 2

I chose to focus my info graphic on the differences between those in poverty and those who have wealth. In a 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.

This stark difference is money for food is alarming and shows that the people making decisions about how their citizens live do not properly understand how their policy decisions impact their lives.Screen Shot 2013-11-20 at 3.11.38 PM

Screen Shot 2013-11-20 at 3.11.51 PMScreen Shot 2013-11-20 at 3.12.00 PMScreen Shot 2013-11-20 at 3.12.11 PMScreen Shot 2013-11-20 at 3.12.51 PMScreen Shot 2013-11-20 at 3.12.33 PM

Abby Legge-Infographic

November 20, 2013 |  by  |  Project Two, Student Edge Projects, Student Work  |   |  Comments Off on Abby Legge-Infographic

Screen Shot 2013-11-20 at 3.10.30 PM


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 • Edge Animate Essential Training Videos • Creating Animated Infographics • Show/Hide Toggling


Arianne Daniel Infographic

November 20, 2013 |  by  |  Project Two, Student Edge Projects, Student Work  |   |  Comments Off on Arianne Daniel Infographic


Screen Shot 2013-11-20 at 2.41.41 PM Screen Shot 2013-11-20 at 2.42.09 PM Screen Shot 2013-11-20 at 2.42.30 PM


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.

Project 2: Rachael D’Addezio

November 20, 2013 |  by  |  Project Two, Student Edge Projects, Student Work  |  ,  |  Comments Off on Project 2: Rachael D’Addezio

Screen Shot 2013-11-20 at 1.51.46 PM Screen Shot 2013-11-20 at 1.51.59 PM Screen Shot 2013-11-20 at 1.52.13 PM Screen Shot 2013-11-20 at 1.52.29 PM


Design Strategy:

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.


Tutorials used: reading assignments.

In-Class tutorials



Project 2: Infographic – Kelsey Ohira

November 20, 2013 |  by  |  Project Two, Student Edge Projects, Student Work  |  , ,  |  Comments Off on Project 2: Infographic – Kelsey Ohira

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.

Screen Shot 2013-11-20 at 1.47.33 PM

Screen Shot 2013-11-20 at 1.47.48 PM

Screen Shot 2013-11-20 at 1.48.07 PM

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.



Yuxin Fang_How far is it to mars?

April 16, 2013 |  by  |  Inspiration, Project Two, Student Work, unfathomable  |   |  Comments Off on Yuxin Fang_How far is it to mars?


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.

user profile

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.

user interface

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.


May 9, 2012 |  by  |  Project Three, Student Work, Student Work, Student Work  |  Comments Off on MACKAY PROJECT THREE: “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.

April 12, 2012 |  by  |  Project Two, Student Work  |  Comments Off on


Websites used:,,

(note: not a specific tutorial was used while creating project one…I’m all over the place)


Rational of animation technique:

I have attempted to have stop motion movie clips appear onto the scene at different times.

Each movie clip will play when the mouse rolls over top of it, which will enable the user to click into the clip to bring them to a new scene. The scene associated with the movie clip will be the new page the user will now be viewing.


My animation is straight forward, what you see is what you get. You hoover over the clip and click – it will bring you to that page associated with the sense the viewer chose.

remember that time mine was too big for the blog...oh yeah...