It’s always nice to find street art in a neighborhood filled with high end art galleries. A good sized stencil piece tucked inside a loading dock reminiscent in subject matter of that other famous, shall not be identified street artist. Plus, the bonus of people being moved enough by it to contribute their own messages.

Chelsea, Manhattan.

I feel like I know this dog. He’s patient. She’s kind. The illustration is simple and emotive. The thick white border is a sign of an experienced hand. It’s not easy to make minimal be immediately recognizable.

Midtown, Manhattan.

A quick illustration with flair and a signature the gives off a vintage vibe. It’s kind of like a modern day Zorro just happened to walk by, win a duel and then slash his message across this pillar. And it looks like The Feather has done it before. There’s a hint of the old tag erased or painted over. But you can’t stop The Feather! (Ping when the TV series starts. I’m in.)

Cotswalds, England

A lovely illustration of a hare sitting in the grass found in a unlikely place. This tree stump was found under an ancient gazebo, quite out of context and unexpected. There’s a bit of condemnation in the eyes that also speaks to the context. A cut down tree with cracks separating the rabbit from it’s natural environment, just as we separate ourselves from the environment, just as we can’t hear the rabbits, just as we cut and crack ourselves.

Cotswalds, England

A bit of hand painted fun I found on the bottom of a light post. Eyes closed, big nose and a sly smile reminiscent of the Amazon logo. Maybe that smile is a nod to the Amazon logo. Better yet, perhaps it reflects the feeling of escaping from Amazon.

West Side, Manhattan.

Revisiting an old project to create a showcase for the illustrations.

FYI: Here’s the original blog post about the project.

As I build out single page sites for projects, both new and old, I remembered this emoji icon set was only really hosted over on Codepen. Yes, you could download the icon set from the original blog post and yes, you could even see the animation inline via a video or the Codepen embed, but it wasn’t exactly a showcase. I really like having these little single page projects, so naturally, this one deserved the same treatment.

View the project showcase.

Design

Color scheme is still using the Flexoki palette I’ve been obsessed with, but scaled back to be very minimal. The key color update was to adjust the icons themselves. The originals were in pure black and white. For the showcase, I removed the white backgrounds to let the warmer, paper tones through as well as adjusting the blacks to be a bit softer.

Fonts are inspired from the main site and the blog, so DIN 2014 for the body copy (condensed) and Titillium Web – Black for the headings.

The layout is also fairly true to the setup of these other projects, but with a couple of updates. I removed the main site link text subhead from the header and instead, dropped in my logo (with main site link) into the footer. This was one of those, “now that you see it, it’s the obvious solution” moments. Of course, the main site link should be in the footer and of course it should be via the logo.

Development

Nothing dramatic in terms of the layout as again the CSS grid sets up all the responsive container items. There are a few updates to the original emoji CSS as well as some new ideas incorporated. One interesting little bug was discovering that the CSS for the responsive positioning within each emoji was conflicting with the page CSS grid. At certain breakpoints, the emojis were busting out of their grid containers. Adding a couple of media queries to reduce the CSS variable used for the emoji sizing units seems to have cured the issue, but honestly, I didn’t spend a ton of time obsessing over breakpoints. I checked a few sizes based on Macbook viewports (from the awesome screensiz.es) and then moved along. It allowed me to take care of a dev chore I’ve been putting off — adding those custom viewport sizes to my Firefox dev tools. A little gift to future me when debugging sites and needing to see additional viewport sizes.

I also realized that the original animations were all set to only play once on page load. That was fine for the Codepen, but on this new page layout, the animations were often off screen meaning you might not even see the animation happen. Adding a replay icon button was a quick solution. It works great, but admittedly uses some hacky Javascript. There are definitely better ways to code it, but whatever, it works here. It also led me to learn more about the limitations of CSS animations and there’s certainly more to learn as I go forward.

The other development update circles back to the philosophy of “owning your content” which is the whole point of creating this single page in the first place. Yes, the original blog post did show some of the art, but the animated versions were all hosted on a third party service — Codepen. Now, even if you like the third party service (and I do like Codepen), there is always the chance the site will go down, get sold to venture capitalists or more recently, start stealing your content for AI. All of which are beyond my control and in the end, only serves to cause me future headaches.

Contrary to all of that of course, is the fact that I’ve also added the code to my Github account. Yes, another corporate third party site. As antithetical as that is, it doesn’t dilute or detract from the project page. It was really just an effort to start learning more about Github. I use it daily for work of course, but in a narrow fashion. Bulking up my personal Github account with more repos will (hopefully) get me to tinker and learn more about it. It’s definitely one of those powerful, yet opaque technologies.

All in all, I’m happy with the outcome and more importantly, glad to have it showcased here on my own site, in it’s own page.

View the project.

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