General Purpose

Model A, B, C, D, E and F can be used on web pages and in e-mails. Their dimensions are sized to the column grid that is used in all online communication. A column is 13 base grid units wide and the default space bewteen 2 columns is 2 units. Therefore 2 columns together result in a width of 28 units. A base-grid unit is 12 x 12 pixels. Therefore 1 column is 156 pixels wide. The width of a model image should never be altered to prevent serious misalignment. The height of a model image can be altered if needed, but is not advised. Altering the height should be done with base-grid units (12 pixels). If a 3 columns wide image is needed; a M2 model (e-mail) can be used.

Model B
Purpose: 2 columns image
Pixels: 336 x 204

Model C
Purpose: 1 column image
Pixels: 156 x 204

Model D
Purpose: 1 column
Pixels: 156 x 96

Model E�

Purpose: ½ column
Pixels: 72 x 96

Model F
Purpose: ½ column
Pixels: 72 x 48

Model A

Purpose: 4 columns image
Pixels: 696 x 204

E-mail

Model M is used for e-mail puposes like notifications, newsletters and e-mail campaigns. Model M2 and M3 should be used in a 3 columns template. Model M4 and M5 should be used in a 4 columns template. Model M2 and M5 can only be used when whitespaceon the left and right side of the image is unwanted.

Image Model M3
Size (pica) : 43 x 17 units
Size (pixel) : 516 x 204 pixels
Width : 3 column
Use: As a landscape image in a 3 columns content area in emails, email campaigns and newsletters

Image Model M2
Size (pica) : 47 x 17 units
Size (pixel) : 564 x 204 pixels
Width : 3 column
Use: As an oversized M3 image model for email campaigns where the left & right white space is unwanted

Image Model M4
Size (pica) : 58 x 17 units
Size (pixel) : 696 x 204 pixels
Width : 4 column
Use: As a landscape image in a 4 columns content area in 4 columns email models (emails, email campaigns and newsletters)

Image Model M5
Size (pica) : 62 x 17 units
Size (pixel) : 744 x 204 pixels
Width : 4 column
Use: As an oversized M4 image model for 4 columns email campaigns where the left & right white space is unwanted

 Specifications of email, email campaigns and newsletters

Webpages

Model H should only be used as a header image on webpages. Avoid cropping the image in a way that the subject becomes unclear. Avoid using a white background in a product image.

Model H
Purpose: Page Header
Pixels: 384 x 96

Model R should be used for the “Image Rotator” on a “Product Page”.  The image is divided in into 2 sections: The purpose of the left side is to display the Product Name, Tagline and Product Description. The purpose of the right side is to display product and emotional images Multiple images are displayed in a predefined sequence with a transition effect.

Model R
Purpose: Image Rotator (a product image slide show)
Pixels: 768 x 216

Crop tool Presets in Adobe® Photoshop®

A fast way to create images according the Océ standard is to use the crop-tool in Adobe® Photoshop®. We have developed presets for this tool that, if used correctly, will help you to export images with the correct dimensions.

Example of the crop tool in use

Before you are going to use the crop tool you need to download and install it first:

 Download the Image model croptool presets for Photoshop® 

Crop an image using the Crop tool

1. Select the Crop tool .
2. Load the Océ Crop tool presets with the options menu “Load tool presets”
3. Select the prefered Océ image model
4. Drag over the part of the image you want to keep to create a marquee.
5. If necessary, adjust the cropping marquee:
   • To move the marquee to another position, place the pointer inside the bounding box and drag.
   • To scale the marquee, drag a handle. To constrain the proportions, hold down Shift as you drag a corner handle.
   • To rotate the marquee, position the pointer outside the bounding box (the pointer turns into a curved arrow), and drag. To move the center point around which the marquee rotates, drag the circle at the center of the bounding box. The marquee can’t be rotated in Bitmap mode.
6. Set options to hide or shield the cropped portions:
   • Specify whether you want to use a cropping shield to shade the area of the image that will be deleted or hidden. When Shield is selected, you can specify a color and opacity for the cropping shield. When Shield is deselected, the area outside the cropping marquee is revealed.
   • Specify whether you want to hide or delete the cropped area. Select Hide to preserve the cropped area in the image file. You can make the hidden area visible by moving the image with the Move tool . Select Delete to discard the cropped area.

   Note: The Hide option is not available for images that contain only a background layer. If you want to crop a background by hiding, convert the background to a regular layer first.

7. Do one of the following:
   • To complete the crop, press Enter (Windows) or Return (Mac OS), click the Commit button  in the options bar, or double-click inside the cropping marquee.
   • To cancel the cropping operation, press Esc or click the Cancel button  in the options bar.

(Source: http://www.adobe.com)

The layout of an email notification, email campaign or newsletter is linked with the width of the page. The page layout of an email notification can be only 3 columns, while the email campaign and newsletter page layout can be 3 or 4 columns. The vertical columns can be merged to create larger content areas, while the amount of columns is being reduced. Different variations have been defined as models:

 Learn more about email Notification
 Learn more about email Campaign
 Learn more about Newsletter

Columns

The content of the page is being divided in columns. The default size of 1 column is 13 units (156 pixels). If applicable; the left and/or right margin is 2 units (24 pixels).

 Learn more Océ Online Page Columns
 Learn more about Océ Online Grid

Typography

The typography for emails, email campaigns and newsletters is pretty straightforward. To ensure maximum compatibility for every email client no cascading style sheets (CSS) are being used to define the style. Every typographic element is therefore styled with clean HTML 4.0 code only so that in every email displayed in email clients with HTML support, the representation is according these guidelines. For email clients that do not support HTML presentation; only pure text without styling is being displayed.

Definition of text elements

The following text elements can or should be used in emails. email campaigns or newsletters:

#Title, Subject

font: Arial, Helvetica, sans-serif
size: 3
default color: #666666

# Tagline

font: Times New Roman, Times, Serif
size: 6
default color: #999999

# Header 1

font: Arial, Helvetica, sans-serif
size: 5
default color: #A40921
other possible colors:

TXT103 color: #908501
TXT234 color: #721f7b
TXT2593 color: #8e0057
TXT271 color: #6f6690
TXT292 color: #5680a0
TXT313 color: #006685
TXT144 color: #ad6513
TXT116 color: #f28e1b
TXT362 color: #1d6d1b
TXT3282 color: #00635b
TXT185 color: #ba0b2c

# Header 2

font: Arial, Helvetica, sans-serif
size: 4
default color: #A40921
other possible colors:

TXT103 color: #908501
TXT234 color: #721f7b
TXT2593 color: #8e0057
TXT271 color: #6f6690
TXT292 color: #5680a0
TXT313 color: #006685
TXT144 color: #ad6513
TXT116 color: #f28e1b
TXT362 color: #1d6d1b
TXT3282 color: #00635b
TXT185 color: #ba0b2c

# Header 3

font: Arial, Helvetica, sans-serif
size: 2
default color: #A40921
other possible colors:

TXT103 color: #908501
TXT234 color: #721f7b
TXT2593 color: #8e0057
TXT271 color: #6f6690
TXT292 color: #5680a0
TXT313 color: #006685
TXT144 color: #ad6513
TXT116 color: #f28e1b
TXT362 color: #1d6d1b
TXT3282 color: #00635b
TXT185 color: #ba0b2c

# Bodytext link

font: Arial, Helvetica, sans-serif
size: 2
color: #333333
link color: #003399

# Comment

font: Arial, Helvetica, sans-serif
size: 2
color: #999999

  Link list

font: Arial, Helvetica, sans-serif
size: 2
color: #003399
bullet: LI.gif

 Learn more about typopgraphy 

Image models

The following image models can be used in  email, email campaigns and newsletters:

Image Model D 

Size (pica) : 13 x 8 units
Size (pixel) : 156 x 96 pixels
Width : 1 column
Use: As  a landscape image in a single column content area

Image Model C

Size (pica) : 13 x 17 units
Size (pixel) : 156 x 204 pixels
Width : 1 column
Use:As  a portrait image in a single column content area

Image Model B

Size (pica) : 13 x 17 units
Size (pixel) : 336 x 204 pixels
Width : 2 column
Use: As  a landscape image in a 2 columns content area

Image Model M3

Size (pica) : 43 x 17 units
Size (pixel) : 516 x 204 pixels
Width : 3 column
Use: As  a landscape image in a 3 columns content area

Image Model M2

Size (pica) : 47 x 17 units
Size (pixel) : 564 x 204 pixels
Width : 3 column
Use: As  an oversized M3 image model for email campaigns where the left & right white space is unwanted

Image Model M4

Size (pica) : 58 x 17 units
Size (pixel) : 696 x 204 pixels
Width : 4 column
Use: As  a landscape image in a 4 columns content area in 4 columns email models

Image Model M5

Size (pica) : 62 x 17 units
Size (pixel) : 744 x 204 pixels
Width : 4 column
Use: As  an oversized M4 image model for 4 columns email campaigns where the left & right white space is unwanted

Note: The height of all email image models can be decreased or increased with X units (12 pixels) if needed.

 Read more about image models

Downloads

 Email, Email Campaigns & Newsletters HTML source code & assets

Email newsletter

Header

The header contains the Océ Brand Tab with the Océ Logo and Océ Payoff. The logo is clickable and always takes you to the home page of an Océ website. A print icon is located in the upper right hand corner of the email so that the user can print out a copy of it.

Email newsletter header 

Title/subtitle

This text identifies the title and date of the email notification. A campaign image and tagline can also be included with the title. The Title and Subtitle (Tagline) are a part of the header.

Body

The body can include subheadings and text. It should have a 3 or 4 columns page layout and can be as long as is desired.

Email newsletter body

Footer

The footer contains the following:

• Unsubscribe link
• Navigation bar with company and contact information
• Disclaimer

Email newsletter footer

Email campaign

Header

The header contains the Océ Brand Tab with the Océ Logo and Océ Payoff. The logo is clickable and always takes you to the home page of an Océ website.  A print icon is located in the upper right hand corner of the email so that the user can print out a copy of it.

Email campaign header

Title/subtitle

This text identifies the title and date of the email notification. A campaign image and tagline can also be included with the title. The Title and Subtitle are a part of the header.

Body

The body can include subheadings and text. It should have a 3 or 4 columns page layout and can be as long as is desired.

Email campaign body

Footer

The footer contains the following:

• Unsubscribe link
• Navigation bar with company and contact information
• Disclaimer

Email campaign footer

Email notification

Header

The header contains the Océ Brand Tab with the Océ Logo and Océ Payoff. The logo is clickable and always takes you to the home page of an Océ website.

Email notification header

Title

This text identifies the subject of the email notification. The Title is a part of the header.

Body

The body has always a three column page layout. It can be as long as is desired. It is preferred that that no images are placed in the body section of the email notification.

Email notification body

Footer

This element does not contain any content.

Email notification footer

Product page

Page body

The main content block has rounded corners and contains the following:

• Image rotator. This animation shows multiple images of the product as a slideshow. It usually starts with the emotional visual and then shows product shots from different angles. The text contained in the image rotator includes the product name, product tagline and product description
• Below the image rotator are the product tabs and sub tabs. Every product tab and sub tab has a page and the sub tab is selected by default. These tabs always provide information related to the product that is selected
• Content. Different kinds of content can be provided on these pages, including text, images, and links to other information

Conversion bar (LCM box)

On the right hand side of the page the conversion bar is enclosed in a rounded outline. The purpose of this is to create an interaction between the visitor and Océ to generate sales leads. You can include a download with a brochure, a “call me” link and “I have a question” link.

Conversion bar

Page body

The main content block contains the following:

• Page title and header. The page title is text that identifies the section of the website. The header may contain an image
• Content. The page is divided into a chart. The first row contains the products to be compared. The column on the left contains the items to be compared. The rest of the page is filled in with data

Page body

The main content block contains the following:

• Page title and header. The page title is text that identifies the section of the website. The header may contain an image
• Content. The rest of the page can be made up of 1-4 columns with headers and links to other information as well as photos and text

Product category page

Navigation panel

On the left-hand side of the page the navigation panel shows the structure of the entire site, starting with the main categories. Items can be expanded and collapsed.

Page body

The main content block contains the following:

• Page title and header. The page title is text that identifies the section of the website. The header may contain an image
• Content. The rest of the page can be made up of 1-4 columns with headers and links to other information as well as photos and text

General information page

Homepage of the global website

Header

The page header contains the following:

• Océ Brand Tab with the Océ Logo and Océ Payoff. The logo is clickable and always takes you to the home page of that particular website
• Global navigation bar. The top row contains general company information and the bottom row contains the main categories of the website. Additional categories may be listed on the right side of the navigation bar. Breadcrumbs will appear below the global navigation bar as a visitor proceeds into the site
• Search panel and site identifier. The right hand corner contains the search panel and site identifier with an optional change button to go to another Océ website

Example of the header

Page body

The main content block has rounded corners and contains the following:

• The home page animation or visual. The visual must always invite you to take action. It provides all the information you need in a glance about the product or promotion. It should be created with a hover/mouse on function that initiates movement in the image. See Chapter 4 of this manual for specifications of the home page animation
• The home page tabs that provide different categories of information to go deeper into the site. When you mouse over a tab the visual may change. See Chapter 4 of this manual for more information
• News. You can also add a news ticker that displays different news items, a visual of the latest product releases or other information
• Additional content blocks can be added as needed

Attention bar

The purpose of this section of the page is to bring other information to the attention of the user. It can be made up of different columns with headers and links to other information as well as photos and text.

Example of the attention bar

Footer

The footer contains the following:

• Company navigation bar links to general information about the company
• Company address and contact information
• Copyrights and site information

Example of the footer

Typography also lends an ambience to the printed word. This emotional value contributes to the perception of a text. A letter type has a great impact on the way a house style is experienced making it friendly, unpretentious, dynamic, formal, expert or informative.

Typefaces for electronic communication

The Océ corporate identity uses two typefaces: Océ Garamond and Univers. However, these typefaces are not standard computer fonts and are not suitable for reading on a screen display. Univers is based on the Helvetica typeface and we have substituted Arial for this typeface in the Océ Online communication. Arial is also based on Helvetica and has been specially developed for reading on screen and in printed matter. Océ Garamond is replaced by Times New Roman. The only text element that is set in the Times New Roman typeface is taglines (H2). The chart below provides typeface specifications for the Océ online communication:

Color text

Certain text elements can also be presented in color. The colors of the Océ screen text color palette are specially developed to be used for text elements. We made the colors a bit darker to create a better balance between the thin lines of the text and the bigger colored shapes. These colors should only be used for text. The chart below shows the screen colors that can be used for headers and body text on Océ online communication.