here is an expectation for digital products to not only be functional and effective but also to have an invisible human touch of delight. This is typically achieved through UX tone & voice, UI interactions, and visual elements. It might seem easy to incorporate images into your product, but many companies have trouble finding the right balance between being on-brand, useful, and scalable.
Our team faced this challenge and we came up with a recipe on how to create and scale a system of visuals in product design.
Icons
We started with the smallest visual element, an icon. Our original set needed a refresh, so we took this opportunity to give it a facelift and put together some guide rails on how to create our future icons.
One way to approach tackling this project is to outline the Principles and Visual Styling, in other words, what you are trying to achieve, and what it should look like.
Principles
Our icons act as visual aid to help users complete tasks or understand information. They should be purposeful, informative, and contextual within the interface.
We aimed for our icons to:
- Communicate abstract concepts of our product. Icons should aim to use the most obvious representation of a concept. Communication comes first. Strong shape and form are paramount. Icons can often be used for state management–on their own or within larger UI components.
- Be intentional, unique, and functional. Icons are the smallest useful elements of any UI, they should never be decorative. They are carefully selected visual symbols that communicate an idea, concept, or function simply and clearly.
- Align with brand visual voice. Icons set expectations. They enable a user to predict what will happen if they click, or tap. When we can’t predict the outcome, we’re hesitant to act. Icons also have an opportunity to reinforce brand voice in the UI.
Visual Styling
When designing a new set, we wanted to ensure that it not only reflected our brand personality but also the characteristics of our typeface. We took a close look at our logo and typography attributes and created a formula that would combine them both:
- Sharp edges — Each icon is created referencing sharp elements of our logo to preserve that pointy quality.
- Soft corner radius — To balance off the sharpness and bring a friendly playful feel we allow for 5 pixels corner radius (in smaller edges 3). This also gives a nod to typography attributes.
- Spacing — To ensure our icons work at scale the line weight should be kept at 2 pixels with 2 pixels distance between elements.
The rules provided us with a framework for icon creation that anyone on the design team could follow without having to establish a designated icon creator.
In-Product Illustrations
Another layer of visual elements in product design is Illustration. There is more flexibility in creative expression, but they also need to be functional and supportive of the context in which they are used. In UI illustrations are used in empty states, error pages, dashboards, announcements, onboarding screens, and elsewhere where a visual would enhance communication.
When designing an illustration set, it’s important to keep in mind your product’s visual ecosystem. Do they look cohesive with the typography, icons, and other brand elements?
Similarly to icons, we developed principles and a visual styling formula to help us stay consistent with the other brand pieces. Let’s take a look at them.
Principles
Spot illustrations are used to help highlight concepts or tasks within the product interface. We use them to support the features, translate the content, engage with the users and reinforce brand character. Our goal for them was to:
- Be engaging, but do not steal the spotlight from the rest of the UI. Product illustrations are meant to play support and while they shine in a user flow, they do it subtly without shouting at the user.
- Be fun, but do not force it. Let’s have some fun with our visuals, but in a way that can speak to all our users, not just the segment. We operate in a video game realm, so having gaming references is great, but going too deep with insider concepts & abbreviations might not translate well to everyone and alienate some.
- Be comprehensive, but not robotic. Just like icons, these illustrations are here to help reinforce concepts, so they should be easily recognizable but have more flair than the system icons.
Visual Styling
To help us set up a scalable way to create these illustrations that could be done by anyone on the team, we created a layer concept that assigns a visual hierarchy within a spot illustration.
Anatomy
An accent is a secondary element that can be used to add a little bit more flare to the illustration or possibly be used in animations to bring a dynamic feeling.
Hero is the central concept representation, it should make up at least 60% of the illustration and be clearly recognizable.
A backdrop is a texture that helps to elevate the illustration with depth and highlight certain areas of the hero.
Size
When working on this set, we worked at 64, 100, and 200 pixels. As the size goes down, so is the level of detail. This allowed us to create options for a variety of UI areas.
For example, an empty state has enough room to use the large size, while a small callout is only for a small one.
Color
We settled on the bold contrast with a pop of the brand color. Our product exists in light and dark modes, so when creating these visuals we had to make sure we accommodate both themes. Another consideration was to provide a secondary, less prominent version of each asset.
Summary
Design System Personality is the combination of visual elements like icons and spot illustrations, as well as UX tone and voice. When developing or updating the design system personality for your product take cues and inspiration from everything that contributes to the style: logo, typography, icons, images, etc. The best thing you can do for consistency and scalability of creation is to establish rules to follow.
Icons are the smallest functional visual elements that have to be purposeful and work at a small scale. To get you started:
- Audit UI for all the icons
- Reference your brand elements like logo and typography
- Establish rules of creation
- Consider statefulness
Spot illustrations are here to support and infuse your product with brand energy. When thinking of creating a spot illustration library:
- Generate a list of places you would like to use illustrations
- Workshop the visual style, and translate it into a framework
- Consider the size, themes, and other variants
- Create a wishlist of visuals and work against it
- Have fun!
