Process Breakdown: Designing an illustration series in 30 minutes

This isn’t a tutorial of how I designed an illustration series, but a real snapshot of my messy creative process.

After getting bored with client work and not having any ideas, I decided I wanted to take a little break to motivate myself and get back into loving design again. So, I started with a challenge and a rule: design a concept for an illustration series in 30 minutes and record yourself doing it.

An illustration series to me is a design idea or concept that can be defined once and then replicated a number of times with different variations by using a design system.

I designed this a few months back for fun

Above is an example where the system is the geometric “sketch pen effect”, Matter typography, and the colour palette you see. Once defined, it’s easy to scale up.

Moodboard + Concept

I wanted to prep a quick concept and moodboard for this series before I kick things off. The goal here was to just start and see where things take me, so I did what you’d expect: scrolled on Pinterest for 2 mins and pasted some images I liked at first glance

That’s it. I didn’t know how but I wanted to incorporate old school UI design into this series somehow. I also liked the images next to it where only one visual piece is highlighted in an otherwise bland background. Minimalism.

Design

The first thing I did was to recreate the inspo piece and design an old school UI layout. Below is my horrible exploration which I stopped after I realized something cool…

To get to the UI above, I realized I was going to need to add a bunch of copy. 2000s applications bloated their Login and dashboard screens with way too much useless legal content, and to get that for this design I went on Adobe’s Privacy Policy page and pasted in their entire policy on Figma.

copy here is from Adobe’s Privacy

And that sparked a cool idea. I liked the concept of having the entire series be linked to the boring, numbing legal copy instead of the old school app UI.

I explored having this weird contrast between the extremely serious legal copy paired / overlayed with bold, “free” sketches. It reminds me a bit of graffiti so I ran with it.

I played around with some more sketches, effects on the typography (you can see this on the first concept where the copy is zoomed + blurred), and adding shapes / comments on top the pages themselves.

I was having fun with this but this didn’t feel super cohesive to me. When I added the shape on the right side below, something clicked.

Isometric shapes, ascii art. This would be a super cool way to use these geometric shapes and bring them closer to the typographic style. Ascii art is literally text art and using that here would be a dope addition.

I found some isometric 3D shapes online, put them together as Ascii art, threw them into Figma, and annotated them with the sketch pen style from here and boom. We now have something cool.

From here, I had the concept nailed down and now was just doing a few variations to see how things play out

Final Result

Now we got this super cool and interesting illustration series that uses:

  • legal copy (agreements, contracts, notices)
  • overlayed with graffiti sketches
  • a single, strong shade of blue
  • ascii art
  • isometric 3D and 2D shapes

That’s all. A fun 30 minute design sprint that got me out of a rut.

If you liked this breakdown, lmk and I’ll try to do more. I want to share the BTS on some client projects and brand work so I’ll be sure to document that if it’s of any interest.

Originally published on Medium