Illustrations

Illustration is a dynamic method of communication that creates a meaningful connection between us 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

illustration-grid.png

  • Artwork is created at 2x for retina displays
  • Artwork is created for 4:3 (normal) or 16:9 (wide) aspect ratios
  • Document sizes are the following:
    • Small - 160x120, 160x90
    • Medium - 320x240, 320x180
    • Large - 640x480, 640x360
    • Extra-Large - 1024x768, 1024x576
  • 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)
illustration-grid-1.png illustration-grid-2.png
DO DON'T
Use multiples of 4 for all shapes. Allow shapes or spacing to be uneven.

Strokes

It’s important to create a visual experience that feels like RedmineUP, 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.

Stroke widths

  • 160x120, 160x90 - 1px
  • 240x180, 240x135 - 1.5px
  • 640x480, 640x360 - 4px
  • 1024x768, 1024x576 - 4px

Borders and fills

illustration-stroke-1.png illustration-stroke-2.png
DON'T DON'T
Create illustrations without strokes. 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

illustration-color-1-a.png illustration-color-1-b.png
DO DON'T
Create subtle shadows, hightlights and backgrounds. Use more than three color families in addition to Charcoal and Gray.

Grayscale

illustration-color-2-a.png illustration-color-2-b.png
DO DON'T
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
illustration-composition-1-a.png illustration-composition-1-b.png
DO DON'T
Create balanced and intuitive layouts. Use excessive detail.

Icons

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

MARKETING: SMALL
50x50
MARKETING: LARGE
100x100
APP: ONBOARDING
50x76
Was this article helpful? Yes  No
18 from 36 found this helpful