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...

Unit 5 Reading

Chapter 6: 

Continue the discussion about our brain perceptual visualization in chapter 5, Cairo tells more and deeper about brain features that help human can distinguish the different and coherent of things in natural world, more over is on art design. There are three more features that Cairo culled in his book:

• ·         Detecting shade variations quickly rather than shape different
• ·         Detect pattern (gestalt school of thought) like: proximity, similarity, continuity, connectedness, closure, lines, etc.
• ·         Seeing in depth with two eyes because right eye and left eye seeing in two different directions. I tried to close one of my eyes to see the difference but couldn’t get it, I still can see in depth.

 And our brain always thinking that light will come from above usually, so the brain will analysis the intensity of light on the edge of the closest element to find its boundaries also distinguish the other elements behind it.

I also tried to figure out the figure 6.12 which Cleveland McGill’s composed. Because of it, I can see clearly how accurate is which an elements put on information graphic: length, direction, angle, bar, volume, area, curve, shading and color. I think it’s really help in infographic designing, it not only helps the designer follow his/her right direction on design project, it also help the user figure out and understand what the designer want to tell what story in that infographic with ease.

Profile 1: Interview with John Grimwade

Cairo had an interview with John Grimwade, a graphics director of Conde Nast Traveler magazine, who started to do information graphic before computer setup in newsroom. He clearly said that his main goal is telling the story by the other of events in depth, details and hierarchy.  In his graphic of “the Transatlantic Superhighway”, he designed it so detailed with the details of flight area to organized track system labeled by Cap character and till jet stream in a view of an illustrated map of Canada, atlantic ocean and Europe 

continetal. This graphic is easily understood than the control map showed on the next page.

John also his experience why he successful because he worked with reporters and editors who often trying to update news and that help John have in mind that his report infographic must be detailed, depth and clear. Also we have to edit that graphic when the information had changed in the natural world. And this can be seen on his other graphics on “Seven Ages of the 747”, medal exchange, the Five Ages of the 747, and the Manhattan Project. Every project has been updated after a year and also the new graphics look clear and easy understood.

 Links:
http://www.digitalartsonline.co.uk/features/graphic-design/psychology-of-design-explained/

The article introduced with Waitrose and Coca Cola design. I impressed the Waitrose design, the designer used smartly the bee shape to create the letter “E” in honey word.  Ed Woodcock, the director of strategy at branding agency Aesop claims that the designer maybe not always use psychological principles in their design. And he also believes that design also depends on perceiving and sensing because design need and taste has been changing day by day. Understanding psychology, human behavior are the keys help design satisfy their audience.

http://www.webdesignerdepot.com/2009/11/understanding-your-brain-for-better-design-left-vs-right/

Our brain includes two halves, one on right side controls left half of body , one is on left side controls the right half of body. And they have different visual senses also. The right brain take over emotion, feeling, understanding and reflect the feelings. The person who has dominant right side brain are very intuititive and curious about the world but they are disorganized, lacking in time-management.
On the other hands, left brain controls organization and logic. So they can manage and organize their time and process their ideas logically. therefore less error than the right side brain person.

http://www.blog.joshmedrano.com/reading-is-boring/the-psychological-effects-of-graphic-design/

                                                     to be continued soon....