# Illustrations

## ☝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](https://zoomuxd.gitbook.io/drift/color#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](https://zoomuxd.gitbook.io/drift/foundations/color). 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zoomuxd.gitbook.io/drift/foundations/illustrations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.