Join 17,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.
The process behind the new ConvertKit illustration system
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!
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.
Your design career checkpointA free worksheet to check in on how well your current job aligns with the direction you want to be moving in your design career.
|
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.
β
β
Landing page inspiration
When Dann Petty praises a website design, I click through to it instantly!
April 11th 2023
|
β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
by Charli Marie
Join 17,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.