Illustration
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.
Usage guidelines
- 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
Best practices
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 BannerCallout, BannerSlim or Toast. Learn more about available messaging components
Accessibility
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.
Size
Status
Empty
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.
Success
Display when something goes right. Used for success or celebration moments that are more permanent or long-lasting.
Error
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.
Loading
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
Mobile
Web
Future updates
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.
Related
Iconography
Our iconography system provides symbolic representations of elements within an interface.
Messaging
Messaging patterns detail how we communicate errors, warnings, successes, recommendations and general information on system status.
Brand expression
Brand expression in the product the combination of visual elements (colors, typography, photography, motion, and other assets) to provide a delightful experience for Pinners.