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!
Work long enough with computers and you’re bound to lose some data. This project is a bit about reclaiming a lost set of illustrations as well as a chance to design and develop another custom web project.
The original illustrations were drawn back in San Francisco about 20 years ago. There somewhat generative and they’re somewhat true to the folded inkblot process of the original Rorschachtest with near perfect symmetry. As I recall, I was just playing around with some of the features in Adobe Illustrator allowing the application to spit out a shape based on my transformation inputs and then copying, flipping and combining the two halves. There was no commercial project or business goal. It was just for creative experimentation and learning. Once I created one, I really liked the final effect and went about creating some more to see what the partially random process would produce. There was something intriguing in the shapes and spiked angles that I really enjoyed. So I dropped them onto a large art board and printed them out on a sheet of 12″ x 18″ white paper.
The Illustrator file was dropped into some folder on a hard drive, never to be seen again. The page sat in a giant pile of test prints for twenty years.
The discovery
Flash forward through the decades and although I had kept the pile of test prints, they had been relegated to a box in storage. After buying a house, I finally had a chance to set up an office and studio which led to pulling out and digging through all sorts of ephemera from my design career — most notably for this story — a box of test prints.
Seeing the print of these illustrations once again brought back the original joy and inspiration. I quickly set off on a digital forensic search of various hard drives, ZIP archives, CDs and DVDs to look for the source file. Alas, as you may have gathered from the introduction, the file was not to be found. It may still exist, but I can’t find it and my patience for searching has been exhausted. There comes a point where you have to call off the search for the sake of moving ahead. Perhaps someday, an archivist (or intern) will meticulously sort and catalog all of the nonsense I’ve created.
The (re)discovery
With only a print and no digital file — and with the desire to do something with the illustrations — I went about the task of reviving them. I scanned them all at high resolution, converted them from raster to vector and then individually edited the paths to try to get as close the originals as I could. Now of course, there’s probably going to be some differences and some loss of detail in the translation process. It’s unfortunate, but not unexpected and overall, I’m happy with the results. Better to have a file I can work with.
But what to do with the illustrations now that they were back in digital form?
The project
Conceptually, they had always reminded me of inkblots from a Rorschach test, so that was really my frame of reference for presenting them on the web. I considered animating them all in a series, morphing them from one into another, but that approach, while attractive as a technical challenge, didn’t feel emotionally true to the inspiration.
A bit of luck and a bit of research really got the art direction and design for the page started. The luck came in the form of some type samples from the Letterform archive that came across my feed. The research led to the realization that the Rorschachtest and the Bauhaus were occurring at the same time — the 1920s. No self respecting designer can go through their career without a bit of study (and possibly reverence) for the Bauhaus, so it was a natural place to start in terms of the typography for this project. I love vintage paper and tons of texture and the faded red and black ink in the old print samples is just fantastic. The historical relationship between the two just made sense in terms of the design direction.
The development
The first step was to capture those faded colors into a web palette. A bit of sampling along with some trial and error and I had a good set of colors to work with. I set them as custom properties (variables) in the CSS to make them easier to work with during the initial design phase.
(I have no idea about the color names themselves. I think they were generated by the tool I was using and don’t really correlate to actual CSS color names. I left them in place out of laziness, but normally, I would have come up with my own, shorter names. The last color, “blk” is an example of how I would normally name color variables. As to why I used HSLA for some color values and RGBA for the last, again laziness. I should have cleaned it up, but…better to ship it out. And yes, I probably don’t need the alpha “A” in there for modern browsers, but I haven’t mentally made the switch as I write.)
For the typography, I wanted to go true vintage and see what actual Bauhaus type I could find. I stumbled upon Breite Grotesk from the Schelter & Giesecke type foundry which was an influence on the Bauhaus movement and thankfully, there was a remake from Nick Curtis that looked really great on the page.
For the page design, this was really a giant exploration of blend modes, masking, gradients and backgrounds albeit mostly without success.
Since the original ink blots were each on their own card, I wanted to try to replicate that experience. Adding a vertical scroll snap to the page allows for each to stand on it’s own.
scroll-snap-type: y mandatory;
For the page background itself, I wanted to try to mimic that old newspaper print seen in the Bauhaus examples. I started by setting a base background color and a large box shadow to darken the edges. I then included two background images — a vintage paper and a gritty texture — and set the blend mode for them to multiply which creates the effect. It’s not quite what I wanted (is it ever?), but it’s close enough.
It’s worth noting that the backgrounds stay fixed to the page and then the content then scrolls. It kind of ruins the effect, but it does help maintain a smooth experience. It’s a trade off. You get the same background for each card, but each card stands on it’s own — and without a break when you scroll. I didn’t want a new background to scroll into place with each card. Beyond the performance hit of loading 15 separate backgrounds, the hard line/difference between each background just bothered me.
For the large <h1> title, I wanted to try to add more texture within the characters. It’s an effect I’ve seen elsewhere and wanted to try out. Again, it was to fit with the art direction and the vintage feel of the old Bauhaus prints. Turns out it takes a bunch of techniques to create the effect.
At the base level, we’re setting the color of the text to transparent, using texture as a background, clipping the background to only the characters, applying a blend mode and then reducing the opacity just a tiny bit to try to match that vintage red print color. I know, I know. It’s sounds like a lot. But we’re not done!
At this point we’ve got a textured background that’s slightly see through, inside characters that have no color. The text itself is normal HTML. You can select it, but it’s not very visible. It’s does have texture though.
So…how do we get the color into the text? We use a pseudo class! We set the ::after property to contain the text — via a data attribute — and the color. Then add a bit of a blend mode and position it correctly and we’re all set.
Yeah, I know. It all sounds a bit much. Or a bit confusing. Or both. Please don’t get discouraged if you’re just starting out. It’s all about experimentation and tweaking little things to see how it works.
A few other tidbits in the design to explain, mostly about the exact thing I mention above — trial and error. For each of the inkblots I initially wanted to add a different background texture to make them appear more inky or watery. Sounded easy at first glance, but there were definitely tech challenges. The main idea was to use each inkblot SVG file as a mask for the watercolor texture file. This worked initially, but the SVG’s themselves were way more complex and often had multiple separate paths — meaning the code size exploded as I was essentially dropping the SVG code into the CSS as well as including it as a link on the page. I tried just using one of the SVG paths as the mask, but this looked odd as only one part of the inkblot had the texture and the others did not. So…I just paired back the opacity of each and added a tiny bit of blur via a CSS filter to give them the more vintage look.
I did take one little typographic liberty at the start. I wanted to use some sort of arrow to indicate visitors should scroll. But since the typeface didn’t have an arrow glyph, I repurposed a dagger glyph. It’s certainly not what the glyph was intended for, but it’s kind of neat and animating it wasn’t too hard. Again, I used a ::pseudo class to drop it into place and animated with CSS keyframes.
There’s more to the full CSS, but I’ve omitted the stuff that just handles things like margin or font choice.
Overall, it was good to get these illustrations to some sort of final resting place and to connect them, in some small way, with their inspiration. I’m a big fan of adding texture, so I’m sure I’ll revisit many of these techniques on other projects and continue to follow along as methods change and improve.
Also worth noting that these are just illustrations and should not be used for psychiatry. 🙂
Over the last few years, there’s been a lot of discussion in the web and design community about “owning your content.” Partly a backlash to the corporate platform takeover, partly a desire to actually create something unique. There’s a definite nostalgia for the early days of the internet when websites were a beautiful haphazard journey around the world into someone’s domain.
Platforms are great for ease of use, but little did we know about the harvesting and selling of our data. Not to mention the straight up fuckery around monetizing hatred and sowing discord. Don’t get me wrong, I’m as guilty as the rest of you in creating accounts on the big platforms. When they first came online, it was a arms race of FOMO as I tried to secure my preferred user name and join the communities where I thought I needed to be seen. I think this all happened in a gray area between where browsers, dial-up, web hosting, HTML, CSS and Javascript were all a little stagnant and confusing. Somewhere between the pages filled with purple visited links and the shiny perfect user interfaces provided by gated communities. Of course, Adobe Flash filled the void for those more design or technically minded, but it was still difficult, expensive and therefore beyond the average user. So the platforms flourished and we all flocked leaving our sites stagnant.
Now it seems we’re all remembering what we left behind. Or at least, dusting off our blogs and creating projects just because we can. Just because we want to. I’ve never gone so far as to ignore this blog despite my post volume fluctuating with the ups and downs of life (this is my 300th post!), but I certainly left behind the creation of pages and sites that were simply fun exercises. I think I got stuck in the delusion that every project, every idea needed a unique domain name when in reality, it just needed a folder on my hard drive, a directory on my web server. Not every idea needs to be a financial success nor a financial burden. Frankly, it’s been liberating to remember that time when I was creating and putting all manner of weird and wonderful web pages online. I’ll probably have to dig through old hard drives to find some of those ideas, if only to reminisce.
I’m not sure I was actively considering all the above when I started with my latest projects. I think it may have been that they didn’t fit into a traditional “blog post” nor did they fit into a “work portfolio”. Projects like creating a set of CSS colors based on a science fiction movie are hard to place. Same goes for creating a virtual bookcase. They’re really just for me, just for fun and no less valid than any other project! As an artist, it’s sometimes hard to remember the latter.
So how did we get back to this old symbology project?
I came across this beautiful typography project by another designer (hosted on one of those corporate platforms) which was also inspired by the Destiny video game. This got me a bit nostalgic and I started looking back at all the symbols I had previously drawn. What I realized was that, despite the blog post about the project and even including a video of the symbols in the post, the entire thing was hosted on my Instagram account. And by virtue of the nature of the platform, the individual pieces were now buried in the feed. You’re not really able to see them all as a whole. (Not to mention the issues of copyright with Instagram and surveillance capitalism in general.)
Feeling a bit re-inspired, I’ve gone back, grabbed all (or most) of the original drawings, prepped them and built out a single page with the project. In terms of development, it’s all fairly basic HTML and CSS using the <figure> element to hold each image saved as an SVG file. I added a bit of flair by including the Destiny logo and a game background image for the hero. There’s CSS grid for the responsive layout and a little return to top button via a bit of Javascript (which I think I need to update to perform better). The hardest part of the whole thing was probably writing ALT text for each image — both from a volume perspective (118 images) as well as from a content perspective (it’s hard to describe a symbol from a science fiction story).
The project is now available to view as a complete set with the bonus of not having the UI distractions nor the advertising of Instagram. All in all, I think it’s a much better experience and I’m happy to have it all in one, self hosted place.
There’s a natural ebb and flow to projects. An initial burst of inspiration creating momentum that slowly fades as the hard work and all too often, the insecurity sets in. This is one of those projects.
Originally drawn in 2017, it’s hard to recall the exact source of inspiration, but in hindsight, they seem a reaction to both the political landscape at the time as well as the sugar saturation of skeuomorphism in the standard emoji world. Like in my symbology project, these are a study in the reduction of the extraneous to reveal the core.
I think the other goal, given their simplicity, was always to animate them. The only question, and this is where the project ebb started, was how to best create the animation. And so, what started out as an excuse to learn new software applications — a tedious task which sucked any joy out of the project via frustration — led to stagnation. It was only recently when my web work sparked the idea of animating these via CSS. Now, there was still a ton of learning to do with this CSS only approach, but at least I had a stronger foundation having done it before with small things and these icons are in essence, a gr0up of small things.
Here’s a quick video demo of the animation.
And for those more inclined, here’s a Codepen with all the HTML/CSS.
It’s been a while since I last posted, what with the whole pandemic global crisis, but I came across a beat up old box this week and got inspired. The result? A simple razor blade icon in two styles, with a drop shadow (like on the original box) and without.
This week I’m taking a little time to (finally) write up a summary of an old personal illustration project from my Instagram feed.
The Background
Early on in my design career, I used the first hour of the day to draw something — everyday. As I was learning both about illustration and the software, I usually chose to recreate something I liked. Back in those days, it was probably one of the great promo illustrations from Charles S. Anderson for French Paper. These had a mid-century modern feel with a cartoon edge and some humor coupled with great details.
Flash forward many many years and I found myself doing less hands on illustration due both to career advancement and a lack of time (which were linked). Reminiscing on those early days, I wanted to get back to drawing without a brief, client or project — just drawing for my own sake. Luckily, I was able to take a sabbatical from work to relax and recharge which gave me all the time I needed. There was no real plan other than that — I was just going to start my day, everyday, with a coffee and an hour of drawing.
The Inspiration
As a science fiction fan who read too much and grew up with the first video games, it didn’t take me long to find inspiration. My wife and I had been playing a bunch of Destiny and I found myself, as I do in many situations, looking closely at the user interface details. Those little items that somehow bridge the gap between typography and iconography to communicate meaning. I’ve always been fascinated with this translation of symbol and meaning, so it’s no wonder I found myself working in design, branding and UI/UX. In video games, these small details help build the world while serving the dual purpose of being recognizable to the players with tangible, functional meaning. I also think that the nature of science fiction, the duality between science and fiction, is engaging for me. It’s unknown, new, futuristic, off world and yet paired with a level of precision and rigor which spurs my curiosity.
The Illustrations
Looking at all these details (and having worked with video game companies), I know how much work goes into everything, even things you think are simple or that most people gloss over — all of them are crafted. I wanted to understand what went into these drawings, the shapes and the lines. I set myself the task to pick out elements and to redraw them, but to reduce them to their most basic parts. It was sort of like trying to get to the core of their meaning by stripping away the game story and context. No fancy textures, renders or even gradients for that matter. Just the element in two or three flat colors, out of context and standing on it’s own. No explanation or description.
With the project outline in mind, the rest was fairly straightforward. It was just a matter of paying attention while playing, taking a quick screenshot and then using that as a reference for color and shape. Any Destiny player, will immediately recognize many of these symbols proving that even detached from their original art, story and context, their meaning still translates. And yet, there are also many that players wouldn’t have noticed — ones that they’ve probably seen a million times, but never focused on.
The first run was about a dozen symbols during my sabbatical and I found it immensely satisfying to study the symbol construction in terms of art while thinking on how they construed meaning. I don’t think I even published them to Instagram, but just stashed them away in a folder. Once back at work and with the daily grind pushing on my time, I put the project aside for a while as I got caught in other things.
But I found myself missing the simple, quick process of drawing each symbol, somehow capturing it’s meaning and essence through drawing it. I think it’s probably similar to learning how to write, when you first grab a pencil and start drawing letters. And the Destiny game itself did not stand still. It released new expansions which lured me back into playing. And that in turn, led me to revisit the project with new vigor. I drew every weekend and started posting them on my feed. I eventually put down my controller (for health reasons, not for any love lost for gaming) and the project sputtered to a halt. By that point though, I had drawn 121 symbols and was ready for a new challenge.
Overall, I’m happy with the project and how the illustrations turned out. I cringe at a few of them looking back, but there are many that I just absolutely adore as mysterious symbols. As I’ve described, it really speaks to my work in design, but coupled with the fun of science fiction and video games. It was great to have that commitment to the practice of making and that’s one of the best lessons that I’ve taken away from the project. The commitment to a schedule of production separated from outside forces. Do the work, have fun and do it regularly. And do it for yourself. This project had no recognition, no awards and nothing went viral. It stands as it is.
Finally, a big thanks to all the game artists and developers for all their hard work. Rest assured, we know it’s not easy, we’re out here, we’re fans and we’re inspired by the work you do.
I do love these artist created pop up street galleries (as evidenced by this previous post). Plenty of great stickers and illustrations. All it takes is one person to start and others will join in on the fun. I just wish there was a museum tombstone with artist’s names.
HEAVY DUTY — For Industrial Use Only