large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2qEIYJ1">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Malthe Luda </p>
<h4>Designing a digital product is such a simple thing. If you are a creative guy and do have a talent for typography, images and colors. Oops, sorry that is wrong, dude!</h4>
<p><img alt="" src="http://ift.tt/2scCHqc">Photo by <a href="http://ift.tt/2rD9Iie">Ben Neale</a></p>
<p>At <a href="http://ift.tt/2scwRox">COBE</a> I have learned: “A <em>real good digital product</em> will reflect the brand values of your clients brand in every single pixel.” — But what does it mean?</p>
<h3>How products communicate</h3>
<p>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).</p>
<h3>Why does our brain do this?</h3>
<p>It is all based on experiences that we made during our life. For example we know that the value <em>“lightness”</em> 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 <em>light</em>.</p>
<p>Let‘s adapt the analog life-experiences to digital experiences.</p>
<p>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.</p>
<p>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?</p>
<h3>What impact does “real life experience” have on UI and UX Design?</h3>
<p>Check out the brand values of your client before you start designing.<br />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.</p>
<p>Let‘s say one of the brand values is <em>“lightness”</em>. So consider using bright colors, light fonts, low complex forms and maybe some subtle shadows.</p>
<p><img alt="" src="http://ift.tt/2rDprOf">Design Code for “Lightness” (Dribbble Shot by: <a href="http://ift.tt/1stchy5">COBE</a>)</p>
<p>Maybe another brand value is <em>“pride”</em>. It stands for big, bold, heroic, lofty, and superior. Hence, big fonts, huge images, space and darker colors.</p>
<p><img alt="" src="http://ift.tt/2rCWuBR">Design Code for “Proud” (Dribbble Shot by <a href="http://ift.tt/1OOU9Kh">Matthew Pence</a>)</p>
<p>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.</p>
<p><img alt="" src="http://ift.tt/2rD9s2z">Design Code for “Empathic” (Dribbble Shot by <a href="http://ift.tt/2j4kKnE">Luke Pachytel</a>)</p>
<h3>Get into the mood</h3>
<p>Set up an <a href="http://ift.tt/qAKZwQ">Invision</a> 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 <a href="http://ift.tt/2rCSz84">here</a>. <em>The good thing is:</em> 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.</p>
<p><img alt="" src="http://ift.tt/2sctkXt">Moodboard Example. See the whole thing <a href="http://ift.tt/2rCSz84">here.</a></p>
<h3>Combining is the key</h3>
<p>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 <em>“pride”</em> on the home screen, more <em>“lightness”</em> in the settings screen or more “empathic” by speaking to your users and so on.</p>
<h3>What advantages does it have for a designer?</h3>
<ul>
<li>It will point you to a design direction without limiting you.</li>
<li>A design trend is not the base of your interface. So your design will not be a modern-hype-thing.</li>
<li>You do not design by feelings.</li>
<li>No personal opinions anymore! There will be no more discussions about liking or disliking a design.</li>
<li>The design language is based on brand values, so there is a standard vocabulary for discussions (e.g. “Let‘s put more “lightness” in this screen”)</li>
<li>It is possible to bring up the right arguments for every design element by the derivation of a brand value. — Perfect for presentations.</li>
</ul>
<h3>Short wrap up</h3>
<p>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: <strong>You did a perfect job.</strong></p>
<h3>Thanks for reading my article “UI &amp; UX Design feat. Brand Values” I would love to get feedback from you, just <a href="mailto:mail@maltheluda.com">drop me a line</a>!</h3>
<p><iframe src="http://ift.tt/2rD48w4" width="800" height="400" frameborder="0"><a href="http://ift.tt/2h0f00F">http://ift.tt/2h0f00F</a></iframe><img src="http://ift.tt/2rD1Kpd" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2scOeG2">UI &amp; UX Design feat. Brand Values</a> was originally published in <a href="https://uxdesign.cc">uxdesign.cc</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


UI & UX Design feat. Brand Values

UI & UX Design feat. Brand Values

Designing a digital product is such a simple thing. If you are a creative guy and do have a talent for typography, images and colors. Oops, sorry that is wrong, dude!

Top Stories