I should really make a post about the time I'm having relearning HTML and CSS in such a short amount of time, but I don't think the language would be appropriate for all audiences.
Instead, I thought I'd update this blog with what I'm up to otherwise. Because I tried to get my prototype as polished as I could before trying to get in touch with: Stop The Bleed, the Stop The Bleed Coalition, The Red Cross, The Department of Homeland Security, the Uniformed Services University, and, frankly, whoever I could get to listen to me, that work is much further along. But there was still the question of how someone would access this work. There were so many people that I surveyed who had their smartphones on them that a placard with a QR code still seems ideal.
But what if the internet was down? What if the electrical grid is not functioning? What then?
Airplane visuals have always been an important inspiration of this work, and in the poking around I've done online, I found this poster by the Department of Homeland Security that was pretty similar to what I wanted to do.
Now I have some pretty serious questions about this as a designer, but I'm not looking at this as a government employee. I'm looking at this as a teacher. I'm also not looking at this as it was probably intended — to hang up in an office break room or lobby. I'm looking at this as instructions needed during an emergency trauma. There are some things that I think are sloppy like: Where's the number 3? Why is there that weird blue bleed through in 5 and 6. Why is there that weird line in the hand of 3 but not in 2, and they are the exact same illustration. There are also questions of accessibility... So I started noting things I would ask the designer who put this together...
***In hindsight I see that I wrote "Titles to close to text" and it should be "Titles too close to text" but I was tired****
So here's what I did. Again, keep in mind that my work is more of a brochure where the instructions are on the inside. It is meant to be mounted to the front of a first aid kit; it is not really a poster.
Things I did:
Add a cutout on the front with an illustration of a tourniquet. I thought that if this was printed on thicker stock, the cutout might reinforce that it could be opened by the viewer.
The title was only put on the front cover and not inside. Why be redundant? That just takes up room that could be used for other things. The arrow pointing to the tourniquet icon was meant to both suggest what it was for and reinforce that it could be opened.
Titles were made a lot more obvious. They serve as the major instructions, so their language was simplified, they were made larger, bolder, and a different color. The spacing of things was also addressed.
The step numbers and printed numbers were consolidated. I know this may seem picky, but I was trying to simplify things as much as I possibly could.
The instruction tiles are presented as a list and are formatted identically. This is another straightforward simplification. I found my eyes jumping around a lot on the DHS poster.
The instructions were treated as lists of points instead of blocks of text. A lot of the superfluous text was removed, not that it wasn't important, but it wasn't important in this situation. Again, this is a difference really comes down to the priorities of the designer and the DHS versus what I am trying to accomplish.
The icons and arrows used to describe the movement and placement of things were changed from an identical red to larger, dark blue ones. The original red ones were cloned out or painted over, and instead of using a drop shadow, I added outlines in white to create contrast for greater visibility.
The first tile was outlined in red to suggest its importance and to reinforce that it was the starting point for the instructions.
I fixed the illustrations. Since I was chasing pixels anyway, I filled in those weird blue areas and cloned out some of the lines.
Now that I type it all out, I think the amount of time that I spent on them makes a lot more sense. I hope working in HTML and CSS goes as smoothly.
Comments