Sprout utilizes both small “spot” illustrations and large “scene” illustrations for visual storytelling purposes across brand and product.
Illustration differs from icons and UI visuals in that it is used to tell a story, convey a mood, or utilize metaphor to make a complex idea clear and concise. We can use it across product, marketing and internal initiatives.
Snap to Pixel/Snap to Grid
When creating spot illustrations, shapes should always be on whole pixels on the grid in Illustrator. This will create SVGs with a much smaller file size (each vector coordinate will be a whole number). This also helps prevent the image from being distorted when the SVG file is optimized.
Do not, however, just apply “Align Selected Art to Pixel Grid” to every shape once you are done creating an illustration that hasn’t been build to be pixel perfect. This will alter coordinates and potentially make things, especially icons or logos, janky.
Corners are not, by default, rounded. Rounded corners used only to better visually represent an object and should be whole numbers.
At this point, we’re recommending that gradients and textures should be avoided on illustration, especially spot illustrations.
Spot illustration guidelines
Smaller and contained. Straight forward. Can still use simple metaphor but is more about showing emphatically what the paired content is telling you. No background scene, stands on own.
Who are these guidelines for?
These guidelines apply to our core brand and product spot illustrations—and are meant for all designers, both in product and brand/creative to be able to pick up and use across our properties.
Anatomy of a spot illustration
Composing spot illustrations
When creating spot illustrations, remember that these are designed to be concise and insightful. No need to make things overly elaborate or complex.
Strokes for spot illustrations
Stroked shapes are the dominant type of shape in spot illustrations, with fill shapes incorporated to strategically draw interest and attention to specific areas of the composition.
Strokes should generally be 2pt. Strokes can be larger, like 3pt, in specific circumstances where the final image is getting resized down (like Sprout Blog images).
Fills for spot illustrations
Fills play a supporting role in spot illustrations. They should enhance the spot illustration and draw focus. Make sure to avoid the tendency to use too many fills or make them large areas of the composition.
To offset or not offset fill shapes
If fills are free-standing (not the same shape as a stroked shape in front of it) they do not need to be offset and can be centered or placed wherever is aesthetically pleasant.
Color usage for spot illustrations
General Color Usage Guidelines
Fills and twinkles: -400 to -600 level brand colors
Fills and twinkles: -400 to -500 level brand colors
Fills and twinkles:
Background: -400, -500 level brand colors