5 Steps to Improve Your Website Branding

Brand personality is what sets you apart from your competitors, and helps you build relationships with your target users. In this article we’ll explore a five-step guide on adding personality to your site.

The online space is crowded. There are almost 2 billion websites in the world today, and all of them are competing for a visitor’s attention. When people surf the web, they won’t be impressed by a website that looks like any other site in that niche. It’s essential to differentiate yourself from your competition. Brand personality is what sets you apart from the endless sea of competitors, and helps you to build relationships with your target users.

This article outlines a five-step guide on adding personality to your site. We’ll also see how Elementor can help you with that. But before we dive into details on how to design specific things, it’s essential to understand the concept of brand personality.

What is Website Branding & Brand Personality

Perhaps the best way to understand brand personality is to view your brand as a person. Just like a human personality makes a human uniquely her/him, brand personality is what sets a business apart from any other company on the market. Personality forges the connection between a business owner and her customers and helps build customer loyalty. The latter is especially important because the majority of consumers prefer to buy new products from familiar brands.

Website branding is the process of matching your brand’s voice and image to your site’s content and design. This is not an easy goal to reach, and involves strategic thinking. When visitors arrive on your website, you want to make sure the impression they get about your brand correlates to your brand’s vision. 

key component of online branding as a website is used by companies and individuals to present products and services of a brand. Focusing on a website’s appearance, functions, and company message to provide a positive experience to visitors is all part of online branding.

How To Design For Personality

When designing for personality, the number of tasks to be done can feel overwhelming. It’s essential to break this process down into manageable chunks (steps). It will allow you to focus on specific things rather than spread yourself thin between different areas.

Step 1: Brand Research

Brand personality can’t be invented out of thin air. It’s a result of research and planning. Research is the most crucial part of the overall process. The insights you get from the research will become your North Star – they will build your design foundation and inform every decision you make during the design process.

Know who your users are

To build a strong foundation for your brand, you need to define the target audience that you’ll be focusing on. The better you identify your target audience, the better you will be able to design your product to connect with them.

Here are two tips for you:

  • Identify your target market demographics. You should have a good idea of your market’s demographics: age, location, gender, income, education level, and personal interests. You need a solid understanding of their needs, wants, and values.
  • Create a user persona. Though many businesses want to connect with as many different customers as possible, the best results usually come from companies who can clearly define their ideal user personas. A user persona is a fictional representation of an ideal customer. Designers can use a persona as a reference when crafting a product.

When working on a brand personality, keep in mind who exactly you are trying to reach (your target user persona). Tailor your message to meet their exact needs. An example of a user persona. Image: Xtensio

Know Who Your Competitors Are

No business exists in a vacuum. That’s why after you’ve identified your users, you need to research brands within your industry niche. Examine the competitors in your space — make a list of your biggest competitor websites, and check out their branding efforts:

  • Look at how competitors present themselves visually. What are their look and feel? What color scheme do they use? What visual trends do they follow?
  • Notice the words they use when interacting with visitors. What are they saying about themselves? What language do they use? Are there certain slogans?

Take notes on what you like and don’t like about their websites.

Try to understand how you can set yourself apart from the competition. Your goal is to create a brand design that feels fresh and unique. Let’s see how it works in practice. For example, many travel companies use blue as a primary color.

KLM, the flag carrier airline of the Netherlands, uses blue as a primary color.

However, it reveals an excellent opportunity to differentiate. Virgin Atlantic utilizes this chance to display unexpected color combinations on their website.

Virgin Atlantic uses unexpected colors.

Know About Your Brand Identity

‘Who am I?’ is a  simple question that is so difficult to answer both for a person and for business. When it comes to brand building, it’s essential to follow the rule ‘know thyself’ because the most influential business personality comes from the understanding of your essence.

  • Research the company’s history, goals, and values. Devote yourself to the process of understanding your company. Even if you have a great grasp of your company, you should take some time to research the history, goals, mission, and values. The design you create should reflect these things.
  • Outline the key qualities and benefits of your brand. Figure out the unique selling points (USP) of your brand (something that only your brand offers). This information will help you give your visitors a reason to choose your brand over another.

Apple prioritizes ease of use as a key benefit.

  • Formulate a mission statement. A mission statement is a brand’s manifesto — it’s a clear expression of what your company is most passionate about. Your mission statement should be concise and easy to understand for anyone who reads it. A genuine mission statement is essential for designers because it sets a clear direction of what they need to achieve with a design. Check out Nike’s mission statement for inspiration:

Nike’s mission is to bring inspiration and innovation to every athlete in the world.

Step 2: Define Your Brand’s Visual Character

Once you created a solid foundation for your brand personality, it’s time to start building a visual language that will reflect your brand. Focus on tangible elements that determine how your brand is perceived. Those elements are:

  • Logo
  • Colors
  • Typography
  • Photography/Graphics

The elements will be foundational blocks that will determine your visual identity.

Logo

A Logo is the most critical element in a brand’s visual identity. It’s a visual element that helps customers to identify and remember your brand. A good logo can say a lot about a business. So it’s essential to invest the time and money in creating something exceptional — something that reinforces the visual identity of your business.

You may wonder why a logo, and not other visual components, should be a natural starting point for creating your brand personality. But there’s a simple explanation for that — it’s essential to start with a logo design because it will help to inform other elements of a brand personality, such as your color palette and fonts.

Here are a few simple tips for you:

  • Make sure your logo works equally well in simple black and in full color. A Logo will appear on everything that relates to your business not only on your website. For example, make sure your logo looks great on printed documents.
  • Be ready to iterate. While there might be many ways to design a logo, one of the most effective ways to do it is to sketch out dozens of versions of a logo on paper. By following the process of sketching and then iterating on ideas designers can unlock different directions to explore. After selecting the best-sketched concepts, designers can switch to a computer and start iterating on them digitally.

How Elementor can help you. Elementor has a special widget called Site Logo. Using this widget, it’s possible to define your site’s logo globally and reuse it on different parts of your site.

The widget also allows designers to customize the logo’s size and positioning.

Brand Colors

Colors are everything when it comes to visual branding — they are the building blocks of all your visuals. Your choice of color can change the way that visitors feel about your site. Based on color psychology and an understanding of your users, you should be able to identify colors that resonate with your target audience.

Here are a few things to take into account:

  • Consider color psychology. Different colors evoke different emotions. People have psychological responses to different shades. For instance, blue says trust and security to many people while orange creates a feeling of happiness, warmth, and optimism. Thus, try to understand how a particular color makes your users feel.
  • Don’t limit yourself with just one single color. A color palette should be flexible — it should provide designers with enough choices to be creative but not enough to overwhelm users. Include primary, complementary, and accent colors in your palette.
  • The colors you choose for your brand should appear on every product you create, not only on your website. FedEx’s primary brand color is purple – it’s called ‘FedEx Purple.’ FedEx uses the color all over their website:

And you can see the same color on FedEx box packaging:

How Elementor can help you. Using Elementor, it’s possible to change the color of almost any element in just a few clicks. Simply choose the element you want to modify, go to Style section, and select your desired color.

Changing the color of the top menu in Elementor

Brand Typography

Once you’ve created your logo and decided on a suitable color palette, you’re ready to start working on typefaces. It’s possible to tell a lot about a brand based on the font it uses.

Here are a few tips to remember when choosing a brand’s font palette:

  • Consider emotional responses. Similar to colors, different fonts can provoke different emotional reactions. Designers usually have a problem selecting a typeface for text — should it be serif or sans? The decision depends on the nature of your business. Generally, serif typefaces are often perceived to be more formal and mature, while sans-serifs are more agreeable and modern.
  • Go for two fonts scheme. Choose a primary and supporting font. The first one should work great for headlines while the other one should be good for longer pieces of text. A common practice is to go for a sans-serif font for headings and a serif font for body text.

How Elementor can help you. When it comes to customizing your typography, Elementor provides a lot of options. Choose a text block you want to modify, and go to the Style section. You’ll find a Text Editor subsection that allows you not only to choose a font family but also other properties of text (such as font weight and style).

You can either choose from the Google fonts list, upload your own custom fonts or integrate Elementor and Typekit.

Customizing text section properties using Elementor

Brand Photography/Graphics

We already have a logo, colors, and fonts. It’s time to continue to expand a brand by thinking about other visual elements like photography and graphics. People are visual beings, and the images you use will help you communicate your messages.

Here are a few tips for you:

  • Follow the rule ‘Show, don’t tell.’ Consider using creative graphics instead of pages of content. Websites that use visual communication increase their user engagement. Nothing answers that question quicker than a visual.

Hero images can make a strong statement on your site. Image: thewaterproject

  • Use photos with faces. Visitors connect strongly with photos that include faces. At the same time, it’s important to stay away from generic stock photos. Use photos of people who represent your brand.
  • Add a face to your identity. Companies can make their brands more appealing by adding a face that represents a brand (also known as a mascot) to design. Mascots help business create a more memorable experience.

MailChimp found a perfect way to add life to their brand by introducing a cute and friendly mascot.

How Elementor can help you. Elementor allows you to set up a background image that will fit your website perfectly. A process of setting up a background image includes several crucial steps: getting the size of the image right, analyzing focal points, making it mobile responsive, and so on. You can read about the process in Elementor’s guide.

You can also use filter effects and blend modes to give your background images a certain uniqueness and style.

Step 3: Branding and Copywriting

Once you’ve established what your brand should look like, it’s time to figure out what it should sound like. When you’re setting up your site, it’s all too easy to think of copywriting as a last minute activity. But in reality, the earlier you start the process of writing a copy, the better the final result will be:

  • Work on text early because text problems often reveal design problems. The earlier you notice the problem, the less expensive it’ll be to fix it.
  • Good copy evokes emotions. Customers feel loyal to brands that they can build an emotional connection with. It’s possible to establish a strong emotional connection using copy —by making your brand sound more human.

    Here are a few tips for you:

  • Use read it out loud technique when working on a copy. Since writing doesn’t come naturally to everyone, you can improve your copywriting skills by following read it out loud method. It’s possible to catch anything that sounds unclear or awkward by hearing the exact phrases.
  • Give your brand a tone and voice. What you say is every bit as important as how you say it. Tone of voice is one of the main things you need to get right. Your ultimate goal is to find a brand voice that resonates with your target audience. For example, if you’re a formal company, you can use professional language. But if you run a business that tries to reach a younger audience, you might want to use a more informal tone.

If you find the correct brand voice, you have the strongest chance of connecting with users. Yelp is known as a friendly and reliable web service, and the voice they use on a website proves it.

  • Tell stories. If you’re looking for a simple way to give your brand more personality, be sure to tell your users a story. People love stories – it’s how we learn things and build empathy towards other people. There are plenty of ways you can tell a story. Perhaps, the most effective way to tell a story is to use ‘rags to riches’ — a story of how your brand started small but grew into a big company.
    But if you’re at the beginning of your journey towards success, you can tell a story of the vision behind your products and how your product helps people. There’s a special place on your website that is perfect for telling stories — the ‘About Us’ page – on this page; you can tell a story about your brand and highlight all your key achievements.

Harry’s, a company that manufactures and sells shaving equipment, is an excellent example of how the brand was able to crack through a highly competitive market with a good story. Image: Harry’s

  • Make your users laugh. Add a touch of humor to enhance your brand’s personality. Infuse your pages with some humor but make sure that humor is appropriate for your target audience.

A well-placed and clever dose of humor is a great way to create a good mood. Error code 404 page on the Airbnb website.

How Elementor can help you. It’s possible to create a custom 404-page using Elementor’s Theme Builder. Elementor helps you keep your site’s visitors happy even when they’re lost.

Step 4: Apply Design Decisions

Consider the Big Picture

When working on a brand personality, don’t focus on the separate elements. Always keep the bigger picture in mind and try to understand how the details of your design will work together. Every aspect of your design, from your logo to microcopy, will impact the way its personality is interpreted. So make sure that everything fits well together.

Create a Style Guide

Make sure that you set out the rules for creating a brand personality into an easy-to-follow style guide. The guide should include details of your color choice, typography, images, sizing, and more. Try to add specific examples and use-cases. A style guide prevents all potential misunderstandings by establishing the same in-depth rules for anyone involved in designing for the brand. Here is an example of Google‘s style guide.

Step 5: Monitor and Iterate

The process of adding brand personality doesn’t stop when your website goes live. Consider brand personality as a living thing. Measure critical metrics like user engagement to understand when and how you need to tweak your design.

Be Ready To Iterate

Rome wasn’t built in a day; neither was your personality. Creating a strong brand personality takes time, care, effort, and creativity. Embrace it and be ready to work hard to achieve your goal.

Be Ready To Adapt To Changes

A Brand is an evolving asset. Your target audience can shift over time, or the market itself can evolve. Don’t be afraid of rebranding. But do it gracefully —maintain the familiarity and consistency of your brand so that your customers will remember you.

Conclusion

If you want your brand to be perceived in a positive light, it’s crucial to focus on creating a strong brand personality. Your design should accurately portray who you are to your customers. If you achieve this goal, you’ll create a truly unique personality that will make your business stand out.

Let your brand personality shine! Still have branding related questions? Send them over through the comments below.

About the Author

Nick Babich
Nick Babich
Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 877,316 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

16 Responses

  1. I wouldn’t use a term “mascot” as you have written: “Companies can make their brands more appealing by adding a face that represents a brand (also known as a mascot) to design.”.
    They are called logo emblems or emblems. There are textual logos and non-textual logos aka emblems.

    1. Hi Mikko,

      Thanks for your comment. The critical part of my message is ‘by adding a face.’ What I mean by ‘a face’ is anything used to represent a brand with a common public identity (it might be a person, animal).

  2. I just read your article. How many of the logo creators are following at least the basic rules? 10%? Maybe 20%? The rest are doing just “cliparts” without personality and most important without representing the customer… My opinion.. Keep going. We have to learn a lot. Thank you!

  3. I know it can be very difficult but perhaps in the future Elementor will give us the ability to use global colors to facilitate the process of changing all the pallet with a few clicks. I made a website entirely using the colors my client asked me to, but when I finished he asked me to change all the blue for a clear orange, so it was very time consuming. Thanks for the article, always sharp.

  4. Very nice explained tutorial, especially with the color scheme, although I have a problem with finding a good and well fitted image for hero image, since stock photos are lame and too generic.

    1. Hari, thanks for your reply. To my mind, hero image should be a good representation of a brand. For example, it might be a shot of a product or people who use it. Or it might be an illustration that demonstrate how a product solves user problems. It’s almost impossible to find an image in a stock photo library. The best way is to create the image yourself – take a camera and shot an image.

  5. Wonderful article full of detail. But what would make a great call to action at the end of this article is if Elementor offered this exact service to their blog visitors. Why not add a service where the Elementor team can create these brand, visually appearing websites for their customers using the Elementor page builder? And if not Elementor, then partner with a third party company that understands website branding, the Elementor page builder and the brand research aspect and offer that as a service for your fans. I don’t have time to figure all this out myself, and I would buy that service in a heart beat, regardless of price. Food for thought.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 877,316 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.