Website Visual Identity Topics For Essays

How do you stand apart from your competitors visually? How do you develop a brand identity that tells a consistent, coherent story without saying a word? Why is visual branding important?

There’s a lot of confusing, misleading information about branding. So, let’s break it down.

What is Brand Identity?

Your brand identity is defined by how your audience perceives you.

A long-standing analogy is to view your brand as a person. Let’s take it one step further and view your brand as a friend to your audience. And, instead of seeing your audience as a nameless, faceless crowd, focus on the one, ideal person that you’re targeting, or befriending, with your brand.

In order to make friends with that person, you need to positively influence how they see you. And, that person will continue to be friends with you if you share the same values, enrich their lives in some way, and are consistent.

A brand that excel at this is Starbucks.

Using Instagram, the coffee giant finds and regrams photos of Starbucks enthusiasts. It echoes a message that the brand listens to and cares about its community– which is key for a brand that positions itself as a neighborhood hangout with attentive customer service.

I know you’re thinking, that’s nice, but what does this have to do with visual branding?

What is Visual Brand Identity?

Visual branding is how you show the type of friend you will be. Use it to influence your audience’s perception of you.

For example, if I check out your Instagram page, and see it filled with fun, behind-the-scenes photos of your office, it may tell me that employee happiness is important to you. If I see nature images paired with inspiring quotes, I may feel that you value encouragement and motivation.

You can, and should, use visual clues to suggest abstract ideas.

Are you authoritative, feminine, irreverent, acerbic, fancy, playful? Nothing answers that question quicker than a visual.

When I visit your website, your color choices, the size of your text, and the mood of your design tells me exactly how to feel about your brand.

This is why visual branding is so important. Whether you’re knowingly influencing it or not, your audience is defining your brand. If the visual that you’re conveying does not match your values, it will disappoint, confuse, and alienate your audience. For example, I’m not quite sure how to feel about an accountant who uses this font:

The style of this font makes the brand feel like a joke. That’s fine if your brand is related to humor, but there’s nothing funny about my money, so I definitely would not trust this accountant, despite what the text says.

As you can see, a visual brand identity is more than just photos. It’s the sum total of everything your audience can see when they look at you. Together, all of those visual elements tell a story. That story can re-affirm your values or take away from them.

The good news is that building your visual brand identity is easy to do. Let’s take a look at 20 easy ways to influence how your audience perceives your brand. Answer these questions, and by the end of this guide, I promise you’ll have a better understanding of your visual brand identity.

01. Who is Your Audience?

Defining your audience is the first step to building a successful visual brand identity. If you don’t know exactly who you’re speaking to, you won’t know what to say. Think of it this way, who should want to be friends with your brand?

Get specific with these questions: Age, Gender, Location, Income, Marital Status, Occupation, Education Level. Depending on your product or service, it may be helpful to define ethnicity. For example, if you sell chemical hair relaxers, it’s important to target your ethnicity.

If you’re struggling with this exercise, take a look at your competitor’s audience on social media. Who is active and who responds? You can find out a lot about who the audience is by the questions they ask and the posts that they like or retweet.

02. How Do You Offer Value?

You should also understand what makes your ideal audience tick. Why would your audience buy your product? What is the void that you fill? Is it entertainment or advice?

If you are a life coach, maybe your ideal customer is an overworked mom who’s desperately searching for meaning and clarity about the future. Now, how do you present your brand in a friendly, visual way that shows you have the answer to her problem? As a life coach, you may dedicate a portion of your website to testimonials of happy clients. Be sure to include a photo as a human touchpoint.

Marie Forleo is a master of this. She has a page on her site entitled “Praise” with a seemingly endless stream of success stories. Her visual brand identity becomes a composite of all the people she’s helped to live their best lives.

03. How Do You Visualize Your Personality?

Once you understand who your audience is and what you have to offer, the challenge becomes the how. How do you present our personality visually? In on online world, many brands face the challenge of expressing personality without actually interacting face to face. Whereas before your sales team or customer service would put a human face on your brand, online has created a barrier.

This barrier is even steeper if you’re planning on using text-only to woo your audience.

Obviously, I love text, but when building and promoting your brand identity, there’s more to the story than just writing words.

Using visual references, you can add tone to your words. Let’s look at these examples:

The Color Run shows that it’s an upbeat event with the colorful choices. It’s hard to look at this site without feeling energized.

Conversely, Land Rover shows us that the brand rugged and serious, maybe a little gentlemanly.

You can tell that these sites offer two different personalities. One site is playful and the other is more serious. How do you know? Imagery choices, photo filters, and color schemes.

Consider how you can play up the images on your site to bring out the key points of your personality.

04. How Do You Find the Emotion?

A surefire way to reach your audience is through emotion. Does your brand tell a story that will move your customers in some way?

P90X knows how to stir emotion in their customers. Targeting couch potatoes, P90X shows you what’s possible if you get off the couch and start doing pull ups. Within 90 days, you’re transformed into a fat-burning, muscle bursting machine. Are you pumped? Are you ready to put down the potato chips and make life happen instead of watching it go by!? You can do it! (That’s the emotion behind the P90X brand.)

05. How Often Should You Tell Your Story?

Once you have a narrative, tell it over and over again.

Armstreet specializes in Medieval, Renaissance, and fantasy clothing. The photos that sell their clothing features models in full costume, posed against a dreamy, slightly blurred background. The brand keeps their minimalist logo on the bottom right of the images. Take a look at Armstreet’s Twitter page. The timeline is filled with professional images call to mind childhood fairy tales. It’s a narrative that Armstreet constantly, and successfully, repeats.

The way to get recognized as a brand leader is crafting the perfect story and then telling it again and again to anyone who will listen.

06. Do You Keep It Simple?

Your visual identity does not need to be complicated. When you have too many things going on, you run the risk of confusing your audience. At the risk of seeming underwhelming or unexciting, remove everything from your visual identity that does not contribute to your brand persona.

07. Do You Keep it Consistent?

Jeweler Laura Bezant offers a distinct visual style on her brand website.

When I visit Laura Bezant’s Instagram, I get images in a similar tone.

Sun-washed images with all the same color story.

Consistency lies in applying the same filter, the same size, the same font type across your visual platforms. It creates cohesion, so that if a customer follows you on Facebook instead of Instagram, they still get the same story.

08. Are You Easy to Understand?

Your visual story shouldn’t be so esoteric that I have to perform a Vulcan mind meld in order to understand your brand message. If I stumble upon your site, will I know what you offer? Observe:

If I come across this page, I hope you’re selling hamburgers and not weight loss advice.

Your visual branding should make sense with your identity.

09. Do You Speak the Language?

When you’re on social media, you should be fluent in the conversation. For visual branding, it’s key to find the appropriate content for your audience on each platform. For example, Pinterest appeals to advice, DIY, and helpful tips and tricks. The images you post on Pinterest should be in someway actionable by your audience. You want them to pin it for increased exposure, but you also want them to click through to your site.

Facebook and Google+ is all about community. You should use these platforms to start conversations with your audience, and gage interests to further develop your brand.

On Twitter, short bursts of commentary, shameless self-promotion, and catchy imagery is the language. Instagram is suited to slices of life.

When creating visuals for your social media persona, we’ve created automatic templates for each platform. Instead of agonizing over image dimensions, start a new design with our pre-configured dimensions.

10. How Do You Brand on Social Media?

Use the opportunity on social media to become human to your friends, followers, and customers. It’s important to use every square inch of real estate to perfect your persona. Take a look at what these brands created on Pinterest.

Creating a cover image for your boards makes it easier for your audience to engage with you. This practice also ties in with consistency.

11. Are You Confused About Logo?

You are not your logo. Although a logo is great to have, it has no intrinsic meaning by itself. Eventually, as you develop your brand identity, your audience will come to associate your brand with your logo, and transfer all of their perceptions about you onto your logo.

Now, that doesn’t mean you should not worry about your logo. But, strive to keep it simple, and let the colors agree with your core branding message (more about that later).

12. Are You Using the Right Font?

Words may be exempt from visual branding, but not typography. Fonts help convey your tone. I learn a lot about your brand based on the font you choose.

13. Are You Using the Right Colors?

Colors are everything when it comes to visual branding. There’s a psychological attachment to each color. Observe:

I suggest to stick with a two color maximum for the visual branding of your logo, website, and stationery. If you use photos on social media, they will probably feature more than two colors, but you can create consistency when you add the same filter to your photos. Finding the perfect color story harmonizes your brand.

So, what does each color say?

A blue color scheme says that you can be trusted. Many banks use blue to convey this message, including Barclays, Chase, and Citibank.

Purple is often associated with creativity and luxury. You should use this color if you’re slightly on the fringes or a true original.

Red is passionate and bold. Along with sister colors orange and yellow, red grabs attention.

Green is eco-friendly and fresh. It symbolizes growth. It’s a no-brainer for natural products to use this color.

Black is great for authoritative sites. It’s also a sophisticated color that works well with established brands.

14. Have You Considered Black and White?

Regardless of what color you choose for your branding, you should always consider what your style elements would look like in black and white. If it doesn’t look good printed, it’s probably not a wise choice for fixed design elements, including logos. Think about how your branding would look printed on an invoice. Will it still read true?

15. Do You Interact for Feedback?

The beauty of social media is that you can interact with your audience. Don’t let that go to waste. Run photo contests on Instagram or create a group board on Pinterest and invite followers to contribute to a specific team. Use these visual clues to understand what are your audience is interested in.

16. Have You Created A Template?

It can be useful to go with a template for your images. This adds to your consistency. Decide what style of images you’d like to add to blog or social media. Also consider the perfect size, what filter to use, the placement of your overlay text, and the font type, too. Create a standard template for you and your team to follow.

17. Do You Keep a Preference Library?

One of the best ways to keep track of your visual brand identity is to keep a library of your exact specifications. You should always use the same fonts, sizes, colors, and image types. This is referred to as your style guide, and we have a primer on creating one for your blog here. You can easily create a visual reference guide in Canva that shows you the primary colors you will use in your branding. You can also mock up the way your images should look.

This is especially useful if you have guest bloggers who contribute to your blog. This leads me to the next question.

18. Have You Unified Your Team Around Your Brand?

Sometimes your team consists of you, your boyfriend who helps out part time as a web designer, and a bowl of M&Ms, but it’s never too early to define your visual identity and make sure that everyone is onboard. Like we did on the prior tip, be sure to create a template and share it with everyone who will contribute to your visual branding.

19. Are You Relatable?

In your visual branding, you need to show off how accessible you are. Your audience needs to feel connected to you. The best way to be relatable is to be transparent. The more honest and raw you are, the more authentic you become, and the easier it is for people to identify with you.

20. Are You Forgetting About Video?

A great way to craft your visual branding is through video. According to Forbes Insight research, 59% of senior executives would rather watch a video than read text. And, of those people, most of them will click through to your website for additional information.

YouTube is the second largest search engine in the world. That’s because videos entertain us, and help us understand a product or service. Let’s look at a few companies that are winning video branding.

Fair Companies

Video producer Kirsten Dirksen has amassed an enviable YouTube following with her growing library of mini-documentaries. She shares videos of simple and alternative living, including tiny homes. Her videos are generally longer than 10 minutes and feature high def quality. Her simple “faircompanies.com” logo is located on the bottom right of each video.

Sick Science

Just like Fair Companies, Sick Science prefers to keep their logo in the bottom right of the video screen. Sick Science is a brand geared towards kids and demonstrates quick and simple science experiments. Most videos are two minutes or less. The large, easy-to-read texts used in the videos also translates to an organized visual library.

Shameless Maya

Shameless Maya is a social media experiment by Maya Washington. She’s a photographer and artist, and her brand is a ray of sunshine, motivation, and positivity. She releases vlog-style videos that share inspiration and slices of life. She also uses bright and colorful thumbnail organizing on her uploads page.

The Takeaway

Now it’s time to create. Use these tips to build your own visual brand identity. If you need additional ideas, check out this killer guide to creating a consistent brand image here.

A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide.

Edward Tufte once said: “Great design is not democratic; it comes from great designers. If the standard is lousy, then develop another standard.” Although there’s no stopping some clients from making their website awful, by creating a style guide, you’re effectively establishing rules for those who take over from you.

Branding Style Guides: What To Include?

Strategic Brand Overview

This should be short and sweet. In as few words as possible, make clear the vision for this design and any keywords people should keep in mind while designing. Most people will probably flip straight to the picture pages, but they may read a few sentences here.

See Kew’s branding guidelines.

Kew uses strong photography in its “brand essence” message, with a few paragraphs that both inspire and define the brand. Even if you read only the first sentence, you get a sense of what it’s trying to do. While Kew has quite a few of these message pages, they are intertwined with beautiful photography that themselves define the photographic style and primary message.

Logos

For print and Web, most brands revolve around the logo. Make sure you provide logo variations and clarify minimum sizes.

See Cunard’s branding guidelines.

Cunard provides many variations on its minimum sizes. Because its crest can be displayed either on its own, with the name or with the tagline, specifying minimum sizes is important for legibility (for example, if the logo with the tagline is too small, it will be illegible).

_See Think Brick’s branding guidelines (PDF)._

Provide logos with different colors, and specify which colours are allowed. Think Brick gives designers a lot of options with its design. The point is to allow flexibility while maintaining consistency.

Show Examples of What and What Not to Do

You’re a professional, and you know better than to mess around with logos. But many others will try and think they’ve done a good job. They are so wrong. You must make clear what they can and cannot do with a design.

See I Love New York’s branding guidelines.

I Love New York has done a great job defining all the things you shouldn’t do with its logo. It has also produced a beautiful (though bit wordy) document.

Spacing

Many non-designers underestimate the need for white space. Include a spacing reference, especially for the logo. Rather than specifying inches or centimeters, use a portion of the logo (a letter or a shape) to set the clearance. This way, whether the logo is big or small, the space around it will be sufficient.

See BlackBerry’s branding guidelines (PDF, 2.2 MB).

BlackBerry not only explains its spacing policy, but also uses the capital B in the logo to define the clearance.

Colors

Always include color palettes and what the colors should be used for. And include formats for both print and Web: CMYK, Pantones (if they exist) and RGB (or HEX). Always include a CMYK alternative for Pantones because sometimes matching is hard (especially when Pantone printing is not possible). Specify primary and secondary colours and when and where to use them.

_See Channel 4’s style guide._

Channel 4 shows all of its Web and print colors, and it displays the swatches below an image that helps to define its color palette.

See the New School’s branding guidelines.

The New School is clear about its primary colors and defines them for both print (Pantone and CMYK) and Web (RGB). Its brand guideline document is beautiful, too.

See Christopher Doyle’s Personal Identity Guidelines (PDF).

Okay, so this one isn’t a traditional branding guideline, but rather a personal identity guideline. Here Christopher Doyle shows off some alternative color palettes. He does a fantastic job of mocking branding guidelines; well worth a look (and chuckle).

Is your pattern library up to date today? Alla Kholmatova has just finished a fully fledged book on Design Systems and how to get them right. With common traps, gotchas and the lessons she learned. Hardcover, eBook. Just sayin'.

Fonts

You’ll need to define the typefaces to use: sizes, line height, spacing before and after, colors, headline versus body font, etc. Make sure to include Web alternatives for non-Web fonts.

See Yale’s typeface.

Yale has its own typeface, which it provides to its designers.

See Yale’s Visual Identity page.

On the typeface section of its website, Yale also details when fonts should be used. It has a specific Web font section, detailing which fonts to use there.

Layouts and Grids

By setting up templates and guidelines for grids, you encourage best practices and promote consistency. In Web, preparing some generic templates can curb excessive creativity with the layout.

See the Barbican’s branding, print and Web guidelines.

For its website, the Barbican has set up building blocks that are both flexible and ordered—meaning they’re likely to remain in a grid.

Tone of Voice

A huge component of a brand’s personality is the copy, and defining the tone is a great way to keep a brand consistent. When multiple people are writing the copy, the brand can start to sound like it has multiple personalities.

See easyJet’s branding guidelines (PDF, 2 MB).

easyJet has a well-defined personality, both verbal and written, and it gives examples for both.

Copy-Writing Guide

For those who require clients to write their own copy but want to maintain consistency, a copy-writing style guide can be helpful. Copy-writing is one of those things that most people register subconsciously. When reading, your brain automatically looks for consistency and patterns, and poor copy-writing can ruin the reading flow.

See CAN’s branding guidelines (PDF, 845 KB).

CAN wants its number formats to look the same. On another page, it defines which spelling variants to use, reminds people of common mistakes and more.

Imagery

Many designers have established a particular tone in their photographs and images. Show your clients examples, and explain why they are good choices. Show them in the context of your design, and explain why they were chosen for that context.

See Zopa’s style sheet (PDF, 3.7 MB).

Zopa of making its illustrated style clear. Its online style guide is very good, and it offers further tips on how to construct pages around its illustrations in the online style sheet.

Bring It All Together

Show a few examples of what the logo, photography and text look like together and the preferred formats.

_See Skype’s branding guidelines._

Skype has done a fantastic job of showing how it want designers to use its illustrations and photography. It has examples of the subtle differences between good and bad usage. The whole guide is beautiful and well worth a look.

Web Guidelines: What To Include?

Many people create branding guidelines but forget to include important style guides for the Web. Just like branding guidelines, Web guidelines keep everything consistent, from button styles to navigation structure.

Button Hierarchy

You’ve carefully decided what all the buttons are for and meticulously defined their states. Unfortunately, the in-house designer hasn’t applied your hover states or has created their own, and they look terrible.

Create a page that shows what all links do (including the buttons), the appropriate behavior of each and when to use them (with examples of appropriate usage). If one button is dominant, make clear the maximum number of times it should be used per page (usually once at most). Define the hover, disabled and visited states for all buttons.

Gumtree has worked hard to define all button states, especially custom buttons (for example, Post an Ad has a + sign in front of it). These were defined for the Gumtree redesign, which is now live.

Icons

Defining size and spacing and where to use icons is another great way to promote consistency. If icons should be used only sparingly, make this clear.

See ZURB’s icon sizes.

Here, the ZURB agency defines icon sizes and when to use them, and it provides clients with an online source from which to download them. ZURB also defines badges and explains their purpose. It believes that its guidelines are best shared online.

Navigation (Logged In/Out States)

On the Web, good consistent navigation can make or break a website. New pages are often added to a website after the designer is done with it. Have you left some space for this? Doing things like letting people know what to do with new navigation items and showing logged-in states make for a cleaner website.

See the BBC’s Global Experience Language.

This is one of the most beautiful guidelines I’ve seen. BBC shows what to do with long user names, how much space everything should have and more.

Basic Coding Guidelines

There’s no way to make someone else code like you, but you can offer others basic guidelines that will minimize the damage, such as:

  • CSS class naming conventions. Should they use or ?
  • JavaScript integration. Are you using jQuery? MooTools? How should new JavaScript be integrated?
  • Form styling. Include the code, error states and more so that they understand what style conventions you expect.
  • Doc type and validation requirements. Do you allow certain invalid items? Do you expect the CSS and HTML to validate?
  • Directory structure. Make clear how you have organized it.
  • Accessibility standards. Should people include tags? Is image replacement used for non-standard fonts?
  • Testing methods. Which standard should they test with? Do you have staging and production websites?
  • Version control. What system are you using? How should they check in new code?

How To Format

Some branding guidelines have been turned into beautiful books:

_See the Truth brand guidelines._

This beautiful example, which was designed to go with a brand redesign, shows just how beautiful branding guidelines can be.

But this requires a substantial budget and a reprint every so often. For most companies with tight budgets, this is not practical. On the Web especially, content is constantly being refined and styles for elements are not set in stone.

Here are a few good practices for formatting your guidelines:

  • Include a cover. This should include an example of best practices for the logo.
  • Make it beautiful. Even if it won’t be printed as a book, you can still make sure the branding guidelines appeal to the viewer. After all, you’re trying to inspire them to use your designs to the highest standards!
  • Include contact details. For when they have questions, so that you can prevent bad decisions from being made.
  • Make it easy to access and open. Usually this means putting it online or in PDF format. Don’t make it too big; use images sparingly.
  • Make it printable. For international companies especially, keep margins big so that the document can be printed in both A4 and US letter sizes. If it’s online, make sure your print style sheets render the document as expected. Don’t do white text on a black background, either: you don’t want the client to have to buy a new ink cartridge every time they print a copy.
  • Make it easy to change. Updating, adding new pages and making changes should be easy, because it will happen!
  • Create a mini version. Make a short handy guide that has just the basics, in addition to the full version. Both will get used in different instances.
  • Provide print templates whenever possible. Things like letterheads, business cards and envelops should have their own templates. While guidelines will help people put things in the right spot, they usually won’t help them get the right resolution or color format.

Here’s a useful template for a one-page branding guideline.

Length

Remember, people should be able to follow branding guidelines. A 100-page book will engage none but the most diligent designer. Many believe that a concise three-page overview is best for daily use, with a more in-depth 20-page document for more complex tasks. Less is more, usually!

See the BBC’s branding guidelines and poster.

The BBC has created a detailed 38-page guideline. But it has also produced a beautiful poster for quick reference. It’s a brilliant idea, and it keeps the guidelines at the front of mind.

Resources to Style Guides

Related Posts

You may be interested in the following related posts:

(al)

Comments

Leave a Reply

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