How to design an illustration system
The value of product illustrations and how to create a scalable system.
Before we start talking about this amazing topic, we need to align some thoughts on what is illustration and how it can add value when designing our products.
Illustration is a tool of communication that helps to simplify complex ideas into clear messages; links concepts, capture feelings, and shapes the narrative in order to deliver effective messages. So it goes beyond decoration since it provides more context on the task the user just accomplished or tasks the user needs to take action in certain key moments while navigating our product.
It provides humanity and delightful moments to the product experience when communicating with the user. Having a unique style gives tone and personality that helps to position the brand in the user’s mind, and you as an illustrator can explore different approaches according to the intention to reflect the brand values.
Be mindful of using this resource and define the right moments. It is challenging because if the illustration is not adding value to certain moments, it will create more confusion and distraction than the original purpose to support the message on key moments where the user will need more understanding.
🛠 Designing for an open-source project
Open source illustrations accessible libraries designed by illustrators and designers. You can customize it to fit your needs. It provides different kinds of styles, tones, and formats such as PNG and SVG files that allow you to have better quality.
These open resources on the web are helping several people around the world to solve the illustration side of the product when they don’t have the resources to have an illustrator in-house or any illustration skills. Other potential use cases are writers or keynote speakers.
I had the opportunity to contribute to the open-source project called @blush.design as an Illustrator with The Munchies collection, and I want to share the process with you.
Defining the illustration style is not easy, there are some things you need to consider when making these decisions like the tone and the personality of your illustration set to differentiate from other products. Think of illustrations as a system and when the user will use these illustrations to add value to its product experience? What are the potential scenarios? What kind of industry are you focus on? And what are the principles of your system?
📝 List of potential scenarios:
- Onboarding flows
- Success screens
- Error states
- Empty states
- Loading states
- Landing pages
- Email campaigns
- Integrated campaigns (Ads, GDNs, Instagram, Facebook, etc)
Here are some principles that helped me to create the system:
- Flexible, It needs to be flexible enough to adapt to different sizes to fit different formats and channels such as social media or product screens.
- Scalable: Internal teams should be able to contribute to the system by creating illustrations based on the style and guidelines. It should be easy to use and updated when needed.
- Customizable: Provide options for different states of use, for example, different background colors, textures, or shapes. Color skins that embrace diversity and inclusivity if you are designing people and different color palette combinations to mix the elements.
- Consistent: Provide guidelines, rules, and a limited color palette.
💡 Have fun exploring options
Exploration is great to define the right path for your illustration style and topic. I tried different ideas and I decided to focus on the food industry, this illustration would help any food-oriented business/project that wants to have a delightful food collection.
I started brainstorming different categories such as dishes, desserts, sides, and drinks that came to my mind, and then I started exploring shapes and expressions. I called it The Munchies collection.
Once the category lines had been defined, I started thinking about the modular system concept to have a better understanding of how I would like to combine these elements of the component and what I will need to explore deeper. For example the style of the bowls or the glasses.
A systematic approach is necessary to think in the long-term on how this system would scale, that’s why color combinations are crucial. These should be pleasing and should have enough contrast. Determine a limited color palette to support the consistent principle, this will lean to unity and harmony. Light color backgrounds help to contrast the illustration from the background and balance the vibrant color from the elements, we want the user to focus on the illustration and the message so the background should not draw too much attention.
Tools and Specs
Illustrations format: SVG or PNG
Color mode: RGB
If you want to be able to have different sizes and formats, generate SVGs as source files due to PNGs have size and quality constraints. This will also make easy to migrate files to Figma or Sketch.
In order to create the components you can use Sketch or Figma, both are really good at it. Follow these steps to set up your files.
You need to add your assets in separate Artboards (Sketch)or Frames (Figma). Each illustration should be separated by layers, one for outlines and another one for color fills.
Every time you create a symbol or component you will see how the Artboard of Frame label changes the color to purple.
👉🏽 Sketch: Select the Artboard and create a symbol
👉🏽Figma: Select the Frame and create a component ❖
Make sure to update the name of the symbol with the naming convention label explained in the next step.
3. Naming conventions
Follow the naming conventions guidelines in order to set up properly the symbols and components. This makes objects easier to find and can signal the object’s type. In this example, I created symbols of all the dishes, all the beverages, and all the backgrounds. In the image below, the Hot Dog and the Pancakes are under the category of Dishes. So the name convention should be Dishes/Hot Dog and Dishes/Pancakes.
Create symbols of all your illustrations. In the background scenario, I have 2 different shapes circles and bubbles meaning that my name convention should be Backgrounds/circle/color and Background/bubble/color.
4. Create a Master component
We need to generate Nested symbols to create a Master component artboard. This is very convenient because it gives you the ability to manage your symbols across an indefinite number of artboards from a single source. To do that place it in the new Artboard called Master your symbols in the order you want to be the illustrations to be overlapped. Once you do that select the entire Artboard and Create a symbol of it. I called it Master/Food.
Once you have a master component as a symbol you will see how the symbol's properties are now showing all the nested components in it. It should look like this.