Introduction

“Design is the silent ambassador of your brand”

- Paul Rand

• The goal with developing a brand identity is to design and establish a unique and memorable brand
• Good branding is when you’re able to take elements of your brand, put them in a different context and still understand and recognize the brand

Essence of Branding

Branding is made up of:

• Logo
• Typography
• Photography
• Graphics

Let’s walk through a use case: Pani Water

• Pani Water came to us looking for a brand identity and website design
• Our first step was to ask ourselves: what was Pani trying to sell and communicate and what was their client base wanting to receive?

• To answer these questions, we identified the unique selling points of the product

• Next, we needed to identify their customer base

• Through user research from interviews, we identified that potential Pani Water customers were interested in wellness, function and innovation

• These became the brand “pillars”

• Buyer Persona

• We created customers for the Pani Water brand, by crafting personas with values, identities, personalities, etc.
• This helps visualize the actual customers of Pani Water and keep them front of mind when crafting the brand

Art Direction Essentials

• Moodboard

• What is a moodboard?

• A collection of images and visual representations of products that the brand’s buyer personas use, images that represent the brand pillars and various visual representations of the brand values.
• Usually includes colors, typography, images, textures and other elements that capture the essence of the brand and align with the brand's personality.
• Why create a moodboard?

• Visual representations are very powerful. When we align these images with the brand values and pillars, we can evoke emotional responses from potential customers. 

• Brand Concepts

• What is a brand concept?

• Includes logo, colors, font usage, graphics, imagery
• Use colors and graphics that align and convey brand pillars
• Imagery/photography style should align with the brand values as well

• E.g. bright images convey energy, muted tones convey calmness. 

• Once the brand concept is finalized, it is used to create the brand guidelines

• Brand guidelines

• Formal presentation of the logo, colors, typography, imagery and graphics
• Shows the logo in its different formats and sizes so the client can see how the logo will look across different platforms, e.g. across social media mockups, billboards, print materials, etc.
• Good brand guidelines help us to create consistency when we translate the brand persona and values into web design

Integrating Brand and Art Direction in Web Design

• Integrating the brand identity into web design helps us bring storytelling into web design and allows the website to align with the buyer personas
• Consistency in visual representations reinforces the brand identity
• Back to the example, Pani Water:

• First: focused on structure of the website

• Transformed the three pillars into actions the user could take on the website

• E.g. “Wellness” became “Purify” -> took the user to an action-oriented page on the website

• Second: aligned the UI elements with the brand identity

• This meant clean animations, simple UI elements, clean lines and simple typography

Tools and Resources

• Pinterest for inspiration
• Adobe color to create color palettes
• Save.it for editorial inspiration
• Midjourney for creating website assets or ideating