Drift Design System
  • Welcome to Drift
  • Foundations
    • Logo & Logotype
    • Color
    • Typography
    • Iconography
    • Illustrations
    • Spacing
    • Elevation
  • Voice and Tone
    • Communication
    • Brand Personality
    • Voice
    • Tone
  • Components
    • Buttons
Powered by GitBook
On this page
  • ☝Principles of Good Illustration
  • 👨🏻‍🎨 Design Guidelines
  • 🧑🏻‍💻 Usage Guidelines
  • Exceptions

Was this helpful?

  1. Foundations

Illustrations

Zoom uses a precise illustration style to communicate directly with Zapper & Zoomers.

PreviousIconographyNextSpacing

Last updated 5 years ago

Was this helpful?

☝Principles of Good Illustration

Eliminate Use of words

Most of zoom user base prefer scanning as mode consumption of information our illustration must convey a message, narrative, or process.

Simplicity

Use the right amount of abstraction on the message, narrative or process you want to communicate to the user

Communication

It delivers a piece of useful information – always.

👨🏻‍🎨 Design Guidelines

Build from Neutral Colours

Embrace the Color Constraints

🧑🏻‍💻 Usage Guidelines

All the illustration in the design are directly exported from Zeplin

🤖Android

All illustration is used in WEBp format. SVG won't be used since not all versions of Android won't support gradients in illustrations. Make sure illustration for different screen density (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) is added to the app.

🍎iOS

All illustration is used in PNG format. SVG won't be used since not all versions of android won't support gradients in illustrations. Make sure illustration for different screen density (1x,2x,3x) is added to the app.

Exceptions

All images that is served dynamically from backend will in PNG format. These illustrations will be exported at it's highest resolution from Zeplin. ie 3x for iOS and xxxhdpi from Android.

Use neutral colours to set the context to illustration. Example neutral-coloured buildings in illustration put users in a context that it's happening outside. Use the to drive users to focus on the message we want to communicate..

Setting constraints in the creative process always will help you to focus on the message you want to convey. Most illustrations should have a balanced representation of colours from our . These colours are instantly recognisable and help keep our illustrations 'Zoom'

colour palette
Brand Colors