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.

General tips

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.

Rounded Corners
Corners are not, by default, rounded. Rounded corners used only to better visually represent an object and should be whole numbers.

Gradients/Textures
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.

Do

Use the 80/20 Rule: 80% of the shapes are strokes and 20% of the shapes are fills.

Don't

Use around the same amount of strokes as fills. This creates boring and cluttered illustrations.

Do

Overlap elements to create a sense of movement.

Don't

Place shapes haphazardly. Really think about how these shapes work together.

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).

Do

Make sure stroke widths are whole numbers (typically 2pt, but can be 3pt for larger illustrations).

Don't

Use around the same amount of strokes as fills. Make the stroke width 1pt or a fraction of a whole number (ie. .75pt, 2.5pt, 3.735pt).

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.

Do

Use fills as emphasis to draw the viewers eye through the illustration.

Don't

Make the majority of the spot illustration have a fill behind

Do

Always offset fills down and to the right of the stroke shape they are offsetting.

Don't

Offset the fills in any other

Do

Offset the fills two times (2x) the stroke weight. So, if the stroke weight is 2pt the offset is 4px to the right and 4px down.

Do

Optically correct offset for irregular shapes. It doesn’t have to be 2x exactly. If the offset looks awkward, you can adjust it just as long as it looks like it’s a 2x offset.

Do

Make sure that fill shapes are arranged behind all strokes. This might involve “cutting” and adjusting some shapes.

Don't

Offset fill shapes at different distances. This creates an illustration that looks chaotic and unintentional.

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