FY22-Q3 KR1: Audit current empty state illustrations
Audit all empty state illustrations to determine what elements are repeatable and where there are opportunities to empower designers to create their own unique empty state illustrations that are based on a library of reusable assets.
-
Audit all empty states in https://gitlab-org.gitlab.io/gitlab-svgs/illustrations (can also be referenced from Figma in https://www.figma.com/file/0DhXXlTakscLiHZLKuiJ6C/Illustration-library). -
Create a list of repeating themes, sizes, and elements that could be leveraged to create an illustration library.
Proposed state
- Use a common grid to layout the illustration — one for large and one for medium (no small identified as empty states in the current illustration library).
- Have a consistent focal-point. Leverage the grid and some keylines to help with object placement.
- Use a consistent color palette for the focal-point element(s).
- Establish guides on when to create a more custom illustration, and when to leverage something that's multi-purpose or more generic. For example, a more custom illustration could be created with a combination of new and existing assets for a new feature or one that isn't enabled, while an empty data state or configuration needed could always use the same asset.
Repeating themes
- New feature
- Upgrade
- Not configured
- No data
Sizes
- Large
- Medium
- Small (new)
Elements
- Ellipses to contain icons or graphics.
- Dashed connectors to establish relationships.
- Shapes to represent placeholder content.
- Small reusable illustrations. For example, to consistently represent no data or needs configuration.
- More TBD after starting to build this out.
Edited by Jeremy Elder