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:


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…



Week 5 Blog: Motivation

Infographic Project Update

I was recently accepted as a volunteer participant in a project with Designers for Learning, a non-profit described to me at AECT’s annual convention by founder Jen Maddrell as “the for instructional designers and projects in need.” My interest in the project stems from its objective of “mining and mapping existing open educational resources to the 2013 College and Career Readiness Standards” and “preparing a written report that identifies existing open educational resources that align with the standards for both English language arts and literature, as well as mathematics” (Designers for Learning, 2014, par. 2). My background in directing college programs for at-risk learners as well as ID work in mining and developing open OER courses brings these two passions of mine together in a way I’ve never experience before in my work. Thus, my infographic work for this class certainly feeds needs for the project’s partner, Grace Centers for Hope, and I see the infographic adding another dimension to the text report I’ll be writing for the volunteer project.  I see the final product assisting high school and first-year seminar faculty. I’m excited to apply the working knowledge and products from this class directly to this project as well as my start-up work.

Some of my issues with the infographic project are:

-deciding the interactive element of the infographic is beyond the scope of this project (as well as my resources)

Professor Myers was right in saying it was not clear in my paper and pen example how the interactivity of the infographic will work.  Part of my thinking last week was the software and my capability will drive this, but now that the infographic is actually due in just a few days, and as good practice not to jump too far ahead in my infographic zeal, I’ve decided to create a static non-interactive infographic so I meet the goals of the project first.

I’ve thought more about my idea of interactivity with this infographic and my initial idea was to create links to OER, but this really isn’t what an interactive infographic is all about – those infographics have the user manipulate the data itself, and the goal of this project is informing about OER to make it more adoptable by the viewer.

Now that I’ve thought more about what interactivity really means to my goal, I convinced it would  require the backing of some grant dollars and software developers: picture a DIY to OER adoption where the user creates an OER course via a “choose your own adventure” idea beginning with selecting the subject, course, course outcomes, module outcomes, OER content, OER assessments and then the final click packages the course as common cartridge file compatible with any LMS (yes, I dream big and know this is highly not even possible).  In essence, the faculty builds a blueprint for their course based on backwards design principles.  This idea is NOT going to happen with this infographic project for the idea is not an infographic anyway!  I’ll keep exploring this on my own.

-maintaining the LATCH principles of Category and Alphabetical

Professor Myers mentioned the alphabetical principle of LATCH was not visible in my paper and pen version of my infographic and my intent in the listings of the courses with the OER was alphabetizing, although I didn’t do this in the paper and pen version since it was a working idea.  I have encountered problems with how best to organize the subjects of OER groupings: do I drill down to the “genus species” of the classification system (the course), such as Introduction to Psychology, or do I organize by the “order/family” of course, like Behavioral Science?  I’m still not 100% sure about this yet.  I like the latter given it seems to emulate what a faculty member would encounter in a college catalog and would offer a simpler approach of organizing.  By course title organization, I’m afraid it would be cluttered given some courses might have the title “Introduction to…” and others “Principles of…” – I’d rather not worry about semantics and focus on streamlining.

-merging the two sketch ideas

The first sketch was my initial attempt at organizing my ideas about the infographic.  It allowed the mining theme to be born and explored ways I might have the user interact with the infographic, such as with the wheel.  The second attempt explored the theme, which I think works for this idea, and I like Professor Myers’s idea about creating a pie chart of percentages about the 500+ Creative Common items in existence today.  This addresses my worry about not having enough – or any for that matter – statistical/chart-y information typical of infographics.

I do plan to include the most restrictive to least restrictive CC license graphic pulled from a presentation from Cable Green (2013, sl. 15):

I’ll cull more OER slides and pull some interesting stats into the infographic.  It also offers a way for the viewer to gain insight into the current leaders in the OER field: David Wiley, Cable Green, Kim Thanos, Stephen Downes, David Lippman, James Sousa, Nicole Allen…maybe it would be interesting to develop a chart in a mining cave with these people and their association to the OER world?

-communicating the goals and purpose (and most importantly developing a process in the infographic for mining OER)

I most appreciated Professor Myers’s advice in using text over graphics for the definition and developing my idea of a procedure for mining OER, which is exactly what I was aiming for in my gut, but precisely what I had missed in my planning.  I like the idea of the branching tunnels for the mining.  I thought more about his question: “what is that information and how can it be displayed as visually as possible?”  The information would be the best of existing OER grouped by subject and the visual display would be using CC BY icons from the The Noun Project to represent the different subjects/course materials (plus the graphics would match my mining theme ideas of clean silhouettes) as well as the icons from the OER developer, such as Saylor, Boundless, OpenStax, etc.

Thank you, Professor Myers, for the infographic feedback this week.  It definitely offered more direction in my planning.


We did not meet this week about our major project given we submitted the proposal and are waiting feedback.


I pushed onward with the and reviewed portions of Creating Infographics with Illustrator to gain some insight into creating custom charts and layers.  I must admit the tutorials are great and although I’m thankful my subscription is included in my IU tuition, of course I wish they were openly licensed.

Weekly Readings

It is appropriate the weekly readings focused on motivation this week…I found myself wishing I had more of it juggling this intense week!

Keller and Burkman (1993)

I found the Keller and Burkman reading to be of personal interest given my struggle at this time with my current conundrum in what to do about my children’s preschool.  They are currently attending a Montessori school an hour from our rural home and the commute is taxing on both my kids, my schedule and the family that helps.  I’m considering alternatives for next year, but am torn about the philosophy of education since Montessori schooling is more concerned with students developing their intrinsic motivation to love learning versus academic achievement – not that the latter isn’t important, but the logic is if one loves learning, then academic achievement will follow.  I agree with this philosophy and am not sure how the public and parochial schools (which are my other choices) embrace this philosophy…and my personal experiences with schools as both a substitute, high school teacher, and even in higher ed have focused on the bottom lines: standardized test scores and retention – not developing a love for learning.  Dr. Montessori understood the concept of motivation and its impact on learning – yet it’s interesting to me that although I feel this concept makes sense, but in my teacher prep programs in both undergraduate and graduate levels, the focus on outcomes-based learning was there, but the focus on motivation was limited.  As Keller and Burkman discuss, “The motivation to learn depends largely on the learner’s personality, the nature of the thing or skill to be learned, and the learner’s perceptions of the value and difficulty of learning it” (p. 4).  I am surprised that as much as I have been exposed to the motivation concept in this IST program, it is not yet naturally ingrained in my application-at-work process.  I know I need to develop this more, especially with reference to variation and curiosity (p. 6) and positive outcomes (p. 22).  My consistent approach to developing course materials that make sense to the learner at times approaches a fill-in-the-blank swap out approach of content with the intent to make it easy for the instructor to swap out materials but I fear the result is boring the learner.  This is a fine-line to walk.

Foshay, Silber, and Stelnnicki (2003)

The Cognitive Training Model presented in this reading helped me think more about the field of instructional design beyond the scope of academics.  I think it’s easy to take for granted the base fact that higher ed students are motivated because of an array of reasons beyond instruction: scholarships, GPA, family, friends, coaches, and ultimately being responsible for paying for college may impact a learner’s motivation beyond the scope of the classroom learning environment.  Faculty certainly need to keep attention, WIIFM, and YCDI and the cues and signals for the most important information in their planning process, but I do wonder how many higher ed faculty actually do it.  I remember these courses from my training in the education discipline, but have not seen this in other courses of disciplines I’ve been interested in pursuing, such as Literature and Creative Writing.  These fields seem to focus on the discipline itself and not on how best to teach the discipline – let alone focus on student motivation – to college attendees.  In Beyond the Rhetoric: Improving College Readiness Through a Coherent State Policy published by The National Center for Public Policy and Higher Education (2010), there exists a gap between what high schools teach and what colleges expect, and since expectations are not in sync, I would imagine that ways of encouraging motivation are not either.  The model suggestions on p. 29 would benefit higher ed faculty in their planning, and I’m certain my collaborators in the major group project will revisit these elements in our development of the instructional materials. I appreciate how the author’s contrast their work with Gagne’s and find these differences important in the application of the model to IST.

Malone (1981)

I enjoyed the Malone text and thought about how my preschool aged children learn and how my college aged students continue to learn.  The idea of using a game to deliver content is a given, but the idea of using a game to develop intrinsic motivation was only obvious when I read about it.  Equating fun and learning for the preschool child makes sense, but embracing that theory for a college-aged learner – including non-traditional learners and those in the workplace – is compelling.  I’m not sure I’ve ever had anyone in higher ed even talk about this as a motivational tool.  What’s happened? I agree with Malone that an “overpowering factor that has been largely neglected…is the role of motivation in learning” (p. 334) and even more how external reinforcement “destroys the intrinsic motivation a person has to engage in an activity” (p. 335).  This language bothered my teacher-soul for as much as I hate to admit it, the external reinforcement of “a bad grade” is likely what sucks the fun out of learning in the first place.  The use of games by employing a “die and try again” vision makes sense especially when married with the theories of “challenge, fantasy, and curiosity” (p. 335).  I liken my younger days of playing the original Nintendo Legend of Zelda for days on end similar to writing college papers for my undergrad English courses: I loved the challenge, explored the fantasy, and satiated my curiosity to learn and grow more.  This is what learning is and should be about: not fearing a poor grade.  I know there has been much in the last three decades since the Malone text was published about game-based learning and motivation (a Google searched returned 24,900,000 results) but the overall take-away is still relevant.

Keller, J. M. & Burkman, E. (1993). Motivation principles. In M. Fleming & W. H. Levie (Eds.) Instructional message design: Principles from the behavioral and cognitive sciences. Englewood Cliffs, New Jersey: Educational Technology Press

Foshay, W. R., Silber, K. H., & Stelnnicki, M. B. (2003). A cognitive training model. In Writing training materials that work: How to train anyone to do anything. San Francisco: Jossey-Bass/Peiffer

Malone, T. W. (1981). Toward a theory of intrinsically motivating instruction. Cognitive Science, 5(4), 333-369. [Read 333-340]

Image credit: Author Cable Green, Source WA K-12 OER (2013) via SlideShare link, License Creative Commons Attribution 3.0

R541 Infographic Sketches and Design Notes


Sketch #1

Sketch #2

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


Harris, S. (2013, July 19). 5 important principles of effective infographics. In Search Engine Journal. Retrieved February 2, 2014, from

Jenkins, S. (2013, August 29). Design aesthetics for web design. In Retrieved February 2, 2014, from