Redrawing the original set of civil defense badges from the United States Civil Defense Corps created in the 1940s.

View the project page.

As has become apparent over the last few years (and even decades and centuries before), we are each responsible for our own safety as well as the safety of our communities. It seems this is a lesson we forget and relearn in a cycle of storms, accidents and tragedies. This concept of mutual aid is once again in vogue and becoming more prominent as we begin to see epic environmental changes occurring in our own neighborhoods. When “once in 100 year” events start happening every year, we’ll need to pool our resources and efforts to survive the floods, droughts, storms, fires and freezes.

Luckily, we’ve done this before. During WWI, the U.S. government started what would later become known as the Civilian Defense Corps.

Reading up on the history, I was excited to see that each group had their own badge and more importantly — they were awesome. Really great, simple yet functional pieces of graphic design united in theme and purpose. Unfortunately, as I searched further, I couldn’t find much about the logos nor could I find the badges themselves. So I set out to redrawn them based on an original document from the period. And that inspiration provided another opportunity to work on a little web design and development to showcase the badges.

The illustrations

Redrawing the badges looked difficult at first, but creating a base template for the logo with the appropriate shapes and colors streamlined the process. Are the final results 100% identical to the originals? No, but they are very close and faithful. I didn’t make any creative or editorial decisions (suppressing all my art director experience — I really wanted to realign each). Each was then exported to SVG and optimized for the web.

Design and development

Now that I’ve got a few of these one off pages created, the ramp up process is much quicker. It’s not quite a template, but it is a starter pack of sorts. The Rorsch project was a great starting point given the retro vintage styles used. But…I didn’t want that much retro. I didn’t need the super distressed paper, but did still want the look and feel of that old manual. I pulled a sample of the paper from the manual to set as a background-image and then applied a background-blend-mode of multiply against the base background color. I did the same for one of the standard grit textures I have on file, but with a different blend mode. Being able to set multiple background images via CSS is a real game changer in terms of design possibilities. I’ve used the same technique, but with gradients, in other projects to draw complex backgrounds instead of using a raster file.

The big change for this project was to try out using an SVG filter to add a layer of noise over the entire page. I tried a couple of different ways to get it to work properly and finally ended up putting the SVG filter into the CSS as a background image and then setting the mix-blend-mode to hard-light. I dropped the CSS class onto the html element so that it covered the entire page. Along with the fractal noise distortion, the hard light mode did change the colors a bit, but it works as it almost de-saturates them a bit enhancing the retro style.

For the type, I wanted to match the styles in the PDF source, but…I couldn’t go as far as to use that cursive subhead font. It was just too much. The sans serif headers are Alternate Gothic to get that compressed letter width. The serif is FF Seria and despite only being used once for the intro text, I still wanted to try to match the style of the manual. Both are served via Adobe fonts which isn’t ideal from a performance standpoint, but it is convenient. I do wish Adobe would come up with a self-hosting option for customers.

All the SVG files are loaded via a standard img tag with a figure tag which allows adding a figcaption tag inside to drop in the badge name.

Packaging up the set of SVG files for a download was the final step. Hopefully, we don’t need them in the future, but it’s always a good idea to be prepared!

View the project page

I have been using computers for over 35 years. This is quite a statement and one that makes me appreciate all the bad ergonomic decisions I’ve made along the way. In fact, it was a diagnosis of tendinitis in my elbow and subsequent introductory questions from a doctor that made me even realize that my relationship with computers had been going on so long.

“Do you use a computer for work?” Yes.

“How long have you been using a computer?” Uhhh, years? Decades? A long, long time.

And I didn’t really have an exact answer. Which got me thinking, because it seems like something one should know about oneself. I’m in the first generation when it comes to personal computers (which may lead to another longer post topic).

The ITT Xtra is the first one I ever really explored. My parents bought it one Christmas and I can still remember first seeing it set up on the kitchen table. No box, no wrapping paper, just sitting there like an alien. Now, to be fair, I had been using computers for some years before this — they were starting to show up at friend’s houses and my middle school had purchased a bunch of TRS-80s to stick in a science class.

But there’s a difference between “using” and “exploring”. It wasn’t until this showed up in my house that I was able to spend unlimited hours learning what it could (and couldn’t) do and by extension, what I could (and couldn’t) do with it. My siblings were too young to care much about it and my parents were too busy to learn it, so I became the default user for the house.

“Give ITT a round of applause for including clear, profusely illustrated documentation with the Xtra. This little extra touch is worth it’s weight in gold.”

— Creative Computing, 1985

Not an actual photo of my Xtra, but those manuals were fantastic!

It was that “profusely illustrated documentation,” as seen in the photo above, that gave me any chance of understanding how the computer worked. Beyond using the word processing program to write all my school papers, it was here that I began to make the early connection between code and art. The idea that you could program the computer to make art. This was an astonishingly profound revelation — that graphics on screen were directly tied to code — basically text. It wasn’t long, and it was probably the first thing I wanted to do with the computer, before I was writing screen graphics in BASIC.

Seeing the light

One of the coolest features was, of course, the amber monochrome monitor. While I may have had some initial trepidation because I had never heard of the ITT brand before, I was immediately won over when I learned that amber monochrome monitors were easier on the eyes than the traditional green monochrome monitors that everyone else had. Remember, I was a teenager with all the misguided fears, self-doubt and imagined peer pressure that accompanies those years, so having something — anything — uniquely cool was a big deal. Even if the claims about amber monitors weren’t necessarily true.

“An amber screen was claimed to give improved ergonomics, specifically by reducing eye strain; this claim appears to have little scientific basis.^[3] However, the color amber is a softer light, and would be less disruptive to a user’s circadian rhythm.”

— Wikipedia

So where does all this nostalgia lead us?

It’s led me to create a new page on the site using the style of my old original amber monochrome monitor. It’s a flashback to what it was like for me to work on that first ITT Xtra computer — amber, bitmap fonts on a black background. To that end, I’ve been toying with the idea of including a client archive page on the site. These two ideas were perfect for each other — a long list of text in a table with a retro design style.

The design itself is by it’s very nature, basic. I started by finding the perfect shade of amber, not necessarily in terms of accuracy, but more on an emotional basis dredged up from some sort of color memory library. Next up, was choosing the perfect bitmap font and I do love a good bitmap font. In this case, historical accuracy won over nostalgia as I was able to find the exact font files used on the ITT Xtra. From there, it was more of a matter of web development to bridge the gap between the old and new.

Now of course, it’s not an exact replica to the original, mostly due to the underlying technologies involved. The two big differences being the monitor construction and the text rendering engines in modern computers. Those old monochrome monitors made for much crisper text. So the way your laptop screen is built makes the text a little blurry (on the plus side, it has more than one color). The second difference is how your computer renders the text itself — usually via anti-aliasing or subpixel rendering. While I can’t overcome modern displays, I have included some CSS to help recreate that old text rendering.

Along the same lines, I’ve also chosen to use another old technique for the page — loading the client list data via XML and a deprecated Javascript library from Adobe called Spry. Now, admittedly, this has nothing to do with my old ITT Xtra, but it was a fun bit of nostalgia to use again. Old school web designers will fondly remember (or not) that thirteen years ago, loading data into a web page (without a database!) was super cool. At some point, I may swap this out for actual on page data which would be better for performance, accessibility and longevity.

In the meantime though, and without further ado, venture back in time to experience the dawn of personal computing.

In these heady days of web design and development, with multiple screen sizes, tablets and smarphones, it can be difficult to get proportions and spacing correct. Of course, one would expect a major retailer to have the resources (and care) to get it right. This screenshot was taken on my laptop with a resolution of 1440 x 900 running Firefox 5 on OSX. Nothing too crazy in terms of a web user profile.

Beyond any aesthetic issues with the check box label being too far to the right, the functional issues (or non-functional as the case may be) are what should be of primary concern here. I suspect many users would stumble over connecting these two parts of the form. If it takes folks an extra few seconds to fill out your form, it takes away from the shopping experience and therefore it impacts your brand.

Will it take away from sales? Maybe not initially. I certainly continued with my purchase, but if users are left remembering that the checkout process was annoying, weird, or heaven forbid, difficult, they may be more likely to head to your competitor’s better designed site.

Small improvements can build up to increase satisfaction and in this case, it seems like an important (and easy) fix – especially as this is one of the very last steps in the check out process – right before you click the “purchase” button.

Seems simple enough – in both common sense and in design – but the evidence is clear.

It’s an old motto that, the more information you can give a designer, the better the final design will be. This is especially true in the case of the audience. One of our key audiences, which is near and dear to my heart, is the video game community. I’m of the generation that came of age with the Atari 2600 and hung out in dark arcades dropping quarters, so it’s an audience of which I’m a member. Designing for yourself is always fun and whenever I get a project targeting at gamers I dive right in.

There are a few things that will always peak the interest of a gamer and at the top of my list is robots (others include ninjas and monkeys — both completely viable options). Access Communications hosts an annual party at the gaming industry’s biggest trade show E3 and I was tasked with developing some email invitations for the event. Naturally, I developed, designed and wrote the copy for the invites using a robot theme. The key concept of the 2009 invite was that the event would feature alcohol dispensing robot. After a hard day trudging around the trade show, everyone’s ready for a drink and it seemed natural to combine the two ideas. Of course, the whole idea is meant to be taken as tongue in cheek humor — there would be no actual alcohol dispensing robots at the event (but we can dream). The invite was met with success and even got picked up and posted by the online gamer press which is always a good sign.

When this year’s event rolled around, the team and I brainstormed and narrowed it down to two themes: pirates (another gamer fave) and a continuation of the previous year’s robot concept. The pirate theme centered around a skull and crossbones logo I developed (more on that at another time), but it didn’t have a story behind it. Crafting a compelling story is another key to getting the audience to engage and without a story (or time to develop one), the pirate concept got shelved.

I was also completely intrigued with the idea of continuing the robot story from the previous year. It’s rare that we get the opportunity to tell long arc stories and to continue the conversation with the audience. So many projects are just one time affairs soon to be forgotten. For the follow up invite, I wrote copy that directly referenced the previous year’s invite and moved the story forward. The invite was met with a ton of positive feedback and although it did not get picked up by the gamer press, it had a more substantial impact — Access had to increase the budget for food and booze to accommodate the increase in RSVPs.

Here’s sample screens from the two invites and each links to the full invitation:

E3 2009 Invitation

E3 2010 Invitation

Here’s a few of the comments the team received on this year’s invitation:

• “I will try to make it unless the robots get me first”
• “FINALLY, ROBOTIC BEINGS RULE THE WORLD”
• “Please RSVP me for this event, even though I will have to order drinks from a filthy human and not from a precision calibrated robot”
• “It just won’t be the same without the drunk robots, but I’ll still be there!”

Coming in Part Two: What I designed for the events themselves.