This entry, 3 Keys to Branding Your Website, from Jennifer Smith, gives tips on branding your website to entice visitors to explore further. This is another in our guest blogger series. Read more about Jennifer in her bio below. If you would like to be a guest blogger for BrandTwist contact Jamie@BrandTwist.com for more information.
As vital as the logo and content of a website is to a business, the images and colors that surround the content have a tremendous psychological effect on the visitor and has the ability to deter them or entice them to explore further. Both the logo and background need to enhance each other.
Properly branding your content and background has the ability to set the mood of your entire site, evoke confidence in your services, and make viewers remember clearly.
Here are some major keys on using logo, color and background branding for your webpage that will not only look good and boost your brand but evoke everything you’re promising:
1. WHICH TO USE: BRAND SYMBOL OR NAME?
There are basically three types of logos. You can have a purely graphic image only, a text/word logo, or a combination of both graphic and word. Even though you may think your logo is “fixed” or etched-in-stone, on a web page you have some leeway in how you display it. Here are some considerations in determining which type of logo would best play on your website:
Take a look at the Under Armour symbol. They often use their name, Under Armour, but also with clever typography they have taken the first two letters of their brand, U and A, and stacked them in a manner that it forms a swift and slick graphic logo that is easy to understand and memorable. While the company does not specifically use either their graphic or word logo to brand the background of their webpages, both logo versions are prominent on their apparel and are visible all over their webpages. If only the design using the words “Under Armour” were shown on every piece of apparel it would serve as a distraction from the rest of the copy on the page, given it’s lengthy name.
An example of a combination graphic/word logo is a brand like Adidas. Their name, Adidas, is short and unimposing. If the name was long and cumbersome, using both name and graphic together might be over-burdening the site. The graphic portion of the logo is three bars which is a fairly common symbol and may get confused with other brands. In addition, though their three bars are always present in some fashion, they are shown in several different shapes: a triangle kind of mountain shape, a three-leafed sort of flower, three horizontal, vertical or arched bars – so having an ambiguous graphic and a specific short brand name allows them to not only get away with always using both symbol and name together, but doing so provides a much appreciated clarity of identity.
2. FEEL THE COLOR:
Think of the services your brand provides and the manner in which you deliver. Try to choose the colors that best evoke the qualities of such a service. Think of the background as a voice and the logo (or brand name) as the worded speech.
Background:
You might be able to create your own customized background that truly reflects what your brand stands for; there are helpful adobe training design tutorials online, or you may require the consultation of an experienced graphic designer, either way, background should be considered as an important brand touch point. The background of a website tends to be one of the most overlooked aspects of building a quality webpage; it sets the mood for the entire website.
Use background colors that both evoke the tone and atmosphere you want people to have when experiencing your services. The background of Olive Garden is a perfect example of this. It sets the tone with a color that exemplifies everything the restaurant wants you to feel. The color of the textured background feels like earthy, Italian plaster. It’s a harmonious gold; a color that evokes comfort and warmth. This serves as a frame around the images and text and previews how people will feel when they go through an actual dining experience at the restaurant.
Take a look at brands such as The American Red Cross and Salvation Army that deal in urgent and immediate issues as health, emergency situations, and even mortality. These sites don’t want to project a warm, relaxed and cozy feeling like Olive Garden does; both of these sites use clean, clear, white backgrounds which helps make the site quick and simple to navigate and helps the user focus on vital information.
Logo:
The Olive Garden logo uses colors that remind us of olives: a deep green and purple. They also repeat the gold plaster theme. The logo is placed effectively on their site, serving as a signature at the top, left corner of every page.
Under Armour’s red and white logo is also featured prominently at the top center of every web page; and the only other bright red item, the shopping cart, is also at the top – two important items to draw your attention to.
Both the Salvation Army and The Red Cross brands utilize the color red in their logo, which is known to represent urgency, strength, energy and survival. This color does well to represent the services of both of these organizations and what they are all about. It stands out against the crisp white background also immediately draws your eye to what is important.
For further on the thoughts and emotions colors can evoke, check out more about color psychology and how it can influence people viewing your site.
If you are considering using your logo in the background, in most cases it is best to only include either your brand symbol or name in the background. Using both may feel like overkill. You’re already providing a substantial amount of information about your business on the page so unless you have a short brand name it is usually best to go with the symbol. A successful example of this is found in a tutorial on how to add a corporate logo and background to a website by IPM, an IT consulting firm:
3. SIZE DOES MATTER – SELECT THE RIGHT SIZE OF BACKGROUND:
Keep in mind that your website will not look identical across every device and web browser. The larger a background image, the longer it will take the user to download from their particular device. And if you are using a responsive design, the background might not display at all. A quick way to lose a potential customer is to leave them waiting for large images to download. Give consideration to file size when choosing your image, and make certain that your page looks good on mobile, tablet, and desktop browsers. You can determine which device, and therefore the screen resolution used by most visitors to your site, by using Google Analytics. Generally, you probably won’t need anything greater than 1920 x 1080. You’ll also want to make certain the aspect ratio of the image matches the displays on which it will be used. For desktops, the most common ratio is 16:9.
Remember, every interaction a viewer, user, client or customer has with your brand should be representative of who you are and what you promise to deliver. Take advantage of the free space – on your products, around your website or blog content and on other social media sites where you have a presence to bolster your brand.
About guest blogger Jennifer Smith:
Jennifer Smith is a web designer and photoshop guru who has authored over 20 books on web design and digital imaging. In addition to writing she enjoys educating others in HTML and Photoshop classes at American Graphics Institute. On Twitter, she’s @jsmithers.
