Open Source

Infographic Review: A Brief History of Open-Source Code

According to Search Engine Journal’s article on the 5 Important Principles of Effective Infographics an infographic is defined as “information, data or knowledge that is presented in graphic visual form and presents a clear message quickly and clearly” (Harris, 2013, par. 2). Further, the article states effective infographics are unique, simple, creative, bold, include minimal text, and easily shared (Harris, 2013).

I chose A Brief History of Open-Source Code because I’m interested in the subject and plan to learn and do more with it this year. I also found the author’s blog about the infographic interesting in explaining the thought process and goal for development.

At first glance from a non-designer perspective, I think what makes this infographic effective is it grabs and holds the viewer’s attention while communicating the information fairly quickly and clearly.

From a design perspective, I reviewed the lynda.com tutorial Design Aesthetics for Web Design, and did my best to apply both the elements (components) and principles (rules) of design for a more in depth review of the infographic.  As noted below, my only suggestions for improvement are adding more whitespace and increasing the size of some of the text. Overall, I think it serves as an excellent example of an effective infographic.

Elements of Design

  • color (hue) –  the black background with red lines allows the multicolored charts to pop with energy while simultaneously evoking a serious and techie mood; the white text on black background is a logical contrast and makes the information easy to read; the same color scheme representing the information is carried across the charts

  • value (tone) – the transparency added to the boxes inside the large chart allow for the chart’s information to be seen beneath the boxes; where the colors come together in the larger chart, the darker tone of the color aids in separating the information

  • texture – the diagonal lines on the color add depth to the larger chart

  • shape – the simple and symmetrical rectangles, square, and circle charts unify the page and add to the overall feeling of order

  • form – the large chart with its dynamic and bold color is the central focal point in the structure of the page with the 3 smaller charts serving as a strong foundation and complement to the centered title block

  • space (whitespace) – my main criticism of this infographic is I think there should be more whitespace for it feels cramped, especially after squinting at the small text, and I found myself looking back at the title for a visual break; however, after reviewing several other infographics, such as this board on Pinterest, apparently this is a common characteristic of many infographics; I wonder if this characteristic is an infographic trend?

  • line – the red lines assist in dividing up the space and organizing the page; the diagonal lines in the larger chart’s color add richness and interest while the data lines alone offer fluidity to the infographic as a whole; the crisp white line in the black/gray chart offers a strong boundary; the dashed lines in the charts representing increments is smart; the aqua lines under the smaller charts’ titles match the image in the title and pull the eye to a pleasing focal point

  • type – the serif font in the subtitle and important points in the largest chart is a logical choice for it serves as a nod to coding language as well as adds interest; the sans serif communicates hierarchy from the titles through the information; I do think some of the text is too small

Principles of Design

  • contrast – in the tutorial, Jenkins states “the major contrast in a work should always be located at the center of interest” (ch. 3.1, 1:13); in this case, the use of the black background and tight organization contrast with the larger chart’s bright colors and fluid movement of color.

  • emphasis – Jenkins says this principle is about “teaching visitors to a site what they should and should not focus on” (ch. 3.3, 0:50) as well as wanting contrast while preserving harmony; the typographic hierarchy of the sans serif font from title to chart title and chart description to chart information certainly conveys a sense of most to least important; the serif fonts add character, interest, and fun a la the code theme

  • balance – the large chart in the center with the centered title block above and 3 smaller charts below create harmony; the bright color against the black background and white font are well-balanced in the layout

  • unity – Jenkins states unity can be thought of as “the relationship between the individual parts and the whole of the design used creatively to express a particular idea or emotion” (ch. 3.5, 0:40); the goal of the infographic is sharing knowledge about the history of coding languages, so the subtle nuances of the < and > in the title image, the use of serif code font in the subtitle and in the highlight boxes overlayed on the color in the larger chart, and even the wordplay of the title against Stephen Hawking’s A Brief History of Time, are ways the “little parts” support the larger context

  • pattern – is found beneath the red line above the title, use of the <> in the subtitles and points of interest in the larger chart data

  • movement – the eye is drawn to the </> image in the title and also to the same colored aqua lines under the smaller charts’ title, which creates an interesting triangle of movement that would have been lost if the designer would have added the aqua colored line to the larger chart too; the Q1 above the year (and even the number of characters of each and their size) repeating at the bottom of the larger chart create a pattern

  • rhythm and repetition – the repeated red lines act as horizontal dividers between the sections; the repetition of the color throughout the charts makes it easier to process and carry the information from one chart to the next

  • proportion – the tiered dominance of the larger chart is proportionate to the smaller charts

  • simplicity – the infographic does not seem to have any extraneous pieces

  • gradation – there is a line created by the dark to light gradation in the larger chart’s color areas

Sources

Harris, S. (2013, July 19). 5 important principles of effective infographics. In Search Engine Journal. Retrieved February 2, 2014, from http://www.searchenginejournal.com/5-important-principles-of-effective-infographics/65085/

Jenkins, S. (2013, August 29). Design aesthetics for web design. In lynda.com. Retrieved February 2, 2014, from http://www.lynda.com/Design-Design-Techniques-tutorials/Design-Aesthetics-Web-Design/114323-2.html?org=iu.edu