Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

uxdesign.cc – User Experience Design — Medium | Malthe Luda
Photo by Ben Neale
At COBE I have learned: “A real good digital product will reflect the brand values of your clients brand in every single pixel.” — But what does it mean?
Every characteristic of a product will communicate something. Take a physical product for instance: How does it smell, how does it look like, how does it feel, which package does it have? All these things are sending signals to your brain. Your brain will trigger an association with it and assign it to a mental layer (e.g. pride, ease or simplicity).
It is all based on experiences that we made during our life. For example we know that the value “lightness” stands for airy, low complex, floating, above other things and brightness. Because we have learned in our life that e.g. clouds, feathers and blowballs are light.
Let‘s adapt the analog life-experiences to digital experiences.
The characteristics like form, color, size and animation triggers an association. As soon as we see a subject or object we will decode and categorize it, subconsciously.
So if we are using a digital product, our subconscious will track the “values” of animations, typography, colors, images and stuff like that. How does it feel? Is it powerful? Is it empathic? Is it bold? Is it light? Is it uppish or rooted in the soil?
Check out the brand values of your client before you start designing.
Do not give a sh*t about styleguides. Write down relative values and categorize them to the core values of your clients brand. That will constitute the base for your design work.
Let‘s say one of the brand values is “lightness”. So consider using bright colors, light fonts, low complex forms and maybe some subtle shadows.
Design Code for “Lightness” (Dribbble Shot by: COBE)
Maybe another brand value is “pride”. It stands for big, bold, heroic, lofty, and superior. Hence, big fonts, huge images, space and darker colors.
Design Code for “Proud” (Dribbble Shot by Matthew Pence)
Another value of the brand could be “empathic”. Empathic means being social, caring, reliable, sympathy and being on one level. That will have the following impact on design: using e.g. warm colors, organic forms, rounded corners, overlapping layers and transparency.
Design Code for “Empathic” (Dribbble Shot by Luke Pachytel)
Set up an Invision Board with all brand values. Search for “Design Codes” that show the brand values. At least, its even enough if just a part of the code will show them. selected code bears the relevant values. The moodboard will help you to get a feeling of the way how to use the clients brand values in design. Just have a look into an instance moodboard here. The good thing is: everything is documented and and can be shared it with your colleagues and your client. — On more thing: It is not about f**k up a whole styleguide. It is all about to getting a feeling for the brand value driven design and to bring the interfaces and user experience to the next level.
Moodboard Example. See the whole thing here.
You think the illustrated values can not coherently be taken into account within the designing of an interface? That is wrong. The magic is to combine values with each other. Use a huge and light font on big product images with a lot of white space and for example a rounded call to action button. If you scroll up, you see that every above shown picture already combines the mentioned values. There will be no discussions about your design as a design. There will be maximum a discussion about the usage of brand values. For example you can show more “pride” on the home screen, more “lightness” in the settings screen or more “empathic” by speaking to your users and so on.
Brand value driven design is the most effective way to design digital products by reflecting the brand in every pixel. Make sure that your design decisions are based on your brand value map, not on your feelings as a designer. Ensure that your interfaces tells the story of the brand you are working for. If you can argue for every pixel and animation in your design by using the brand values of your client: You did a perfect job.
UI & UX Design feat. Brand Values was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community