Illustrations bring meaning and emotion to otherwise simple layouts. They can add context, enhance information comprehension and add visual interest. Generally, illustrations should be used in conjunction with blocks of informative text.
- In support of a text block relating to the states: Empty, Error, Success and Loading
- In experiences that are full page or in alignment with blocks of informative content
- Without a purpose as a decorative element. Illustrations should always accompany content
- In an experience that competes with user content and Pins
Use illustrations at the recommended size.
Increase or shrink the size of illustrations past their prescribed size. If you need something smaller, consider using an icon.
Allow the illustrations to have plenty of surrounding white space.
Place illustrations on top of other elements such as images or text.
Use the correct illustration type in the correct context. For example, use a loading illustration for content about processing.
Change the color, line thickness or subject of the illustration.
Use illustrations in experiences that are full-page or in alignment with blocks of informative content.
Use illustrations to replace crucial or in-the-moment messaging patterns like Callout, SlimBanner or Toast. Learn more about available messaging components
Pair with text
Illustrations should always accompany content. Different cultures don’t always interpret illustrations in the same way. Accompanying content can help to add the appropriate context.
Include a title
Illustrations should include a title that describes the image. A title adds valuable information for low-vision or screen reader users.
Display when content is not currently available or is unable to load. For example, when a user is interacting with a card in a dashboard for the first time.
Display when something goes right. Used for success or celebration moments that are more permanent or long-lasting.
Display when something goes wrong or extra care should be taken. Used for moments that are more permanent/long-lasting, for example a 404 page. If the message is more critical or requires action, use an appropriate messaging component instead.
Display when information may take time to process or when keeping users informed on system status. If processing time is short and does not require the user to leave and return to the page, use the Spinnerinstead.
Illustration in use
Research and iteration
Gestalt plans to keep an eye on illustration use and design requests. As we gather data from designers and engineers, we will iterate on the illustration library to better serve a broad set of use cases.
Need an illustration?
If you are looking for a new illustration, please first check the existing set and make sure there isn’t something similar already in the library. If there is not an applicable illustration or if you have an idea for a new illustration:
Future collaboration model
If there is a signal that teams are interested in using illustration in a broader context, Gestalt will publish documentation on illustration creation and how to graduate an illustration into the system.
Our iconography system provides symbolic representations of elements within an interface.
Messaging patterns detail how we communicate errors, warnings, successes, recommendations and general information on system status.
Brand expression in the product the combination of visual elements (colors, typography, photography, motion, and other assets) to provide a delightful experience for Pinners.