R541

Infographic Development in Inkscape

I’ve been diving into Inkscape and have had a decent experience with it, other than some wonky saving issues that I’m in denial about since I think I have to rebuild the last version (the backup files are corrupt somehow but at least I have screenshots).  I wanted to share the iterations of the design thus far:

IMG_1573

Screen Shot 2014-02-17 at 8.47.24 AM

Screen Shot 2014-02-17 at 8.50.39 AM

Screen Shot 2014-02-17 at 9.06.16 AM

I still have a long way to go in actually adding the OER courses, textbooks, and items as well as the bit of pain in adding hyperlinks since I haven’t experienced success with this yet) and feel there are still some missing pieces in the piece above but it’s much better than the original Slideshare:

I found The Noun Project‘s sources have been outstanding (most are Public Domain or Creative Commons CC BY!) as well as Chris Hilbig’s Inkscape crash course.

Back to the design board…

 

Advertisements

R541 Infographic Sketches and Design Notes

Sketches

Sketch #1
IMG_1572

Sketch #2
IMG_1573

Design Notes

What is the purpose of your infographic and who is the intended audience?

The purpose of the inforgraphic is to inform about the definition, licensing, and offering of OER via textbook and subject contexts.  The audience is faculty new to learning about, searching, and utilizing  OER.

Why did you lay out the elements in that way?

Millions of philanthropic dollars have been invested in the creation of OER; and according to Dr. Cable Green, Director of Global Learning at Creative Commons, there exist over 500 million Creative Commons licensed items.  Searching through these OER require an investment not only in time, but also a commitment to understanding open licensing issues when reusing, revising, remixing, redistributing, and attributing these materials.  This “mining” of OER is work.  Thus, the layout of the elements in the infographic within an underground mine are a nod to the precious value of the ore (OER), but also to the worker (faculty) expending their own resources to cull the resource itself.

Why are you representing those data in that way?

Category and Alphabet are the organizational principles of LATCH I’m using for this infographic.  The information between textbook and subject is similarly weighted and the listing of the texts and courses by subject makes the most logical sense.

What colors are you thinking about using and why?

The mining theme could embrace an underground brown earth, black coal, and yellow light color scheme; but I know there is also above ground mining that consisting of blue sky, green background, gray or brown mining track.  My initial plan was to use the coal cars, but I definitely plan to complete more research about the mining field.

Infographic Topic: Mining OER for Higher Ed Faculty

Over the last decade, millions of philanthropic dollars have been poured into OER development, which has yielded some outstanding and high quality open content.  The problem is mining this content is difficult and unfortunately becomes a barrier to adoption given the OER are seemingly anywhere. From textbooks to courses, repositories to individual websites, a ‘one stop OER’ search that’s continuously updated has always been an interest of mine.  My intent with this project is to create an infographic to share back with the OER community and continuously update as new OER are available.

For the past eight months I’ve been updating this slide I created:

It not only is lacking in what the user can actually do with the slide, but it offers little information about the OER, is too broad in scope, and lacks an easy user-interface. I want the viewer to be able to do more than simply view the infographic, I want them to use it over and over again as a tool in their OER toolkit.

With just a few weeks of visual design study under belt, I’m excited to get started with developing this infographic.  A few goals for this project are making it interactive, especially after reading Robby’s message about the Social Bowl 2014 , applying the knowledge from the lynda.com tutorials, including Design Aesthetics for Web Design, utilizing Scribus, and sharing, such as on a Pinterest board like the one I found today by Robert Farrow called OER Visualisations. The What means Creative Commons? infographic was a favorite (especially the way ND is depicted).

In the planning stage of the infographic, the following are important:

  • Audience: higher ed faculty in high enrollment courses, such as the “Introduction to ____” course.
  • Subject: highlight each discipline with links to source materials perhaps in a descending order from logo, to the title of the OER hyperlinked to the content, and finally an instance of the OER “at work” in context, such as in a course
  • Open License: to assist user in remixing open content
  • Consider Viewport variety: for mobile devices; download Bootstrap to build CSS for responsive web
  • Consider Pop-up Windows/Modal Windows: would keep clutter at bay and group the discipline information, although this may not be the most effective method based on criticisms

To the drawing board!

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

Open Source Alternatives to InDesign, Photoshop and Illustrator

*This is a follow-up to Blog #1 for R541 Instructional Development and Production Process, my graduate course with Indiana University-Bloomington’s Instructional Systems Technology program. 

I just spent a ridiculous amount of time trying to figure out how to download and run open source alternatives to Illustrator, Photoshop, and InDesign, but I prevailed! If you are a Mac user (and at this point I’m sure I could help my PC colleagues too) and interested in saving some money trying out new software for R541 (or any project for that matter), consider the following:

-Have you updated your OS to Mavericks? If so, Mavericks apparently wipes all X11 installation (what you need to run these programs) so be sure to download XQuartz.

-Once you download and install XQuartz, open it, close it, then restart your Mac to complete the install.  This is critical to the success of all the other programs running (and the step where I lost too many hours not doing this).  Open XQuartz again after the restart before downloading and running the other programs.

-For an open InDesign alternative, download Scribus 1.4.3.dmg drag the fountain pen icon to your app folder and launch. You’ll also need to download Ghostscript 9.10 in order to print whatever you create. Then check-out the Scribus wiki.

-For an open Photoshop alternative, download GIMP 2.8 10p2.dmg drag the canine icon to your app folder and launch. Then check-out the Meet the Gimp Collective Knowledge Wiki.  

-For an open Illustrator alternative, download Inkscape 48.2-1 Snowleopard dmg drag the ink icon to your app folder and launch. There is a lull when the program opens for the first time due to the font cache. Then check-out Inkscape wiki.

And in case you want to create some screencasts, try a free alternative to Camtasia by downloading the free version of Screencast-O-Matic.

Hope this helps! Feel free to add your new, favorite open source/free software in the comments.