How Can You Turn Inspiration into a Visual Language?
How Can You Turn Inspiration into a Visual Language?
Creating a visual language is the perfect opportunity to embrace inspiration and try things you wouldn't normally try otherwise. Let's make the most of it!
I recently shared about inspiration as a practice, something you can do every day to keep yourself exposed to all kinds of inspiration and fuel your creativity effortlessly the next time you need it.
This time, I want to share an example of using this inspiration and more through the exercise of creating a visual language in the context of Product Design. I wanted to be as specific as possible because it might be perceived at first as if we’re going to dive into Branding or Marketing Design, and while I deeply admire the work that designers in those fields create, that’s not the rabbit hole I picked over a decade ago, but that’s a story for another time.
When do you create a visual language?
Many might not be familiar with the creation of a visual language because it’s a challenge that only happens in groundbreaking moments: when you’re starting out or when you need a pivot.
Let’s imagine you’re facing the very beginning of a product with a blank canvas and no pre-existing Design System guidelines. In that case, you’ll likely have a lot of freedom to explore, experiment, and test ideas without worrying too much about breaking anything because there’s nothing coded in the first place. If you’re working on a redesign, that’s a whole ‘nother story because you’ll have to take into account the impact this will have on hundreds if not thousands of internal users to adopt all the changes in their Design System. No pressure!
Some designers might have only been exposed to granular contributions to the evolution of a visual language, particularly when their work experiences involve non-early-stage startups or enterprises. Some others are exposed to this challenge dozens and dozens of times because of the nature of the work, which is the case of freelancing and software development agencies.
How do we get started?
Before we touch any pixel, I like to start with a higher-level goal of what this language should evoke. To illustrate my process, I’ll share the visual language I developed at Reelgood, which started with a challenging goal: Enhance the product experience to be truly entertaining, just like the content users wanted to find. So, what does entertainment look like?
Those that come from Graphic Design will be familiar with the concept of a mood board, which is essentially a collection of visual inspiration (or even audio) to guide your design process. In the case of this example, finding primers of entertainment outside of UI Design and putting into words why it represented entertainment.
To emphasize the challenge of going outside our comfort zone of usual inspiration, the exercise was suitably named "What If…”
Creating a North Star
In the early days of my Design System journey in 2018, I stumbled upon this article by Shane P. Williams titled “Defining brand design principles, a how to guide”. I had previously read somewhere about these design principles being a core element of Design Systems. Still, it wasn’t until I read this article that I got a better sense of how to define them and collaborate with others to do so.
It’s a very collaborative and fun exercise, especially when you use the metaphor of a burger. Ultimately, the output should be a set of principles that are opinionated, actionable, and memorable.
Give yourself the freedom to have fun
With visual inspiration and Design Principles in place comes the part that most of us enjoy the most, which is experimenting with this new language. Some ideas might not be feasible on v1, some others might not even end up in production, but the idea is to allow yourself to try and iterate before systematizing this into styles, components, or adding breaking changes to the Design System.
I like to start my experimentation with a loose draft of typography, color, and icons, using these to create the initial components or evolve existing ones. I also keep in mind that all of this is subject to change. The more you iterate, the more you’ll notice which elements are working or not, refining as you go and playing with other things like texture, elevation, or imagery.
As you go through all of this, make sure to expose this early-stage language to those who will ultimately have to learn it and speak it fluently, like designers and engineers. It has to be inspiring, understandable, and practical to encourage others to adopt it as their own.
Parting thoughts
While this might feel like an open-ended story, the purpose was to show you the very beginning of a visual language, not the creation of a Design System. If you face this challenge in the future, give this a try and tell me how it goes. I’m always eager to learn the origin story of a language before everyone else learns to speak it.
Design Systems have done an amazing job of creating consistency, optimizing processes, and, ultimately, a shared language. However, when a visual language is just getting started, this is no time for caution, so don’t hold back and let your inspiration shine.
“We've always defined ourselves by the ability to overcome the impossible. And we count these moments. These moments when we dare to aim higher, to break barriers, to reach for the stars, to make the unknown known.”
— Cooper, never actually said in Interstellar
Learning shortcuts
I am a creative by Jeffrey Zeldman
A beautiful read on what it means to be a creative.
Beyond the Surface: Activating Your Design Sense in UI Design by Radilson Gomes
Practical tips to develop your design sense.Summoning creativity by David Hoang
Creativity can happen more easily if we create the right environment for it to flow.
It's always more fun to learn with others than doing it alone, so don't hesitate to reach out on Threads @laurieesc if you want to continue the conversation. If this article has been helpful, share it with a friend!
Over and out,
Laura ✌️