Essential Branding Rules for Mobile Apps in 2020

by Jun 15, 2020#UIUXDesign

Printer Icon
f

From a UI perspective, branding could be either your best ally or your worst nightmare. Sometimes, the misunderstanding of what branding is and how it works could lead to inadequate designs that risk the User Experience (UX).

Besides, misapplying the brand to an app can work against the goals and transmit contrary or confusing information to users.

What Do We Know about Branding?

Branding is a broad concept. It covers different areas of communication, but the main goal of branding is clear: It’s all about identification.

  • Who are you?
  • How do you want to be perceived?
  • What is the story?
  • How do you want to communicate it?

All the concepts that come to your mind while reading these questions belong to the branding language.

Thus, how is the branding language built? It is a combination of:

  • The product or company DNA
  • User and marketing research

Branding specialists and designers work translating this language into concepts. Branding designers take these concepts and transform them into identities through shapes, graphics, color, and fonts.

When the brand identity is defined, it is essential to establish rules to ensure the correct use of elements. That’s why Branding Guidelines are created and have a central place in all communications to customers. Branding rules are applied everywhere in product communication channels such as graphics, packaging, advertising, websites, and mobile apps.

Branding Cases

As designers, we are confronted with several scenarios when thinking about branding. As a first approach, consider whether the app is a product on its own and who owns it.

Case 1: A Company That Was Not Involved in Mobile but Wants to Be.

Every day, more companies hop onto the digital revolution train. If you encounter a company searching for a mobile app, you will need to consider the company’s current branding and adapt it to the mobile requirements. Some examples are stores, supermarkets, and others evolving their businesses to include mobile apps as a sales channel to engage customers.

Case 2: A Product Family.

The Microsoft product family is a good example. Microsoft developed apps like Skype, To Do, OneNote, One Drive, and Office. All of them share the same graphic language and common elements. Working on this type of project requires working with consistency in the branding language already established.

Case 3: A Company with Individual Products.

We often see this type of situation in mobile app games. Games are usually created by a company that develops different products and gives each its own identity. Focus on product branding itself is more important than the company. This case also applies to companies buying exiting apps and maintaining their branding. Like Google + Nest or Facebook + Instagram.

Case 4: New Product:

Probably the most fun to work since the product is new, and designers can work their magic. The advantage in this case that the branding focuses on digital from the beginning.

Branding as an Ally

How do you know that you have achieved the correct use of branding in a mobile app? Consider these thoughts…

  1. Be Consistent: Review current branding guidelines (if they exist). Analyze how graphic language is currently applied.
  2. Be Selective: It is not mandatory to use all the visual resources that a Branding Guideline provides.
  3. Simple + Discrete: Less is more. Select the most effective elements to transmit the brand.
  4. Be Functional: Branding does not own the lead role. The leading role always belongs to functionality and user-centered design.
  5. Propose If Needed. Sometimes not all graphic resources from Branding Guidelines can be applied to mobile apps. If needed, propose solutions on how to solve possible issues with current branding.

Branding as a Nightmare

What actions can make your design a branding nightmare? And, what choices could lead you to UI-UX failures?

  1. The Logo is Everywhere. The logo has specific places with its spotlight, such as the app icon, splash screens, and sometimes the main screen of the app. Please consider that the user already took the conscious choice to open your app among all others. You do not need to remind the user all the time in what app they currently are. Also, remember that good UI-UX is more memorable. So, invest more in good and functional UX and an elegant UI.
  2. Poor Font Use. The Branding Guidelines establish fonts and how they need are to be used. Analyze if the font choice is suitable for a mobile app. We do not recommend using the logo’s font through the app, as this would be an effortless but wrong way to implement the brand. Consider always legibility and order.
  3. Wrong Color Use. Some colors may look OK on paper, but they may lack other characteristics in a digital platform. Use colors to help your UI bring legibility and contrast to the functionality presented. Analyze the color choices in the Branding Guidelines and consider using the ones that represent the brand better as an identification factor. Avoid trying to use too many colors.
  4. Too Much Advertising the Brand: If the app is not about advertising, please do not treat it like one. Functionality and user-centered design should always be the main focus.
  5. Not Having a Brand at All. As a personal experience, do not start a mobile app design if the company brand and product brand is not defined. Not having Branding Guidelines will result in significant changes later on that could likely impact the UX.

About Us: Krasamo is a mobile-first UI/UX Design and consulting company focused on the Internet-of-Things and Digital Transformation.

Click here to learn more about our UI/UX Design services.

RELATED BLOG POSTS

Using High-Fidelity Wireframes to Document UX Cases

Using High-Fidelity Wireframes to Document UX Cases

A wireframe is a tool within the discipline of UI/UX design that consists of a graphically simple 2D representation of a product, screen, concept, UX case, etc. for a user interface, without setting colors, specific shapes, final icons, etc.