Branding

What is branding?

Imagine the Facebook logo in red color or Coca-Cola in blue. What do you think about the "Think different" slogan connected with the Microsoft logo? How about writing the Adidas brand name in Comic Sans font? Those ideas sound ridiculous, and somehow they are even unimaginable to us. If we see a big yellow letter M on the side of the road, we don't suspect visiting the restaurant "Under the Golden Bridge," but of course, one of the most famous fast food restaurant chains. If you experience this tied correlation of a company with its symbols, you can easily understand how the magic of branding works. Of course, branding is not only a logo, font, and colors but every visual and textual element associated with the company that evolves customers' feelings about it.

Products are made in a factory but brands are created in the mind.

Walter Landor

Brand designer at Landor

The definition of "branding" doesn't refer to the finished process or any brand style guide. Branding is the process of creating a brand - a name, symbol, or phrase that identifies and differentiates a product from its competitors. It helps make businesses memorable and supports building their identity and reputation. Effective brand strategy can impact increasing brand recognition, customer satisfaction, sales, and overall success.

The branding process consists of three parts:

In each of them, you can ask the following questions to find the answers and directions to develop further:

1) Identity:

What makes you unique? A logo? A particular font? A certain color palette?

2) Positioning:

Why should someone choose your product or service over another one? What value does it bring to their life?

3) Communication:

How do you get people to know about you, and what makes you special? Will it be through advertising or word-of-mouth recommendations?

How does branding look in web design?

Branding is an essential process from the marketing perspective. Those companies that care about branding and creating a solid identity know that nowadays, it is impossible to omit its virtual visibility in the form of a company's website. That means that branding will include marketing processes like choosing a name, logo, or icon for your company, but also how its website will look and sound and what feeling it arouses.

Web branding must also reflect who the company is as an organization and what it wants its customers to think about it when interacting with the business online.

Branding is a strategy that requires consistency in brand creation. That means that what exists in other forms of brand communication - ads, campaigns, product design, logos, symbols, and slogans - must be followed with its online image. According to previously existing brand communication, you can use color schemes, fonts, and images on your website that consistently reflect this image throughout all of your site's pages. It helps visitors recognize who they're dealing with right away when they see these elements used together across all pages.

Branding is a process that establishes, communicates, and maintains an identity for a product or service. It is essential in web design because it helps users recognize the site as the same one they've been using for years — and if they have any problems with it, they'll be able to find you again easily.

Branding in UI and UX design

Branding aims to make a product or company stand out from its competitors and create an emotional connection between the consumer and the product. In web design, branding takes shape in many different ways. The brand's online image intends to ensure that users will recognize their experience from one platform to another, even if slight variations exist between each user interface. Branding is essential for user interface design because it allows us to create an experience that users and visitors will love — making them come back again and again!

Branding is more than just a logo or slogan — it's also about creating an experience with every online interaction you have with a customer. The best UI/UX designers know how important branding is because they understand that every single decision they make impacts how customers perceive your company and their willingness to recommend it to others (or buy from them again!).

What does branding consist of in UI and UX design:

Branding is a way of identifying and differentiating your product or service from others. It creates a unique image for your business and its products or services and can help build customer loyalty through recognition. We can do branding through visual elements like logos, slogans, color schemes, fonts, and other design features.

When it comes to web design, branding is an essential aspect because of how much time people spend on their computers and smartphones. A good brand will create an experience that makes users feel confident they are using something special. A lousy brand will make them feel like they are just another user among millions of others who don't stand out.

Branding in web design consists of several parts:

1) Logo (or another symbol)

A logo is an image, shape, figure, text, or combination of those elements that create a sign representing the organization. It is a visual or written message (also just the name of the company) that communicates to the customers and people the presence and identity of the brand. Well-working logo represents the brand, makes it recognizable, and builds emotional connections between the company and its target audience.

Logos are the graphic extension of the internal realities of a company.

Saul Bass

Most UI and UX designers don’t have to work on logo creation because the company that wants to create a website already has it, made, for instance, by a marketing agency. However, in rare cases, UI designers can propose to the company a new logo while rebranding or create a new start-up kind of symbol or a logo that will also represent it on their website.

While creating a logo, UI designers should, like branding experts, get to know the client’s business and learn about its industry and main competitors. Later they can develop ideas based on the strategy, decide on design direction and sketch a few logo concepts that can be fully developed, ideally with the style guide for the company after approval.

2) Color palette

Colors have a powerful influence on how we perceive and recognize the brand. Even if their perception is built upon one's culture, they always evoke feelings that can support the brand or confuse us in a worse scenario. It refers not only to promotional campaigns of the brand. Colors are also used in web design, so it's crucial to research color psychology and cultural meanings while creating a website.

Imagine the wedding planner website that would be set on a black background or the aquarium park website dominated by the red color. Those colors would indeed not support the overall company meaning, value, characteristics, and offer addressed to the customers. Quite the opposite, they could make them feel confused.

Accordingly to Gestalt psychology, color is visual information that, through the process of perception, can build emotional impact, raise curiosity and engage the viewer more profoundly. With the chosen color palette, UI and UX designers can create and support the feeling of the brand but also guide the customer through the website. Colors can show users priority messages, emphasize more critical elements and website parts, communicate successes in action or inform about failures, mistakes, and errors.

Colour and contrast play important roles in visual communication design in terms of supporting aesthetics as well as promoting functional legibility. Colour and contrast not only help to distinguish contours, detail and depth, but they also help to attract and divert attention, thereby clearly delineating key areas of text such as headlines and logos. In this way, the strategic use of colour and contrast in conjunction with the Gestalt theories of perception can support communication objectives in a commercial or educational context. By helping to encode key information, colour and contrast can improve the effectiveness of visual communications design.

Zena O'Connor

Some chosen colors and their usage depend on the message they convey:

Red - this color is mainly correlated with alerts, but it is also used in other parts of the design. It brings energy to details and has a vast power to emphasize elements and encourage people to click on buttons. However, it can be annoying when used in large areas. Web design often uses red color to promote products associated with energy, like drinks, cars, sports, and games.

Green - is perceived as the most relaxing and calming color. It is associated with youth, stability, freshness, and nature. Green in web design is often used to promote organic, healthy, eco products and make reliable organizations represent fresh and new ideas.

Blue - In blue backgrounds, images and objects recede since the eye does not have to focus. The color blue is often used for websites involving technology, medical products, cleanliness, air, sky, water, and sea, as well as automobiles.

Black - Besides using dark mode in high-contrast, accessible versions of websites, black is also used as a sophisticated high-end color. It lends itself well to targeting a youth market or a sophisticated market. It is helpful for art, movies, and photography websites to make other colors stand out.

Navy - is a classic and elegant color. In web design, the navy color is often used for brands that want to emphasize their credibility, like in the finance, banking, and insurance industries.

Yellow - It is a very stimulating color. Web design can use yellow to promote food (while increasing appetite), particularly in conjunction with fruits and vegetable tones, children's products, and leisure products. Yellow can cause anxiety when overused. It also should be avoided to sell luxury, expensive things while perceiving them as childish and untrustworthy.

Orange - it is a color popular amongst the youth. Therefore, it is also often associated with products for young people. However, the tech industry also uses it to symbolize energy, strength, vitality, action, mind, and knowledge. It is a helpful color for highlighting essential elements and promoting food products and toys.

Read here more about colors in the design and their symbolism.

3) Fonts used on any text-based elements (including headlines and body copy)

As in the case of logo and color - designers should know if they have guidelines and style books delivered by the client. If yes, they should follow their rules while designing the web. If there is no such thing, they should carefully rethink the brand's character, industry, and what it is trying to communicate. There are many options to choose from when picking the right fonts for the website. If the company has existed for a while, designers should match all visual elements to the previous personality. It means they also have to figure out the consistency of the new website.

They should ask themselves: what would fit into it - something more classic and traditional, or rather modern, fun, or quirky? There are a variety of fonts starting from sans serif and serif, through handwritten, decorative, modern, futuristic, and dramatic. Different fonts will be used for various purposes - for headlines and body copy. For better UX and website performance, it is also good to keep consistency across the pages and sections and use a maximum of three types of fonts that complement each other and have a specified hierarchy. Using web-safe fonts (like Google Fonts) is also good practice. Your visitors won't need a special font to view it correctly since they don't need to install one on their computers.

For more tips, check out this article while choosing fonts for your web design. 4) Imagery

It's indisputable that in comparison to text, images impact users' feelings and behavior in a more significant way. That's why imagery can be crucial in branding in web design. When used properly, they can trigger emotions, create trust, focus on particular sections, and modify user behavior. From the marketing perspective, when representing, for example, human faces, they can even double the conversion rate or reduce it significantly when using stock photography. Well-planned and suited images to the brand strategy can increase its impact and fulfill its online presence and identity.

Imagery is not only photography but also icons, illustrations, and infographics. It is worth considering if customized graphics can replace some photographs - some of them can bring quite unusual effects and grab the user's attention. Designers can create storytelling on the website by using icons and infographics that condense a large amount of information in an attractive visual form of a single image.

Well-prepared imagery can support the process of branding in web design, creating an unusual visual company flow that differentiates it from the competition.

5) Interactions

Visual design receives the most attention when designers think about web design. However, they should also consider something less visible but also influential - interaction design. This, how the user interacts with the brand and its online presence, significantly impacts creating the full view of the brand. Interaction design is not only about how the UI looks but also how the UI feels.

The way of designing interactivity attributes can consist of, for instance:

• How quickly do elements respond to user interaction?
• How precise a user has to be?
• If users have to click, scroll, or tap while interacting with the component?
• How is the element changing and showing feedback while users interact with it?
• How do they look at transitions between different states?

Those interactions, and even more, can influence the user's feelings and behavior and impact the perceived brand.

6) Copies and microcopies

While companies often cooperate with copywriters and marketing agencies that create copies for the website, they should also know the more specific field of the website's rules. Luckily, more and more popularity has become the role of UX writers that design the written guide about interactions with digital products. That kind of designer impacts the brand personality represented on the website. They are responsible for information related to the specific element and section on the website that guides the user, making their visit pleasant and intuitive. Designed microcopies can inform (for instance, on the button or below it) what would happen when the user interacts with it, or they give feedback on what is happening right now.

Imagine the simple input box in the form for creating a new password for the account. How about accompanying it with the text "It'll be our secret"? It will surely make users smile and warrant that their passwords will be kept safely as a secret.

This, how those microcopies will communicate it, has an enormous impact on user feel about the brand, its consistency with its image and visual side and can encourage them to visit it and interact with the company again someday.

How to start with the branding process in web design?

There are two different scenarios and paths when a designer deals with branding in web design.

1. Web design for a new company

In the first scenario, the web design agency can receive the request from the client to create a website from scratch for the new company without any guidelines (or just a few of them) and what kind of feelings it should evoke. In this case, UI and UX designers must become brand designers and marketing managers who can propose their whole digital image for the company. It can include logo design, chosen color palette, typography, components composition, photographs or illustrations, and even interaction on the website or app when the customer uses it. So, to sum up, they propose a whole of the feeling of the company, which is a big part of the branding process. At this time, designers often create a brand book - it's crucial to highlight that those guidelines are usually open for new changes, which are applied to it and updated with time.

This situation happens mainly in the case of small companies or start-ups that contact a design agency directly after inventing a new product or service and officially want to enter the market. They start their activities by creating their website to make it more visible on the internet, but they don’t have any previous branding and are open to suggestions and ideas.

2. Redesign the website for an existing company

The second, more popular scenario happens when an existing company requests help and counts on the work of a design agency to rebrand the website. A key aspect of providing UI/UX design services to clients with long histories on the market is to convey the benefits associated with their brand through design.

In this case, designers should first look at the previous design and presence of the brand - logo, used colors, messages they created, check brand guidelines or brand book (document with specifications about logo usage, colors, spacings, and fonts). At every step of this process, they should cooperate with company brand managers to adjust the new website to their holistic approach, image, and recognition by their customers.

Website redesign is often associated with significant changes in the brand book.

How does the branding process look?

1. Research

You should research the company and its main competitors. Analyze them and carefully note down their characteristics, visual elements, colors, CTA, and the image they create with their visual form and brand voice. Then also focus on the company you create the website for. You should recognize what kind of industry this company represents, its target audience, what kind of feelings they want to raise, and what message they wish to send to its customers.

Check as well if the company and the whole industry are connected and associated with some established and repeatable symbols and colors.

If you have any doubts, conducting a workshop with the company is always a good idea. For instance, at Dodonut, we often organize a workshop during our kick-off meeting with clients using tools like Team Canvas, Lean Canvas, Unique Value Proposition Canvas (UVP), and Personas. It is the best option to ask specific questions to the stakeholders that will help you to organize the whole process of branding a new page.

If a company is new on the market, the first step of branding is to define its mission statement. Together with your client, you can ask questions, for instance:

• What do you want people to think about using your product or service?
• What do you want them to feel?
• Do you want them to feel empowered, excited, or confident?

Once you've defined directions, and needs, start thinking about how you can translate those values into a visual language for the brand.

2. Moodboard and Wireframes

After preliminary research, create a moodboard with inspiration: images, websites, and illustrations that can help you create a feeling and style for the new website. Include cultural differences as well - the same industry can look different in Asia and the United States. Make as many notes and reflections as possible to find the best solutions.

UX designers can also think about the experience the company wants to create with the new website - its information architecture, site map, and wireframes - the skeleton base on which the UI designer will create a visual image and feel of the brand.

3. Few visual directions

Create a few visual directions for the new website. Include several options for the main homepage and fonts, icons, or imagery. Select the best of them and execute them in your digital project. Meet with the stakeholders, present those art directions and discuss them, get approval and choose the best path for developing further projects.

4. New branding website

After acceptance of direction or using a previously created brand book, you can start developing the vision of a new website, creating the pages it needs. Always cooperate with copywriters from the company who give you appropriate content. Meet with stakeholders at least once weekly to revise if project development is on the right track. And at the end, create a style guide for future purposes of the company and other people who will work with this design. This will help you and your client make the best possible product while branding a new company.

And last but not least…

Don't forget about consistency!

The most important part of branding is consistency. Suppose you want users to associate specific characteristics with your product or company name (like bright colors or fun fonts). In that case, those characteristics must appear throughout all aspects of your UI/UX design — from your site's homepage down to how people interact with specific features on social media platforms like Facebook and Twitter.

What is a brand book?

A brand book is a collection of all the key elements that make up your brand. It's the sum of all your marketing materials, from websites to social media accounts to product descriptions. It's basically everything you have in your arsenal to promote yourself and what you do.

A brand book contains:

1. Logo

Brand books include all your logo designs - that means it's different variations, colors, required white space around them, and their usage on different platforms and situations.

2. Colors

It shows your color palette, marking which color is used for the text, which one for the logo, and which one for other cases (icons, elements, buttons, and so on).

In this section, designers often include the brand color names using values from different color models, like hexadecimal, RGB, CMYK, or Pantone names. They are also supplemented with guidelines on which color is primary, secondary, and so on.

3. Typography

In the brand book, you should include guidance on when, where, and how to use specific fonts and guidelines on how to style, size, and use color in your fonts.

It is common for brands to have one or two primary typefaces, one complementary typeface, and one substitute typeface.

4. Imagery

Brand books can indicate how to use images, illustrations, and other graphical elements in your external communications. It can present particular visual elements that represent your brand. It can be supported with best use cases, descriptions, or even a moodboard with inspiration.

5. Voice and messaging

However, it's not really a thing that UI and UX designers are responsible for, it is good to be familiar with voice and messaging. Brand books often include tone of voice and brand voice - its description and characteristic, some exemplars of its usage, which words and sentences are recommended, and which ones are not.

It also indicates that the voice and messaging should be consistent across different platforms, pages, social media, newsletters, and ads.

6. Dos and Don't

The brand book is also a guide for marketers, designers, partners, and advertisers, including the things they shouldn't do and the recommended actions. It can be accompanied by columns with "Do" and "Don't" items under each to help drive home the branding requirements and their importance.

7. Mission statement

A brand book also can contain the mission statement that describes what makes up your business and how you want it to be perceived.

What are the benefits of branding?

• It can support company identity and reputation.
• Thanks to it, you can create an identifiable image that people will associate with company products or services.
• It helps create an experience that mimics and follows the user's expectations.
• A strong brand identity will help create consistency throughout all aspects of the user experience, including your website design, mobile app design, or even physical products and services the company offers.
• Branding can give the company its personality and helps it stand out from the competition.
• A strong brand will help people identify with the site and feel confident about using it.

Summary

A brand is the set of expectations, memories, stories and relationships that, taken together, account for a consumer’s decision to choose one product or service over another.

Seth Godin

A good brand can be recognized by its logo, color palette, typography, and more. However, web design also significantly impacts how the company will be perceived, especially nowadays, when people, mainly via the internet, look for information, services, and products.

Branding is a way to make your company stand out from the rest. It's what makes you unique, and it can be applied to anything from the design of your website to the way you deliver customer service.

A good brand resonates with customers and makes them feel like they can trust you. Thanks to your great UI and UX design, and finally, with a live website, one can create explicit recognition of the brand and enforce its power by influencing people's behavior, feelings and interactions.

Treat branding not as a finished product but as a strategy and never-ending process that makes your company strong, powerful, and successful.