Illustration

Illustration is a dynamic method of communication that creates a meaningful connection between Help Scout and our customers.

We use this visual language to express our personality and befriend our customers even before they sign up, but also to add clarity to ideas and highlight important features. In an effort to maintain our personality and preserve brand strength, there are some guidelines to creating our illustrations.

Concept

Simple illustrations rely on strong concepts to be effective. Avoid fluffy ideas by digging deeper, finding the substance and expressing the story.

Structure

Illustrations stem from basic, geometric shapes. Simplicity should be a challenge, not a crutch. Straight lines and careful angles can create a delightfully intriguing composition.

Polish

The last 10% transforms good into great. Add depth with shadows and highlights. Everything in moderation: too much glam is noisy and distracting.


Scale & Grid

  • Artwork is created at 2x for retina displays
  • All spacing is determined by multiples of four
  • Shapes are created at dimensions of multiples of four (i.e. 60 x 24)
  • Spacing should be symmetrically consistent (i.e. object padding, vertical/horizontal relation, etc)
Help Scout logo - white

Do

Use multiples of 4 for all shapes.

Help Scout logo - white

Don't

Allow shapes or spacing to be uneven.


Strokes

It’s important to create a visual experience that feels like Help Scout, no matter where the user is on the site or in the app. Therefore, guidelines must be followed to ensure that the illustrations are stylistically cohesive.

  • All illustrations use strokes.
  • All strokes, without exception, should be 4 pixels.
  • All end caps, without exception, should be rounded.
  • All corners, without exception, should be rounded.

Corners & Endpoints

Help Scout logo - white

Do

Round all corners.

Help Scout logo - white

Don't

Don't use straight corners or endcaps.

Borders and fills

Help Scout logo - white

Don't

Create illustrations without strokes.

Help Scout logo - white

Don't

Use multiple stroke widths.


Color

Use your best judgement with color usage. Follow these guides to create balanced illustrations.

  • Always be subtle with background visuals and effects
  • Never create sharp contrasts when using shading/highlights
  • Avoid using more than three color families per composition
  • Always use Grey 800/500/300 strokes and white fills for grayscale illustrations.
  • NEVER use transparencies to create shades.

Full Color

Help Scout logo - white

Do

Create subtle shadows, hightlights and backgrounds.

Help Scout logo - white

Don't

Use more than three color families in addition to Charcoal and Gray.

Grayscale

Help Scout logo - white

Do

Use only white or light (Gray 200-300) fills.

Help Scout logo - white

Don't

Create strong shadows or dark fills.


Composition & Details

  • Create compositions that are dynamic and interesting, but most importantly, ones that clearly communicate the message.
  • Position the primary subject close to or in the center of the illustration
  • Ambient details should accentuate the subject, not distract from it.
  • Avoid both excessive detail and negative space (excluding background elements)
  • Ensure details are evenly distributed throughout the illustration
Help Scout logo - white

Do

Create balanced and intuitive layouts.

Help Scout logo - white

Don't

Use excessive detail.


Icons

Help Scout icons are created in three sizes, small, medium and large. (Wide icons in product only)

Help Scout logo - white

Marketing: Small

50x50

Help Scout logo - white

Marketing: Large

100x100

Help Scout logo - white

App: Onboarding

50x76