Portfolio business cards

September News

A Map of Worst and Best Internet Connections in the US

Final Project 2

Unit 8 Reading

Chapter 9

 

Understanding the nature, we can apply to the interactive design effective. Because, when you know human’s habits like reading from left to right, get headache with ton of information, or confusing the relationship between 2 similar objects when they are placed separately. That helps the designer use the right tools and elements in their work to make sure the user can understand what the designers want to present to them. The first tool that is told in this chapter is highlighting the importance in the graphic. For example, the button, or call-the-action button must be designed so that the user can click on it immediately without thinking “is that a button?” The button probably designed in 3D form or flat form with shadow, and plus, there must be some events when users move their move into the button area like: hover, focus, mouse in, mouse out, etc. Those events must respond visibly so that the users can know that call-the-action button working. à “Don’t make me think”

The other tools that can let the users navigate and browse on the interactive graphic from the overview perspective to deeper perspective no matter what kind of the information graphic is (linear or non-linear):

o   Scroll and pan

o   Zooming

o   Open and close

o   Sort and rearrange

o   Search and filter

Also keep in mind that the organization of those buttons has to follow the pattern so that the user will know what they can do on the next other actions. By understanding user’s habits, they will get confused when there are too many interactive in the graphic; they will ask themselves that “there are more interactive events in this graphic?” Pattern design will help the designers solve this problem by design the interactive actions in limitation and in patterns. Keeping the pattern designed in the graphic will help the user know what they can do on next events.

I tried to enter the southofhere.org website. Their interactive graphic looks clear. In the “Navigating the Horn” section, which show how the sailors avoid the potential dangerous at the Cape Horn with about less than 6 types of similar interactive actions. Especially, the timeline bar with the slow blinking cursor that reminds the user to try changing the year of events.

There are different kind of interactive actions: Instruction (a figurative graphic placed next to the some events), conversation, Manipulation (LucidChart), Exploration (map in video games).

Profile 7 : Hans Rosling
In this profile and also Hans's video clips, I learned more from his presentation. In all of his presentations, he was using animation to make the statistic chart more effective. This reminds me to use this for my future projects on web. I think I will add animation and parallax effect onto my charts to help the audience more understand about the specific topic.



Links:
http://www.newslab.org/2011/04/04/do-it-yourself-interactive-graphics/
this link is a tutorial shows how to make interactive infographic and also its effect to the audience.

http://www.yaleclimatemediaforum.org/2011/02/making-the-complicated-clear-integrated-graphics-make-data-visual/
this link says that the interactive graphics used in statistic chart helps the audience save times to read and also can learn something in that chart by combining a ton of data into a simple interactive action button.

Project 3 Proposal

PROJ#3: Parallax Effect

Background:

Technology nowadays is speeding up fast, but there are still some common problems existing. Besides that, in web industry, there are some new techniques that I inspired during few quarters in school, such as: animations and new effects used by CSS3 and parallax effect using css and javascript (or jquery). So in this project, in will analize how parallax effect looks like and how it works.

Client:
http://www.sitepoint.com


Target Audience:

For the audience who are web designers want to know and using parallax for their web projects.

Objectives:

A single page of graphic or website (more effective) that define and present the parallax element and the sequence of slide to show how it work.

The Message/Tone:

Technically, detailed.

Media:

Website designed by CSS and Javascript.

Unit 7 Reading

Chapter 8 : Create Information Graphic

In this chapter, Cairo introduced us the process to create effective information graphic on any topic. The author used many examples to tell us the importance of each step in creating information graphic steps. First of all, with any topic, all we need is summarizing the main story of that topic, what story that topic telling about and even other related story produced from the main topic. From this part, we will have a brief overview about that topic by taking note and researching information on internet, books, or other resources. 

The author also mentions that we should not always trust your intuition when you rely on data. We just gather the data into a brief which can compel the audience to read. With the notes took from the article, we should then sketch out to imagine how the information graphic could be looked like. Thus, we will figure out the layout with invisible rectangles of data cells. And then edit some more graphic elements into computer like two or three colors and appropriate fonts (two fonts limited) with good looking contrast for headline and body copy.

At bottom line, “Before you think about style, must think about structure”

Profile 6: Visualization in Academia

In the interview with Geoff McGhee, who has many years’ experience in interactive data visualization and multimedia storytelling, Geoff told that there was a gap between the newsroom and academia. He is a professional visual designer, and he figured out that there are people with other skill sets will help the people in the newsroom to focus on the current topic. Because students in academia are people who always focus on the main story of the topic more than the people in newsroom although academia students have less experience than them. And this cooperation could help to summarize the topic into brief and then newsroom will use that to sketch out the layout and their ideas on the print version.

Geoff mentioned that translation print information graphic into Web version could be rough because of the drawbacks. He had to translate the information graphic print version into a static raster image and display the data in a more dynamic way.

He also told that after researching, there are a lot of information data, so he broke down that data into two major categories: “data visualization for exploring on your own, for analyzing and seeking out patterns; and data visualization for explanation”. And also algorithmic data visualization is a powerful analytical tool to help designers understand the source data in basic and particular domain.

This interview is related to Chapter 8 where the author shows us the step to create information graphic. And the very important step is the very first step that we need to focus on the main story where it leads us to research the data sources. Therefore, we will solve the problem easily without start the research on wrong way.


Links:
How to Make Information Graphics and Data Visualizations
 This article helps us to figure the different between Information Graphic and Data Visualization and their importance in graphic design.
The author also summarized seven steps to create Data Visualizations:

1. Acquire – Obtain the data, whether from a file on a disk or a source over a network.
2. Parse – Provide some structure for the data’s meaning, and order it into categories.
3. Filter – Remove all but the data of interest.
4. Mine – Apply methods from statistics or data mining as a way to discern patterns or place the data in mathematical context.
5. Represent – Choose a basic visual model, such as a bar graph, list, or tree.
6. Refine – Improve the basic representation to make it clearer and more visually engaging.
7. Interact – Add methods for manipulating the data or controlling what features are visible.

10 Steps To Designing An Amazing Infographic
These10-step creating infographic process is similar to what Cairo mentioned in his books:
1. gathering data
2. reading everything
3. finding the narrative
4. identifying problems
5. craeting a hierarchy
6. Building a wireframe
7. Choosing a format
8. Determining a visual approach
9. Refinement and testing
10. Release into the world

note: really like the fonts using in this site: FC Zizou slab for the Heading, and Museo San for body copy.

Unit 6 Reading

Chapter 7:

As the previous chapter 5 and 6 discussed, understanding how our brain works and its influence to visualization system helps designers have more advantages in convincing and explaining clearly to the audience what the meaning of the design is. 

The process to remember things in our natural world is very simple. There are 3 steps that our brain often process to perceive, cognitive, memorize and retrieve things when we really see or observe things. First, we see thing, the thing what we see will be translated into impulse and transferred to short-term memory. And then it will be categorized and stored into Visual working memory. If we stop here, it means that we just observing the thing and temporarily stored that memory somewhere in our head. If we want to retrieve what we saw yesterday, the long-term memory storage will help us to remember things through what are permanently stored in our head for a long time ago. In the process of retrieving data from long-term memory, our brain will compare the figurative patterns of what we see to the figurative pattern in long-term memory to find a match, because brain can’t use words to “communicate” its working memory storages. On the other hands, that data will be retrieve based on object’s features and specific details structurally from long-term memory. This process is similar to computer memory process.

This section reminds me about the video games I played on PlayStation console. It includes one disc reader, controllers, are memory card (64 or 128Kb capacities). On an adventure game, it will be a long way for you to finish a game. So you have to save that event as a thumbnail (short-term memory) into a memory card for next time playing. The memory card (storage) is considered as our brain; it couldn’t memorize much things and events. And disc reader will retrieve data from disc (long-term memory) to access the event that saved before.

Related to memory, how do we recognize things that we observed before? I infer into 3 steps after reading the book:

Memorize object’s details > Store details in structure > Converge and arrange details which related to each other

At the bottom, “visualization is not something that happens on a page or on a screen; it happens in the mind”. This quote of Robert Spence seems to press the importance of visualization to the designer.

Profile 5:

Cairo had an interview with Jan Schwochow, a German professional infographic designer, who worked for many famous magazines such as STERN,MAX, Die ZEIT, The New York Times, and GEO.

First of all, Jan’s thought in his career is infographics has to be accurate regardless they are statistic charts, maps or diagrams.

He told the process he was doing project about Berlin Wall. Although there are a lot of published infographic about Berlin Wall, but they are all incorrect. Therefore, Jan researched by approaching to Berlin Wall in real and collect books, photos or some correct current information related to Berlin Wall. And the result is that infographic is 2 meters wide placed on the table of a museum. Although it looks simple but on the illustrator file, there are a lot of Berlin wall details. In my opinion, it looks like a part of google map.

He said he had fun when pursuing his own interest that his infographic is dense with a lot of interesting content and details. He always tries to update the information for his graphic as possible with trusted resources.

  
Links:
http://camplab.psych.yale.edu/articles/PDFs%20for%20Website/Woodman2006_VisualCognition.pdf

Visual long-term memory has a massive storage capacity for object details

Stages of Memory - Encoding Storage and Retrieval

will be updated soon...