Design guidelines: how to create an unforgettable graphic universe for your brand.
If you are about to create a design system with a unique artistic direction for your digital brand or your client’s one, here is a guide to help you !
This article intends to introduce you to a comprehensive methodology you can easily approach to quickly ramp up on this topic.
To ease the comprehension of our design process, we’ll immerse into the story of “Compoz”. Our client is aiming to do a real revolution in the scentsscaping field so his value proposition is clear:
“Perfuming with taste your living environment has never been that easy and intuitive.”
Context of our project.
Compoz is a graphic, luxurious and connected device, allowing you to diffuse ambiance perfumes in your homespaces.
Our mission is to design and develop the mobile application to remotely control the perfume composition.
Users may personalize their olfactory environment composing themselves unique fragrances from pure and precious selected essential oils.
Hence, we have to imagine and create artistic guidelines as well as an intuitive User Interface that matches the product vision and our client’s values.
Discover the undersides of the process which led us to give birth to a graphic universe striving for excellence.
Step 1: Immersion.
Core values
Getting immersed to the heart of your subject should be the basis of your approach. It is therefore needed to understand the product’s history, as well as its core values and the business stakes it tackles.
Organizing a workshop to meet the stakeholders is a nice way to start towards this purpose. Our “Kick-Off-Meeting” gathers developers, designers, product owners of our agency and of course our client as the project leader.
This meeting is a key one since it aims to create a common basis for all the main actors of the project. On the agenda: sharing references, writing down the success indicators that will be tracked at the end of the mission, and above all getting to define “emotions and values words” that fit the product.
These are absolutely essential to design the first graphic elements.
“Compoz is triggering our olfactive emotions while striking one of our 5 senses: the sense of smelling”
“The device presents a drawer to add up to five perfumes from a library of 25 pure and natural essential oils. Possibilities to compose your own fragrance are endless”
“We specifically target women to be ambassadors”
“We want Compoz to be part of the Luxury Industry”
Towards these major quotes standing out from our workshop, we got to identify our “emotions and values words” for Compoz:
- Luxury
- Feminity
- Olfaction
- Naturalness
Moodboard.
A moodboard is a really useful support to find the direction of your graphic universe. It will guide you all along the process and remind you the visual values that really matter.
To build it, each reference can be printed and shared with the creation team. What do we love ? What don’t we really like and why ? What does match the product values and what is too far from it ?
Different tools or softwares can be used to gather your references: InVision, Eagle, a Pinterest board or even a Photoshop edition.
Whatever support you may choose, make sure it will be shared transparently and frequently with your client and your team in order to validate the ambition of the graphic propositions.
Quality of a moodboard lies in the diversity of the supports it includes. You can add videos, sounds, photographs or colour palettes to make it a real rich collection. Obviously, the more
furnished your moodboard is, the more satisfying will be your graphic proposition to your client.
Step 2: Design of the master visual.
A master visual can be radically different from a service to another and can take various shapes and forms depending on the theme. It is often the reflection of the targeted user experience’s heart.
Concerning our product we knew our biggest challenge was to depict a scent. We specifically wanted to find an answer to “How can we make a user understand a fragrance and its properties ?”
Taking a step back to analyse our digital environment, we realized that many services previously tackled the question of representing something very abstract as a sensation.
- Spotify, Deezer: the sense of hearing. These two music streaming services represent music with an album cover image or with a video extract.
- Philips hue: the sense of sight. To make tangible light and different colors, the service is using gradients from the white light spectrum.
Hence, understanding vision and significance of master visuals from other services can lead you to your own graphic discovery !
We ourselves were guided by Spotify and tried to follow the idea of scents covers.
Here are our first shots for the Compoz Master Visual : olfactive covers with different colors and gradients
From abstract shapes to various gradients and textures or mixing it all together: try to explore as many artistic possibilities as possible. Your first drafts may not be good, and even rough, but this strategy will allow you to keep your mind open, giving no limit to your creative process.
Be bold and dare to share your graphic studies, in spite of their defaults. It will allow you to get feedback from your team and your client which is essential. It is indeed from the talks and proposals that will lay the epiphany of your creation process !
On our side, it came from a testimony that became a significant milestone:
“I love the countryside, the morning dew makes me experience all the scents of my garden. At that precise moment, my olfactory sense is at its peaks.”
This confession led us to explore a brand new graphic direction: a water drop representing natureness and at its center a picture of the fragrance.
Excited by this representation we so far only talked about, our team had to test it as soon as possible to determine its potential.
In order to be efficient during the design process, the first versions of your graphic propositions must be SIMPLE.
Step 3: Realization with ambition.
You just have the approval of your master visual’s concept ? Awesome ! Now let’s make it extraordinary.
“How to get a state-of-art master visual ?”
In order to challenge your execution, you will inevitably ask yourself:
- Which softwares or technical methods should I use ?
- How can I achieve a consistent visual design that matches the “emotions and values words” ?
- What are the possible variations and shapes to make a logical whole ?
If you feel like the tools you are used to can decline your creativity, take it as an opportunity and a challenge to “tame” new softwares.
On our purpose, we gave Cinema4d and Redshift a try to get a realistic shader.
Shadertoy is a tool to create and share impressive shaders with WebGL. Edited by Laurent Alvaro
Adding a beautiful photograph symbolising each fragrance and some particles to give diffusion some mouvement were the final touches to our water drop.
The Compoz’ master visual was born.
Step 4: Design of the UI universe.
The user interface shall reflect the product identity. Find a way to extend the artistic direction of the master visual through the whole service is at stake.
In order to decline and give life to your graphic design in your mobile app, the core values of the project that were defined at the beginning with your team will guide you. Strategic and graphic monitoring are highly recommended to define solid foundations of your UI design.
Colors and typography.
Dark interfaces introduce an immersion feeling allowing your users to feel like they enter a private and luxury environment.
It is however important to add bright colors (here we chose a metallic copper) to highlight your interface reliefs and features.
Linéale, Didones, Reales… Possibilities in terms of typography are endless. Choose it carefully to visually support emotional design.
On our side Playfair enhances the femininity and luxury sides of Compoz, and Brown offers a great readability for the user. The association of these two typography elements made possible to set different reading levels and to reflect the hierarchical nature of information.
During graphic design phases, keep in mind that UI is a pillar of UX, and we want it to be seamless for our users.
Also, frequently take a step back on your production to check the global coherence of the graphic universe you created.
Motion and micro-interactions.
Functional richness of a mobile experience lays in its details. Visual animations and micro-interactions are integral components of artistic direction.
To get deeper on this topic you can have a look at this article previously written.
Motion allies usefulness to pleasure allowing a better understanding of the features for the users. Furthermore with this kind of finesse on implementation, your mobile application will only get closer to excellence.
An unforgettable graphic universe.
In the end, what if the key to create a momentus design mainly laid in its consistency with the story it tells and the values it embodies?
Let’s get it started on your side from this assumption without getting stuck on your first graphic concept — which will rarely be the good one, to be honest !
Keep an ear open for feedback, frequently take a step back and always share your work to stakeholders and team as much as you can.
Proceed step by step, test and learn new techniques. Get inspired by many references and get your ideas structured while transcending your design work.
It’s now your turn to create unique and thrilling graphic universes that will support unforgettable experiences for users.
You can discover here the Compoz mobile app 📱
The Betomorrow Team.
Martin Perinet (Front-end developer) Olivier Gauthier(Back-end developer) Manon Urbain(Product Owner) Clairesmall(Product Owner) Albrecht ANDRZEJEWSKI(Product Owner) Laure Taboni (Scrum Master) Laurent Alvaro(Developer) et Charles-Edouard Ray(Product Owner)
Thank you.
I hope you enjoyed this article! Please share your comments with us in the section below👇
