Completing the Design Puzzle with Illustration Guidelines
Designing an interface around complex data or interactions may feel like endlessly optimizing tables, but the addition of illustrated assets has the power to punch up even the most monotonous of interfaces. Running the gamut from simple icon sets to full-blown colorful compositions, illustration reinforces brand and helps define the tone of your app’s overall experience.
Many designers, teams, and agencies now consider a design system a necessary product of the creative process (like Shopify, Atlassian, and WeWork), but their focus on interface components may only tell part of the story. Though these important documents do a great job accounting for various component states, they sometimes fall short in spelling out the dos and don’ts of illustrated assets. If the endgame is consistency across all aspects of your app, which *hint hint* it should be, illustration guidelines are an indispensable piece of the design puzzle. With the right guidelines, they serve as a safeguard against mismatched assets and provide a framework for future additions.
The illustration process is comprised of many moving parts: styles are assessed and experimented with, concepts are drafted and revised. Ultimately, the resulting illustrations are tested within layouts to ensure they hold up in a variety of scenarios. Through this process, the unique standards for a particular application’s approach begin to take shape.
What To Include
🎨 Color Palette
Color carries brand consistency. When documenting color options, I like to include both a primary and secondary color palette. The former generally consists of established brand colors and serves as a starting point for most illustrations. The latter offers complementary hues appropriate for instances where the primary palette falls short. Since the variety of options may need to widen down the road, adding notes on expansion and colors to avoid will be appreciated by future you or future designers.
While no magic number exists for the appropriate amount of colors to include, keep in mind that increased palette complexity leads to increased maintenance and greater potential for inconsistencies.
🌟 Tip: Including HSB values makes the process of choosing harmonious tints and shades much easier. Use a consistent Hue value while adjusting Saturation and Brightness to achieve your desired color.
🗣Tone Details
Tone refers to the general character or attitude of something, be it a place, a situation, a piece of writing, etc. Within an app, factors such as color (or lack thereof), typography, layout, and more come together to define the overall tone of the experience. When compiling illustration guidelines, setting standards for tone is just as necessary as usage examples. Is the tone playful, conservative, approachable, or educational? The list goes on. Whatever the tone, the illustrations should work to enhance this message, not compete with it. We wouldn’t want to make the mistake of pairing playful illustrations with content that deals with a serious topic such as adult cancer research and treatment. Yikes!
The two examples below demonstrate how the tone of an app can be influenced based on illustration style:
Both app designs deal with similar subject matter, yet the illustration choices result in each taking on a very different tone. The example on the left could be described as vibrant, youthful, and inviting while adjectives like mature, serious, and minimal more accurately describe the other. When compared, assumptions about the brand and the audiences they hope to cater to can be easily made.
A clearly defined tone will inform the approach taken when expanding your illustration library and ensure the message being sent is the correct one.
✅ Dos and 🚫 Don’ts
The dos and don’ts section offers more concrete direction related to what should and should not be done when tackling illustrations. Determining how detailed these rules should be is difficult, but remember, guidance > restriction. Successful guidelines empower creativity instead of stifling it. When compiling these guidelines, start with the biggest impact items: rules around styling, composition, and perspective will make or break consistency.
🤝 Usage Standards
While dos and don’ts outline specific rules for creating illustrated assets, usage guidelines focus on how illustrations should be implemented within the larger context of an interface’s design system. As the design process continues and illustrations are tested within layouts, informed decisions can be made about appropriate spacing, scale, and placement. Doing so can assist with situations where illustrations distract from or overpower important written content and vice versa.
Have some additional useful illustration guidelines you’d like to share? I’d love to hear them! Tweet me @_ayanacampbell 🙋🏾 and be sure to follow @envylabs on Twitter ✌️
