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.
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.
- Blue Lighten 1
- Green Lighten 1
- Orange Darken 1
- Illustration Teal
- Illustration Navy
- Illustration Navy Lighten
- Illustration Blue
- Illustration Grey
- Illustration Beige
- Illustration Brown
- Wood/Baseball Bat
- Illustration Brown 2'
- Empty State Blue Lighten 1
- Empty State Blue
- Empty State Blue Darken 1
- Empty State Blue Darken 2
- Empty State Blue Darken 3
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.
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.
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.
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.
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.
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.
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.
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
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
5° 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.
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.
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
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
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.
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.
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.
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.
Finally save the illustration as an SVG in the Illustrations folder -
/content/guidelines/illustrations - and add an asset entry to the Illustrations folder page.