We collect illustration inspiration and reference material on Pinterest. Give it a look!
Streetmix illustrations use the following principles to achieve its simple, unique style.
Simplified forms and reduced details¶
The complexity of form is reduced to a simple silhouette and each object contains minimal details. Good rule of thumb: if you don’t need a particular detail to identify the item, don’t add it. This reduction helps each illustration scale to small sizes.
Nope. The extra details aren’t visible at a small scale and the more complicated silhouette makes the car look clunky.
Yes! This silhouette has less vertices, and extraneous details are removed or simplified.
Few orthogonal lines¶
There are very few entirely straight vertical lines. All of the objects slant in or out in a trapezoidal way, unless it makes the illustration look too funky.
Nope. Avoid rectangular shapes.
Yes! Shapes should be trapezoidal.
Lines that appear to be exactly vertical or horizontal will not actually be precisely level or plumb. This isn’t an engineering drawing. Lines can be slightly “off,” with some exceptions.
One example of such an exception is for building walls. Since buildings can be multi-story, lines that continue from one floor to the next must be vertically straight so that each floor aligns properly.
Shapes that recur throughout illustrations helps everything read as part of the same unified family. However, these should be subtle—don’t overdo these, or force them into existence. Use them when they make sense.
Some angled elements can be drawn at exactly 45 degrees. These work well for window reflections and shadows.
This is a simple trapezoidal shape of similar size and proportion that can be used as a small object, detail, or addition to a larger shape.
Similar to the Brick, the Platter is a trapezoidal shape but much longer and flatter.
Letters and words¶
Avoid using actual words or letters in illustrations. Streetmix is used all over the world, and we want to avoid making illustrations that are English-only (or specific to your preferred language).
One notable exception to this is the use of numbers or letters as transportation route identifiers.
Brands, logos, and other recognizable features¶
Similarly, avoid specific brands and logos, whether that’s commercial businesses (like transportation network companies or chain restaurants) or public agencies (like transportation agencies). However, some illustrations are clearly homages to actual elements that come from specific parts of the world, like New York City’s wayfinding pylons, or San Francisco’s deep-red “Yerba Buena” parklet. We like that these recognizable elements can be dropped anywhere around the world, but logos tie the elements to its regional source too strongly.
In the future…
…we may be able to relax these guidelines by localizing illustrations to specific regions. For now, prefer abstractions that make an illustration look generic, even if it’s an homage to a real place.
Colors are mostly soft, with hints of brightness. They should have sufficient contrast against a light–medium blue background (the sky).
Colors are not necessarily “true to life.” (For instance, we’re not using the “actual” color of a taillight.) Use colors from the following color palette whenever possible, instead of using custom colors, so that illustrations appear unified. But if the palette just doesn’t work, you may choose a new color that does. Some illustrations may have already chosen a color not shown below, so it’s best to sample colors that have already been used elsewhere, even if it’s not part of the official palette.
To keep people recognizable, use skin tone colors only for people.
Recommended for: walls, stucco, plaster, pavement, sand
Recommended for: walls, metal, concrete
Recommended for: foliage, trees, plants
Recommended for: wood, dirt
Recommended for: asphalt, metal, road markings
Recommend for: windows, reflective surfaces
Recommended for: water
Reds / Oranges¶
Recommended for: lights, flowers
Bright colors used sparingly when colors above won’t do.
Shadows and highlights¶
Many elements have one solid color with a highlight and a low light. Exceptions include objects with more details, like the bus. Because the bus contains detail elements (lights, windshield, mirrors, route number, etc), adding shading to the metal would make the object too busy. Similarly, details don’t need shadows or highlights—they wouldn’t be visible at a small scale anyway. All of the shading should be done with one solid color, without feathered shadows or gradients. (The only exception is the sky.)
Nope. The image is over–complicated by the number of shadows and highlights.
Yes! The shading and highlighting is used only on the most prominent element, the windshield.
Nope. This image uses gradients to blend out the shadows and highlights.
Yes! No gradients. No drop shadows.
Some illustrations are smaller in nature, so they require more contrast between adjacent colors to be clearer. For example, the pedestrian’s pants need more contrast than the building.
Nope. This looks good as a larger image, but the shadow is not really visible when scaled down.
Yes! This actually looks like too much contrast close up, but is just right when scaled down.
For instructions on how to work on illustrations, see the instructions in the illustrations repository: https://github.com/streetmix/illustrations
The illustrations used here in this documentation are also located in the
illustrations repository! If you want to update the graphics used here, please make sure to process the exported SVG files through SVGOMG so that they’re optimized, making them faster to load.
You can also see a collection of illustrations in our Reference library.