You are on page 1of 20

Bing product guidelines 1.

FINAL
Bing product guidelines
This document provides visual guidelines and recommendations to implement the branding for Bing for third
parties. These guidelines can help echo the Bing product brand experience into your environment.

In This Document

Bing branding guidelines


Provides guidelines for using Bing brand elements

Bing searchbox guidelines


Provides guidelines for implementing a Bing searchbox

Bing searchbox guidelines for third party (web)


Provides options for third party websites for implementing a Bing searchbox

Font guidelines for UI


Provides UI guidelines for using Bing brand fonts

Visual elements for Bing search UI


Product colors and elements for Bing search UI

Editorial style
Provides recommendations to give you a headstart in communicating clearly and effectively

Approach to UI error messages


Best practices for error messages

Overview of China Transliterated Logo


How to apply the chinese transliteration logo for third party
The guidelines are specific to China only.

China Transliterated Logo searchbox guidelines for third party (web)


How to apply the chinese transliteration logo searchbox for third party
The guidelines are specific to China only.
Bing branding guidelines
This topic provides guidelines for using Bing brand elements for third party API. Branding is the emotional
positioning of a product as perceived by its customers. Product branding is achieved through a combination
of factors. This includes the product name and logo, use of color, text, graphics, and sound, the style of various
other design elements, marketing, and most important, the attributes of the product experience itself.

Brand Signature Overview


A brand signature is a branding element that communicates brand identity and consists of elements such as
the brand trademarked symbol, the brand name, or the brand logotype.

There are two kinds of Bing brand signatures:


1. Bing text with trademark
2. Bing logo - full color or reverse

Bing brand signatures can be used in the user interface.

Note* The Bing brand signature must be used when showing the Bing searchbox.

Logo usage guidelines


Use the provided logo artwork files without alteration. Any use that falls outside what is outlined herein is
strictly prohibited.

Preferred logo versions


The full-color and reverse full-color versions of the Bing logo are
the only two versions that contain the orange dot. For that
reason, they are the preferred versions of the logo and should be
full color
used whenever possible.

Reverse full-color versions of the Bing logo (with Bing in white


and the dot over the letter i in orange) have been provided for
use on dark backgrounds.

reverse
Refer to the supplemental Bing Partners Guideline At a Glance
for full details, or go to https://brandtools.
Brand the user interface with the Bing searchbox
The Bing brand signature is required to appear on the same UI screen as the Bing searchbox.
One of the following Bing brand signatures must be used:
1. Bing text with trademark
2. Bing logo - full color or reverse

Bing logo with searchbox


When used with the Bing searchbox, the Bing brand signature should be easy to see and easy to read.
Brand the Input to Submit Search Requests by Category
The Bing brand signature must appear on the same UI screen that is used for submitting category queries.
One of the Bing brand signatures must be used on this UI screen:
There are two kinds of Bing brand signatures:
1. Bing text with trademark
2. Bing logo - full color or reverse

small portable device


Put the Bing brand signature in a location on the screen where it
has enough spacing apart from other UI elements, and so that it
appears uniform and balanced, and does not appear cluttered or
on a visually-busy, distracting background.

homepage

* Some examples do not reflect final product release.


Images shown are for illustration purposes only.

When a Bing brand signature is used with maps


or photography, the brand signature should
reside in an empty screen area apart from other maps
UI items or areas of the photograph that draw
visual focus away from the brand signature.

Do not put the Bing brand signature in a loca-


tion on the screen where it competes with the
focus of another image, and do not put it in a
visually-busy, distracting screen area.
Bing Text Brand Signature Guidelines
The Bing text brand signature includes the brand text that reads Bing™ (with trademark).

Bing Text Trademark Usage


In some instances, it may be more appropriate to have a text-only mention of either Bing or a specific Bing
service. In that case, on the first mention of a trademarked name in body copy, the trademark symbol (™)
should be used, e.g., Bing™.
In-depth information regarding use of Microsoft trademarks may be found at the General Microsoft Trade-
mark. Guidelines at http://www.microsoft.com/about/legal/trademarks/usage/general.mspx.

For small applications, adjust the size of the trademark symbol so that it is legible but not disproportionately
large. For large applications, use your judgment so that the trademark symbol doesn’t appear disproportion-
ately large. When using the reversed logo in small applications, the trademark symbol can be adjusted but
should be no smaller than 5 points.
Refer to the supplemental Bing Partner Guidelines for details on trademark usage.

Bing Text Elements


• References to the Bing name in text must always have an uppercase B.
• Never abbreviate Bing. For example, do not use BG, B Search, and so on.
• Never use Microsoft in the possessive form, such as “Microsoft’s Bing features are excellent.” Instead, use the
company name as an adjective. For example, you can say “Microsoft Bing features are excellent.”
Refer to the supplemental Bing Partner Guidelines for details on copy/text guidelines.

Bing Logo Orientation


The Bing brand signature should never vary in orientation from
how it appears in the artwork provided in the product. Always posi-
tion the Bing logo at a 0 degrees horizontal angle. Never tilt it or
position it at an angle that is not perpendicular.
Refer to the supplemental Bing Partner Guidelines for details on
the DO’s & DON’T when incorporating the Bing logo.

Bing Logo Minimum Size


The graphic below shows the Bing logo at its smallest acceptable
size. The logo (excluding the trademark symbol) should never be
less than .625” in print or 45 pixels online.

.625” or 45 px wide
Logos for dark backgrounds
Use the reverse full-color versions of the Bing logo (with the “Bing” letterforms in white and the dot over the
letter “i” in Bing orange) on dark backgrounds.
Because it would lack sufficient contrast with the dot over the letter “i”, the full-color version of the Bing logo
should never be placed against an orange background. Never use the single color black Bing logo over the
orange. If the Bing logo must appear on an orange background, use the single color reverse white version only

Remember that the Bing logo should:


• Never appear connected to, or as part of, any other symbol or icon.
• Never be contained in a box, circle, or other shape.
• Never be modified in any way. Do not recombine the artwork elements together with other logos or
graphics to create new artwork. Use the artwork as it is provided from the Bing branding team.

games

The Bing logo brand signature should also not be used by third parties without obtaining written permission
from Microsoft, and obtaining approval from the Legal and Corporate Affairs (LCA) department. For more infor-
mation, see this Microsoft Web site.

Clear space
A minimum clearance must be maintained around the logo and other graphics and visual elements. The clear
space (x) around the logo is equal to the height of the lowercase letter “n” in the word “Bing.”
Bing searchbox guidelines
As the gateway to the Bing search experience, the search box forms an integral part of the Bing brand. The
text in the entry box may be the “search for” attribution text as depicted below, or it may be used to place
suggested keyword search text. When combining the text, the Bing orange spy glass icon, and the white entry
field box, the searchbox becomes a powerful visual representation of the Bing search experience.

Bing searchbox details


• Font in the Bing searchbox is small/normal or 14pt Arial, Verdana, Helvetica,Sans-Serif
• Color of text is #525051
• Border around box is 1px solid #ACBABD for primary box. (alternate color #CCCCCC)

Bing search box proportions:


• The entry field box may be expanded horizontally, but its width should never be less than ten times its height.

Bing search box minimum width

Bing searchbox clearspace (no scopes)


• Always allow for clearspace around the search box that is the equivalent to the height of the box.

NOTE* In order to avoid confusion, the Bing search box should never be used as a supporting graphic (non
working search box) on a Web site.
Third party Bing searchbox guidelines
These guidelines are specific to our syndicated search box. The design of the box varies slightly on our
home page in size only. Our syndication guidelines are intended to accommodate partner web sites and
implementations.

Bing search button color and size


The search button in Bing is a gradient orange. The image will be provided by the search team.
• Searchbutton is 22x22 442b
• Min height: 28 px includes border

Size
The research done in search on box size indicates that the best relevant results are obtained when a user en-
ters 2-3 words. The optimal box size for 2-3 words is 35 w’s.

• Text box should be wide enough to accommodate 35 w’s


Third party searchbox examples
Using the ‘results by Bing’ Attribution
The logos here are only to be used for display on Search Engine Results Pages when attribution is needed.
The phrase preceding the brand is “results by” and it is localized as well as localizable.

When the text + logo version is used in a


market that requires ‘results by’ text to be
localized, system text can be used.

Partners can localize the text our use the


localized strings provided in the appendix
below.

The font for ‘results by’ is verdana, 11px

The color is #555 or white, depending on


site background

There are 6 px of space between the text


and the logo.

Linking behavior
The attribution graphic should be hyper-
linked to http://bing.com.

The alt text for the graphic should be ‘search


by Bing’ or ‘powered by Bing’
Font guidelines for UI
This topic provides user-interface (UI) guidelines for using Bing brand fonts.
The following picture shows the options for fonts for using Bing on a portable device.

The Segoe UI and Arial font family in Light, or Bold in Black is the preferred font to use in online communica-
tions. Verdana or Helvetica in Regular, Regular, or Bold in the color Black is the second choice.
When possible, avoid using italic fonts to ensure clarity and readability in the UI.
Visual elements for Bing search UI
When you create online use a color scheme that is consistent with the color palette for the Bing product.
These colors are an important visual factor of the product UI. The colors that comprise the color palette
are as follows:

Buttons for Bing search UI


There are three flavors of buttons to choose from depending on the context of the UI. You must use a color
scheme that is consistent with behavior for the Bing brand. These colors are an important visual factor of the
product branding.

Orange button can only be used once on a screen as the color is a hightlight for the single main
call to action.
General button can be used multiple times on a screen to support the single call to action button.
Search results guidelines
This topic provides UI guidelines for displaying Bing search results by a third party.

No Modification of Search Results


Search results can be accessed from Bing through the API.
• Cannot change, re-order, or remove any portion of the search results from the Bing search engine.
• Cannot copy, store, archive, or create a database of the content available through the Bing
search engine.
Editorial style
Style
Like the Web itself, Bing is illuminating, rewarding, and vital. To convey the central role of search on the Web,
the Bing style must also express the Web’s dynamism and its overt sense of endless discovery.
The Bing style should inspire users’ confidence, help them to easily accomplish what they came to Bing for,
and enrich their online experience. This is a call for friendly, engaging language with a little panache and oc-
casional surprises, and a tone that piques curiosity and propels exploration that drives discovery.

Tone
Tone refers to a writer’s attitude toward the reader and the subject matter. Tone creates a personality and
affects the audience’s reaction to what is being said. For example, you would use a different tone to write an
executive summary (formal) than you would to write a letter to your cousin (very casual).
When writing text for Bing (whether UI or help content), imagine that you’re helping a friend use the product
for the first time. This person isn’t your best friend or significant other, but instead, a neighbor or family friend.
Users need to feel comfortable and at home when using Bing, but the language shouldn’t feel presumptuous
or too familiar. Dare to show a little flair without being brash.
The tone of Bing is:
• Approachable friendly, upbeat, conversational
• Illuminating intriguing, engaging
• Rewarding enriching, gratifying
• Thoughtful authentic, insightful, profound

These characteristics imbue the Bing brand in the UI.


Values
Above all, we value accuracy, clarity, brevity, and freshness. That is, we want to get it right, make it understand-
able (and not easily misconstrued), use so few words that customers might actually read them, and express
concepts originally (as long as they’re also accurate, clear, and brief).
Voice
Voice refers to how writers speak to their audience. Bing text speaks directly to users in the second person
(referring to the user as “you”). Don’t refer to the user as “I” or “me.”
• Do Express yourself
• Don’t Express myself
• Do Your latest purchase
• Don’t My latest purchase
If necessary, refer to Microsoft or Bing as “we,” but only if this usage benefits readability or tone.
• Do On your first time using Bing cashback, we will ask you for an email address. (Use of “we” is OK in
this case, because it suggests a friendlier, less pushy tone.)
• Don’t We can’t find that page. (“We” sounds like Microsoft controls this process, and has a negative
connotation here.)
A way to write around “we”: That page doesn’t exist. Let’s see if we can help you find what you’re looking for.
Approach to UI error messages
Often the best error message is no error message. Many errors can be avoided through better design, and
there are often better alternatives to error messages. It’s usually better to prevent an error than to report one.
The most obvious error messages to avoid are those that aren’t actionable. If users are likely to dismiss the
message without doing or changing anything, omit the error message.

Follow prescribed best practices for error messages

Good error messages have:


• A problem. States that a problem occurred.
• A cause. Explains why the problem occurred.
• A solution. Provides a solution so that users can fix the problem.

Additionally, good error messages are presented in a way that is:


• Relevant. The message presents a problem that users care about.
• Actionable. Users should either perform an action or change their behavior as the result of the
message.
• User-centered. The message describes the problem in terms of target user actions or goals,
not in terms of what the code is unhappy with.
• Brief. The message is as short as possible, but no shorter.
• Clear. The message uses plain language so that the target users can easily understand problem
and solution.
• Specific. The message describes the problem using specific language, giving specific names,
locations, and values of the objects involved.
• Courteous. Users shouldn’t be blamed or made to feel stupid.
• Rare. Displayed infrequently. Frequently displayed error messages are a sign of bad design.
Overview of China transliterated logo
These apply to branding of search and syndication of our searchbox to other Microsoft web sites such as MSN.
com. Our search brand in China, “必应 Bing.” The Chinese character必应 is pronounced “bee-ying” and its
meaning is derived from the last two characters of a Chinese proverb “有求必应,” which means “ask and you
shall find.”

The guidelines below are specific to China only. We selected a Chinese character to pair up with Bing,that
would enable us to effectively shape the meaning of the brand, ensure appropriate pronunciation and meet
the unique dynamics in China. This transliteration strategy is a first for Microsoft to closely align and reflect the
positive Chinese association and phonetics into the brand.
The direct translation for “Bi-ying” is ‘certain to respond or ready to answer.’ This translation aligns well with
our product vision and will enable us deliver a unique search offering in China.
The Bing logo was created to express the Bing brand personality in a number of ways. The open letterforms
are friendly and approachable, with a sophisticated simplicity. The essence of the Bing brand personality: ap-
proachable, thoughtful, illuminating, and rewarding, is embodied in the orange, elliptical dot over the letter
“i.” The orange dot highlights the Bing moment of decision and supports Bing positioning as the decision
engine. Even though blue is the dominant color in the Bing logo, orange is the highlight or focus color of the
Bing visual identity system.
All Bing™ materials must include the logo.

The Bing™ logo lock-up is comprised of two parts: the Bing™ brand logotype and the Chinese transliteration.
They have been combined together to create one piece of artwork. Please always use the artwork provided.
The transliteration must never be used by itself.
Remember that the Bing™ brand signature should:
• Only be used for marketing Bing™ products, features, and programs.
• Never be modified in any way. Do not separate the Chinese transliteration characters from the Bing™
logotype, or recombine the artwork elements with other logos or graphics to create new artwork. Use
the artwork as it is provided on Media Bank.
• Never appear connected to, or as part of, any other type, symbol or icon.
• The trademark symbol should always accompany the Bing logotype.
• Never use the logo contained in a box, circle or other shape.
• Never rotate the logo.
• The logo is not be used by third parties without gaining written permission from Microsoft ™ and
approval from the Legal and Corporate Affairs (LCA) department. For more information, see http://
www.microsoft.com/mscorp/ip/trademarks/logo/programs.mspx.

Refer to the supplemental Bing Partner Guidelines China Logo for logo usage.
China transliterated logo
Third party Bing searchbox guidelines
These guidelines are specific to our syndicated search box. The design of the box varies slightly on our
home page in size only. Our syndication guidelines are intended to accommodate partner web sites and
implementations.

Bing search button color and size


The search button in Bing is a gradient orange. The image will be provided by the search team.
• Searchbutton is 22x22 442b
• Min height: 28 px includes border

Size
The research done in search on box size indicates that the best relevant results are obtained when a user en-
ters 2-3 words. The optimal box size for 2-3 words is 35 w’s.

• Text box should be wide enough to accommodate 35 w’s


China third party searchbox examples
Using the ‘results by Bing’ Attribution
The logos here are only to be used for display on Search Engine Results Pages when attribution is needed.
The phrase preceding the brand is “results by” and it is localized as well as localizable.

When the text + logo version is used in a


market that requires ‘results by’ text to be
localized, system text can be used.

The font for ‘results by’ for China is


MS Gothic or SimSun, 13px

The color is #555 or white, depending on


site background

There are 6 px of space between the text


and the logo.

Linking behavior
The attribution graphic should be hyperlinked
to http://bing.com.

The alt text for the graphic should be ‘search


by Bing’ or ‘powered by Bing’

You might also like