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.
Floor, bricks, light-post animate in. Light starts to blink making the man and shadow visible/unvisable. Then they stay on and the shadows cape starts to wave!
I decided to focus on farmland for my project. This was the topic that stuck out from the others on the list of options because my dad owns a family farm. Originally I wanted to use Oswego County, because I am more familiar with the Oswego County farms and farmers. However, when I was doing my research, I originally found more information on Onondaga farms. I also found a map of Onondaga county, and it’s urbanized area, that I wanted to use to inspire my design. I thought that the change in the amount of farmland over time was an effective visual representation of the farming industry.
I used fragments are different farms and crops to represent the farm area in the county. I wanted to use green to represent the farm area and to keep the map simple. The red contrasts the green well and is used to represent something “bad”, “evil”, or “dangerous”. I think the facts in the beginning are important in giving the viewer some back-story. The simple typography in the title is not too distracting from the title, but is also dynamic.
I wanted to continue with my sports theme and create an infographic regarding the amount of high school athletes that make it to the pro world. With so many students and parents wishing that their sons/daughters make it, especially for economic reasons, it is important for people to see this information and understand how small the stats are.
I introduced the project with a catchy slogan “How many athletes go… from high school to pro?” using a typeface that matches that of athletics writing. I then brought in the balls of the four sports I was gonna be providing stats for. When you click on a ball, the stat comes up and tell you: how many go from HS straight to pro, from HS to college, and from college to pro in a simple bar graph.
It was a simple and interactive way to present this information.
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.
For my infographic I chose the topic of family farming. The main information I wanted to show was how family farms have become over shadowed by commercial farming, and some of the problems that causes with processed foods and transportation. I made characters that represent the two types of farmers to make the infographic very accesible and less serious. The topic is one that is simply fact in America, commercial farming cannot be avoided and in some ways is necessary in order to produce enough food for the mass population, however local farming is still a better option to reduce pollution, live a healthier lifestyle, and support local economy. Because this topic is not necessarily a dramatic one, I felt that it could be more casual and fun that way it might communicate the data more easily to a large range of demographics.
For the Doodleicious project, I chose to make the biography about a friend. I felt like it would be cool to do something personal, but I didn’t want to do an autobiography. My original concept was to illustrate my friend Keaton’s mind in a metaphorical way. She is very creative so I wanted her to have these illustrated thoughts springing from her head. For the three “variations” I decided to break it up into morning, day, and night, and have the illustration content change according to the time of day.
As I began working on the project, I was realizing that using real photos of my friend with the drawn-in illustrations wasn’t working. It felt very flat and it was hard to get the illustrations to seem like they were integrated into her environment. So to solve that, I had the idea of having her photos become animated crumbles of paper, to make it seem like maybe the drawings were coming off the paper, and to make her character more animated.
I also felt that the concept changed a tiny bit by the end of the process. I chose a song by Animal Collective called “Taste” to be the music, and in the end of the song, the only words are “Am I really all the things that are outside of me?” which I didn’t realize fit in so well with the theme. I think that creative people , “dreamers,” are sometimes stuck between being attached to the realities of life and their own thoughts and ideas. The phrase at the end of the song, in my opinion, brings up this question about what people value–are we made up by the things outside of us? Or by our inner thoughts and dreams? Thinking about this made me think that although “Keaton” has a name and a face in this animation, she can sort of embody the general creative person living between reality and dreams.
PSD TO EDGE ZIP
I picked this site because our lives basically revolve around Adobe and all its programs. This site just provides me with an interactive way to view Adobes Creative Suite and what it entails.
People who use this website are likely to be designers or users of Adobe programs. They probably range from students in college to anyone who is currently working in any of the fields, which require the Creative Suite. Graphic Designers, Web designers, and video editors all use these programs in their everyday life. However, in order to use these programs you need to know what you are doing. If you are not good at using a computer, these programs can become really difficult to use.
If you hover around your mouse, you can see what is clickable and what isn’t. You can travel around the different “worlds” and read information about what the creative suite allows you to do. There is a star in the corner that shows you an overall view of everything you can see. There is also a navigation bar at the bottom where you are able to buy, try, share, and navigate the site. You can also turn the sound off and on as you wish.
While some of the designs give you information about the program, some open up videos. However, I was never ever to view the videos because they never buffered. They stayed at 0% with a black screen. I also found it confusing to navigate. I would like to know what items are clickable without having to hover my mouse around the whole image. At first I was confused as to what was happening and how to go back to the main menu but after playing with it for a while you start understanding how it works. I would’ve liked it to be simpler to use.
I choose this site because I wanted to look at an example of an interactive alternate news story format. Recently I have been noticing online various news sites creating interesting ways to tell stories with full page photos, videos and graphics. After the New York Time’s published “Snow Fall,” there have been similar long form, multimedia stories popping up throughout the web. The purpose of this particular site by The Guardian is to tell the story of an Australian family who just nearly escaped a forest fire that whipped through their home. The story alone is powerful in that the reading imagines being in the family’s frightening position. With the addition of the quality photo editing, information graphics and compilation of interviews The Guardian has put together a compelling piece.
I would say the most common user of this site would be a middle aged person who reads the Guardian regularly and is invested somehow in Australia or wildfires. Their interests may be natural disasters or news in general. They may be a reporter, fire fighter or just anyone with these interests.The user may live in Australia, near where the fire took place. The viewer would need access to an internet browser and flash. The user wouldn’t need many technical skills though. The site makes it easy to navigate for those who are inexperienced with the internet and technology.
The interface of the site includes a menu bar on the right hand side. (see image) This breaks the site up into more easily digestible chapters. In each chapter there is a combination of scrolling text, ambient sound, moving background images, auto play videos, and controllable videos. If you roll over the chapters on the right it is broken up into subchapters that again make it easy to navigate, and skip to the parts you are interested in.
Over all the site has a clean straightforward design. The large type is easy to read and works well with the background images. The subtle ambient sounds works to add dimension. The videos are powerful and add to the emotional reaction the viewer has.
The simple scrolling functionality makes it easy for the user to navigate the site. It is a linear experience. The viewer simply moves down the page, and new elements like videos and images pop up. This downward motion makes sense to the viewer and is natural.
One thing that frustrated me was that some videos were auto play, while others were controllable. I wish this were more consistent. As the user I’d like to be able to control all the videos, and skip through parts I don’t want to watch.
Another larger scale issue I have with the site is there is no way to get a quick synopsis of the story. Sitting down to experience the site takes quiet some time. This may not be practical for the average person. It is a big time commitment to experience the entire story.
Strategy: After doing a lot of research, I decided to make this app focused on spreading awareness through a continuous infographic that put faces to the numbers. In America we are very distanced from cerebral malaria, so I wanted to get as many eye-appealing numbers and facts in as possible, while keeping it simple enough for a lazy American to actually read. The majority of the app is one long string, which one can progress through very quickly while still getting the point. Hopefully, the facts would push the user to donate.
Typefaces: Futura std Medium Condensed (my favorite this year), Caecilia Light, BenchNine (for the animation on cover- had to be a google font to use in Edge), and Bodoni Std for body type. Simple, legible, but added the Caecilia for some style and kept the Futura at Medium Condensed for bigger impact.
Graphics: I’ve seen a lot of infographics before, but I can’t think of a single one that encompassed both vector art AND real photographs. It’s a hard thing to put together without being cheesy. I went for that challenge, and I think the dotted line and change in slides made this successful. I kept the vectors/graphs very simple but tried to introduce color when I could.
Infographic: My entire app is almost an infographic, because that was the part that interested me the most. I kept animations out of it so it wouldn’t interrupt the continuous string of messages. I also included less statistical information on the last picture of each infographic section, to connect the faces to the numbers.
Colors: Mass General blue, white, and shades of gray. I didn’t want too many colors to distract from the photographs, so I kept the pops of colors within the vectors of the infographic slides. I fiddled a lot with opacity to keep the relatively bright blue from conflicting with the seriousness of the black and white photographs.
Class handouts on DPS
Class discussion on transparent backgrounds in Edge
The War of Art (if that counts), for how to get over creative blocks
Scrolling frames: http://helpx.adobe.com/digital-publishing-suite/help/scrollable-frame-overlays.html
(In the actual tablet publication the backgrounds match up and it’s smooth scrolling)
My main strategy for this tablet publication was to keep it simple. I really tried to follow the Charity Water look with simple icons and condensed sans serif type. As a designer, I feel I always struggle to keep things simple and to leave white space so that was my main goal for this project. I wanted a clean consistent design that told and story and was easy to navigate.
My typefaces were Franklin Gothic STD and Futura. Franklin Gothic is the main font I used for my headers because I love it’s bold, slender look. I think it’s really clean and since it has many variations, I thought it would look good throughout the publication. For body type I used Futura because it is a bit lighter and more readable. It looks good at a big size and I thought it went well with the rest of the publication, maintaining the sans serif look I had going on and just keeping things clean.
The main graphics I really used to tell a story are my icons. I took this idea from Charity Water. I think that they are a simple and cute way to tell a story and I thought they went very well with this topic because the images are black and white I thought they added a nice pop of color. The only graphic decoration that I really have throughout is a blue line running consistently down the pages starting at the video page to signify that the user can keep scrolling down. Again, I kept crazy graphics to a minimum in order to maintain simplicity.
The main Infographics I had for this assignment were with the icons. I wanted to display information in a clean and light way and I thought the icons accomplished this beautifully. So rather than a graph or a chart I decided to display what different things a consumer here would buy could compare to over in Africa and how if you refrained from buying one of those trivial things you may actually save a life. It is a very simple infographic and it’s very easy for the user to control which I think is very important.
I stuck with the Mass Gen blue color for the tablet publication. Like we talked about in class, realistically if they’re the ones funding this project, that makes the most sense. Originally I was going to go with a deep red, but I think the blue actually ended up being quite calming and went along really well with the imagery from Jon Lowenstein.
The main tutorials I used for this project were the handouts we received in class. I was very unfamiliar with DPS and Edge before this class, so I really got a lot of use out of the handouts and in class tutorials that we did. I also used a lot of AdobeTV and the Adobe site forums to answer a lot of my questions. I tend to Google things a lot and this definitely helped, but also hurt me at times. A lot of the tutorials I used were tutorials for interactivity that only works for interactive pdfs and SWF preview. I had no idea about the differences in the technologies so I learned this the hard way. However, it was all a learning process and I’m happy I took the initiative to look up resources online.
It was definitely imperative to design around Jon’s photos , and make sure they were always the main focus. I set about familiarizing myself with many of the images to get a feel for the mood I wanted to portray. I also wanted to keep body copy to a minimum and keep the design very visual. The main layout with the sidebar came about because I wanted to keep the multimedia fullscreen.
I used Bebas Neue and Winterthur Condensed. I wanted a slim, clean font for both the headings, and I also wanted a similar feel with the body copy. The typefaces are fairly similar, except Winterthur was a little more airy to allow for easier reading. I think strong slab typefaces or excessive decorative ones could have taken away from the photos.
I kept graphic decoration to a minimum. The objects in the right corners of the page are signifiers to keep scrolling. I also played with typography on some pages, but other than that my main focus was the placement and arrangement of the photographs.
I struggled with the infographic from the beginning, and kept coming back to the idea that they had to travel so far on foot to reach the hospital. I ultimately decided that should be the information I portrayed. I settled on a graph in the end. My shifting ideas kept making the function more difficult, so I ended up just keeping it very simple and functional. I also think graphs are very universal, and entice the users to find out more. I also liked the graphic visual the peaks formed, almost like a landscape.
I think color choice for this project was pretty cohesive across all the projects. The Mass Gen blue worked well as an accent while keeping the rest neutral to display the photographs. I also added a dark maroon to make the donate button a little bit different from the rest so as to draw some attention to it. I also went with a textured background to up the visual interest.
I mainly used Adobe TV and lynda.com for tutorials. I also took the class tutorials we had done and incorporated some of that knowledge into the final design. Apart from those, I already knew how to use DPS so I didn’t have much trouble with that.
Since Jon’s photos were the inspiration for this entire project, I thought it was important to find a way to highlight those without distracting the user from the content with a bunch of fancy graphics and features. The magazine is one long smooth scrolling page with large photos running down the center. One of my first mockups had the photos running down the side of the screen, almost as an afterthought. I switched to this center-alignment later on because it shows them off much better.
I used Univers LT Std and Caecilia Std for this project. From the start I was looking for a typeface combination that complimented but still juxtaposed each other. While Univers is a uniform and masculine sans serif, and Caecilia is a more familiar and feminine slab serif, they both have similar letterforms and go well together. Univers has so many variations that it was easy to use for both section heds and body text, while Caecilia made for a nice accent typeface with section lede-ins and sub heds.
I tried not to incorporate too many visuals apart from the photos themselves. One recurring element is the circle on the title page and in the infographic. I’m not sure why I went with circles other than the thought that they seemed to offset the uniformity of the square photos nicely. I also used an angled white box at the bottom of the title page to introduce the concept of a super long single page to the user. There is one more box after the last group of photos and before the credits as well to signal the end of content.
The final infographic is very different than the initial idea I had in my mockups for most of the semester. As much as I tried to make that first design work—it involved a circle and spinning and a map of Africa—I realized I was really struggling to find statistics that would work with that design. Then I realized I was going about the whole thing backwards, since it’s always better to design for the content, not make something that looks pretty but showcases random information. In the end, I found some solid information about the three stages of malaria and turned that into an interactive graph that displays different symptoms based on what the user taps.
To stick to showing off the photos I used a neutral color palette. But to lessen the screen contrast a little bit, I put white text on a charcoal gray background (instead of black). For the accent color, I went with the Mass General Hospital blue.
Most of the online tutorials I used had to do with Edge. I went back and referred to a lot of the in-class tutorials, too.
For the “drawer” pull-tab captions (DPS):
For the touch activation stages in the infographic (Edge):
This is a really hard project for me because I had no idea about cerebral malaria ever before. The information about it on the Internet is really similar and hard to understand as all of them were written in a very professional way. My main strategy for the design is that I do not have many texts in my publication, and I want my audiences to look at the pictures, video and also infography directly by themselves. It is much better to let people feel the truth in an interactive way than telling them. However, I met many challenges when I worked on the interaction, as I never used edge before. I am just a beginner of motion, which has limited my access to convey what I want to speak to my audience. For the design, I just want to keep it simple with clear information and layout.
Choice of typeface
I chose Futura and Cambria for my project. Futura is a really good typeface for title and headlines as it is very powerful and outstanding. To have a good combination with Futura, I chose Cambria because it is readable and legible. It works well as a body text font with Futura.
To have a really simple design, the main idea for visuals is having the pictures on black background. Black background helps audiences to pay attention on the pictures themselves. Some bars were used to help organize the pictures as a gallery.
This is the most difficult part for me. Because edge is new software, there is not much tutorials about it on the Internet. For many cases, I had to figure out by myself. I have some simple slide shows in different categories, which can show more pictures. I set them as different stories, and my audiences will be able to know the children’s experience when they “read” the stories. For the main infography, I have 100 mosquitos to stand for number 1 to 100. For some numbers, I will present a fact related to that number. This is also like a story, starting from one and finishing with 100. This is a good way to relate images and information, which will provide audience a better way to learn.
The colors I used are only red, black, white and grey. The reason I only use red with black, white and grey is that I believe red represents for the blood and mosquito. I am trying to show a dangerous atmosphere and let my audiences feel it. Also, the red has a high contrast and works really well with black background. To have only one focus, I simply chose white and grey for other texts.
I did not use any other tutorials than that were given in class and two required books.