Illustration guideline is created on 28 Feb 2018
Illustrations are communication tools that easily speak to users the intention of a product. It also helps to beautify our spaces with their lively presence. Which is why we create illustrations with these simple principles in mind:
- Be aspirational
- We incorporate storytelling into our illustrations to empower our users in finishing their goals during a certain task. At the same time, we motivate them to get to the next destination; whether it be in creating a new profile or in reviewing an old company.
- Be mindful
- We’re always mindful of our brand's identity throughout the platform and how we make the users feel when they are going through their tasks with us. We also try to be relatable via visuals with definitive ques from the recruitment industry itself.
- Be focused
- We always want our illustrations to only carry one message at a time. This gives it an impactful focal point which clearly tells the users what the illustration wants to convey. For that to happen, we always create illustrations around specific context.
Types of illustration
SEEK Asia illustrations can be broken down into several categories:
Screaming illustration (Hero)
Hero illustrations are used to tell stories and convey thoughtful ideas, so they are metaphorical and aspirational in nature. Hero illustrations are detailed and handcrafted with atmospheric elements that help enhance the interface. Hero illustrations are winks of emotion that recognise major events in the user's journey.
When to use: On-boarding, announcements, celebrations
Waving illustration (Spot)
Spot illustrations are more literal in expression than hero illustrations. The main object should be detailed, and background elements are kept in a minimal manner. We use spot illustrations to capture a specific progress in the user journey.
When to use: Empty pages, progress indicators
Whistling illustration (Assistant)
Assistant illustrations are subtle graphics that showcase more visual depth than icons. They are mainly used to support the copy and assist the user to perform a specific action. We use assistant illustrations for empty states and placeholders of a feature. We practice flat design and the graphics should be monochromatic in colour.
When to use: Empty states, placeholder, to assist a text-heavy scenario.
We use a visual loudness guide to systematically describe the illustrative style. Each style has a different “volume” corresponding to its intended visual prominence. This article highlights can help you understand the volume concept a little better. https://www.viget.com/articles/visual-loudness/.