Week 7 Reading Reaction

Summary

• Alejandro Tumas, industrial diagram for Siderar
  When communicating complex technical processes and issues to nontechnical audience, it is often necessary to omit many technical details.

• The New York Times Graphics Department, maps and diagrams for the New York Times
  To really understand a data set, you need to process it yourself; you have to immerse yourself in the subject and do your own reporting. To help people understand the subject and data, designers must do a balancing act. Designers need to provide enough detail to illuminate the content, but not too much so it doesn't alienate some viewers.
  

• Funnel Incorporated, various projects
  Good infographics works by clarifying complex information, nit dumbing down the audience. In publications, such as newspaper, information graphics are a great way to cut through the clutter and ensure that the readers understands the potential story.

• White Rhino
  Using subdued color palette can sometimes make the information easier to absorb. Too much color can be distracting with such density. Without relying on bright colors for information hierarchy at such a small scale, the attention to typography becomes even more critical.

• Nigel Holmes, book infographics for Blue Planet Foundation
  In creating infographics, editing is critical. In order to create a good piece of work, Nigel Holmes often start with four times more information that he'll ultimately use. A good infographic is concise yet fantastically informative.

• The Wall Street Journal Information Graphics Department, news infographic for the Wall Street Journal
  Good information designers need to know their subject, and have a passion for it. The designers must do their own research; it's when they pore over the data that they start to picture the presentation and know whether it will work or not. Information designers must think analytically but also have to find an inviting way to bring the viewer into the subject matter.

Week 6 Reading Reaction

Summary

• Carbone Smolane Agency, graphic standard for Morgan Stanley
  For Morgan Stanley, Carbone Smolane Agency(CSA) created a comprehensive three-tiered system for all of the company's corporate events around the world. This comprehensive design standard allows Morgan Stanley to convey its key messages consistently throughout all of its branches regardless of cultural or geographic difference. CSA also developed schematic layouts to test and analyze relevant content of Morgan Stanley's Equity Research Report.

• Smart Design, packaging design for simplehuman
  Designers have little control over how the product would be displayed in large retail environments, surrounded by competing products. Therefore, product packaging needs to be designed to stand out from the clutter. Since most retail environments are self-serve, packaging also has to attract and educate potential buyers. Stating the benefits of a product rather than only listing its features helps the consumers realize the benefits of the product.
  
  In addition to boxes, Smart Design also developed a system for detailed but elegant labeling for the simplehuman product itself, so customers could get information even if retailers took the products out of the boxes to display it.

• Addison, various projects.
  In order to change and improve end-user experience, first, the company's internal system needs to be addressed. In creating successful information design, it's important to see the problem form the user-centric point of view and understand their mental model.

• Pentagram Design, magazine redesign for TIME magazine
  A consistent formatting through the use of a strong, grid-based approach in publication design can guide the readers through the publication and separate the editorial pages from all the ads. Using a limited palette of fonts and color allows the liveliness of the art, such as photographs, illustrations, and information graphics, to come through. Every redesign needs to begin with an exploration into the heritage of the brand.

• And Partners, brochures for Mohawk Fine Papers Inc.
  The design of a successful information graphic must begin with the development of content. And having a piece where the design and the writing are integrated is the best way to get good design. Design elements can also be used to reinforce a sense of information architecture, so readers wouldn't be required to read any of the pieces from beginning to end, and also to create multiple access points.

• Simon & Goetz Design, magazine for Sal. Oppenheim
  By featuring emotionally engaging images within the articles alongside the standard facts, the magazine uses emotions to create reader enthusiasm for a topic or article. By expanding the information design to the emotional dimension, the communication also often becomes more tangible and memorable for readers.

Project 2 Creative Brief

Background
Knowing screen size resolution in web and mobile browsers are a key factor when trying to create a viewable webpage. The concept of our overall design is to help designers determine which screen resolutions are the most popular now, as well as continually, and which are becoming less and less used. This will allow the optimum amount of people to view the webpage.

Target Audience
The target audience are web and graphic designers.

Objectives
After learning from the infographic, the designer will put the information to use by using the most & continually popular screen size resolution when creating their layouts & designs.

Obstacles
The technical world is ever-changing and the information may only be up to date for an extended period of time. The infographic would need to be updated yearly and continually double checked to make sure it's giving the most correct information at all times.

Key Benefit
A key benefit of this infographic will be that the screen size resolution chosen will be the most used and will allow the optimum amount of people to view the webpage.

Support Statement
Although it needs to be checked and altered frequently, the overall use will allow for the best results you can get. It will increase performance of your website's abilities and keep you continually updated.

Tone
Informative, technical

Media
The media will be either a flash presentation or an interactive .PDF format

Creative Considerations
We need to take into consideration the idea that new phones are coming out frequently and things might have to be updated. The overall idea of mobile browsing is spreading and thus, newer resolutions are going to be designed to fit new phones.

Week 5 Reading Reaction

Summary

All the general design principles apply in information design.

Color is very effective in conveying differentiation. Color can also be used as a navigation tool.

Type style can be used to differentiate types of information and establish hierarchy.

Changes in weight and scale, combined with color and type, are effective in creating emphasize and clarify complex hierarchies.

Grids and empty spaces can help viewers navigate through complex information. The structure of the design piece itself can communicate additional meaning.

Grouping information help viewers quickly find the information they are looking. Multiple entry points allow the audience absorb information as visual sound bites. Grouping can also be used to show hierarchy, especially when used in conjunction with changes is color, weight, and scale.

Graphic elements, such as lines, rules, and bullets, are tools used to attract the viewers' attention and can also provide direction and punctuation.

Imagery is an effective tool to attract attention. An effective imagery can also help summarize a complex information.

Sound can help the audience understand the information better, and when combined with imageries, can have a powerful effect. Motion draws the viewers attention and creates a sense of narrative that leaves a memorable impression.


URLs

• http://www.visualboxsite.com/
  The simple rectangular grid is not only used to organize information, but also used a base for the website structure and navigation itself.

• http://departuresdesign.com/
  This website is very simple and minimalist. It even seems like it is designed only using the basic design principles mentioned in the reading. Yet, it is the simplicity of the website that makes it looks bold and innovative.

Project 2 Sketches

Week 4 Reading Reaction

Summary

Information design projects deal with deep layers of complex information, therefore a supporting structural overview documents, such as sitempaps and page maps, are needed to help in gathering and organizing information.

In web and interactive design, a sitemap is used to help the design team figure out the overall site structure, navigation flow, and navigational nomenclature. A good sitemap should give an overview of the entire site, with its main sections, pages, and sub-level pages.

Organizing the data is the first step to create a flowchart. Once the initial diagram is in place, components can be shuffled and reordered, and categorized. Sitemaps can necessarily be revised and revised again. The next phase of the project should not start before the sitemap get the final approval.

Wireframe is another planning document that acts as a detailed guideline for layout and functionality within the information design piece. While the sitemap provides an overview, wireframes show the finer details of a complex information design project. They map out which elements are most and least important to determine the focal points, and they help determine what other types of information the design needs to accommodate.

There are no rules for creating wireframes. It does not have to look plain and ugly, but it should not look too fancy as well. Overtly designed wireframes can be wrongly assumed to be reflective of the final look and feel of the piece. The main goal is to catalog all the information in layout form without spending too much time and thought applying any specific visual design elements.

Testing throughout the design development cycle ensures that the design becomes more and more focused toward getting it right. The project may cost a bit more if testing is done from the beginning, but it will save money in the long run.

Test your design early and often, don't wait until a lot of time has been spent on the project. Test individual segments of your design. A test can be started early simply using paper prototypes. Once the user experience has been understood, a more elaborate testing can be conducted. Make the testing prototypes look enough like the final product, just don't spend so much time on making the testing prototype look so complete. Testing only needs to be done on a few people from each user group in order to get the big picture.

There are several types of user research and testing. All of them might be employed in a project, sometimes only some of them are conducted, depending on project needs. The types are: concept test, participatory design test, design testing, focus group, usability testing, and beta testing and performance testing.


URLs

• http://www.flowchart.com/
  In essence, sitemaps are flowcharts. Therefore, when we need to create sitemaps quickly and easily, we can use flowchart softwares. Flowchart.com is an online browser-based flowchart software. It has a number of useful built-in templates and clip arts for layout. Since our data is stored online, we can work anywhere as long as we have internet connection. We can even collaboratively work on the same flowchart at the same time from different computers. Once we have done, flowchart.com can conveniently export our work into a PDF, PNG, or many other formats.

• http://www.gdoss.com/web_info/web-site-wireframe.php
  This website gives a brief explanation about wireframes. However, I posted this link not mainly because of the explanation. It's because this website provides three very good PDF examples of completed professional wireframes.

Project 1 Creative Brief

Background
In addition to the verbal explanation, the How Nuclear Power Works article in HowStuffWorks.com currently has a simple pictorial explanation of the nuclear reactor process. This diagram, however, only serves as an accompanying visual for the text. It lacks clarity and detailed information to be used on its own.

Target Audience
The primary visitors of the science page in howstuffworks.com are male and female between the age of 6-17 and 25-64. They are K-12 students doing research online or adults looking for a general information about scientific topics. From the total visitors, 14% do not have a high school diploma, 14% have a high school diploma, 38% have studied in college, while 34% have a bachelor's degree or higher. The detailed information of the target audience can be found here.

Objectives
The interactive infographic that I'm proposing would contain more detailed information and features animation to make it as a self-explanatory infographic that is capable of explaining the entire process by itself. The infographic would also have a more appealing illustration with additional verbal explanation written in plain language in order to make what seems like a very technical topic to look more fun and more approachable by a wider audience.

Obstacles
The topic of Nuclear Power, especially the one about the Pressurized Water Nuclear Reactor process, sounds very technical and uninteresting.

Key Benefit
The audience would get a clear general understanding about the processes inside a nuclear reactor without being overwhelmed by scientific facts and terminologies.

Tone
The tone of the infographic is light and friendly while still maintaining a credible look as a trustable source of information.

Media
The new infographic will be presented in the form of an interactive flash animation with have a dimension of 800x600 pixels and published online in the How Nuclear Power Works article.

Creative Considerations
The wide range of educational background of the target audience requires the information to be not overly technical while also not overly simplified.