With that said, we couldn't simply take my more colorful, lush editorial work for the Slack blog, drop it into the Slack product UI, and call it a day — as it would have totally overpowered the surrounding screen real estate. A successful product illustration has intention and can't be swapped around like a stock image.
Another interesting aspect of designing an illustration system is considering all of the different contexts that these illustrations will sit in. In our case, we adapted many of our illustrations to more elegantly fit on smaller screens. I also created a modular system of tiny spots, blobs, and patterns that could be added to oft-overlooked contexts like menus, navigation, and footers.
- Let's figure out the rules of the universe first, and
- Once we have a grasp on that, then we can start building out the rest of our world and filling it with characters.
For example, in the below illustration, I used the stock concept of a female character at her computer (the "what") as a vehicle purely to explore color and style (the "how"). You can see how the tone of the illustration changes when we reduce the number of colors in the palette and increasingly stylize the characterization of the figure, again taking cues from the whimsicality of children's illustration.
In these earlier explorations I experimented with some of these more unusual colors, like bright yellow and neon pink. However, given Slack's position as a professional enterprise company, going "full storybook" in palette wouldn't have been entirely appropriate. Simply adding darker colors (e.g. purple and deep blue, as seen on the right) creates a sense of groundedness and balances out some of these more whimsical color cues.
I find it valuable to always focus on voice and technique ("how" we draw) first rather than get bogged down in the concept ("what" we draw). Putting on our product manager hat, it's more efficient to isolate this one variable first — to first take a somewhat generic concept and use that as a base for stylistic explorations.