Web Design Guidelines Siemens Healthcare Diagnostics Web Design Guidelines Version 2.0 February 08, 2008

Web Design Guidelines

Siemens Healthcare Diagnostics Web Design GuidelinesVersion 2.0 February 08, 2008

Siemens Healthcare Diagnostics Global Marketing Communication & Services/ Creative Services2

Siemens.com/diagnostics Homepage


Fibonacci Grid & Zones

The grid for Siemens Web sites is based on the

Fibonacci series of integers and provides the

foundation for the distinctive space division that

we use in our Web pages. The grid begins in

the upper left corner of the screen and

expands downward and to the right. The

smallest grid unit is a square measuring 18x18

px; the pages consist solely of rectangular

areas.

A Siemens Web page consists of five zones based

on the Fibonacci grid. These are the 1) global, 2)

local, 3) identifier, 4) navigation and 5) content

zones. Each of these zones has a specific

purpose and contains distinctive, exactly defined

elements.

1024x768 Pixel Grid


Grid Coordinates

Siemens Healthcare Diagnostics Global Marketing Communication & Services/ Creative Services5 Zones & 1024x768 px Grid Sizes


1. Global Zone

The Siemens logo is only used in the color petrol (#009999) on a white background. Petrol is reserved for use with the logo and is not used for any other purpose.

Link to Global Site: Country & Region Web sites should set a link to Siemens’ global Web site (http://www.siemens.com) using the global Web site link element. Arrow icon used is black.

This is always just the Siemens logo: Petrol color on white background. You may not attach a hyperlink to the Siemens logo.

TextBackgroundLogo

Related Link to Group Site: Country & Region Web sites should set a link to Siemens Diagnostics global website (http://www.siemens.com/diagnostics) using the Related Link element. Arrow icon used is black.

Smooth aliasing

Smooth aliasing


2. Local Zone

The bar beneath the logo area must be Cool Gray (#D0D3DA). The text in this area is dark gray (#333333).

The right-hand area (where the site map and the contact us links are located) must use the Siemens Diagnostics selected accent color of lime green (#99CC66). The text is also dark gray (#333333).

backgroundTextTextbackground

Smooth aliasing


Country Identifier

The country identifier is an element located in the local zone. It denotes the country to which a Siemens Web site belongs. On country sites, the site identifier serves to identify the country.

The country identifier consists of the name of the country in the local language that is set by default when the site loads (e.g. “Deutschland” for Germany). When users switch to a different language version, the language of the country identifier needs to be changed too.

Note: Additional graphical elements like flags or maps must not be used to support the country identifier.

Textbackground

Smooth aliasing


Language Selector

At least one language option on your site is recommended. The language selection link or links are set

in Arial Regular, 11 px, in the darkest shade of gray in the Siemens online color palette (#333333).

Language selection links are in the target language (“Deutsch,” “Italiano,” etc.), and each consists of a

single word with the first letter capitalized. If there are two additional languages, the links are separated

by a vertical bar or may be put in a pull down. The currently selected language is not included as a

language selection option. For example, on a site with two languages, users only ever see a link to the

language not currently selected.

background Text


Contact Us

The Contact Us Link is a mandatory element on all Siemens Web sites. Clicking the Contact Us Link takes users to a page listing contacts or containing a form that they can use to submit an inquiry. It is also possible to open a new e-mail window directly.

Site Map link is optional, but recommended for larger sites.

backgroundText


Siemens Font Usage in Graphics

Note: Text located close to the logo (e.g., the link to the siemens.com) and the site identifier are set in an exactly defined type size and style. “Smooth” alias is recommended. “Spelling” is the same thing as “tracking”.

Text inside content visuals is set in Siemens Sans. The size and location of the text will depend on the picture content.

Text

The Siemens Font is available on the DX Creative Services FTP site for internal use. Users outside Siemens – in other words agencies, design shops, and other partners carrying out work for Siemens – are required to pay a license fee for the fonts.

The full font package costs € 750 (excluding VAT).

Our sales partners URW++ in Hamburg are responsible for distribution of the fonts. To purchase the full set for delivery on CD-ROM or via ISDN, send an e-mail to the following address:[email protected] Learn More


3. Identifier Zone

The lime green accent color should be used in the field under the key visual (which contains the site identifier).

For the image, you may use the same one as on siemens.com/diagnostics or one that more reflects your local culture. For the key visual, it is required to have a person that expresses a mood in a realistic relevant environment. Remember images should not be posed or used unrealistic lighting.

See Guidelines > Brand Elements > Style on Brandville for more general Siemens image guidelines.


Key Visual

The use of a key visual is mandatory. Only use one motif per Web site. You can choose whether to make the area below the key

visual (the site identifier) transparent or opaque. The key visual must always be a photo. Choose a bright

and friendly motif or mood image. Do not use illustrations,

graphics, editorial or technical images, product photos, or

animations, and do not include text in the key visual. See

Guidelines > Brand Elements > Style on Brandville for

more image guidelines.The key visual is not clickable.A unique key visual is recommended for specialty sites

that will differentiate the site to the user from the main site.


Site Identifier

The site identifier of Siemens Diagnostics sites should be the required “Laboratory Diagnostics” in Siemens Sans Black font. For microsites or satellite sites, it should be a unique name that identifies the site to the user. The site identifier is hyperlinked to the Web site’s home page.

Text Color

Opacity 80% or 100%


4. Navigation Zone

The main navigation bar beneath the local zone must be pale gray (#CCCCCC). The same color is also used in the secondary navigation area in the left-hand column. Only use one navigation background color per Web site.

The search area background is a darker gray (#666666).

Text Active TextPrimary Nav Background

Search Background Search Text


Primary Navigation

The primary navigation links are located in the upper area of the navigation zone and are set in Arial Bold, 11 px. The individual navigation items are separated by a vertical bar (a system font character, positioned midway between items). The primary navigation links may run across two lines but should not number more than 7 in total. In all language versions of any Siemens Web site, “Home” is always the first link in the primary navigation.

When selected or active, a navigation item is highlighted in a white. Do not apply other text attributes or underscores.

Nav Text Active Nav TextPrimary Nav Background


Mouse-Overs

Mouse-overs may be used to display secondary

navigation links when a mouse pointer is moved

over primary navigation items.

Mouse-over Text Mouse-over Background


Secondary and Tertiary Navigation Overview

The background color for the

secondary and tertiary navigation

links should be medium gray

(#333333) throughout the Web

site. The secondary navigation

links are located in the left column

of the navigation zone. The links

are set in Arial Regular, 11 px.

The text color for the navigation

links is dark gray (#999999).

When selected, a navigation item

is highlighted in a different color

of white (#FFFFFF). These links

never take users directly to an

external Web site.

Nav Text

Active Nav Text

Primary Nav Background

Please visit Brandville to further understand how this navigation is used for sites requiring more than three levels.


Secondary and Tertiary Navigation

Sites Requiring More than Three Levels (siemens.com/diagnostics)

When a secondary navigation item is clicked, the user is taken to the

next level down (step 1). The page displays all the navigation items on

this level. A link is provided to take the user back to the next level up

(White Nav items). To access the next level down, the user clicks on

one of the navigation items, and so on (step 2).

Level 2 Level 3 (step 1) Level 4 (step 2)


Secondary and Tertiary Navigation

Sites Requiring Less than Three Levels (specialty sites).

The secondary navigation links are located in the left column of the navigation zone. The links are set in Arial Regular, 11 px. Tertiary navigation items (also set in Arial Regular, 11 px) are indented below their respective parent item in the secondary navigation .


Search

The search link is an optional page element.

The search button is rendered as a graphic and located on the right next to or aligned right beneath a full width input field. (See button guidelines).

Search Background

Optional Text


5. Content Zone

There are several categories of guidelines for the content zone.

TextPortletsEditorial ImagesHeader ImagesBannersContext Navigation AreaRelated LinksButtonsIcons

Right MarginContext Navigation Area

MiddleMain Content Area


Content Zone: Text

Color, position and size

Text in the content zone on

Siemens Web sites is set in the

darkest shade of gray in the

online palette (#333333).

The following style settings

have been defined for text in the

content area:

headlines (Arial Bold, 12 px,

dark)

subheads (Arial Bold, 12 px,

light)

body text (Arial Regular, 12 px,

line spacing16 px)

picture captions (Arial Regular,

10 px, line spacing 14 px)


Content Zone: Portlet Text

By contrast, the settings for text

in portlets are:

headlines (Arial Bold, 11 px)

subheads (Arial Bold, 11 px)

body text (Arial Regular, 11 px,

line spacing 16 px)

picture captions (Arial Regular,

10 px, line spacing 14 px)

Navigation

Body text must not contain

hyperlinks referencing other

topics. Links are always set at

the end of an article, portlet or

section of text, are marked with

a standard Siemens icon, and

must not be underscored.


Content Zone: Portlet Colors

GrayPortlet Header

The standard color for portlet headers is the accent color of lime green (#99CC66).

You may also use dark gray (#666666) for the portlet headers for an alternative color. This color is recommended in the right margin contextual area instead of green.

One pixel frames around the portlet are in general not used, but are optional if needed.

Main Content AreaPortlet Header

Green Portlet Header Text Gray Portet Header Text

Primary Portlet Secondary Portlet


Editorial images in the content area (optional)

3. Editorial images in the content area (optional)


Editorial images in the content area (optional)


Header visual

A header visual is recommended to identify the specialty site or section of the site you are in. The images should be something relating to the site or section. There is a white background behind the header text. To the right of the text, there is a gradient mask from 0 – 100% that reveals the header image.

Size: 612 x 90 pixels

See also Siemens font guidelines page 11.

Text


Home Flash Header Banner

The requirements for flash ads/banners to be placed on the home page of www.siemens.com/diagnostics are as follows: 612 x 234 px

Less than 50 kb

There should be an alternative jpg or gif of the same dimensions for those who do not have Flash installed

The animation should end displaying something that looks clickable, either a button (see page 32-33) or just the Med DX blue arrow icon and blue text link, labeled: Learn more or Click for more

The whole banner should be clickable and linked to whatever it happens to be promoting/focused on

Med DiagnosticsLink Color Blue

See also Brandville external “Banner” Guidelines:


Context Navigation

The context navigation is located within the

right hand column of the Content Zone. The

element contains links through which users

access services, functionality or information

associated with the site or page content

(e.g., support offerings, extranet access).

Right MarginContext Navigation Area


Right Margin Banners

You may choose to have a right margin

banner to promote a section or satellite site.

These are global in that they will display on

every page of the site.

They must be 222 pixels wide. This

example is 69 pixels tall and follows the

banner guidelines.

See also Brandville external “Banner” Guidelines:


Related Links

Related links are appropriate to have in the right margin of the content area or in a portlet area. This is considered a contextual link.

Links are in blue with a blue arrow icon.

DiagnosticsLink Color Blue


Buttons (Interaction Elements)

Buttons are interaction elements and are

described in detail in our application guidelines.

The word(s) on a button begin with a capital

letter.

The font of the caption is 11 pixel Arial Regular.

The caption is centered.

The width of the button should be suited to the

length of the caption. Left and right paging

around the icon is 4 pixel to the button border.

There is a 9 pixel padding from the end of the

text to the borderline.

Pending until verified in Usability Test: The

angles of the button are rounded (1 pixel) if

graphical as shown below.

There are different types with and without a

border line available

Siemens Medical Communications / Creative Solutions34

Diagnostics Button Colors

Search Area Dark Gray Background

Button

Center Content Area White Background

Text Color Text Color

ButtonButton

Right Contextual Content AreaLight Gray Background

Text Color

Content Zone Navigation Zone

Search BackgroundbackgroundBackground

or

Background

Button

Text Color


Footer

The footer is an element in the content zone. It marks the end of the content and closes off the page. The footer also contains information that has to be included on every page to satisfy legal requirements (e.g., corporate information and privacy policy).

Use of the footer and inclusion of legal notices and functionality are mandatory on every Siemens web site. The footer consists of the following: 1) a horizontal rule in gray (#CCCCCC), 2) the footer icons above the rule and 3) a line of text containing the legal notices below the rule.

TextRule Text Link and Icon Color


Icons

Siemens has created a special set of icons to be

used on all sites. Optional icon texts are always in

the system font Arial 11 pt and are placed to the

right of the icon. The Siemens DX icons are blue

(#336699) when used as a link as in the footer.

Required icons on every footer are “Print this

page”, “Email this page”. It is recommended to

also include a “Footer to Top” icon with an anchor

link to the top of the page.

Sites should also use an arrow icon in line in body

text in front of the text link “more”.

To download icons and review more

icon guidelines, please visit Brandville.

Technical Notes

•All icons are 12 px high.

•When used in combination with text or with other icons, there is no need to add more space by inserting blanks in the HTML code, or similar.

•The symbols are positioned within the icon graphic so that they align optimally with the baseline of neighboring text.

•Only the arrow icon may be used in line in body text. Use the arrow icon created specially for insertion into body text (this has a space of 6 px before and 4 px after the icon).

Text Link and Icon Color


Print and Email Footer Icon Functionality

Clicking the “Print this page” symbol opens a new

window containing the page in a view optimized for

printing. Users can print the page by clicking a

button within the window or using the browser’s

print function.

Clicking the “Send to a friend” footer icon opens

up a page containing a form (in a pop-up window,

for example as on siemens.com/diagnostics) that

users can complete to send the page content to

someone else. The page should state clearly that

the e-mail addresses will not be used for any other

purpose. (e.g. “We only use the data entered here

to forward the link on your behalf. The data are not

passed on to third parties or analyzed for

marketing purposes. Please use this function only

for people from whom you know are interested in

this page. If the receiver requests you to not send

any more e-mails, please comply.” )


Footer Legal Text

The following applies to all Internet pages: © Siemens Healthcare Diagnostics Inc. (or legal name) 2007-2008 | Corporate Information | Privacy Statement | Terms of Use

where the links go to:© Siemens Healthcare Diagnostics Inc. 2007-2008http://diagnostics.siemens.com/siemens/en_GLOBAL/rg_marcom_FBAs/files/multimedia/siemensweb/web.htmlYou can find additional information on this in our content guidelines on searches. Corporate Informationhttp://www.siemens.com/diagnostics_corporate_infoor if a country site, a page similar to this one with country specific legal contact informationhttp://diagnostics.siemens.com/webapp/wcs/stores/servlet/CategoryDisplay~q_catalogId~e_-111~a_categoryId~e_1009302~a_catTree~e_100005,1009302~a_langId~e_-111~a_storeId~e_10001.htm Privacy Statementhttp://diagnostics.siemens.com/webapp/wcs/stores/servlet/SMPrivacyPolicyView~q_catalogId~e_-111~a_langId~e_-111~a_storeId~e_10001.htmor preferably a custom page on the satellite site if possible since that is where the content is hosted. If you use the link above, make sure your are abiding by it. Terms of Use http://diagnostics.siemens.com/webapp/wcs/stores/servlet/SMTermsOfUseView~q_catalogId~e_-111~a_langId~e_-111~a_storeId~e_10001.htmor preferably a custom page on the satellite site if possible since that is where the content is hosted. If you use the link above, make sure your are abiding by it.

See brandville > web media> legal guidelines for a PDF of legal content requirements for these pages.


Image Library

Here is information about how to access the Siemens Image Library. To get to the image library, please use this link:http://siemensmed.mdb.infowerk.de/smed/WEB/Frameset.jsp

The first time you arrive at the main screen, you will need to click on Access Permission and will be requested to input your user information. When you create an account it will ask you for the "OrgID" and "Identifier". Please ask the accounting department for these numbers. After submitting your information, the screen will note that your username/password will be emailed to you asap.

Once you get this email you can go back to the link above and login to the Image Library. If you do not receive this email fairly soon, (a bunch of us never received an email) send an email to [email protected] and request your login information.


Brandville

All Siemens DX Guidelines follow Siemens Guidelines:Please visit Brandville for more information about Siemens web guidelines and templates.

http://brandville.siemens.comUser name: extranet Password: arcanus


Contact Information

For further guidance on use of these design guidelines per your particular site requirements, you may contact Siemens Healthcare Diagnostics Creative Services Team:

[email protected]

Documents

Web Design Guidelines Siemens Healthcare Diagnostics Web Design Guidelines Version 2.0 February 08, 2008