At Blackhat2018

Every year, thousands of technically inclined minds descend on Las Vegas for Blackhat - the largest hacker conference in the world. I was there to support the team at F5Labs and check out how my artwork separated F5 Networks from the myriad of boring booth designs. 

Lawrenceburg Poster

When you receive an inquiry asking if you'd be interested in creating a Star Wars / Dukes of Hazzard mashup based on the original Star Wars poster for a renowned neighborhood theatre, the answer is an unequivocal "yes".

I created the poster art for an upcoming production of "Lawrenceburg" at Dad's Garage Theatre in Atlanta. The show runs from Sept. 7 through Oct. 13, 2018.

"Lawrenceburg" 2018 artwork

F5Labs Protecting Applications Report: Version 3

After three solid months of production, hundreds of hours, and many bleary-eyed nights this project can be unveiled. 


Original "Stack"

Project Stats

  • 2 complete cover concepts and illustrations (version 2)
  • 3 design layouts
  • 7 full page illustrations
  • 18 spot illustrations
  • 6 icons 
  • 4 page variations for stack 
  • 2 color variations
  • 16x9 web image
  • prepping dozens of artwork/files
  • many dozens of rounds of revisions for all of the above

Application Security Tiers and Attackers

Chapter & Section Artwork 

Introduction Layout and Design 

 Application Protection Report Cover Art

Application Protection Report Cover Art

The full report is available for download at F5.com >>

F5Labs Protecting Applications Report: Version 2

Sooner or later, if you create commercial art, you'll have your best work rejected by committee. It's part of the job. This is one of those projects. I'll be going back to the drawing board, but I wanted to share this work as is.  

I'm very proud of this solution – It represents some of the smartest conceptual work I've ever done.


The Project

I was tasked with "updating" the following graphic. This graphic is the foundational concept behind my client's entire business. In other words, it's been used to sell their services for years. 

Application Security Tiers

At first glance, there seems to be a lot of information being presented. What you don't see is any real clue describing what's happening. Without the assistance of paragraphs of text or a salesperson, the viewer is left to their own devices to derive any meaning.

The application "stack" is represented by icons that tell the viewer very little. And the accompanying text identifiers are equally amorphous.

You'll also note a variety of graphic elements that are meant to clue the viewer in to a larger idea, but all of these elements largely fail to create a cohesive visual narrative for anyone trying to decipher the graphic.  


My Solution

The solution I arrived at solves these issues — I created visual metaphors that accurately depict what literally happens at each tier. The simplicity of the imagery and design affords a viewer with no prior knowledge of the basic concepts a means of "creating" a narrative for themselves without the help of accompanying text. 

The "isometric" grid underlying this illustration helps create a plane for the tiers. I added flags at each level to help draw the users eye through the entire illustration. Once the basic art was created, I made a few slight adjustments to accommodate the text for the next two graphics. 

 Application Security Tiers Revisited

Application Security Tiers Revisited

After

Before

In layout

Overall, this is a highly successful piece. That it was a casualty of "committee" is just a consequence of opinion. It happens. 

Stay tuned for the next version. 

How was it created?: Craft CMS 3 Installer

Process is everything, even when drawing digitally. The Craft 3 Installer illustration was drawn entirely on an iPad using the Apple Pencil in Procreate

Procreate on iPad w/Apple Pencil

Pencil sketch

I plotted the general concept/layout by blocking in shapes on tracing paper using a fat blue marker. Once I had the general idea down, I took a photo of the page, imported it into Procreate and began drawing the individual shapes. 

In Procreate, I worked at approximately 2.5X the size of the final illustration to make sure the resolution would hold up for retina displays —This illustration measures: 28" x 14". 

Blocked in shapes for layout and detailed pencil sketching on tracing paper

Progress views

The following samples show the illustration in various stages of completion. One of the tradeoffs for the portability of the iPad as a drawing studio is layering. When I drew this piece, layers were limited to 15. In total, this illustration comprised at least 100 layers. In order to finish the illustration, I had to draw a quadrant, duplicate the file, collapse the previously drawn layers and start a new file with a fresh set of layers. In all, I saved out the file six times. The fourth image shows the variable content box and the dotted line — I pulled the illustration in to Adobe Illustrator to create the line, then in Procreate shifted around the individual images to accommodate the variable content area and the dotted line. Final tweaks to object placement were made in Photoshop.

I saved each version as a PSD and exported each to Dropbox or Airdropped the files for safe keeping and/or import into Adobe products. 

The finished illustration

Final illustration 

Working with the iPad

The iPad is a marvelous drawing tool. But it does lack some of the drawing power of a Cintiq or tablet-based computer. No, the iPad doesn't offer you the ability to work directly in Photoshop or Illustrator. And you shouldn't care. End of story. You'll figure out a process that works for you. No other drawing tool can match the feel of drawing that the iPad offers. And no other tablet is anywhere near as portable. 

Tips

  • Get a simple foldable stand (don't draw on a flat surface) you can easily carry with you. There are dozens of options. I'm using the Steklo stand and cut down the prongs that hold the iPad using a Dremel tool. 
  • Buy a finger cushion. The one you see on my pencil is by Ergo. Thank me later. 
  • Get a matte screen protector — the slight texture will provide enough resistance that it will feel like you are drawing on paper. 
  • I also use an artist's glove to help prevent goobering up the drawing surface — you can make one yourself. I'm lazy.

F5LABS THREAT ANALYSIS REPORT VOL 4: THINGBOT EVOLUTION

The latest latest illustration for F5 Labs IoT Report.

F5 IoT Report Cover: The Growth and Evolution of Thingbots Ensures Chaos

Concept

[From the report] "The world is just now catching onto how useful IoT devices are; the industry is in its startup phase just scratching the surface of its future potential. If you follow the “diffusion of innovations” theory, we haven’t yet crossed the chasm of IoT potential, or mainstream global market adoption. 

The cell phone is the only IoT device type that has hit the mainstream market with adoption rates past 50% of the global population. When the majority of the world is online, smart homes with dozens of internet enabled devices and smart cities will be everywhere instead of only in the hands of the early adopters. At that point, IoT thingbots could threaten global stability if we don’t start doing something about it now."

Full Version and Cover Version

 

Concept Sketch

Pencil drawing presented to F5 for concept approval.

Loryka Logo and Branding

In the words of owner and developer Justin Shattuck, Loryka is "a platform and data pipeline that allows researchers to gain insights into the attacks we see [on the web]." His platform is revolutionizing the web security industry and I was entrusted to help design a logo that captured the essence of his vision.

 
 Final Logo

Final Logo

 

The Concept

The name Loryka is derived from the word "lorica", which is a specific type of Roman armor that incorporated an overlapping lattice of metalwork. My initial attempts to design a logo took this concept head on. And failed. 

After a few more discussions with Justin, he described his business as "a company that is taking PH readings of the soil." He went on to describe a data tool that didn't just look at the forest, but looked into the forest through a microscope to see the smallest ant on a leaf. 

The Solution

After numerous versions, I hit upon the idea of incorporating a few different elements 1) a PH color scale 2) a diminishing circle of dots representing the "data" cycle of life and 3) slightly overlapping letters to hint at the idea of armor and "connection".

 Final Logo Sheet with variations 

Final Logo Sheet with variations 

F5 Holiday Tips One-pager

Revisions are a part of any job. And sometimes you wind up doing a few rounds of major edits to arrive at a solution that matches the changing vision of your client. This "quick" project went through four rounds of substantial revisions before the final piece was approved — a handy lesson in streamlining your process to make changes as painless as possible. 

 Approved One-pager

Approved One-pager

The evolution of this artwork

 Round 1

Round 1

 Round 2

Round 2

 Round 3

Round 3

 Round 4 - Approved illustration

Round 4 - Approved illustration

Craft CMS 3 Installer

Last year, 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. 

The Concept

Conceptually, 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 an equally touchy group of people (Please note: These are my words, not his ... But it's still 100% true. Deal with it). We eventually landed on the idea of exploring inclusivity through the locations where Craft CMS is being used around the world. Which, once again, 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 focus on landmarks from countries around the world which would have been interesting, but I concluded that the resulting illustration would have felt more like a travel advertisement than a representation of Craft.

After putting the concept through my brain's spin cycle, I expanded on the idea exponentially by including landmarks, mythical beasts and creatures from folklore, 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. 


Variations

I created three different versions of the center area that literally plug into the open space to accommodate 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 for Craft 3. It goes without saying that good people deserve good art. 

Thanks, Brandon and team Pixel & Tonic!