Drawing illustrations

Resources

Last updated: May 2018

The illustration style is an important extension of the overall brand. When creating new illustrations, follow the individual stylistic details as much as possible, so that they come together to form the overall look.

Unlike the iconography, applying these guidelines is slightly more subjective. In some instances a judgement will need to be made whether to follow them exactly, in order to succesfully execute the concept. The overall tone we are going for when creating these is fun and friendly, whilst reflecting the sports and competitive nature of the product.

Palette

The base pallete for illustrations is the extended FanDuel brand palette plus custom variations. Additional colors can be used to represent real world objects when it makes sense. However, be considerate of the existing palette, they need to work together. Think this is a color that isn’t a one off? Add it into the illustration specific palette.

Base

    • Blue Lighten 1
    • Green Lighten 1
    • Yellow
    • Orange Darken 1

Illustration specific

    • Illustration Teal
    • Illustration Navy
    • Illustration Navy Lighten
    • Illustration Blue
    • Illustration Grey
    • Skintone
    • Illustration Beige
    • Skintone
    • Illustration Brown
    • Wood/Baseball Bat
    • Illustration Brown 2'

Empty state specific

    • Empty State Blue Lighten 1
    • Empty State Blue
    • Empty State Blue Darken 1
    • Empty State Blue Darken 2
    • Empty State Blue Darken 3

Visual style

Tone and saturation

When choosing additional colors they should follow the same tone and saturation as the others. This is slightly subjective based on what sits right within the illustration. As a general rule if you choose a new color, select the top right color on the picker so it’s at it’s most vibrant, then adjust the Hue/Saturation settings to Saturation -20 and Lightness +16, this will get you somewhere close to the palette being used.

image

Detail level

Elements should be created in a simplified way. If you are trying to represent a person or an object try to simplify it down to the basic shapes first, then build additional shapes and shadows on top where necessary.

image

Contrast and color

Use flat colors for shapes, with further flat additional areas built on top, maintaining a high enough contrast between layered elements that they don’t bleed into one another or clash. Don’t use gradients in the colors, instead use defined shadows to convey depth and light/shade.

image

Shapes

Look at where the edges and corners occur in the object and try to accentuate this with angular shapes rather than rounding them. If the object uses a large curved edge perhaps break it down into multiple edges to maintain the blocky feel.

Do

Use sharp corners

Don't

Use rounded corners

Curves

Where the straight edges occur in the shape, if possible aim to use slight curves on these. This will soften up the harsh angular treatment and tie in more with the curves of the new logo. This is not always doable or appropriate in which case use a straight edge, or in the case of a ball for example use a circle.

image

Strokes and outlines

For elements that require a stroke like the cage on the helmet, these should be done as thick strokes then converted to outlines. It’s difficult to put a stroke pt size on this as it’s proportional to the other objects in the scene but a good judgement is the helmet example below.

image

In some cases additional stroked lines can be used to create shines, like the light on a window. A guide would be to start with a 1pt stroke and scale up so the proportions match the van example below. The use of strokes like this may be removed going forward as it is slightly at odds with the rest of the overall style.

image

Shadows

Strong and defined shadows help to emphasise the angular style of the illustration and add depth. Use shadows sparingly for emphasis. In most cases a shadow should use a black element with 10% opacity.

image

Do

Use 10% opacity

Don't

Use 100% opacity

Speed detail

In situations where you want to represent speed or motion, additional detail and/or a shear effect can be used. To use the shear effect, once the illustration is created, group the whole arrangement and apply a horizontal shear effect in Illustrator. You can also add optional speed details to the left hand edge of the illustraion, but use this sparingly. This involves using 2 sharp triangle shapes in combination, a trailing one and a negative one which cuts into the shape.

image

Background style

Optional background elements can be used to add additional context and depth to a graphic. They use a different illustration style which affords the foreground element more prominence. Examples of this could be a background scene or abstracted UI elements. This style, while allowing for more detail should still be kept very simple.

image

image

Imagery

The visual concepts used should reinforce the message or state that the user is presented with. Illustrations should:

  • Be meaningful and simple
  • Be instructional and supportive
  • Tie in with our brand values
  • Use sports concepts where appropriate
  • Use abstracted UI elements where appropriate
  • Have an element of realism/avoid being too cartoony

Usage

It’s important to use illustration sparingly in the product and only where appropriate. Some common scenarios are:

  • Onboarding visuals
  • Supporting visuals
  • Explaining UI concepts
  • Empty and error states

Drawing guidelines

Creating document

Illustrations should be created in Adobe Illustrator. When creating a new document set units as pixels, 72ppi and RGB as the color mode, the last two being found under the advanced dropdown.

image

Drawing parts

Building out the shapes of the illustration can get complex pretty quickly. Once you have the shape of something done, it’s good to select all the parts and use the pathfinder tool to do a merge to join the shapes into one.

image

It’s good to keep the file as organised as possible. Once a component is done, group the related parts together and organise them together into a layer.

image

Saving

When an illustration is done group all elements and use a clipping path to remove any excess. Adjust the artboard size to fit the graphic, then flatten the transparancy by selecting the entire graphic and using Object > Flatten Transparency.

image

Finally save the illustration as an SVG in the Illustrations folder - /content/guidelines/illustrations - and add an asset entry to the Illustrations folder page.