Create illustrations

Creating illustrations guidelines.

Principles

  1. Make sure that a similar illustration is not already in use.

  2. Use the illustration grid to ensure consistency with current icons.

  3. Make sure illustration works across different sizes.

  4. Design clean and simple forms using our shapes.

  5. Use flat shapes over 3d forms, depth can be added through the use of gradients.

  6. Use consistent gradients and colours. Do not use multiply when using opacity.

  7. Rounded corners should make icon feel friendly, not childish.

The illustration grid

We use a grid for icon creation to give consistency across our illustrations. Here are examples of the grid and basic shapes to show it's usage:

Grid

Grid - Vertical

Grid - Horizontal

Grid - Circle

Grid for creating illustrations

Grid with vertical highlight for creating illustrations

Grid with horizontal highlight for creating illustrations

Grid with circle highlight for creating illustrations

Colour

Illustrations use a set of three different gradients:

Gradient - Blue

Gradient usage - Blue

Gradient - Green

Gradient usage - Green

Gradient - Yellow

Gradient usage - Yellow

Highlights

Our illustrations use @white (#FFFFFF) to pull out details within the object.

Depth

Illustrations use @slate (#333f48) over half of the object in order to add depth.

Exporting illustrations

Once your illustrations are completed (and signed off!) they need to be made ready for development. Follow these steps to a happy developer:

  1. Check your gradients are not multiplied opacity.

  2. Select the icon and choose Object > Expand appearance.

  3. Check shapes have been turned to paths. Go to Object > Compound path > Make (you will need to do this for each individual shape separately).

  4. When you have completed this use the top menu select File > Export > Export for Screens > press the small cog (see below).

Exporting illustrations

Select SVG in the left hand panel > choose Inline Style in the Styling dropdown (see below).

Exporting illustrations

Cross browser compatibility issues

Unique id's

ie11 has issues displaying svgs if two or more svgs on a single page share the same id. Each id used on all svgs will need to be unique at a global level.

Older versions of Safari and Chrome on iOS do not render gradients when xlink:href and href attributes are used on linearGradients. These will need to be refactored so that they duplicate the gradients rather than link to them.

For example:

<defs>
<linearGradient id="svg-a" x1="31.44" x2="94.95" y1="-95" y2="15" gradientTransform="translate(0 120)" gradientUnits="userSpaceOnUse">
<stop offset=".37" stop-color="#005eb8"/>
<stop offset="1" stop-color="#003c71"/>
</linearGradient>
<linearGradient id="svg-b" x1="164.41" x2="62.4" y1="-173.62" y2="3.08" xlink:href="#svg-a"/>
</defs>

Will become:

Note: every attribute that does not exist on #svg-b will need to be copied over.

<defs>
<linearGradient id="svg-a" x1="31.44" x2="94.95" y1="-95" y2="15" gradientTransform="translate(0 120)" gradientUnits="userSpaceOnUse">
<stop offset=".37" stop-color="#005eb8"/>
<stop offset="1" stop-color="#003c71"/>
</linearGradient>
<linearGradient id="svg-b" x1="164.41" x2="62.4" y1="-173.62" y2="3.08" gradientTransform="translate(0 120)" gradientUnits="userSpaceOnUse">
<stop offset=".37" stop-color="#005eb8"/>
<stop offset="1" stop-color="#003c71"/>
</linearGradient>
</defs>

Super Saiyan level

The rendering of illustrations differs among different browsers (I'm looking at you Safari and IE).

View Page Source on Illustration SVG in browser inspector Exporting illustrations