Visual elements

• Images, graphics and animations can be applied to ABB's Web pages and applications.
• Placement and size of the ABB logo is fixed.
• Special rules apply for creating Mastheads, particularly for ABB Internet.
• As a general rule, unnecessary use of graphics and Flash should be avoided. Keep in mind the download time and users with disabilities.

Here is a check list to follow:

• Restrict the use of unnecessary graphics, especially gif animations
• Limit the use of Flash, especially those with embedded navigation
• If using Flash, always have a non-Flash version (see e.g. the Flash on main page www.abb.com)
• Avoid flashy colors
• Always include a descriptive ALT-tag when linking to an image, and a descriptive image caption

• The red version of the logo is the only one to be used on the Web.
• 3 fixed sizes have been developed; 1 for the Internet, 1 for the intranet and 1 for pop-up windows.
• The logo should appear in its original format only once per Web page, and always on a white background.

SPECIFICATION - COLOR:

RGB:	255/0/15
HEX:	FF000F

IMPORTANT:
Do not take an original for print in CMYK or PMS and convert it to RGB. This will not give the right values in RGB.

Logo size ABB Internet:

Size:	W 74 pixels by H 29 pixels
Placement:	14 pixels from left hand corner and top of page, leaving 14 pixels to menu level 1. (The protective field around equals half the height of the logo).

Logo size ABB intranet:

Size:	W 43 pixels by H 17 pixels
Placement:	8 pixels from left hand corner and top of page, leaving 8 pixels to menu level 1. (The protective field around equals half the height of the logo).

Logo size pop-up windows: (both Internet and intranet):

Size:	W 63 pixels by H 25 pixels
Placement:	13 pixels from left hand corner and top of page, leaving 13 pixels to menu level 1. (The protective field around equals half the height of the logo).

This version of the logo is primarily applied on pop-up windows displaying extra functionality.

If you require more general information about the logo, see The logotype under Basic Elements.

Size:	W 17 pixels by H 14 pixels
Placement:	Right-hand side of the Banner area

On ABBs Web pages icons are used as global buttons for the following functions: "Help", "Search", "Contact us", "Home" and "Sitemap". An additional icon illustrating a spinning globe is used on the intranet as a direct link to the ABB Internet. The pop-up text for the icons should always be in the same language as the rest of the site. The icons should preferably refer to the current site, i.e. show the site map for the current site, go to the home page of the current site, etc.

See more about icons under Interaction elements.

• Images should give the user a feeling of what the ABB spirit is about; communication diversity and focus.
• The images should communicate ABB issues and must be of good quality. (72 dpi)
• The images used should be related to the section or the content of the page, and only be added if it adds value.
• Examples of image themes:

All images used on ABB’s multimedia solutions should give the user a feeling of what the ABB spirit is about; communicating diversity and focus. It is important to ensure good quality images.

These images should portray ABB’s products and services in an interesting way. They should focus on creating exiting compositions of details, catching the beauty of them.



These images should communicate the spirit of people working for ABB, through focusing on people relating to each other, working, etc. The people on the pictures should look focused and, where appropriate, happy. For portraits (also in a work context), it is an advantage if the person looks straight into the camera.



These images should catch the rough beauty and diversity of industrial sites, harbors, etc. Since these images show “the industry at work”, it is important to choose images relating to the area of content.



Images that illustrate a related area may be used in some cases. However, it is important to concentrate on the three focus areas described above to create a uniform “look and feel” throughout the site.


One of the most important visual elements on the ABB Web pages, located on top of the Content area of each page. A consistent graphic element used to visualize the ABB brand on the net.

• The only element used to brand ABB and provide a consistent look.
• Utilized on ABB Internet and intranet to help the users to seperate the different sections.
• Different guidelines apply for the Internet and intranet, but they use the same size/dimension.
• The possibility to add new mastheads to the ABB Internet is restricted to Global Web Management
• More about mastheads and the specifications

WHEN/HOW:

• Animation may be used in the content area of all pages, but should be used with caution.
• Animation should only be used when movement is relevant and necessary.
• Make sure to keep the file size of the animation down, in order to avoid prolonged downloading time.

General style of ABB animations

• The animation should be kept light and with little movement.
• Use outline drawings of relevant objects with a technical look.
• Typography (Arial) may be used.
• Elements work well when different shades of the same color are used in layers.

• Section animations have been created for the main section mastheads only. The animations mirror the colors of the section they belong to.
• They have a general theme to make them suitable for all the content within the sections.
• Animations related to applications/tools on the ABB Internet or intranet follow the same specifications.
• Other animations may be used in the Content area and Resource area, but should be applied with caution and only when strictly necessary.

SPECIFICATIONS:

Width:	195 pixels
Height:	100 pixels
Colors:	4 shades of relevant section color.
Length:	Max. 4 seconds
Size:	Max. 20 KByte

Animation for mastheads for the home page of the country sites:

• A standard has been developed, and is customized for each country.
• Same size as the animation for section mastheads.
• Please contact Global Web Management for these mastheads.

• No specific guidelines apply to animations on the intranet.
• However, the general recommendations should be followed.
• Special animations can be developed to introduce applications & tools, e.g. on a portal page for the application.

• May be applied freely in the Content area.
• Content images should be relevant to the the article it is applied within – and of interest for the user.
• Crop (cut away) details that are of no importance.
• If the image needs an explanation, an optional caption may be used. Use ALT text to help users with disabilities
• No size measurements are given, but the templates has a maximum size which is 400 px for template c-1 and c-4, 200 px for c-2, and 600 for c-3.
• Bear in mind that images with a lot of detail work better on a large scale.

• May be applied freely on both intro and standard content pages, placed on top of the Resource area
• Should be relevant to the content on the page and may function as an introduction to an article. A link on the image may be added.
• If a photographic image is applied, full width (195 pixels) is recommended.
• Because of file size, avoid using too many elements in the image. Close-ups and detail will increase the impact of the image used.
• May also be used to display an application identifier.