Brand Design systems work like a kit of parts: a set of visual elements which build the foundation to the visual expressions of your brand. The obvious ones being logo, color, and typography. Today, most guidelines also cover iconography, photography or illustration style. Often, the way to think about these elements is still very much through the lens of static design. I want to feature two design elements which are more and more important for digital branding. And I want to champion one, which technically is not an element, but is critical to any high quality design and experience. So, lets jump right in:

1. Motion

Most, if not all, main touch points with your brand are digital: your web site, social ads, organic posts, video, the product itself to name just a few. Since the early days of the Compuserve gif format, digital equals the capability of rendering animations.

I am fascinated by the storytelling aspect of motion since I went to design school. I am not talking about clearly narrative-based animated videos, but the movements of design elements such as type, shapes, logos, and UI elements. (I even wrote my master thesis about Branding and Animations.) The way these sometimes abstract elements are animated will tell a lot about their material, weight, volume, mass, and other criteria.

Motion covers a wide range of expressions from the micro to the macro: from the subtle way how buttons behave on hover to the parallax animation of illustrations based on scrolling. But first and foremost, motion can support the meaning and guide the users attention. One of the main rules for design applies to motion design as well: less is more.

Motion is defined by the ease-in and ease-out curves, as predefined assets (logo animations) and templates (lower thirds, openers), or even as code. Some brand design programs feature motion already, like the guidelines from Slack and Zendesk.

Here are some of the benefits of leveraging motion:

• Data shows that animated ads increase CTR. 
• In UX design animated assets can help to create seamless and smooth experiences (loading modules, iconography, etc.) 
• Motion supports storytelling in illustrations, infographics, product screens and more. 
• Defining the motion of assets like logos, typography, patterns, illustrations, and more will increase consistency in video content.

Links

• Watch Emnauele Colombo explain the 12 principles of animations https://www.youtube.com/watch?v=EqMi1AzbFqs‍
• Slack’s motion guidelines with animation principles: https://brand.slackhq.com/motion

2. Sound

I was fortunate enough to work at MetaDesign at a time when not only one but two of Germany’s leading sound branding studio’s emerged at the agency: WeSound and WhyDoBirds. MetaDesign’s Sound department developed some of the first holistic Sound branding concepts under the leadership of Prof. Carl-Frank Westermann. And I was lucky enough to work on some of the first concepts and client presentations. The premise is pretty straight forward: let’s develop sound identities analogue to visual identities: Sound logos (or mnemonics) and a library of Sound elements — voice, music, sound fx, digital instruments — to brand all acoustic channels of a company: videos, web sites, smart speakers like alexa, Acoustic User Interfaces, spatial experiences (events, retail), and more.

But the field quickly developed to be more complex and sophisticated than this. The tonal sequence of the logo became a “leitmotif” to be integrated into the other acoustic assets: a corporate music library with multiple songs and in various music genres — from rock to jazz to classic, all featuring and iterating on the motif. On the other side the development of Soundscapes: acoustic atmospheres specific to a brand. Think of it like the acoustic qualities of a cathedral create a different listening experience  the one of a club. Or imagine you open the windows in a big city compared to the one of a cabin in the woods. Today, we can create these acoustic spaces digitally.

Yes, only larger enterprises are leveraging the power of sound branding so far. However, with the digitization of end-to-end customer journeys, with the proliferation of AR/VR, metasphere and other digital spaces, and through the democratization of production tools for high quality audio, all businesses can benefit from sound as an additional branding and communications layer.

Links

• WeSound: https://www.wesound.de/en/ 
• WhyDoBirds: https://www.whydobirds.de/

3. White Space

It is one of the most discussed aspects by designers, but it is not getting the same attention as the other elements. Which somehow makes sense because it is invisible. However, the intentional use of space is one of the more subtle yet highly effective ways to provide structure, focus, hierarchy, rhythm, and sequence to a layout, whether it is print, web, or product. So I suggest to include it in a guideline to communicate the significance of designing with space.

Let me highlight some of the benefits of focusing on the space between elements:

• The fastest way to polish your brand is to increase the amount of white space: Humans perceive generous space as luxurious: bigger houses, roomy limousines, the single sculpture in a large museum exhibit. When you look at luxury brands they intuitively make use of space to come across as sophisticated, rare, and classy.
• It is a forcing function for marketers and copywriters to boil the communication down to the essence which in turn will improve the experience of the user or reader. When you look at the headlines on Apple.com you will understand the power of succinct, punchy headlines with ample amount of white space.
• White space, however, does not equal “nothing”: there is still ways to to design the space in terms of paper quality (actual or digital ones), texture, patterns, transparency and more.
• Including a White Space section in your guidelines is a great opportunity to educate readers (stakeholders and designers alike) about its significance and its underestimated role in design.

Parameters to define are:

• Spacing of sections and components in UX design.
• Space in Typography helps to structure headlines and content.
• The space around the logo (”clear space zone”) and other key elements.
• Layout guidance when to keep space and when to overlay elements.
• Best practices of character counts per component or ad. And more.

Summary

It is interesting that all three highlighted elements are not traditional visual elements. However, they can be applied across all of them horizontally: each design element (logo, type, icons,...) can be animated. Each layout (web, collateral, spatial) can be optimized through the use of  white space. And each element can have an acoustic quality. 

Motion, sound, and space deserve to be part of the brand guidelines since they define the experiences across web, digital ads, presentations, product and brand videos, and so much more. We will see more and more AI generated content and experiences in the future. It's important for brands to find ways to create truly one of a kind designs, which will stand out in a "sea of generated sameness." The elements described above are one way to accomplish this.

‍