Since I’m coding a bunch at work, I usually have my fill of developing stuff by the time the evening rolls around. Hence, I usually don’t immediately start working on my latest coding project, and instead go work on something else. In this case, the something else is a bit of design work.
Recently, the EFF put out a single page flyer detailing the rights that we (American citizens) have with regards to digital information. It was informative, but the flyer (never marketed as such, but functionally equivalent) lacked clear direction and if I had seen the flyer in the wild (instead of being linked to it with plenty of context), I would not have known immediately what the flyer was about, or (more pertinently) if I had wanted to read it.
Similarly to the Arimaa icons, I thought this was an unacceptable ambiguity in design, and decided to try and rectify it.
In order to talk about the flyer in more detail, you can grab the end-result PDF here. And here’s a link to the original if you missed it.
First, I should note a few things: first, I’m a web designer, and a self-trained one at that. With absolutely no training in print media, everything I say and decided should be taken with 2 tons of salt. Also, I didn’t change any of the content, and essentially just decided to move a few things around. Lastly, this was supposed to be a 1st draft, so the PDF has several “quirks”. I explain why in the Making Of, below.
I started at the very top, in which the flyer emphasized the EFF instead of the topic at hand. One may argue that it serves the same purpose as a letter header, but I would counter that you should serve the content first, and then after the reader thinks “man, this is awesome content!” allow them to find out more. Since this is a print medium, there is no context/bounding box that is a glowing screen to guide them to that spot in the browser page where the articles usually start, and so we should put the relevant topic outline at the top, where it is most likely to be seen.
Hence, I swapped out the EFF header, and decided to try and place this particular flyer into a hierarchical structure, by categorizing it as a Tip sheet, which is targeted towards talking to the police, dealing specifically with electronic devices. I did keep a similar color scheme, but mostly because I was lazy, and it works. I also kept the EFF icon in the right, so that readers familiar with the EFF could immediately mark it as an EFF product, which would help them evaluate it’s quality (pretty damn high).
Moving down the page, we find a hook: a question to the reader that explains exactly what the rest of the flyer will address and try to answer (“The police want to search my server, my personal computer, or my phone. What do I do now?”). This seems to be the sort of line that will allow someone to remember the rest of the flyer, especially under duress like finding police on your doorstep. It also serves as the line that lets people know that this could also apply to them (hey, I have a cell phone!) and that they should listen up.
Since this is such an important line, I thought it’s graphic importance should be commensurate with it’s contextual importance. Hence, I outlined it and gave it a front-and-center seat right below the header.
Now, the list is a list is a list. There are only so many ways to do a list, and I didn’t want to monkey around with the content too much. However, you’ll notice one noticeable difference (disregarding my funky kerning), where I set some list items as italicized “comments”. Some list items merely expand on the previous item, and as such don’t really deserve the same treatment as a normal list item, which usually presents a new thought.
Insetting them provides a visual hint that this sort of informational expansion is taking place, and that their brain should be treating it as an additional glob to stick on to the previous glob, instead of it’s own glob. Yeah, I think of thoughts in globs, what of it?
I left the police man cartoon in (thank heavens!) and put the information on the EFF that used to be in the header here, mostly due to the fact that it had to go somewhere. However, I also added in a QR code, mostly because as a PDF I assumed the flyer was destined for print media, and the widest spread way of linking the print and electronic worlds is through QR codes. Hence, QR code where I could fit it.
Finally, I added a footer, mostly to accommodate information that was destined for the sidebar, but in a prettier format. I like to think it also brackets the flyer as a whole, which helps define it against a busy background (which, of course, doesn’t happen anywhere).
Since I’m a web dude, and this was supposed to be a first iteration, I decided that I would knock this up with plain HTML/CSS: this way, the links also work! After doing the layout work, I used wkhtmltopdf to convert the HTML to a PDF.
Now you understand why the kerning is weird, the logo/cartoon pixelated, and QR code underlined.
I did the bulk of the work while at SuperHappyDevHouse 45, which only took a few hours (+10 geek points).
The EFF is not a free form, open source organization with a dearth of effort behind it. Hence, my email with the suggested flyer modifications and attached effort disappeared into the EFF, and I haven’t heard from them since (a month at time of writing). However, I did what I set out to do: do something other than coding all the time, and maybe/hopefully help someone.