{"id":1653,"date":"2018-02-02T23:34:07","date_gmt":"2018-02-02T23:34:07","guid":{"rendered":"https:\/\/2018.sandiego.wordcamp.org\/?p=1653"},"modified":"2018-03-14T19:04:12","modified_gmt":"2018-03-14T19:04:12","slug":"the-story-behind-the-design","status":"publish","type":"post","link":"https:\/\/sandiego.wordcamp.org\/2018\/the-story-behind-the-design\/","title":{"rendered":"The Story Behind the Design"},"content":{"rendered":"
\"Grumman
Grumman F9F-5 Panther jets of the U.S. Navy flight demonstration team Blue Angels, 1952. Public domain photo from Wikimedia Commons.<\/a><\/figcaption><\/figure>\n

I was excited to volunteer to provide all of the design assets for WordCamp San Diego 2018. As a native San Diegan, I grew up close enough to the Miramar Naval Air Station to watch the Blue Angels practice from our roof. There’s a long history of military tradition in San Diego that I wanted to honor. I came on board right after WCUS, a lot later than the rest of the organizers, and the first thing the team needed was a logo\u2014preferably yesterday \ud83d\ude42<\/p>\n

The Logo<\/h3>\n

Because we were working with an extremely tight timeline, I decided to use stock photography as the basis of our logo. I stockpile tons of Depositphoto<\/a> credits, so I started my search there. I initially thought about using military patches as the cornerstone of the camp.<\/p>\n

This was my inspiration board:<\/h4>\n
\"Military
Military Symbol Icons <\/a> <\/div> <\/div> <\/div>
\"Military
Special forces military patch set<\/a> <\/div> <\/div> <\/div>
\"Stealth
Stealth pilot military patch set<\/a> <\/div> <\/div> <\/div>
\"Desert
Desert military emblem patch set<\/a> <\/div> <\/div> <\/div> <\/div> <\/div>\n

*Note: Roll over the images for links to the stock image site.<\/em><\/p>\n

First round logo comps<\/h4>\n

I played around with a few versions, changing the type and some colors, but I just wasn’t feeling it.:<\/p>\n

\"badge-1a\" <\/a> <\/div> <\/div>
\"badge-2a\" <\/a> <\/div> <\/div>
\"badge-3a\" <\/a> <\/div> <\/div> <\/div> <\/div>\n

I did<\/em> really like two of the type vectors I’d discovered in my stock image research, and had used on a few badge designs.<\/p>\n

\"Military
Military Vintage Alphabet<\/a> <\/div> <\/div> <\/div>
\"Military
Cargo Stencil Alphabet<\/a> <\/div> <\/div> <\/div> <\/div> <\/div>\n

It\u00a0reminded me of something I’d seen in a book\u00a0I inherited from my Grandpa. He served in WW2 as a Merchant Marine, ferrying troops and equipment in the Pacific Theater, and after he died we found his original training manual out in his toolshed.<\/p>\n

On one of the mimeographed handouts crammed inside he’d used a pencil to try out the name stencil he’d been issued. Over the years, sitting crammed in that box, the graphite had transferred to the cover. It really inspired me to pursue a new direction.<\/p>\n

I also really liked the simplicity of the sergeant stripes and star icon used in the first two badges, so I aged it a bit and roughened up the edges in Illustrator to match the stencil vibe. I eventually settled on four variations of a logo (and put them on t-shirts to see what they looked like because that’s what I’m most excited about!)<\/p>\n

\"Stencil <\/a> <\/div> <\/div>
\"Stencil <\/a> <\/div>
\"Stencil <\/a> <\/div> <\/div> <\/div>
\"Stencil <\/a> <\/div> <\/div> <\/div> <\/div>\n

After presenting the above ideas to the organizing team, we came to a consensus: we’d use the horizontal logo in the first image for horizontal applications, and the vertical orientation in the last image when it fit into a design application better than the other.<\/p>\n

The logo was done, which meant it was immediately time to\u00a0 jump into the website!<\/p>\n

Website Design<\/h3>\n

Website Direction #1: Textures<\/h4>\n

Originally, I thought of the stencil as being something stamped on different surfaces, like crates and canvas duffel bags and the side of airplanes, the way my Grandpa stenciled his name in his training manual.<\/p>\n

\"WordCamp<\/p>\n

\"Radio
Radio Device<\/a> <\/div> <\/div> <\/div>
\"Top
Top view of old shabby wooden tabletop<\/a> <\/div> <\/div> <\/div>
\"Helicopter
Helicopter Texture<\/a> <\/div> <\/div> <\/div> <\/div> <\/div>\n

It just seemed boring, and it was really hard to find textures that both worked as full-size background images and had enough contrast to make the logo highly readable. This concept was abandoned early one, which bummed me out, because I was really excited about it.<\/p>\n

Website Direction #2: contemporary real-life photograpy<\/h4>\n

I briefly considered using stock images of the military. The first problem I ran into was one of diversity: a search for women in the military disappointingly turned up either nurses, military wives welcoming their husbands home, or semi-naked fantasies holding big guns. There were very few photos of regular women serving their country.<\/p>\n

\"Close
Close up of young soldier in military uniform<\/a> <\/div> <\/div> <\/div>
\"Thoughtful
Thoughtful african american soldier<\/a> <\/div> <\/div>
\"Soldier
Soldier men standing against field background<\/a> <\/div> <\/div> <\/div> <\/div>
\"Military
Military soldiers climbing rope<\/a> <\/div> <\/div> <\/div>
\"Army
Army parade – boots close-up<\/a> <\/div> <\/div> <\/div> <\/div> <\/div>\n

My wife also came into the room while I was working on this direction and said “No. You’re not designing a recruiting pamphlet. Start over.” Since my favorite art director never steers me wrong I trashed the comp and got ready to start over again.<\/p>\n

Website Direction #3: Historic<\/h4>\n

After two failed directions I was starting to sweat it. We really needed to get the website up, but nothing was really clicking. Nothing, that is, until I started looking through my Grandpa’s training manual. I was really inspired by small details we’ve lost in modern times: hand drawn logos and typography, single color printing and silkscreening, halftone patterns and the beautiful color and texture of aged paper.<\/p>\n

I love vintage designs, specifically WW2 Propaganda posters. But there was no way I was going to be ble to hand-pint and letter as many posters as I’d need in the time I had available. If I was going to go down this road, I’d need to find images that met three criteria:<\/p>\n

The image must be in the public domain<\/h5>\n

I didn’t want to infringe on anyone’s copyright, so everything needed to be in the Public Domain. Wikimedia really came to the rescue finding images that were available for use.<\/p>\n

The image must be as diverse as possible (which, admittedly, wasn’t a lot)<\/h5>\n

The 1940s weren’t exactly the most diverse time in America when it came to advertising. While I was able to find several images of women to help balance our gender diversity, there was a distinct lack of any people of color. In all of my searching I found one image featuring an African American man that was far too small to use.<\/p>\n

I also needed to make sure I did my research and limited my source material to Allies, and avoid any of the subtle racism (or not so subtle–jeez Louise can we be terrible) contained in a huge number of posters I came across in my research. I believe one image (“The Men Are Ready”)<\/em> is Canadian, but the rest were designed for an American audience.<\/p>\n

The image must be large enough to be used as a full-width website background (at least 1920px wide)<\/h5>\n

This was actually a lot harder than you’d link. There are so many gorgeous posters out there at 200 pixels wide. After several days of research I was able to compile a good variety of gender-balanced images that could be used:<\/p>\n

\"On
Enlist in the WAVES, U.S. Navy poster, 1943<\/a> <\/div> <\/div> <\/div>
\"Build
Build for your Navy Poster”><\/a> <\/div> <\/div> <\/div>
\"We
We Can Do It!<\/a> <\/div> <\/div> <\/div>
\"I
I Want You for US Army \/\/ Eybl, Plakatmuseum Wien\/Wikimedia Commons \/ CC BY-SA 4.0<\/a> <\/div> <\/div> <\/div> <\/div>
\"Victory
Victory Job Poster<\/a> <\/div> <\/div> <\/div>
\"The
The Men Are Ready via Collections Canada<\/a> <\/div> <\/div> <\/div> <\/div> <\/div>\n

Making it work<\/h4>\n

Because of the lack of available hi-res images I developed a more street-art method of displaying the images, by blowing out the contrast, printing them in one color, and distressing them to look like they were printed on an old press.<\/p>\n

I decided to juxtapose those vintage elements with the rough stencil type of the logo, using the WordPress logo, the WordCamp San Diego logo, and a “Community. Core. Commits” tagline that riffs on the old “Duty. Honor. Commitment” brand used by the U.S. Army.<\/p>\n

Here are the final graphics developed for the site (and eventually signage) using the images above:<\/p>\n