If it may please the viewer, I would like to start with three simple assumptions that I hope we may all agree to:
Teenagers in 2015 have been inundated with gorgeous web design for several years now.
Content that is presented in a visually appealing manner is more likely to engage the reader.
The attention span of all people, especially 17 year old’s on a Friday afternoon before a week-long holiday, is limited.
Keep those in mind as I set the scene: In my 10th-11th grade physics class, we have reached the point in the year where my math-weak students begin to drop like the flies. It can get pretty bleak for a lot of them. The most common question I get is: “How do we know which equation to use?”
To which I replied: Try to reason your way through it–use physics! I tend to get hollow stares. OK, little frustrated Johnny, here’s a less-than-ideal way: Use the 5-3-1-1 method (loosely based from here and a co-worker, Mathew Spencer). I proceed to turn into Mr. Gas-bag and describe the method, even going so far as to produce this horrendous handout (which will now live on forever, thank you internet!):
With the above three assumptions in mind, I decided that I needed to polish this thing up (because the method is, truly, very powerful). I even considered outsourcing, going so far as to send a request for a quote to Visual.ly. They never replied, which forced me to buck up and upskill myself. I decided to turn to a web-based graphic design generator that I had heard about, but never really used: Canva.
So, with the practice I gained converting an ugly slide into a pretty one (thank you, Keynote!), I set about the task of converting this awful thing…..
I probably don’t need to spend much time convincing you that the above piece of work could use some improvement. And the results will speak for themselves, but before you scroll any farther, I’d like to remind you of a very useful acronym: C.R.A.P.
With that in mind, and about 4-5 hours later, I achieved what I consider to be a pretty impressive metamorphosis:
As with all things that appear simple: they are not! In fact, I now realize that the more simple something appears, the more time and energy must have gone into it. This quote, by Information Architects, was aimed towards web developers, but it applies equally well to teenagers:
Struggle for every word: Writing for the Web means struggling for every word, as with ever word that is too much, you might lose your reader.
The design is as simple as I could make it, without losing clarity.
Here are a few more things you hopefully don’t notice, but subconsciously make you think, sure, I’ll read this:
Contrast: The white font stands out boldly from the intensely colored hues. All lines are totally crisp. This part was easy.
Repeated colors. The red from the top section is the same red used in the super important word “Irrelevant”. It is also the same red used in the curved arrow’s backside down on the bottom. Just for fun, I tried changing that to a random color, or to a slightly different red, and the effect was subtle but noticeable.
Repeated font: The font is the same throughout the infographic, except for the equations themselves. Unfortunately, Canva doesn’t support math equations, so I was forced to use Word and move them in as an image, therefore losing the ability to change their font. Still, it looks nice to see consistent fonts. (but I did manage, after many minutes of squinting and asking my cat what he thought, to pretty much match the red background!)
Alignment: A quality infographic is carefully designed, with each element requiring careful and deliberate placement. Canva offers the usual rule of thirds, but after struggling to make it look cohesive and balanced, it didn’t seem to fit. I believe this is because this piece doesn’t (nor should it) attempt to “pull your eye” to any particular spot–there isn’t really a ‘hot-spot’ per se. Each part is as important as the rest. However, I did make careful use of Canva’s snap guides, which helped me to align the edges of text blocks, centers of arrows, etc. to keep things symmetrical, both horizontally and vertically. For example, the vertical acronym “DUVAT” is perfectly aligned in the center of the right column, as is the large orange arrow 2 sections below that. There is no visible line here–but the snap guide helped me to ensure they were in lin.
Do not make your audience think. — Gerr Reynolds
Proximity: As mentioned before, this document only makes sense if you start from the beginning (the top) and follow a logical flow. The large font, combined with human’s natural tendency to start at the top, starts the viewer in the right place. The rest of the desired flow is achieved by steadily descending content, which switches from left to right repeatedly, keeping the eye moving. Also, information in the same category (i.e. the variables, the equations, the 3-1-1 breakdown) is clustered together, informing the reader that ‘these items are related’.
Basking in the glow of my good-enough infographic, I am actually enthusiastic about making another one. As a semi-overworked science teacher, it is a rare event in my life where I focus on the subtleties of making something beautiful. Also, the technology is really quite impressive–I believe the Webby’s had it right: “The easiest design program in the world”. And perhaps most importantly, students actually do like it. I had some very kind ones stroking my ego, but I had some less-interested ones pulling it up on their phone while working through problems. You can go out on a limb here and imagine which version they preferred–my hand-drawn beauty, or Canva’s!
This course has emphasised the importance of design in a way that I had not expected: Pride in your work. As a teacher, every document, every website, everything that I give to my students is a reflection of myself. The media that I give (or expose my students to) is important, and deserves time and attention, and that is a revelation to me.