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.
Simple illustrations rely on strong concepts to be effective. Avoid fluffy ideas by digging deeper, finding the substance and expressing the story.
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.
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)
Use multiples of 4 for all shapes.
Allow shapes or spacing to be uneven.
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
Round all corners.
Don't use straight corners or endcaps.
Borders and fills
Create illustrations without strokes.
Use multiple stroke widths.
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.
Create subtle shadows, hightlights and backgrounds.
Use more than three color families in addition to Charcoal and Gray.
Use only white or light (Gray 200-300) fills.
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
Create balanced and intuitive layouts.
Use excessive detail.
Help Scout icons are created in three sizes, small, medium and large. (Wide icons in product only)