> For the complete documentation index, see [llms.txt](https://zoomuxd.gitbook.io/drift/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zoomuxd.gitbook.io/drift/foundations/illustrations.md).

# Illustrations

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

## ☝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.

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzLuzMlIG2fgaTtKcAY%2F-LzMgXXSxmTjy5j-WeMw%2F8-1-1-Illustration-List.png?alt=media\&token=60666beb-a9d8-4ede-ba04-9f4b432cf5b6)

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzLuzMlIG2fgaTtKcAY%2F-LzMjxf8WiZlXbcTXG-u%2F8-1-2-Illustration-List-2.png?alt=media\&token=eb80139c-2028-418e-862f-b0c0110517c1)

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzMkvd62BaMXlHVMsDg%2F-LzMmVYp_U5KPQ7IVcyI%2F8-1-3-Illustration-List-3.png?alt=media\&token=f9c64f95-a2e5-49ae-bbe9-4c23e08173ea)

## 👨🏻‍🎨 Design Guidelines

**Build from Neutral Colours**

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 [Brand Colors](/drift/foundations/color.md#brand-colors) to drive users to focus on the message we want to communicate..

**Embrace the Color Constraints** 

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 [colour palette](/drift/foundations/color.md). These colours are instantly recognisable and help keep our illustrations 'Zoom'

## 🧑🏻‍💻 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.