Iconography & illustration

Adding character and understanding

At Redgate we use iconography and illustration everywhere. From notifications inside our products and 16x16 pixel icons in documentation, to laptop stickers and 10 feet tall exhibition stands.

Not only can iconography and illustration add character, create empathy, and grab your attention — but can also guide and speed up understanding.

Honeycomb product icons

Simple, readable, and understandable

The 4 key ingredients

  1. Size
  2. Proportion
  3. Detail
  4. Shapes

1. Size

Each icon is created in two core sizes, 16x16 and 24x24 pixels, from which other required icon sizes can be created.

For icons that could be used on touch screens, a minimum icon size of 24x24 pixels is recommended.

2. Proportion

Using the icon template guide helps get the correct proportions and padding. This creates balance between differently shaped icons when they sit together.

Icon templates with examples - available soon

3. Detail

Creating icons with the perfect amount of detail is difficult. Getting the perfect balance between simplicity and readability using just enough detail for each icon is key.

The amount of detail can differ depending on the icon. For example, the camera (snapshot) icon needs slightly more detail than an eye (show) icon to help it to be recognisable as a camera.

4. Shapes

Start with, and prioritize solid geometric shapes.

Use consistent line thicknesses (2px is preferred) and consistent corner radius (use 0.5, 1 and 2px).

Exception
It's fine to make slight exceptions if sticking to the guidelines compromises the readability of the icon.

Honeycomb illustrations

Simple, solid, and relatable

The 5 fundamentals

  1. A limited colour palette
  2. Solid, bold, geometric shapes
  3. The rounded line
  4. Just enough detail
  5. Treat as content

1. A limited colour palette

Only use colours from the Honeycomb colour palette. Using mostly red, white, black, and grey, with hints of blue, green, or orange.

Exception
When we need to use a skin tone in an illustration

2. Solid, bold, geometric shapes

Use solid geometric shapes in bold ways. This helps to reflect Redgate's simplicity and reliability.

Prioritize the Redgate database shape (right), it's an important part of Redgate's visual identity.

3. The rounded line

Using the rounded lines in illustrations can help soften the solid geometric shapes - they can add movement, and help give a more approachable feel.

Use sparingly
Don't create illustrations solely from the rounded lines, use them sparingly.

4. Just enough detail

Keep it simple, only use the details you need.

A great way of finding out if you need a certain detail is by deleting it. Is the illustration still understandable without the detail? Does it still support the message? Or is it more confusing without it?

5. Treat illustrations as content

Illustrations should have the same qualities we expect from our content, and in particular, our writing style.

  • Informative

    Illustrations should support or provide useful or interesting information. Don't add an illustration just for the sake of it.

  • Clear and concise

    Get straight to the point, don't confuse.

  • Brisk but not terse

    Speed up understanding or guide someone in taking an action quicker. Or help hold someone's interest for longer by breaking up content.

  • Incisive yet human

    Not a faceless machine. Use real objects, relatable situations, and people.

  • Serious but not pompous

    Avoid visual nonsense, the wacky, the ostentatious. Keep illustrations functional.