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.
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?
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.