Symbology: Part Two

May 8, 2022

This is a follow up post to the original blog post. Go read it to learn the inspiration for the project.

View the new project page here.

A grid of squares, each an illustration of a symbol from the videogame Destiny

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.

View the new project page here.

War Sign

March 20, 2021

For a while now, as I’ve been working on symbols and icons, I’ve been thinking of opposites. The on/off icon switches we see throughout our digital lives. Am I on mute? Can you see my screen? These little yes/no binary icon changes to alert us in minuscule ways to our state of being. Each state is paired with it’s opposing force and we learn to recognize each as we build a library of shared acceptance. A common understanding if you will.

The concept of dualism as expressed by the yin and yang in ancient Chinese philosophy would say that each needs a counterpart in order to be whole. But there are symbols in our lives that do not seem to have an opposite and perhaps without both sides, we cannot have understanding. We’re only seeing one half of the picture.

This absence has always bugged me in particular around one symbol — the peace symbol. Now my annoyance probably has more to do with my nihilism and personal experiences than anything else. But coupled with a tendency to be a videogame completionist and being a designer, every time I see a peace sign, I wonder, where’s the war sign? Where’s the sign for those of us who see the dark?

Learning more about the origins of the peace symbol — probably via 99 Percent Invisible — finally gave me the push to create an opposing icon, a war sign to provide balance. Using the same flag semaphore base as the original, I’ve created a war sign.

war sign

The original peace sign uses the semaphore “N” and “D” for “nuclear disarmament” while this war sign uses the “N” and “W” for “nuclear war.” A grim thought, I know.

The peace sign was designed to express an element of despair while this war sign definitely has a more aggressive stance, even with the same “N” shape in place. Instead of drawing the eye down, it moves to the right and conjures an explosive element. It almost reminds me of the safety and hazard symbols used in science and transportation.

With the world at war for the last 20 years (or even longer depending on your framework) and the U.S. government continuing to keep the AUMF on the books so that it can declare war (without declaring war) any time it wants, we live in a time of war. Sadly, we need a symbol, a war sign. Perhaps with a symbol for both sides, we can gain an understanding of the whole and how each works in concert with the other.

Note: I’m certainly not promoting war. Don’t be silly. Quite the opposite in fact. I just think that denying war or keeping it invisible doesn’t work. Finally, despite a bit of intellectual meandering above, I’m realistic. This symbol will probably get used more by metal bands than anyone else. And I’m okay with that too.

You can download the war sign here.

The Symbology Project

April 11, 2020

 

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.

You can see them all in the video above or scroll through my Instagram feed to study them (and more) in detail.

Final Thoughts

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.

Altered Meaning

June 11, 2011

If there’s one thing I love, it’s history. For me, understanding history helps me feel grounded in the present and part of the larger picture as a whole. Now,  I’ve also been known to stop by a bar now and again. Combine the two and it’s pretty hard for me to resist. Couple these two with a unique story of typography and I’m a moth to the flame.

In New York, there’s no shortage of history and as you might imagine, there’s no shortage of historic bars. Some I’ve been to, some are still on my list. This is about one historic bar that also has a little typographic novelty.

New Yorker’s are resilient (as you might imagine) and have always been that way. The Ear Inn was built in 1817. The long and sordid tale of it’s decades as an unnamed sailor’s haunt perched on the edge of the Hudson River are better left for other times and better historians, but I do want to talk about it’s sign.

It’s sign, you see, is magnificent. It exemplifies both the resilient nature of New Yorkers and a wonderful grasp of typography.

In 1977 when new owners took over the bar, they were faced with two problems. The first? They had to actually name the bar. You see, it had mostly just been known as “bar” or “the Green Door” by the old sailors. And the second? The Landmark Commission. That’s one of the downsides of being historic. You’re protected from the vagaries of progress and as part of the deal you have to remain, well, historic. The Ear Inn had for many many years simply had a neon sign out front stating plainly, “bar”.  Removing or replacing the sign would mean going before the Landmark Commission which in it’s infinite wisdom works at a glacial pace.

As for the name, they decided to name it after the music magazine that inhabited the second floor. As for the sign, this is where the story gets creative. The solution? Just paint over the parts of the “B” in bar to create a sign that reads, “Ear”. True inspiration. Not many folks (outside of those who love typography) would look at the letter “B” and see the “E” hiding inside.

Ear Inn Sign 1

Ear Inn Sign 2

Of course, the Ear Inn can’t avoid progress completely – last time I visited, I spoke with a couple of old timers over some whiskey who were lamenting the fact that many of the regulars were dying off. They were worried not only about their friends and their own future, but what would become of the Ear Inn. A new condo has been built next door (which might help keep the Ear Inn standing upright) and the neighborhood is being gentrified.

A Tale of Two Cities

September 23, 2010

One of the earliest forms of graphic design in my mind is cartography. An elegant production of visual communication that has been refining itself since the dawn of man. Yeah, I like maps.

This past spring here in New York City, the MTA unveiled a new subway map, the first update of the map since 1998. And while the map has been reviewed in the press, as a designer, map lover and most importantly as a rider, I wanted to give my thoughts.

Old NYC Subway Map

The old subway map suffered from an overwhelming amount of information some of which was really unnecessary for most riders. For example, the bus information always was an annoyance to me. It’s always just served as clutter the map.

New NYC Subway Map

One striking thing about the new map is the decision to reduce the size of Staten Island in relation to the other boroughs. This allows the other boroughs — where most of the trains (and people) are — to be enlarged. Apparently, there was some uproar about this decision, but personally, I’m fine with it. Guess what? I’ve lived here six years and never met anyone from Staten Island. All the other boroughs? Yep, lots of people, lots of times. In fact, I’ve never even been out to Staten Island. Maybe someday I’ll go, but I’ll probably take the ferry. Reducing it’s prominence on the map — even if the geographic proportions are not accurate — is a good design decision.

A large portion of the distracting bus route information has also been removed which I whole-heartedly approve of. It allows the map to focus on it’s main goal — the subway system.

One thing I don’t like about the new map is the color change for the parks. They’re no longer a true green and are much more subtle than in the previous map. The colors of the parks and the surrounding city are so similar as to make the parks almost unnoticeable. While I like maps, I also like parks and since many of the viewers of this map are tourists, I would think the city would want to highlight the green spaces.

——————–
Update: I’ve noticed that the version of the new map that actually is posted in subway cars contains even less of the pop out bus information boxes making for a cleaner (and clearer) presentation.

The Debate Continues

September 1, 2010

The gaming site Kotaku has posted the entire Sony Move brochure I designed — every page. Maybe it’s some attempt to one-up IGN who posted just the comparison chart page last week. You can view the post here.

Again — they seem unable to work the scanner/copier as the pages aren’t even straight. Sigh. At least the comments are funny this time around.

In terms of the design — I wanted to create a new cover (like I did for the holiday brochure), but Sony ran out of time/budget and so we went with one based on another marketing brochure that Sony had developed internally. And although I did illustrate some of the elements (such as the line drawing of the Move controller), the action photos generating comments were provided as is by Sony.

Fueling Debate

August 30, 2010

A page from another Sony Move brochure I designed got picked up and posted online fueling a ton of comments from gamers on the Move motion controller. Over 600 comments and counting at this point. You can view the chart and join the fray here.

As a side note, it’s a little disappointing that IGN couldn’t be bothered to get a clean scan of the page. It looks like they used it as a napkin before scanning and posting it. It’s not a big deal for me (I know how the page should look), but as a “publisher” it shows a real lack of concern for quality (and therefore a disdain for their viewers).