The process behind the new ConvertKit illustration system

publishedabout 2 months ago
4 min read

Do you have illustration skills, Reader?

Creating a versatile set of illustrations from a defined set of styles is a game-changer for leveling up a brand. And, until recently, I'm ashamed to say we didn't have this at ConvertKit. 😬

In this issue, I'll be sharing:

✨ How we defined our brand illustration style and set up a system in Figma for both product and brand designers to pull from.

✨ A worksheet to help you reflect on where you're at in your design career

✨ And a beautifully designed landing page as some inspiration!

​

​

Creating an illustration system

Heads up: if you prefer to watch/listen rather than read, check out this video where I walk through the process and the new system!

Our illustrations across our marketing assets and product were quite the mix of styles.

With no clear guidelines defined, each designer was free to interpret the brand in their own way, and as you can see above that leads to a range of different styles that don't all match.

I knew that as Creative Director it was my job to fix this! While I know my way around a pen tool and have created many illustrations out of necessity during my career, I don't consider myself an illustrator. So for this project I art directed the talented Hollie Arnett.

We approached the project in four main steps: defining our direction, exploration, refining and then creating components.

Step one: The moodboard

First, I spent time defining the direction we wanted to aim for. I gathered inspiration from various sources and created a moodboard to help guide us on a loose, sketchnote style that wasn't too cute or detailed.

This step was crucial in ensuring that the Brand Studio team, product team and our CEO were all on the same page and had a clear understanding of the overall vision for the illustration system.

Step two: Exploring!

Next, we began the exploration phase. We already knew we wanted the illustration to be hand-drawn, but Hollie experimented with tons of different styles and techniques, trying out different Procreate brushes and ways of using color.

We spent a long time in this phase, and let's just say the Figma page these explorations live on is a little slow to load πŸ˜…

Step three: Decision making

We settled on 3 levels of illustration, depending on the use-case. Each with their own style rules.

Level 3 is our detailed illustration that's the main visual on a page.

Level 2 is smaller and might appear alongside other illustrations, but still needs to be a strong visual that communicates a concept

Then level 1 are our smallest illustrations, intended to be only a bit bigger than an icon and acting as a visual anchor for text

Step four: Creating components

Finally, I created components in Figma from the ten illustrations we have completed so far. Each illustration has the 3 levels as variants, and a property that changes the watercolor shade depending on what background it's placed on.

For a full walkthrough of the component setup and more details on the styles, check out the latest episode in my design system series!

video preview

The collaboration across brand and product teams for this project was such a great experience, and I'm so proud of the illustration system we created. Our next steps are to keep building out the system with even more illustrations, and we're also working on setting up the components to have more colorway options. Stay tuned to the design system series for future updates!

​

​

Feeling stuck in your design career?

Are you feeling unsure if you're on the right track in your career? Do you want to make sure your job aligns with your dream career? If you answered yes, then I've got something that can help you.

The Design Career Checkpoint worksheet contains questions you can ask yourself to reflect on your current job situation and career aspirations.

It's a free download that you can use at your own pace to check in on your alignment every 6 to 12 months. It won't give you the answers to your career conundrum, but hopefully it'll help you find them for yourself! Download the worksheet and if you want to work through it alongside me you can watch this video below – where I fill it out for myself as I guide you through it.

video preview

​

​

Landing page inspiration

When Dann Petty praises a website design, I click through to it instantly!

twitter profile avatar
DANNΒ©
Twitter Logo
Twitter Logo
@DannPetty
April 11th 2023
7
Retweets
219
Likes

​Check out the Klack website for yourself here to play with the interactions. Do you agree with Dann's assessment?

​

​

I spent Easter weekend in the mountains in Chamonix!

It had been a while since I'd seen snow, so it was fun to ride up cable cars and spend time looking at the beautiful French Alps.

Hope you have a good week ahead. May your pixels align to the grid and your coffee stay hot.

​

If you enjoyed this issue, click the heart to let me know!

β€‹πŸ’œβ€‹

Marketing Design Dispatch

Join 15,000+ creatives receiving insider insights about brand and marketing design – featuring landing page and rebrand breakdowns, useful career content, and a behind-the-scenes look at running a Brand Studio team in tech.

Read more from Marketing Design Dispatch