Overview
Guidelines
When using illustrations within the Iterable UI, consider these key aspects:
- Brand Consistency: Ensure your illustrations align with your Iterable's style, color palette, and overall aesthetic to maintain a cohesive look and feel. Reference other illustration examples for color and aesthetic consistency.
- Simplicity and Clarity: Keep illustrations simple and focused. Overly complex images can be distracting and may confuse the message you're trying to convey.
- Cultural Sensitivity: Be aware of cultural differences and ensure your illustrations are inclusive and respectful to all users.
- Purpose and Relevance: Each illustration should have a clear purpose and be relevant to the content or action it is associated with.
- Emotion and Tone: Consider the emotional impact of your illustrations. They should match the tone of your message, whether it's serious, playful, informative, etc.
Remember, the goal is to enhance the user interface without overwhelming it, making sure the illustrations serve a functional and aesthetic purpose.
While not a hard rule, opting out of using human illustrations can enhance inclusivity, as it avoids potential issues with diversity representation and cultural sensitivity. It also ensures focus on functionality and message clarity, maintains brand consistency, and offers a timeless design less susceptible to changing trends. This approach simplifies the design process and caters to a broader audience.
Illustration types
Different illustrations should be used based on the context and placement of the illustration. While there are some predefined illustration types that help convey a particular state, some illustrations may be limited to a specific product area.
Empty states
Use when a part of an interface currently has no content but will be populated later. It's a temporary situation arising from marketer actions, like clearing data, or returning a query with no results. It can be paired with a prompt to add or create content.
Error states
Error states arise when something goes wrong, like a broken link or a failed action. It informs the user about the issue and ideally provides guidance or solutions to resolve the problem. Error states are critical for maintaining a smooth user experience even when errors occur.
Zero states
This refers to the initial view of a feature or product when a marketer first encounters it, with no data or actions taken yet. It's important for onboarding and helps guide new marketers on how to interact with the feature.
Other
These illustrations are product-specific and shouldn't be used out of their intended placement or context.
Template editors
