Component-based illustration using Sketch, Part 2: Concept & Design
In the previous article, we talked about the principles of illustration, style, characteristics and a short intro about the illustration components and usages.
Once we agree with those things, let’s move and dive into the concept and design process.
📒 Illustration Concepts
Before we decide what kind of illustration we will make. Here are some ways we need to do:
Step 1: Topic
Create some topic lists. This step gives a big picture of what we will create and helps us to determine the stories of the topic.
Define topic in 1 sentence (e.g. Something went wrong).
Step 2: Story
Create stories from each topic. Brainstorm together with the teams to find the most innovative ideas. Generate as many unique and distinct ideas as we can and convert ideas into stories.
Define the story in 1 or 2 sentences (e.g. Network experts are fixing the server).
Step 3: Component
Find the object in the illustration story and put it into the component list (e.g. Expert 1 (Man), Expert 2 (Man), Server, Server room as a background). Collect all the objects into component libraries.
This step keeps us focused on consistency and reminds us that our illustrations are component-based.
Step 4: Design Specs
Summarize the topics, stories, and components. Convert into the design specs to make designers easier to understand what they need to do. Here’s an example of the design specs:
✏️ Design Process
In this case, let’s take 1 topic and story from the above Illustration specification.
Topic : “Something went wrong”
Story:
- Network experts are fixing the server.
- A man and his girlfriend are repairing his car
Components:
- Expert 1 (Man), Expert 2 (Man), Server, Server room as a background.
- Man, Woman, Car, City as a background.
Let’s do it 💪
Step 1: Sketching
Take stories and draw ideas on paper. Work with teams together to draw and decide which ones will go into the next process.
Step 2: Designing Components
Design the required objects / illustrations of components one by one using Sketch and put them into component libraries.
- Components for story 1
- Story: Network experts are fixing the server.
- Components: Expert 1 (Man), Expert 2 (Man), Server, Server room as a background.
2. Components for story 2
- Story: A man and his girlfriend are repairing his car.
- Components: Man, Woman, Car, City as a background.
Step 3: Wrapping up
Use & combine each component into awesome artwork using Sketch based on the story of each topic.
When we have completed all the steps above. Let’s do homework 💪. Update and maintain all components regularly. Keep your component libraries easy to manage and make your life better 😁.
🧘🏻 Next article →
Component-based illustration using Sketch, Part 3: Update & Maintain The Component Library.
