At the 2017 PEERS Conference, I floated the idea of updating the installer illustration for Craft CMS 3 to the head honcho and resident genius at Pixel & Tonic, Mr. Brandon Kelly. In addition to the fact that his karaoke skills will instantly remind you of an angrier, out-of-tune Henry Rollins from Black Flag, he's also a fan of good-ish drawering skills. I'd illustrated the installer screen for Craft CMS 1 years ago and it seemed to me that the impending release of the biggest update to his flagship product might be the perfect opportunity to update the installer artwork. A few months later, Brandon gave me a call. 

What is Craft?

Craft is a ground-breaking content management system used by web developers around the world to build highly complex custom websites that are easy for their clients to manage.

This artwork was created for the installer tool that installs an instance of Craft on a web server.

Final Illustration

Concept

He and his team wanted to explore the idea of "inclusivity" without getting too far into the weeds about how to broach a very touchy topic visually and do so without offending anyone. Through our discussions, we eventually landed on the idea of exploring inclusivity through the locations where Craft CMS is being used around the world—A “geo” theme incorporating people on computers and local landmarks. The problem was that incorporating any people at all still brought up the specter of dealing with race and gender and all the baggage that comes along with that topic. It needed to be avoided like Coldplay.

The question was how?

The initial idea was to drop any reference to people and focus on landmarks from countries around the world which would have been interesting, but I reasoned that the resulting illustration would have felt more like a travel advertisement than a representation of Craft. The team agreed.

I expanded on the idea exponentially by including famous landmarks, mythical beasts and creatures from folklore, icons, foods, and representative objects from specific countries. You'll also find a random assortment of web and nerd references to help round out the illustration for the tech crowd.

The resulting piece is straight-up fun and successfully represents "inclusivity" (without stepping on any social land mines), pop culture, local culture, and technology. 

Process

In the sketches below, you can see all three steps in my process beginning with drawing shapes on tracing paper with a thick marker. Step two is a rough pencil sketch and, finally, cleaning up the line with a tight rendering. For this project, after the concept sketch was approved, the final rendering was done digitally using an iPad with Procreate as well as a Cintiq with Photoshop.

Concept and style sketch for client approval

All of the objects were drawn individually, separated into layers, and arranged and rearranged and rearranged again until I was happy with the layout.

The final illustration includes a dotted line to help draw the viewers eye around and through all of the objects, creating a feeling of discovery and adventure.

Variations

I created three versions of the center area that literally plug into an open space to accommodate different potential uses: 

In all, twenty-three countries and locations are represented (objects vary based on center art):

  • NYC - Lady Liberty, pizza

  • PNW (Seattle, Portland, Bend) - Sasquatch, pint glass, hop bud

  • SF - San Francisco is a city

  • UK - London Bridge

  • Germany - pretzel, brat on fork, beer

  • India - Airavata

  • Australia - Rainbow Serpent, boomarang

  • South Africa - flower with mountain graphic from national symbol

  • Canada eh - bacon, hockey stick

  • France - Eiffel Tower

  • Netherlands - wooden shoe, tulips, cheese

  • China - Chinese dragon

  • Spain - bull, olives, tomato

  • Singapore - lion fish

  • Japan - Kasa Obake, koi

  • Indonesia - flower, palm tree

  • Ireland - shamrock, pint glass

  • Norway - Viking helmet

  • Poland - brat, beer, bull (nothing unique about Poland's symbology)

  • Russia - Baba Yaga

  • Italy - wine bottle, wine glasses, olives, grapes

  • Saudi Arabia - dual swords from national symbol

  • Middle East - Bahamut

  • Nerds - Starship Enterprise, propeller beanie, alien ship

  • Bunch of other random and tech/web-related stuff

I had a blast creating this piece and it’s pretty cool to think that every single person who has installed an instance of Craft CMS since 2017 has seen this illustration.