Manual de la guía de marca:
Cómo construir una identidad visual de marca poderosa en 10 pasos
¡Construya su historia de marca, no juegue a “Police Brand” y ayude a sus colegas a convertirse en defensores de la marca con nuestra guía de marca!
2. i. INTRODUCTION: THE KEY ROLE OF BRAND IDENTITY 3
4
Handbook: 10 Steps to Crafting a
Powerful Brand Identity
TABLE OF CONTENTS
1 GET EXISTENTIAL: KNOW THYSELF AND YOUR WHY 4
2 TELL YOUR STORY: CONSTRUCT YOUR BRAND NARRATIVE 5
3 PART OF A WHOLE: BRAND ASSETS LIVE IN AN ECOSYSTEM 7
4 FONTS ARE FUN: CHOOSE THE RIGHT TYPOGRAPHY 9
5 GET CREATIVE: DESIGN YOUR LOGO IN BLACK AND WHITE 11
6 LIFE IN TECHNICOLOR: CHOOSE YOUR COLOR PALETTE 14
7 DESIGN FOR ALL: ACCESSIBILITY TEST EVERYTHING! 16
8 THE BRAND BOOK PDF IS DEAD: GET GUIDELINES ONLINE 17
9 BREAK DOWN THE SILOS: BRING ON THE DSM! 19
10 BUILDING TEMPLATES: DIY DOESN’T MEAN GOING ROGUE 20
HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 2
3. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 3
Like a bad haircut, a flawed or inconsistent brand identity is hard to live with,
and impossible to ignore. It's there every time you look in the mirror. Fortunately,
a bad haircut can be hidden by a hat or scarf. But for bad brands in a competitive
marketplace, there's nowhere to hide.
In such cases, design and brand teams are
reduced to the role of “brand police," forced to
monitor and correct misuse by colleagues
instead of crafting and projecting the true
story of the brand.
My name is Lily Maley and I’ve been in this role
for most of my career. I've worked in Market-
ing, Design, Brand, and tech strategy for nearly
12 years. I spent nearly five years at a large tech
company where I was Global Director of Cre-
ative and Brand. I lived brand strategy and
implementation day in and day out; I had the
nightmares that sometimes turned into reali-
ties of people going rogue and creating their
own DIY brand catastrophes. I joined the team
here because I’m passionate about Visme’s
capability as a brand management and
design platform.
Too often, the process of creating and imple-
menting the brand is short-sighted. Many
companies focus on designing an aesthetically
pleasing logo and picking fonts and colors—
yet they ignore the larger strategic opportu-
nity a powerful brand identity represents to
an organization.
Whether you’re a one-person startup or a cor-
porate enterprise, it’s worth taking a deeper
look at the WHY and WHO of your core identity
before you move on to the WHAT of individual
brand assets.
Brand identity is anything but trivial: It's one
of the most important business decisions
you'll make. Brand encompasses your organi-
zation’s story, values, personality, priorities, and
mission. It differentiates you from the compe-
tition. It identifies you to the world at large.
Marty Neumeier, one of the most important
thought leaders in brand strategy today
defines brand this way: It is "a perception, a
gut feeling of a customer about a product,
service or organization. It lives in their minds.”
Brand, in other words, is not limited to your
visual identity. Brand is visual, but it's also the
words, ideas and values you choose to project
to the world—the non-visual elements a brand
strategist needs to truly tell the story of
the brand.
Introduction
4. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 4
Brand identity begins with a group discussion and consensus
about what your company stands for and its mission.
Early on, bring multiple stakeholders to the
table to candidly discuss what your company
represents and what makes it unique. What is
your vision of the future? At Visme, the mission
is “to empower anyone to easily visualize their
ideas and to engage with concepts in the form
of presentations, infographics, graphics, and
other visual formats.” What are your organiza-
tion’s goals and mission? If you haven't already,
draft an organizational mission statement,
values statement and goals summary.
Next, do market research to understand your
customers and the competition. In order to
brand yourself effectively, you need to know
what others are currently doing so you are
crafting a brand in the context of the indus-
try's marketplace.
Questions to Ask:
• Who else is out there and what are they
doing?
• How is your brand different?
• What value proposition differentiates you
from your competition?
• Why would a customer choose your brand
over another?
Once you've answered these fundamental
questions, you're ready to build your brand
identity around what you've learned.
Step 1: Get Existential and Know Thyself
5. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 5
Your brand narrative is a relatively short overview of what your brand is,
what it stands for and why the organization exists.
It’s similar to an elevator pitch except that it doesn’t actually explain what the company
does. A brand narrative answers why your company was created, which problems it
attempts to solve and for whom.
Step 2: Construct Your Brand Narrative
Set up a brainstorming session with your
communications and marketing team to
help identify the personas of your
customers. I recommend using a tool
such as this guide to creating customer
personas developed by the Content
Marketing Institure
View The Persona Overview
Create Brand Personas
Once you've done that, think about what
brand personality would appeal to these
types of people. Within that context, you
can begin to outline the personality
and voice (style of communication) your
organization’s brand embodies.
Consider Personality
6. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 6
If you’re looking for inspiration, I recommend you watch one of the most
important TED talks of all time, Simon Sinek’s concept of “Start With Why.”
At this point, draft a short, para-
graph-long summary of your
brand narrative that describes
yourpersonality.Init,trytoanswer
the question “Why does my orga-
nization exist?” Some well-known
examples can be found here:
Brand Narrative Examples
Another noteworthy example:
GoPro created a video-based
brand story to connect with their
customers.
"Our organization exists to..."
Begin With:
7. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 7
Many people think of a brand as just a logo and colors, but that couldn’t be
further from the truth.
Your brand encompasses many components, and you need to think about how these assets
contribute to a core identity in line with your narrative. Brand assets aren’t stand-alone elements;
they are a whole set of interdependent pieces. Think about how the following might be
approached as a whole ecosystem within your brand story:
Step 3: Think of Brand Assets as an Ecosystem
8. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 8
These pieces are all components in the living and evolving organism of your
brand. These assets need to originate with, and contribute to, the brand narrative
that you constructed in step one.
As your organization grows and changes, your brand as a whole may change along with it. Ideally
though, with good strategy, it should always go back to the same brand narrative of “why.”
9. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 9
Step 4: Choose the Right Typography
Typography and how you approach the styling of text are key
components in how a brand feels to an audience.
In building a brand identity, some designers
start with a color palette, then a logo and
then typography. I recommend starting with
fonts, since typography relates so closely to a
brand's personality and often lends a contri-
bution in logo design.
This doesn’t mean you have to define all the
heading sizes and type styles, but starting
with a body text font and an accent/header
font can be an effective jumping-off point for
creativity. These pieces all greatly influence
each other, so they often work hand-in-hand
and require further refinement as the brand
identity takes shape.
Typography Basics:
• For a great overview of typography and fonts,
check out this article by DesignLab:
How to Choose the Right
Font for Your Design
• If your company is primarily based online, you
should also be aware of desktop/print fonts
vs. webfonts. Many pre-web fonts were pri-
marily designed for print usage.
• Perhaps the easiest way to pick fonts if you’re
not married to one particular specimen is
to use Google Fonts, which will give you
915 options.
Google's Open-Source Font
Library Can Be Found Here
• Google Fonts are easy to use and adaptable,
and you will never have to worry about the
font licensing issues that haunted designers
pre-2010.
CrowdSpring's Font
Law Licensing Overview
Visme's Guide to Elegant Free Fonts
10. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 10
Some brands continue to use licensed, as opposed to open-source, fonts. I will
warn you that it may make your life as a brand advocate more difficult,
especially as you deal with a growing organization in terms of employees.
For more inspiration and combinations using Google fonts, check out
Reliable PSD's resource on font pairings and combinations:
Ultimate Google
Font Pairings
SOME COMMON TYPE CLASSIFICATIONS
Sans Serifs
Letters without the small
projecting features at the ends
of lines
Geometric: Influenced by geo-
metric shapes and originating in
the 1920s Art Deco movement,
these letterforms use strong
angles, feel very rounded and
modern, and are typically less
readable for body text at smaller
sizes.
Humanist:Humanist sans serifs
(there are also humanist serifs,
which can also be called "old
style" as I've called them to the
right) have closer ties to hand-
written calligraphy and feel less
artificial and cold than many
other serifs. They resemble more
closely the way a person typically
would write letters by hand.
Serifs
Letters with the small projecting
features at the ends of lines
Old Style: Also called "humanist
serifs", these typefaces are based
on some of the earliest forms of
typesetting. The letterforms are
based on pen-drawn strokes and
have less contrast between thick
and thin strokes as we find in
other serifs.
Transitional:Pioneered by John
Baskerville in the 18th c., these
typefaces introduced a slightly
higher contrast between thick
and thinner strokes and a curved
serif made possible by new tech-
niques. These typefaces were
often optimized for ink to not pool
while drying, and were used heav-
ily in print.
More Distinctive Serifs
Letters with the small
projecting features at the ends
of lines
Didone: Also known as "didot",
"neoclassical", or "modern", these
19th c. architectural typefaces
have high contrast of thin and
thick strokes. Flamboyant and
meticulously constructed,
didone frequently suggest high
fashion or luxury brands.
Slab Serifs:Slab Serifs, also dat-
ing to the 19th c., are the polar
opposite of Didone. Highly read-
able for display, these letterforms
have a uniform weight. Often,
slab serifs simply appear to be a
sans serif with an extra stroke.
These typefaces have strong but
diverse personalities and can be
fun to play with.
Read: Visme's Guide to Font Pairing
11. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 11
The most recognizable and unique brand asset is your logo.
Logo design, once you have chosen a type family, comes as a natural next step to me. Complet-
ing those first few mockups is daunting, but when you start to sketch and lay out ideas, things
often come a lot quicker than you might think! I prefer to start in B&W or grayscale so I can
compare my ideas without adding the extra variable of color. Plus, you'll know exactly how your
logo will look when reversed on a dark background, which is very important for almost every
brand out there.
There are five "core" types of logo designs that you should be aware of:
Step 5: Design Your Logo in Black and White
BRANDMARK
COMBINATIONEMBLEM
LETTERMARKWORDMARK
12. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 12
Types of Logos:
Essentially, this is a logo laid out in type. A
wordmark can be either a short name (ie,
eBay) or a longer professional name (ie, a
namedlawpractice).Thisworkswellwhen
the name of the company is particularly
pithy or speaks to the nature of the
business (eBay) or when the name of the
business is particularly relevant to its
status within the industry such as law
practices.
Also known as an "iconic" logo, this is a
symbol that itself represents a company.
Often,companiesliketohaveabrandmark,
which is a standalone image or depiction
of an object/animal/plant/person, etc. A
true brandmark is iconic (ie, Apple), but
many less recognizable companies will
use it in combination with a wordmark.
Wordmark
Brandmark
Sometimes also known as a monogram,
this can either be a treatment of the first
letter of a business (ie, McDonald's) or an
acronym by which the organization is
known (ie, HP) that stands for something
longer. A lettermark can be used by itself
once the brand is recognizable, but it’s
often used in combination with a
wordmarkwhenthenameofthebusiness
still needs to be identified.
Lettermark
Example: Dunkin (RIP Donuts)
Example: Weight Watchers
Example: Chrome
13. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 13
Some designers avoid this type of logo,
but it’s come raging back in the past
couple of years with the hipster trend, and
I’ve seen these requested more. This is the
retro-style crest, woodcut or shaped-word
style (think Jack Daniel’s, Starbucks or
“that local craft beer company nearby”)
that may or may not have an “Est. 1901” or
a Latin motto.
Emblem
Most small business logos fall into this
category. This is any combination of the
above pieces (think Burger King, Adobe, or
Microsoft) designed to marry a lettermark
or brandmark with the name of the
company. Sometimes, the lettermark or
brand mark may be used on its own for app
icons, favicons, etc.
Example: Harvard
Example: Slack
To begin creating your logo, here are some questions you should always ask:
• Should this logo be primarily oriented as horizon-
tal (ie, at the top of a website on a nav bar) or as
a square (ie, more for social media, an app icon,
printing, or product packaging)?
• What type of logo should it be? Is this business
well-known enough to go only by a brand mark
or should it be a combination? Which type of logo
speaks to the narrative?
• Is there some sort of brand mark that might be
applicable to this brand, in terms of an object, an
animal or an ideal?
• Is there any visual that speaks to the narrative
developed or to the goals and mission of the
company? This is particularly relevant for a non-
profit organization. For example, an LGBTQ orga-
nization might include a rainbow or a Christian
organization might include a cross or dove.
• Typographically, should this tie in with the type-
face(s) chosen above? Or should this be a com-
pletely different typographic application?
(although hopefully, it looks good with the type
selected above or else we might need to revisit
the last step)
Combination
Types of Logos:
Visme's Logo Brainstorming Tips
14. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 14
The color palette is so closely tied in with the brand narrative, typography
and logo design that I often leave it until last so that I can best put it in
context of the direction the elements are going.
Look at all the personality that color can bring to your brand:
Step 6: Identify Your Color Palette
15. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 15
I typically choose between four and six “primary brand colors”
and often also use those colors in tints.
One of my favorite resources is to use Coolors.co to lay out my palette, making sure to have a mix
of dark, bright/accent, and pale colors that look good together.
It's important to think about not only how these colors look as a palette but also how they’re
used in context. Try laying out a page or some sort of design in the colors; it will help you get
perspective about possible uses. I always try playing around with the colors in a real design, to
see if they work in context. Another thing that's key is thinking about other places that are going
to have to adapt the brand palette. Make sure to be thinking about your greyscales and planning
a dark base color for body text and accent “almost-white-but-actually-not” for web and UI use,
as well.
When you finally have a palette in mind that you like, take it back to your B &W logo and
see how it looks!
Coolors.co has Palette-inspiring magic!
Visme's Color Psychology Guide
16. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 16
Don’t make accessibility an afterthought. In many cases, it’s not just best
practice, it can get a business seriously fined or denied contracts. Section 508
Compliance and WCAG Accessibility are not a joke, and every designer working
in the market right now needs to know what those are and how they work.
If you need to learn more, here’s a great 45 min
course that will explain everything:
Free Accessibility Course From Skillshare
What You Need To
Know As A Designer:
Video Accessibility
If your company is releasing video content, you
need to make it accessible with subtitles. You-
Tube offers this service for free within the plat-
form, but I also recommend you check out
Amara if you’re producing cross-platform
video content.
Amara Accessibility Video Dubbing Tool
Color Blindness Check
You should try running your logo and major
content pieces on a color-blindness simulator
to make sure it’s readable and clear for those
with color blindness. According to Colour-
blindawareness.org, around 4.5 percent of the
population has some form of color blindness,
so it has common incidence and designers
need to be aware of how to best plan for it.
Color Blindness Simulation Tool
Contrast Ratios
It's critical to check your color contrast ratios
for things like button backgrounds, use of col-
ors together, etc. If you are envisioning an
amazing accent color for call-to-action but-
tons, please make sure that it’s WCAG compli-
ant. I ran into this with the accent “action”
orange the executive team loved, which also
happened to be entirely unsuitable for creat-
ing accessible buttons on websites.
Free Color Review Contrast Ratio Tool
For example: they’ve since fixed it, but one of
my FAVORITE companies, Airtable, at one
point had very sad contrast ratio (see image).
Dyslexia Accessibility
For helping dyslexic users better process your
content, there’s a fantastic font that you may
consider offering via a setting if you have an
app, a lot of long-form text or if you ever get a
request for it.
Open Dyslexic Free Font
Thinking proactively about these issues will
make you a better user-centric designer, and
make for a better company overall.
Step 7: Accessibility Test EVERYTHING!
17. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 17
Long live the web-based Brand Hub! If you’re still using a PDF as a Brafnd Book
within a larger organization, you will be haunted by old copies o this PDF for the
next decade.
As a head of brand at a previous orga-
nization, I made a feature-rich brand
portal with Wordpress with a custom
subdomain. You can also use a robust,
paid option like Frontif y or
Brandfolder.
You can even make one in Visme via
our Publish to Web feature or embed it
as HTML 5 on your site. That way, when
people visit the link, they always know
it’s the current version. You don’t have
to worry about what Flora over in
accounting has saved on her 1999-era
laptop that may or may not contain
Comic Sans.
What your Brand Hub
should contain:
• Your brand narrative, guidelines for tone
and company history, if applicable
• Boilerplate/elevator speech for how to
describe the company
• Your logo for both light and dark back-
grounds (with downloadable versions)
• Guidelines for logo usage (giving it plenty
of space from elements around it, not
manipulating or changing it in any way)
• Fonts (with downloadable versions) and
specified typefaces (size, color, style) for
different heading sizes and body copy
• Palette of both primary brand colors, tints
and greyscale (include HEX values, RGB,
CMYK, and Pantone if necessary)
• Guide on how to use imagery, illustration,
iconography
• Ideal call-to-action button look and feel
• Links to core brand templates
• Contact info for VP Brand, Creative Direc-
tor, or another brand point of contact
Step 8: The Brand Book PDF Is Dead Dead
18. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 18
It's 2019 and the innovation of "design systems" are bridging the gap between
brand design and UX (user experience) designers and developers. Combining the
traditional brand guidelines elements with development's web-based components
called "pattern libraries," DSM (Design System Management) is a hybrid brand
guidelines meets development how-to-style manual, and has been the new
acronym everyone seems to be talking about with respect to the next stage of
brand strategy.
A design system doesn't just tell you what the brand should look like, it provides the already
branded components of development code in modules. Just like lego blocks from the same set,
the pieces are ready to go, be repurposed, and fit together in new ways. Both brand design and
ux design collaborate with development teams on building design systems, and until recently
was the realm only of the large enterprise with a small army of designers and developers.
Google pioneered the concept in 2014 with its Material Design Library, soon widely adopted in
apps worldwide. In the past few years, other large companies such as IBM (Carbon, pictured
below)) and Airbnb (Design Language System) followed suit.
Now, it’s all fine and good for Google, IBM and Airbnb with teams of hundreds of designers.But,
how can smaller design & UX teams build such a thing? Lucid (paid) and Adele (open-source)
started the adventure, but now InVision, the go-to UX prototyping platform, has launched their
new DSM tool and sample library, making things much simpler to implement and integrate, even
for smaller-scale teams.
Step 9: Bring on the Design System!
19. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 19
From InVision's Marci Pasenello, Lead Project Manager of the new
Design System Management tool:
“Creating a design system in DSM allows various stakeholders to centralize assets and doc-
umentation into a single, centralized place. This enables an organization to create a shared
language and identity across functions, business units, product lines, and sub-brands. Ulti-
mately, this results in a shared sense of ownership over the brand's consistency, differentiated
qualities, and overall integrity.”
So, if you have a UX and front-end team, see if they want to team up and create not only brand
guidelines for the rest of the world, but also for the dev team. Creating a DSM is the ultimate way
to cement your visual identity between brand and UX, especially if you are building a software-
or app-based product.
From this...to this!
20. HANDBOOK: 10 STEPS TO CRAFTING A POWERFUL BRAND IDENTITY 20
#1
People will continue to DIY their own stuff or enlist their niece “who is taking a design class in
college” or otherwise create things that are completely off-brand and awful if you don’t give
them a way to create their own on-brand visual content.
#2
If you provide an easily accessible brand portal (think subdomain or “xyz.com/brandguide ) as
the “stick” along with some tools that they can use (imagery, icons, branded templates) as the
“carrot”, they will remember that both exist a lot more readily, because they’ll be using both
regularly.
This is especially relevant to global organizations. The larger the organization and the
further the spread of offices, the more off-the-rails things seem to become.
If you build it, they will come. “It,” in this case, means
a full library of on-brand templates that they can
access and use to bring out the best in your brand.
Not sure how to put that into practice? You can easily
create a branded template library with multi-user
access in Visme.
The bottom line is that if you give your colleagues/
employees plenty of resources to use in their daily
lives, they’re more likely to think of you less as “brand
police” and more as “helpful brand friends.” Instead of
constantly imposing “brand rules” on them and cor-
recting flaws and inconsistency, you’ll be empowering
them with the creative tools they need to do their best
work.
Check out how Visme can help you create an on-brand
library of templates, icons, typography, and more and
make it easier for different teams to collaborate and
create a powerful brand as a team.
Now that you have your brand identity locked down for yourself,
you need to make sure that other people know how to use it.
Enter: Brand Management Platform!
In my years playing corporate brand police, I have found two universal brand
management truths in life:
Step 10: Templates & Communication
How to Set Up Your Brand Assets and Templates In Visme!