<<

Epson.com Design and Branding Standards and Guidelines Document version 1.0 Modified March 19, 2010

Prepared by : Table of Contents

Introduction The Epson : An Overview

Visual System 10 Flash 54 Gradients & Styles 54 Scrollable Module 54 Global Elements 11 E-Store 54 Right Column 54 Global Navigation 54 Long (right column) 54 Typography 17 Logo Treatment/Usage 54 Hub Page 54 Typefaces 54 Global Footer 54 Templates 17 Off-site Executions 54 Hierarchy 54 Banner Ad Designs 54 Grids & Layouts 54 • General Guide Do’s and Don’ts USA Homepage 54 Photography 59 Banner Hand-Off 54 Product Hub Pages 54 Knowing the Audience 17 • Printers Web Elements 17 Brand 17 • Projectors Accordion Nav 54 Brand Imagery 54 • Scanners New Window 54 Brand Imagery Visual Examples 54 E-Store Homepage 54 Image Gallery 54 Product 17 Product Category Page 54 Image Sizes 54 Product Imagery 54 Product Detail Page 54 Tool Tip 54 Product Imagery Visual Examples 62 Feature Pages 54 Epson Service/Relate Products 54 Flexible Templates 54 Support 54 E-mails 54 Copywriting 59 Shipping/Promotional Module 54 • General Guide of Do’s and Don’ts 54 Tone 54 Sign-Up Module 54 Banner Copy 54 Pricing Modules 54 Measurements 54 Product 54 Buttons & Links 54 USA Homepage 54 Promotional 66 Tab Treatments 54 Product Hub Pages 54 Icons 54 E-Store Homepage 54 Breadcrumbs 54 Conclusion 59 Product Category Page 54 Pagination 54 Product Detail Page 54 Global Elements 0 Banners 54 Color Palette 51

© 2007 EPSON CORP. ALL RIGHTS RESERVED. 2 01 Introduction Introduction

This document describes the standards and guidelines established by Proxicom, Inc. for the Epson.com web- site. Each section of this document covers a specific set of guidelines to be used on Epson.com.

These guidelines will evolve over time. This style guide is not intended as a regimented formula for the creation or maintenance of Epson.com pages, but rather a road map for appropriate creative application. Its purpose is to ensure that any new or updated pages support the Epson brand identity and reinforce overall Epson.com creative direction.

If you have any questions regarding this document, please contact

ENTER NAME HERE - Epson Manager 3840 Kilroy Airport Way Long Beach, CA 90806 562-981-3840

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 4 The Epson Brand : An Overview

Epson imaging moves you in a powerful way. And we do this through our commitment to developing technology that inspires and empowers people all over the world.

Epson’s Background Since its creation, Epson has continually pushed back the boundaries of miniaturization, creating scores of world-first products. Epson’s corporate culture is rooted in a spirit of creativity and challenging the status quo. This has led us to craft unique products and services and to achieve goals that were seen as unreachable. Epson has always striven to put the customer first in offering products and services that surpass expectations.

Why ‘Exceed Your Vision’ is so important Epson enjoys a well defined global brand positioning but it is vitally important that this positioning is consistently expressed. As a result, for marketing communications materials, there should also be a well-defined approach to presenting Epson in a creative context, regardless of the medium or the region.

All communications must reflect the concept of the global tagline “Exceed Your Vision” and the positioning statement. The positioning statement encapsulates what is unique about Epson - our desire to “inspire” creativ- ity and our ambition to “empower” people globally so they achieve their goals through our technological de- velopments. The global tagline “Exceed Your Vision” expresses these sentiments in a concise, accessible way.

As markets change and opportunities grow, our new tagline reflects our business resolve and expresses our brand promise to customers. It will be shared across the entire Epson Group and will be reflected in all of our commercial activities. Ultimately, we aim to help people increase their creativity through our technological in- novations, helping bring their ideas to life.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 5 02 Global Elements Global Elements: Logo Treatment

The Online Logo is the Epson Flag - it introduces the brand and distinguishes us from our competitors. It should be instantly recognizable, must always be clearly visible and should always be used in a consistent manner. The logotype should not be limited to consumer sites, and can be applied to any online communication.

The Epson Blue (287c) is a pantone (print) color. This has been converted into RGB values of R:16, G:33, B:139, which equates to a hexadecimal value of 10218b. This value is not web safe, however, with the vast majority of the monitors worldwide able to view all colors it was decided that representing the true Epson blue was more important than providing a web safe version.

11X

12X

3X X 1.5X

X X

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 7 Global Elements: Logo Treatment

The large Tagline Logotype should be used on the home page and Don’t modify the aspect in banner ads or other marketing ratio of the color block or its materials where the mark is used relationship to the wordmark. outside the context of a page.

Don’t modify the color of the 114px color block or the wordmark.

114px

Don’t outline the color block.

60px

The small Tagline Logotype Don’t apply graphic effects should be used in the logo area or filters to the logo. on all pages of the site.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 8 03 Templates Templates

The design of Epson.com is based on a grid system.

It contains a wide variety of various layouts within a 978 pixel grid.

A diverse library HTML templates have been developed to aid in the creation of new pages and sections of the site. These templates cover most foreseeable page layouts and provide treatments for a variety of content com- binations. They should be referred to regularly when creating new pages to insure consistency across the site. A few of these templates are shown and 6 primary examples are described on the following pages.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 10 Templates: Grids & Layouts

1 Homepage 2 Product Hub Pages 3 E-Store Homepage 1 Homepage Example: Printers, Projectors, Scanners The Homepage of Epson.com begins with large, banner pages that introduces Epson’s offerings 978 978 978 through branded imagery and copy. Product and supporting links reside below.

978 960 715 240 2 Product Hub Pages Each main section of Epson.com begins with a landing page that features large, branded imagery and minimal content above the fold. 712 712 240 240 171 541 3 E-Store Homepage

712 Alert messaging can appear on the homepage when necessary. For example, it can announce

8 10 8 8 10 8 7 6 6 7 4 Product Category Page The Product Category page provides for more content than the landing page and is the appropriate template for the majority of new 4 Product Category Page 5 Product Detail Page 6 Feature Pages product pages. Example:

978 978 5 Product Detail Page 978 x 115 The Product Detail page provides for substantially more content than the product category page and is the appropriate template for viewing the prodcut in further detail.

716 240 716 240 6 Feature Page This template provides a variety of possibilities for complex content or pages that deserve a bit of special attention while not rising quite to the level of a Landing Page. The only consistent elements footer include the Epson Navigation and the footer. 7 8 7 7 8 7

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 11 Templates: USA Homepage

1 Hero Flash Interactive Area The Hero Flash Interactive Area resides on the Epson homepage. It is an opportunity for visitors to discover Epson and its offerings through the various flash banners.

1 2 Category Flash Thumbnails Banners rotate automatically. Users may rollover and pause the banner. Visual imagery accompanies copy for every thumbnail. 2

3 Product Category Sections 3 Product category links are represented by imagery and blue colored descriptions. 4

4 Accordian Nav Links Quick access to various drivers, support, and estore is found in an accordian fashion. On rollover, each section is revealed further.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 12 Templates: Hub Page

1 Hero Flash Interactive Area The Hero Flash Interactive Area resides on the Epson homepage. It is an opportunity for visitors to discover Epson and its offerings through the

1 various flash banners.

2 Category Flash Thumbnails ‘Plan Your Trip’ is featured prominently across the homepage. Users can click ‘more options’ to refine their trip criteria.

3 Promotions 2 Promotional banner ads are place below the hero to highlight recent and upcoming offerings.

4 Product Category Links 5 Quick links to the product subcategories are located below the promotional area. 3

5 4 Accordian Nav Links Quick access to various drivers, support, and estore is found in an accordian fashion. On rollover, each section is revealed further.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 13 Templates: Projector Hub Page

1 Hero Flash Interactive Area The Hero Flash Interactive Area resides on the Epson homepage. It is an opportunity for visitors to discover Epson and its offerings through the various flash banners.

2 Category Flash Thumbnails ‘Plan Your Trip’ is featured prominently across 1 the homepage. Users can click ‘more options’ to refine their trip criteria.

3 Promotions 2 Promotional banner ads are place on the left to highlight recent and upcoming offerings.

4 Product Category Links 3 4 Quick links to the product subcategories are located below the hero area. 5

5 Accordian Nav Links Quick access to various drivers, support, and estore is found in an accordian fashion. On rollover, each section is revealed further.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 14 Templates: Scanner Hub Page

1 Hero Flash Interactive Area The Hero Flash Interactive Area resides on the Epson homepage. It is an opportunity for visitors to discover Epson and its offerings through the various flash banners.

1 2 Category Flash Thumbnails ‘Plan Your Trip’ is featured prominently across the homepage. Users can click ‘more options’ to refine their trip criteria.

3 Promotions 2 Promotional banner ads are place below the hero to highlight recent and upcoming offerings.

4 Accordian Nav Links 4 Quick access to various drivers, support, and 3 estore is found in an accordian fashion. On rollover, each section is revealed further.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 15 Templates: E-Store Homepage

1 Hero Flash Interactive Area 4 The Hero Flash Interactive Area resides on the Epson homepage. It is an opportunity for visitors to discover Epson and its offerings through the various flash banners.

2 Category Flash Thumbnails 1 Quick category and subcategory links appear on the left that allow users for quick access to all products available on Epson’s Estore. 3 5 2 3 Weekly Specials/ Clearance Center This large area contains the weekly specials and clearance items. Each section divided by tabs. Weekly Specials appears on default.

4 Order by Phone/ Why Buy at Epson Epson’s phone number is listed in this area as well as highlighting reasons to shop at the Epson Store.

5 Support/Sign up Support links and quick registration to sign up for Epson’s exclusive deals & offers are located here.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 16 Templates: Product Category Page

1 Descriptor Area Descriptive text about the category goes here.

1 2 Product Listings Product results are listed vertically in this content 2 area.

3 3 Order by Phone Epson’s phone number is listed in this area for quick access to order. 4

4 Shop Online/Related Products Epson’s Estore link and related products are always present on the right nav.

5 Shipping/Promotional Area This right column area is dedicated to any shipping or promotional banners. 5 6 Sign up Quick registration to sign up for Epson’s exclusive deals & offers are located here.

6

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 17 Templates: Product Detail Page

3 1 Image Gallery 7 Support A full photo of the product is displayed here. Support links and quick registration to sign up for 4 1 Any available videos, extra photos, and enlarged Epson’s exclusive deals & offers are located here. photo are located here.

8 Shipping/Promotional Area 5 2 2 Tabbed Pages This right column area is dedicated to any 6 This tabbed area is dedicated to overiew, specs, shipping or promotional banners. Epson technology, awards & reviews, and user reviews. 9 Sign up Quick registration to sign up for Epson’s exclusive 7 3 Order by Phone deals & offers are located here. Alert messaging can appear on the homepage 8 when necessary. For example, it can announce snowfall to entice avid skiiers.

4 9 Pricing Module This tabbed area is dedicated to overiew, specs, Epson technology, awards & reviews, and user reviews.

5 Tool Tip Highlights of the products are featured in this area.

6 Epson Service/Related Products Epson’s Estore link and related products are always present on the right nav.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 18 Templates: Feature Page

Designed for Excellence

Feature Templates Feature pages, microsites, are all designed on a pixel canvas width of 978. They are consistent in header and footer. However, the main area is a blank canvas with global elements applied.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 19 Templates: Flexible Page

Small Business

Flexible Templates Templates are flexible to accomodate to serve for any special purpose or need of Epson’s sections, such as the Small Business sites. Consistent elements such as the header and footer are always present, and imagery, type, and tabs must all be applied described in the following pages.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 20 Templates: E-mails

Template 1

TBD

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 21 Templates: E-mails

Template 2

TBD

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 22 Templates: E-mails

Template 3

TBD

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 23 Templates: General Guide of Do’s and Don’ts

Creative Professional Do’s Creative Professional Don’ts

1. Establishes a sense of hierarchy both visually 1. Image composition is too busy. and in content form. 2. Too many use of colors distract users to focus 2. Top hero portion makes up most of the tem- on main messaging. plate with supporting content below or to the side . 3. Color palette lacks sophistication with bright primary hues and uneven distribution of color. 3. Organized supported content does not exceed the main message or overwhelm the user. 4. Too many varieties of colors and typography di- lute hiearchy and creates chaos. 4. Templates follow a proper grid that follow the typography guidelines along with the visuals.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 24 04 Measurements Measurements: USA Homepage

110 pxl 868 pxl

60 pxl

60 pxl

182 px

Helv. Neue Regular 12 pt Helv. Neue Reg #ffffff 12 pt 56 px #517498 10 pxl 8 px 14 pxl Helv. Neue Medium 23 pxl 18 pt 9 pxl #333333

421 px #edf0f2

Helv. Neue Reg 12 pt #517498

182 px

8 pxl 10 pxl 8 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 26 Measurements: Product Hub Page

110 pxl 868 pxl

60 pxl

60 pxl

182 px

Helv. Neue Regular 12 pt Helv. Neue Reg #ffffff 12 pt 56 px #517498 10 pxl 8 px 14 pxl Helv. Neue Medium 23 pxl 18 pt 9 pxl #333333

421 px

Helv. Neue Reg 12 pt #517498 #edf0f2

182 px

8 pxl 10 pxl 8 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 27 Measurements: E-Store Homepage

978 pxl

60 pxl

8 pxl

715 pxl

Helv. Neue Bold 16 pt #517498 9 pxl Helv. Neue Bold Helv. Neue Bold 16 pt 13 pt #000000 Helv. Neue Light #333333 12 pt Helv. Neue Reg #000000 10 pt #003366

Helv. Neue Bold 12 pt #003366

564 pxl

421 pxl

Helv. Neue Bold 12 pt #003366

Helv. Neue Bold 170 px 9 pt #003366

7 pxl 6 pxl 7 pxl 6 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 28 Measurements: Product Category Page

978 pxl

60 pxl

Helv. Neue Bold 10 pxl 10 pt Helv. Neue Bold #003366 20 pxl 10 pt #333333 15 pxl 15 pxl

90 pxl

Helv. Neue Bold 7 pxl Helv. Neue Bold 11 pt 11 pt #333333 #003366 950 pxl

Helv. Neue Bold 53 pxl 15 pt #333333 26 pxl 20 pxl Helv. Neue Bold Helv. Neue Reg 16 pt 10 pt #003366 Helv. Neue Reg #0066cc 10 pt #333333 171 x 114 pxl

170 pxl

6 pxl 20 pxl

225 pxl

7 pxl 8 pxl 7 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 29 Measurements: Product Detail Page

978 pxl

60 pxl

10 pxl Helv. Neue Bold 20 pxl 25 pt #333333 Helv. Neue Bold Helv. Neue Bold 13 pt 13 pt #333333 #517498

Helv. Neue Reg Helv. Neue Bold 11 pt 11 pt #333333 #003366

10 pxl

6 pxl 20 pxl

20 pxl

30 pxl

7 pxl 8 pxl 7 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 30 05 Banners Banners

Overview

During the December 2008 Holiday selling season, Epson America implemented a new flash-based promotional banner system for the U.S. Homepage.

This new system is designed to display five (5) promo- tions at a time as well as custom masthead images/ animations that correspond to each promotion. The banner system will then cycle through the promotions while a tab-based navigation will allow us- ers to view specific promotions.

When designing new banners for this system, you need to create the following items:

• Main Banner • Top/Masthead Banner • 2 Navigation Tabs (off state / on state)

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 32 Banners: Template

1

1 Background The Epson Homepage uses various gradient colors designed with subtle design templates (see 2 pages 39-40).

3 2 Copy Left area is dedicated to copy. Type includes a header, name of the product, and a description describing the product. 4

3 Right Hero Area 5 This area is dedicated to the image of the product.

4 Call to Action Call to action appears as a link on the right side of the piping.

5 Category Flash Thumbnails Type includes up to two lines of type that briefly describe the promotion.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 33 Banners: Specs

30 px Helvetica Neue Light 22 pt

20 px

Helvetica Neue Light 41 pt 1 Helvetica Neue Light 20 pt

2

Helvetica Neue Medium Italic 10 pt +10 kerning

Helvetica Neue Regular 12 pt #ffffff

Helvetica Neue Regular 14 pt # 333333

1 Header As you can see from the examples on page 40, feel free to change the weight of the font in order to emphasize a message.

2 CTA Divider Make sure to change the color of this divider according to the color scheme.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 34 Banners: Flash File Hand-off

1 Top Area - 868 x 60 pxl 1

2 Main Content Area - 978 x 296 pxl

3 Thumbnail - 182 x 60 pxl -on state

4 Thumbnail - 182 x 60 pxl -off state 2

4 3

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 35 Banners: Flash File Hand-off

Main Banner Technical Specs Size (W x H): 978 x 296 There are no specific animation requirements but the following Frame Rate: 30 fps code must be included on the first frame of the file (Level 0): Actionscript Version: 2.0 Suggested File Size: 25k – 60k this.onRelease = function () { getURL(url, target); The Epson Homepage uses various gradient colors designed } with subtle design templates. The main banner is a 978x296 flash animation that serves as the primary promotional this.onRollOver = function () { element on the homepage. highlight_btn.gotoAndStop(2); } For best results, any text or important imagery that will be on the banner should not fall below 225px to prevent the this.onRollOut = function () { navigation tabs from covering up the content. highlight_btn.gotoAndStop(1); }

A stop(); command should also be included in the last frame of the banner animation.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 36 Banners: Flash File Hand-off

Top/Masthead banner with “” text included in the SWF.

Main Banner Technical Specs

The one requirement for this banner is that it must include a Size (W x H): 868 x 60 static text box with the text “United States” on the banner Frame Rate: 30 fps in order to provide a label for the search box. Below are the Actionscript Version: 2.0 specifications for this text box: Suggested File Size: 2k – 5k

Type: Static Text The top/masthead banner is a companion piece to the main Text: United States banner and sits beside the Epson logo in the masthead. Size (W x H): 68.8 x 15.2 Typically, the animation for this banner is limited to a single Position (x,y): 660.0, 9.0 image or background that that fades into view. Font: Arial, 10px Paragraph: Left Character Spacing: 0.3 Anti-Aliasing: Anti-aliased for readability

A stop(); command should also be included in the last frame of the banner animation.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 37 Banners: Flash File Hand-off

On State Off State

Main Banner Technical Specs

The one requirement for this banner is that it must include a File Type: PNG static text box with the text “United States” on the banner Size (W x H): 182 x 56 in order to provide a label for the search box. Below are the Color Depth: 24-bit (with transparency) specifications for this text box: Suggested File Size: 2k – 15k

Type: Static Text The navigation tabs are a pair of semi-transparent images that Text: United States are loaded at the bottom of the banner and allow the user to Size (W x H): 68.8 x 15.2 cycle through the different promotions when they rollover the Position (x,y): 660.0, 9.0 tab. These images are 24-bit PNGs with transparency with a size of 182x56. Font: Arial, 10px Paragraph: Left Character Spacing: 0.3 Anti-Aliasing: Anti-aliased for readability

A stop(); command should also be included in the last frame of the banner animation.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 38 Banners: Color Templates

Product Template Examples

“Sunset” “Fire Dome”

“Purple Rain” “Lagoon”

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 39 Banners: Examples

Product Template Examples

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 40 Banners: Examples

Microsite Banner Examples Microsite banner designs are allowed more flexibility. Palettes, fonts, and placement can adapt to the microsite style. Although, copy most always remain on the left side, and the right side must always remain dedicated to imagery.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 41 Banners: Product Hub Pages

Overview

For the Product Hub Pages, this new system is designed to display up to five (5) promotions at a time, as well as custom masthead with corresponding Hub Page title. The banner system will then cycle through the promotions while a tab-based navigation will allow users to view specific promotions.

When designing new banners for this system, you need to create the following items:

• Main Banner • Top/Masthead Banner with hub page title • 2 Navigation Tabs (off state / on state)

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 42 Banners: Template

1

1 Product Hub Title This title changes with each corresponding product page. Type is Helvetica Neue Thin. 2

2 Copy 3 Left area is dedicated to copy. Type is Helvetica Neue that includes a header, name of the product, 4 and a description describing the product.

3 Right Hero Area This area is dedicated to the image of the product.

5 4 Call to Action Call to action appears as a link below the promotional copy..

5 Category Flash Thumbnails Type is Helvetica Neue that includes a header, name of the product, and a description describing the product.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 43 Banners: Specs

1 Top Area - 868 x 60 pxl 1

2 Main Content Area - 978 x 355 pxl

3 Thumbnail - on state Width varies depending on template, height can vary if necessary. 2 Printers - 240 x 144 Scanners - 320 x 190 Projectors - 192 x 132

4 Thumbnail - off state Width varies depending on template, height can vary if necessary. Printers - 240 x 144 Scanners - 320 x 190 Projectors - 192 x 132

3 4

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 44 Banners: Specs

Product Hub Page Examples: Scanners, Printers, Projectors

190 px

144 px

Arial Reg #2ebabf #a0e7ea Arial Reg 240 px 320 px 11 pt 11 pt #08185d #d2e8ea

Helvetica Neue Medium Helvetica Neue Medium 15 pt 15 pt #363a3b #ffffff

132 px

192 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 45 Banners: Specs

30 px Helvetica Neue Thin 38.5 pt

1

40 px

Helvetica Neue Thin 2 All Caps 37 pt Helvetica Neue Light 3 All Caps 15 pt

Helvetica Neue Regular 15 pt #ffffff

Helvetica Neue Regular 14 pt 4

Arial Color Overlay: Arial Color Overlay: 11 pt # a0e7ea 11 pt # 2ebabf # d2e8ea # 363a3b

Helvetica Neue Thin Helvetica Neue Thin 15 pt 15 pt # fafbfc # 08185d

1 Product Hub Title 3 Sub-Header Change color to compliment background and ensure Color changes to compliment background. title readability. Layer styles: see next page No Layer Styles.

2 Header 4 CTA Color changes to compliment background and ensure Color changes to compliment background. readability. Layer styles: see next page No Layer Styles.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 46 Banners: Layer Styles

Product Hub Title Header

Gradient Overlay: Gradient Overlay: 0: light tint of middle color 0: choose color that corresponds with background. 50: choose color that corresponds to background. 100: #eeeeee 100: #ffffff

Outer Glow: Outer Glow: Choose a color that corresponds to the background. Choose a color that corresponds to the background. - 50% Opacity - 50% Opacity - Spread: 0 - Spread: 0 - Size:5 - Size:5

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 47 Banners: Flash File Hand-off

Main Banner Technical Specs Size (W x H): 978 x 355 There are no specific animation requirements but the following Frame Rate: 30 fps code must be included on the first frame of the file (Level 0): Actionscript Version: 2.0 Suggested File Size: 25k – 60k this.onRelease = function () { getURL(url, target); The Epson Homepage uses various gradient colors designed } with subtle design templates. The main banner is a 978x355 flash animation that serves as the primary promotional this.onRollOver = function () { element on the homepage. highlight_btn.gotoAndStop(2); } For best results, any text or important imagery that will be on the banner should not fall below 225px to prevent the this.onRollOut = function () { navigation tabs from covering up the content. highlight_btn.gotoAndStop(1); }

A stop(); command should also be included in the last frame of the banner animation.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 48 Banners: Flash File Hand-off

Top/Masthead banner with “United States” text included in the SWF.

Main Banner Technical Specs

The one requirement for this banner is that it must include a Size (W x H): 868 x 60 static text box with the text “United States” on the banner Frame Rate: 30 fps in order to provide a label for the search box. Below are the Actionscript Version: 2.0 specifications for this text box: Suggested File Size: 2k – 5k

Type: Static Text The top/masthead banner is a companion piece to the main Text: United States banner and sits beside the Epson logo in the masthead. Size (W x H): 68.8 x 15.2 Typically, the animation for this banner is limited to a single Position (x,y): 660.0, 9.0 image or background that that fades into view. Font: Arial, 10px Paragraph: Left Character Spacing: 0.3 Anti-Aliasing: Anti-aliased for readability

A stop(); command should also be included in the last frame of the banner animation.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 49 Banners: Flash File Hand-off

On State Off State

Banner Technical Specs

File Type: PNG Type: Static Text Size (W x H): varies x 56 Text: United States Color Depth: 24-bit (with transparency) Size (W x H): 68.8 x 15.2 Frame Rate: 31 fps Position (x,y): 660.0, 9.0 Actionscript Version: 3 Font: Arial, 10px Suggested File Size: 2k – 15k Paragraph: Left Character Spacing: 0.3 The navigation tabs are a pair of semi-transparent images that Anti-Aliasing: Anti-aliased for readability are loaded at the bottom of the banner and allow the user to cycle through the different promotions when they rollover the A stop(); command should also be included in the last frame tab. These images are 24-bit PNGs with transparency with a of the banner animation. size of 182x56.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 50 Banners: Template

Banners: E-Store

1 Hero Flash Imagery Product being advertised gets hero treatment.

2 Headline Product name is usually featured in the headline.

2 3 Pricing Offer generally resides in the subhead.

1 4 Call to Action Call to action appears as a link on the right side of 3 the piping.

4 Technical Requirements Left area is dedicated to copy. Depending on the copy, type can be rearranged to highlight the message in different ways. Type is Helvetica Neue, that includes a header, name of the product, and a description describing the product.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 51 Banners: Specs

Helvetica Neue Light 40 px 16.5 pt # 333333 -10 kerning

40 px

Helvetica Neue Thin 50 pt 1 -30 kerning

Helvetica Neue Regular 33 pt # 333333 -30 kerning

Helvetica Neue Regular 18 pt 2 # 333333 -45 kerning

Helvetica Neue Regular 14 pt # 333333

1 Header As you can see from the examples on page 53, the header color changes depending on the promotion. Use bright colors, and apply a slight gradient to this text. Feel free to bold words in order to emphasize a message.

2 CTA Arrow Arrow changes color according to the color scheme of banner. Make sure it stands out, and is easily seen.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 52 Banners: Flash File Hand-off

Banner Technical Specs Size (W x H): 715 x 279 There are no specific animation requirements but the call Rounded Corner Radius: 5 pixels to action must be a movieclip with an instance name called Frame Rate: 31 fps ‘cta_mc’. This movieclip should have 2 frames with a stop(); Actionscript Version: 3 on the first frame. The first frame is the off state of the cta and Suggested File Size: 25k – 60k the second is the roll/on state of the cta.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 53 Banners: E-Store

Banners: E-Store Examples

Clearance Sign up For Deals & Offers

Limited Time Sale Why Buy at Epson

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 54 Banners: E-Store

Banners: E-Store Microsite Examples

Microsite banner designs are allowed more flexibility. Palettes, fonts, and placement can adapt to the microsite style. Although, copy most always remain on the left side, and the right side is must always remain dedicated to imagery.

E-Store Homepage E-Store Homepage

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 55 Banners: Right Column

Banners: Right Column

1 Call to Action Call to action is featured prominently with a 2 button-style treatment. 2

2 Headline 3 Headline describes the overall benefit in as few words as possible. 3 1 3 Hero Imagery Imagery appears as background to the overall 227 pxl width 170 pxl height messaging.

Short vs. Long Right Column Banners When choosing whether to design a short or a long banner, factor in what content you need to present. If you are promoting a single product, a text only message, or a short message, use the short banner. If you have a lot of imagery to include, or if you want to draw more attention, use the long banner.

1

227 pxl width 455 pxl height

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 56 Banners: Long Right Column

Banners: Long (Right Column)

1 Headline Product name or campaign descriptor is usually featured in the headline.

2 Subhead Benefits are usually presented in the subhead.

3 Call to Action A clear call to action appears as a link at the bottom of the ad.

227 pxl width 455 pxl height

1

2

3

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 57 Banners: Short Right Column

Banners: Short (Right Column)

1 Headline Product name or campaign descriptor is usually featured in the headline.

2 Subhead Benefits are usually presented in the subhead.

3 Call to Action A clear call to action appears as a link at the bottom of the ad.

1 227 pxl width 2 170 pxl height

3

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 58 Banners: Short Right Column

Banners: Short (Right Column) Examples

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 59 Banners: Hub Pages

Long Horizontal Banners

1 Headline Product name or offer is usually featured in the headline.

2 Subhead Product name, benefit or offer is usually presented in the subhead. (Depends on headline.)

3 Copy If a piping element is used, copy containing the offer usually appears on its left side.

4 Call to Action A clear call to action appears as a link to the right of the piping. If a piping element is not used, the CTA appears as a clear link or button at the bottom of the ad.

674 x 143 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 60 Banners: Display Ads

More Examples

728 x 90 pxl

300 x 250 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 61 Banners: Display Ads

More Examples

728 x 90 pxl

300 x 250 pxl

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 62 Banners: General Guide of Do’s and Don’ts

Creative Professional Do’s Creative Professional Don’ts

1. Keeping the products focused. 1. The similar colors of the product and back- ground image loses the product. 2. Clean typography with hierarchial type. 2. White type that blends in the background gets 3. Simple gradients of color that allow the prod- lost in the composition. uct and messaging to shine. 3. No clear call to action is available.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 63 Banners: Ad Design Examples

Artisan Microsite

2009 Coolville Holiday Campaign Design for Excellence Microsite

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 64 06 Web Elements Web Elements: Accordian Nav

Helv. Neue Bold Gradient 14 pt #3e8cc3 #ffffff to #86cdfd

14 pxl

20 pxl 12 pxl Helv. Neue Bold 12 pt #003366 17 pxl

Small Image Gradient 14 pt #e9ebec #517498 to #c4c9ca Helv. Neue Bold 14 pt #003366

Helv. Neue Bold 12 pt #333333

Helv. Neue Bold 10 pt #cf3d3d

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 66 Web Elements: Accordian Nav

1st State 2nd State 3rd State- error 1 3rd State- error 2 3rd State- thanks 3rd State- no java

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 67 Web Elements : Image Gallery

Lt. Gray Gradient #cccccc to #ffffff #517498

Helv. Neue Bold Helv. Neue Bold Drop Shadow 14.44 pt 14.44 pt 47% Opacity, 5 #333333 #517498 Distance, 5 Size

7px 7px 7px 1px 1px 93 px 128 px 128 px 128 px

28 px 7 px 7 px

Small Image 93 x 62

Stroke: 1 px, #b9c2c7

Large Image 396 x 264 295 px

55px #cccccc Blue Gradient #517498 to #98bddd

17px 4px #cbd9e1

11px

23px 11px 7 px 7 px 12px #333333 614 px

Lt. Blue Gradient Helv. Neue Medium Helv. Neue Bold & Regular Helv. Neue Bold Stroke: 1pt, Inside, 10 pt 11 pt 11 pt #999999 to #ffffff #333333 #333333 #003366 Gradient: #b2bfc6 to #eaeef0

Photos Tab: Single Image Photos Tab: Single Image (Single Tab) 360° View Tab Videos Tab Product Tour Tab

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 68 Web Elements : Lightboxes

715 px

Video Lightbox (enlarge) Image Lightbox (enlarge)

14px 14px

375 px 498 px

27 px

#003366 #b51c18 Helv. Neue Medium #27333a 11pt 883 px #003366 Dk. Gray Gradient X-Large Video #27333a to #737d86 TBD?? to #b6bec9 X-Large Image 690 x 460

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 69 Web Elements : New Window

Example

Still need example link from Jon. Pending.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 70 Web Elements : Image Sizes

X-Large Image 691 x 461 3:2 Ratio Sizes

Large Image 396 x 264

Medium Image 171 x 114 Small Image 93 x 62

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 71 Web Elements : Image Sizes

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 72 Web Elements : Image Sizes

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 73 Web Elements : Image Sizes

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 74 Web Elements : Image Sizes

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 75 Web Elements : Image Sizes

16:9 Ratio Video Size Video Size 400 x 242

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 76 Web Elements : Image Sizes

16:9 Ratio Video Size Example

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 77 Web Elements: Tool Tip

118 px

Promotion Tool Tip Share Dropdown

11 px Helv. Neue Bold Helv. Neue Bold 11 pt 11 pt #333333 #333333 10 px 11 px

14 px Helv. Neue Roman 7 px 10 pt, 13 leading 143 px #333333 12 px Helv. Neue Bold 10 pt 11 px #333333 12 px 22 px

12 px

11px17px 8px 12 px 100 px

227 px

Drop Shadow Arial 40%, Distance 1, Size 10 11 pt #333333 Gradient #e9e9e9 to #d1d8dc to #ffffff

Stroke 2 px, Inside, #ffffff

Video Rollover Tool Tip

Helv. Neue Bold 11 pt #333333 10 px

Arial Bold 10 pt #333333 16 px

14px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 78 Web Elements : Order by Phone

Stroke #e7ebec to #d2d2d2 to #e3e6e8

Gradient #cee7fa to #6090bf

3px10px 7 px 63 px

4 px

Helv. Neue Bold 14 pt #333333 76 px 61 px Helv. Neue Bold 17 pt #333333 Helv. Neue Roman 10 pt 5 px #ffffff 3 px

8 px 227 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 79 Web Elements: Epson Service/Related Products

Stroke #e7ebec to #d2d2d2 to #e3e6e8

7 px 16 px Gradient #ffffff to #f6f6f7 to #e4e4e4

7 px

15 px

Helv. Neue Bold 14 pt #333333 15 px

6 px #f1f1f1 1 px 8 px Helv. Neue Medium 137 px 12 pt #003366

12 px 8 px

Stroke #e7ebec to #d2d2d2 to #e3e6e8

Gradient #ffffff to #f6f6f7 to #e4e4e4 10 px 8 px

7 px 5 px

Helv. Neue Bold 11 pt #003366 202 px

Helv. Neue Roman 11 pt #333333

35 px

35 px

227 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 80 Web Elements: Support

Stroke #e7ebec to #d2d2d2 to #e3e6e8

7 px 16 px Gradient #ffffff to #f6f6f7 to #e4e4e4

14 px

Helv. Neue Bold 14 pt #333333 14 px

6 px #eeeeee 1 px 8 px

161 px

Helv. Neue Medium 12 pt #003366

137 px

229 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 81 Web Elements: Shipping/Promotional Module

Stroke #e7ebec to #d2d2d2 to #e3e6e8

Gradient #ff8a18 to #ffcb6c

3 px 9 px 8 px 61 px

21 px Helv. Neue Bold 17 pt #333333 76 px 8 px Helv. Neue Roman 10 pt 21 px #ffffff

61 px

153 px

227 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 82 Web Elements: Sign Up Module

Stroke 1px, Inside, #ebebec

Gradient #f3f4f5 to #d1d8dc to #f2f5f6 to #e9e9e9

15 px 198 px 11 px

16 px

Helv. Neue Roman 14 pt #333333

12 px

Helv. Neue Roman 11 pt #333333

17 px

Helv. Neue Roman 216 px 10 pt 17 px #666666

9 px

Helv. Neue Roman 10 pt #666666

12 px 26 px 22 px

27 px 26 px

79 px Helv. Neue Italic 9 pt #333333

225 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 83 Web Elements: Pricing Modules

23 px

Available; Buy Now Sold Out; Notify Me

17 px Arial Bold 12 pt 9 px #333333 Arial Bold 9 px 12 pt #336600 Arial Bold 10 px 21 pt 1 px 8 px #333333 Arial Bold 12 px 11 pt #333333 Arial Bold 11 px 12 pt #003366

295 px

10 px 1 px #f2f2f2 8 px Arial Italic Arial Bold 8 px 12 pt 12 pt #333333 #cf3d3d 30 px

9 px Arial Bold 12 px 12 pt #003366

22 px 9 px 102 px 97 px

227 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 84 Web Elements: Pricing Modules

Sold Out; Notify Me Sold Out; Notify Me (Javascript) (Confirmation) Discontinued Product No Discounts Available

Arial Arial Bold Small Image 10 pt 10 pt 93 x 62 #333333 #333333

Projector Form Projector Form Employee Discounts Product In Stock Product Out of Stock Buy Now Suppressed

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 85 Web Elements: Buttons & Links

Consistent Buttons & Links

Helvetica Neue Bold 14 pt #673200 #fe9900

Rounded Corner 15 pt radius Gradient #fcc010 to 28 pxl #ffd65a

Rounded Corner 15 pt radius 22 pxl Gradient #618db2 to Helvetica # 9bbfdf Neue Bold 9 pt #ffffff #97c0e0 w/ drop shadow

Helvetica Neue Bold 11 pt #003366

Buttons Large colored buttons are often used in the hero flash banners. ‘Buy Now’ is consistently yellow to call special attention to the action. ‘Sign Up Now’ is similar to the ‘Buy Now’ but slightly reduced in size. It is a consistent blue across the site. Supporting links are not in buttons but rather presented in blue with an area calling the action out.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 86 Web Elements: Buttons & Links

Variable Buttons

Helvetica Neue Bold Rounded Corner Gradient Gradient Gradient 14 pt 15 pt radius #fcc010 #673200 # b4daee #b4248f Gradient to to to #d1eae6 #fcc010 #87b0d2 #d62e9f to #d1eae6

28 pxl

#71817d #41683b #4b637d #692b5e

Buttons Large colored buttons are often used in the hero flash banners. Colors within the Epson palette may vary to compliment the banner colors. They retain the same look and feel of the ‘Buy Now’ buttons noted in the previous page.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 87 Web Elements : Tabbed Pages

Lt. Gray Gradient #cccccc to #ffffff Helv. Neue Bold #517498 11 pt Helv. Neue Bold #333333 Helv. Neue Bold Helv. Neue Bold Helv. Neue Medium Drop Shadow Overview Tab 13 pt 10 pt 11 pt 11 pt 47% Opacity, 5 #333333 #333333 #517498 #003366 Distance, 5 Size

1 px 1 px 1 px 1 px 1 px 118 px 118 px 118 px 118 px 118 px 118 px

31 px

#deeaf0 27 px Gradient #e8f6fd to #f5fbfe 7 px #deeaf0

34 px Gradient #b2bfc6 to #eaeef0

20 px

Helv. Neue Bold 18 pt 15 px #333333

Helv. Neue Roman 12 pt #333333

26 px

Helv. Neue Bold 12 pt #333333

Helv. Neue Roman 12 pt #333333 Helv. Neue Bold 20 px 12 pt #003366 1 px #edf0f2 20 px Helv. Neue Bold 12 pt 10 px #003366 12 px Helv. Neue Roman 12 pt 25 px #333333

Helv. Neue Bold 12 pt 13 px #003366

Helv. Neue Bold 14 pt Helv. Neue Bold #003366 11 pt 102 px #333333 Helv. Neue Roman 12 pt #333333 Helv. Neue Italic 11 pt #333333 29 px 102 px

701 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 88 Web Elements : Tabbed Pages

Overview Tab (continued) 63 px

Helv. Neue Bold 11 pt #003366 24 px

Helv. Neue Bold 14 px 14 pt #333333

Helv. Neue Roman 64 px 12 pt #333333

14 px 1 px #edf0f2 14 px

25 px

Helv. Neue Bold & Roman 12 pt 17 leading #333333

20 px 337 px

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 89 Web Elements : Tabbed Pages

Overview Tab (continued)

30 px

80 x 80 px w/padding 55 px

30 px 10 px

14 px Helv. Neue Bold 14 pt #333333

30 px

16 px Helv. Neue Bold 14 pt #333333

Helv. Neue Bold 14 pt 30 px #333333

33 px Gradient Helv. Neue Bold 50% Opacity 14 pt #acd3e8 to #dff2fb #333333

Stroke 715 px 1 pt #cbd9e1 to #ffffff © 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 90 Web Elements : Tabbed Pages

Specifications Tab Epson Technology Tab Awards & Reviews

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 91 Web Elements: Icons

Gradients # 9497cc Gradients to # 00b9f1 # 6468b2 to # 235791 Gradients # 00b9f1 to # 0097e8

Gradients Gradients Gradients Gradients #581701 # 438ec7 Gradients Gradients # acc3b3 # bd8fc0 # 98cf8e to to # a2aebc Gradients to to to Gradients Gradients #b74103 #8cc8ed to # c6737d #729189 #9a56a3 #75c166 # c7e3f9 # 68c5ca #5e6f77 to to to # a23f44 #9accff # 3697a0

Gradients Gradients Gradients Gradients Gradients Gradients # fbc684 # 3264c3 # 0c9104 # bc0821 # 438ec7 # e21f25 Gradients to to to to to to #3364cb #f99a2e #0c4690 #39a010 #960629 #8cc8ed #771021 to #10228e

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 92 Web Elements: Breadcrumbs

Helv. Neue Bold 10 pt #003366

Helv. Neue Bold 10 pt #333333

Breadcrumbs Breadcrumbs are used as a navigation aid to give users a way to keep track of where they are on the site. Breadcrumbs on Epson sites will typically appear horizontally across the top of the page, usually below title bars or headers. They will provide links back to each previous page the user navigated through to get to the current page.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 93 Web Elements: Pagination

Gradient Helv. Neue Bold #acd3e8 10 pt to #666666 #dff2fb

30 pxl

Helv. Neue Bold 11pt #003366

Pagination Pagination links on Epson sites will list up to 4 individual page links, and include a View All link, as well as Previous and Next links, which will be grayed out when they are not actionable.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 94 07 Color Palette Color Palette

Epson brings a rich expression of color to the world.

Epson products allow the viewing of millions of colors combined in endless variety. The original richly saturated palette consists of nine colors that represent a wide range of hues. The expanded palette more closely reflects the Epson brand in that it expresses the greater depth of subtlety and shade made possible by Epson products.

Original Color Palette Expanded Color Palette

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 96 Color Palette: Gradients & Styles

Banners: Sunset

Backgrounds The Epson Banners uses various gradient analogous colors to create a colorful yet sophisticated atmosphere to enhance Epson’s products and Gradients offerings. #592450 to #d75eab to #e990ac

Gradients #581701 to #b74103 to #f7c00d

Gradients #162d10 to #618b43 to #bcce78

Gradients #374f69 to #7ba0ba to #d5eaef

Gradients Gradients #581701 #6e8679 to to #b74103 © 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. #a7c5b9 97 to to #f7c00d #d2ece9 Color Palette: Gradients & Styles

Banners: Fire Dome

Backgrounds The Epson Banners uses various of gradient analogous colors to create a colorful yet sophisticated atmosphere to enhance Epson’s products and Gradients offerings. #143d5b to #236b91 to #29adbc

Gradients #4a885f to #88bc74 to #d4e9ca

Gradients #592a6e to #a1419b to #c76fc5

Gradients #6282a8 to #9fb7d9 to #d3e0f0

Gradients Gradients #749acb #d8480c to to #a4c3df © 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. #e67b1b 98 to to #c5daeb #f7d677 Color Palette: Gradients & Styles

Banners: Fire Dome

Backgrounds The Epson Banners uses various of gradient analogous colors to create a colorful yet sophisticated atmosphere to enhance Epson’s products and Gradients offerings. #36304c to #504168 to #8468a2

Gradients #1b212d to #307596 to #24a4d1

Gradients #10340e to #4f974d to #7ed27a

Gradients #628eb3 to #98b6d2 to #e1eef6

Gradients Gradients #d56f0a #380a0a to to #f48b15 © 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. #8f2d2c 99 to to #f6c046 #af5453 Color Palette: Gradients & Styles

Banners: Purple Rain

Backgrounds The Epson Banners uses various of gradient analogous colors to create a colorful yet sophisticated atmosphere to enhance Epson’s products and Gradients offerings. #36304c to #c86d1c to #ecaa15

Gradients #1b212d to #6b7e9c to #9faec3

Gradients #285364 to #63a3c7 to #74aed3

Gradients #35512b to #748c58 to #adc190

Gradients Gradients #949dac #1f3948 to to #a4acb7 © 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. #3d768a 100 to to #dfdfe1 #76b4c3 08 Typography Typography: Typefaces

Headline/Feature Font The typeface for Epson.com is a more modern and elegant variant of the classic font Helvetica called Helvetica Neue (pronounced “Noy-a”). The font is available in an expansive family including weights from UltraThin to Black. On the site, feature text and headlines favor the lighter weights of Thin and Light. When using Helvetica Neue for headlines and feature text, tracking the characters in slightly (set Tracking to -25 in Adobe applica- tions) will give the text a more contemporary feel, but on text set below 20px, beware of legibility when using this technique. Helvetica Neue Thin Helvetica Neue Light Helvetica Neue Roman Helvetica Neue Bold

System Font System text throughout the site continues to leverage the ubiquitous system font Verdana and its variants. A wide variety of conventions for color and size are specified in the Epson.com CSS files.

Verdana is a humanist sans-serif typeface available to the vast majority of personal computer users.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 102 Typography : Hierarchy

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 103 Typography : Rules of Engagement

Although Helvetica is a relatively reserved typeface, that doesn’t mean your treatments need to follow suit. The Staying in line with the Epson brand, follow the guidelines below when layout out copy.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 104 Typography : Engagement Examples

The following treatments exemplify the possible variety within the established guidelines.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 105 Typography : Engagement Examples

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 106 09 Photography Photography : Knowing The Audience

It is important to customize the experience for specific Epson user segments. These diverse segments use the Epson site in very different ways. An illustrator in New York looking at the Professional Imaging line of products has a vastly different set of goals and aesthetics than a scrapbooker from Kansas looking at a home office printer. When serving up imagery, make sure it aligns with the attributes of Epson’s major market segments :

Home and Home Office User Honest, human, emotional, evocative, nostalgic, colorful, approachable, fun.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 108 Photography : Knowing The Audience

Business Professional Hard-working, aggressive, trustworthy, intelligent, high-quality, sexy, genuine.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 109 Photography : Knowing The Audience

Creative Professional Striking, iconoclastic, dramatic, distinctive, nuanced, meaningful, aspirational.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 110 Photography : Brand Imagery

Beyond the Mundane We see it again and again. Too often, corporate guidelines for imagery are restrictive and random. Granted, there’s a need to ensure that imagery is on-brand and of a high quality, but we should never sacrifice variety, creativity and the element of surprise in the name of adhering to a set of guidelines. While created with the best intentions, these rules often lack subtlety and nuance and seem like they were created in a vacuum. And be- cause the rules seem arbitrary and leave little room for creativity, mediocrity sets in.

The nature of Epson products puts the company solidly in a visual world where the image is the hero. It simply makes sense to convey the brand through dynamic and engaging imagery. Epson’s application of imagery result in visuals that are stunning, surprising and inspiring. Furthermore, it’s essential that imagery aligns with Epson’s brand attributes — namely creative, sophisticated, intelligent, artistic, hard-working, trustworthy and exciting.

Thus, in determining a set of imagery guidelines for Epson, we are moving away from rules that are prescriptive and limiting, and providing a vision for carefully-chosen, well-used imagery that brings the Epson site to life.

Surprise, delight, inspire The Epson brand statements, “Exceed Your Vision” and “Epson helps you show your creativity at its best,” are remarkably aspirational. The visual translation of these statements is accomplished through the use of imagery that is arresting in color, composition and content. Imagery that is bland, insipid or looks like stock photography is best left for use by the competitors. Epson images will be evocative, provocative and stir strong emotions. The site will be home to imagery that refuses to be ignored and persuades users to pay attention.

How can we tell if an image measures up to these criteria? Good taste is not easily defined and does not follow a set of rules; however, we can pose a series of questions when selecting appropriate imagery for the site. If an image passes muster when held up to this inquiry, you probably have an image worthy of Epson.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 111 Photography : Brand Imagery

When selecting images to be used on the Epson.com website, ask yourself the following questions :

1. Have I seen something like this before? If imagery looks like it comes from the future, that’s a good thing. Keep it fresh. If an image looks like it’s beginning to look slightly dated – think twice before moving forward. It’s critical that we avoid the prosaic imagery we too often find on sites similar to this one.

2. Is the image emotionally evocative? Does it surprise you? Make you happy or sad? Stimulate desire or re- pulse you? If so, that’s a good image. Now take the image and show it to others. Ask them the same ques- tions. If you ask 10 people what an image means, and you get 10 different answers, you’re probably onto something good.

3. Does the image have a visceral impact? If you have to think about why an image is good, it probably isn’t.

4. Will other designers come to Epson.com for inspiration? The imagery should be so impactful that others are driven to emulate the look.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 112 Photography: Visual Examples

Home and Home Office Do’s Home and Home Office Don’ts

1. Image composition is simple, yet elegant and 1. The composition of the image is overly simplistic beautiful. The concentric rings in the water and clumsy, almost like an amateur snapshot. draw the eye to the focal point of the boy. 2. The color palette lack sophistication – the bright 2. All elements work together to tell a story – the colors are garish and crude. boy’s posture; his position within the ripples; and the wooden sword holstered at his side. 3. The boy’s expression is pandering and cutesy.

3. The stripes in the boy’s shirt echo the ripples in 4. Due to the lack of refinement in the image, it the water. His red hair adds a splash of color to comes off as corny. the largely blue palette.

4. The image is contemplative, melancholy and nostalgic, evoking reflections on childhood and growing up.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 113 Photography : Visual Examples

Home and Home Office Do’s Home and Home Office Don’ts

1. The asymmetrical composition adds realism 1. Cropping has removed some important features and interest to the shot. from the composition.

2. The figures posture is unusual but believable. 2. The image has an overall orange color and no true highlights which should be corrected. 3. The focused lighting produces good contrast and accentuates spots of color. 3. The composition lacks interesting details.

4. The image has interesting and genuine stylistic 4. The styling of this image is dull and trite. details, such as the writing on the board, the- drawings below and the girls clothing.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 114 Photography : Visual Examples

Home and Home Office Do’s Home and Home Office Don’ts

1. The asymmetrical composition adds realism. 1. The symmetrical composition and strongly fea- tured central figure dull this image. 2. An interesting environment helps contextualize the main figure and lend a narrative quality. 2. Blurry or monochromatic backgrounds dimin- ishes the impact of image. 3. The emotional content of the image invokes the adventure and experiences of childhood. 3. The boy’s smile is stiff and awkward.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 115 Photography : Visual Examples

Business Professional Do’s Business Professional Don’ts

1. The moody lighting of the background and the 1. The color and composition are flat and clumsy. higher contrast lighting applied to the fore- ground adds intensity. 2. The lack of perspective in the foreground re- duces the overall tension of the image. 2. The figures dymanic posture speaks of action, heroism and risk. 3. The figures hair, brief case and clothing lack style. The representation of “business man” is 3. The styling of the suit and the parachute are generic and stereotypical. fresh and interesting. 4. The representation of “risk” is staged and over 4. Contrast in size between foreground and back- simplistic. ground elements adds visual interest.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 116 Photography : Visual Examples

Business Professional Do’s Business Professional Don’ts

1. The rich shadows and textures are engaging. 1. The composition is bland and uneventful.

2. The subjects expression has an intensity that 2. This image could use some color and adds drama. brightness adjustment in the skin tones.

3. The tight crop amplifies the emotional inten- 3. A more distinctive and interesting subject sity of the subjects expression. would make the image more memorable, and therefore more effective. 4. The blue eyes with dark shadows balance the blue collar and dark jacket.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 117 Photography: Product Imagery

While product imagery needs to accurately convey the look of the product, there is no reason for the photogra- phy to be flat, clinical and uninteresting. Rather, product photography should be sophisticated, and illuminate the products features. A larger-than-life macro shot is a good way to show off Epson’s meticulous attention to detail and superior quality. A lifeless photo is simply unacceptable.

Furthermore, careful thought and consideration should be given to the environment in which products are pho- tographed. What can we add to each composition to present the product in the most flattering light? What kind of styling will resonate with each of Epsons market segments? Imagining the end user will help you determine the appropriate setting for each product shot.

Lastly, when possible, the product should be photographed in a human context. It is not necessary for the sub- ject to interact with the product, but having a person in the frame brings a sense of scale to the image and helps to humanize it. This strategy is most useful for market segments such as Business and Home/Home Office that often respond more to emotional factors than the technically-focused Professional Imaging customer.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 118 Photography: Visual Examples

Product Photography Do’s Product Photography Don’ts

1. Product is shot with human context, providing 1. Product is shot in a desk environment, which a scene to understand scale, but still shines as allows scale, but because of placement, the the main subject of the photo. product is not the main attraction.

2. Product is photographed in action, printing a 2. Printer is not photographed in action, and the high quality print with on-brand imagery. details of the product are not shown.

3. The lighting and color of the background spot- 3. Bright lighting does not spotlight anything. light the product in a dramatic manner, with a high level of detail. 4. The generic color pallette and environment doesn’t give the product a point of view. 4. The dark grey offers a contemplative mood, and the styling of the ballerina leaves the view- er with a sheek, modern understanding of the product.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 119 Photography: Visual Examples

Product Photography Do’s Product Photography Don’ts

1. Product is placed on gradients which compli- 1. Product is shot with no context of physical ment the printed page. A subtle horizon line space, a horizon line is needed for weighting offers a sense of gravity and space. down the product.

2. Printer is photographed in action, printing vivid, 2. Printer is photographed in action, printing noth- eye catching, on-brand imagery. ing, which offers no information regarding the quality of the product. 3. The lighting shows good shadows and high- lights. 3. The surreal lighting disorients the viewer, and does not spotlight the product.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 120 Photography: Visual Examples

Product Photography Do’s Product Photography Don’ts

1. Product is shot in context with objects to pro- 1. Product is shot with no context of scale or vide a basis for scale, as well as show the physical space. printers many capabilities. 2. Printer is photographed in action, printing noth- 2. Printer is photographed in action, printing vivid, ing, which offers no information regarding the eye catching, on-brand imagery. quality of the product.

3. The lighting shows good shadows and high- 3. The lighting is bland, and does not assist in lights. showing off the product.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 121 10 Copywriting Copy: Tone

The Epson Voice Visitors to Epson.com are looking for information. If content is not presented in a way that respects their valuable time and gives them quick access to what they need, they’ll move on and look elsewhere.

Today’s sophisticated goal-oriented web users do not want to be sold to by long-winded, self-aggrandizing copy. They simply don’t have time to read about how wonderful Epson products are – they need to be shown.

Keep it Visual Copy should not play the role of hero on Epson.com. Images must be front and center with copy in the sup- porting role. Copy should be to the point, conversational, and written for maximized scannability to alleviate the difficulty of reading on a computer screen.

Scannability Aids • Chunked content • Frequent subheads • Bulleted lists

Dos & Don’ts Copy needs to be short and simple. Personality can be injected into online copy to help maintain a balance between information and inspiration. Marketing-speak, boastfulness and exaggeration are to be avoided at all costs. Users come to the site out of choice and are turned off by a hard-sell approach. Avoid giving them any reason to go elsewhere out of frustration.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 123 Copy: Banner Copy

Epson display ads run the gamut from purely sales driven product advertising to messaging that is aspirational, themed, and witty. However, injecting a sense of personality into an ad should never be overdone or gratuitous – never clever for clever sake.

Display ads are generally made up of some or all of the following copy elements:

(Use display adds with callouts to show this)

Headline

Subhead

Supporting Copy

Call to Action

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 124 Copy: Promotional Copy

Promotional copy, such as found on Epson microsites, is to be treated on a case-by-case basis due to the customized and themed nature of the content. That said, the basic recommendations that pertain to writing for Epson online, outlined on page 107, still apply. And, as with display advertising, injecting a sense of personality into promotional copy should never come at the cost of losing the clarity of the message or the integrity of the Epson brand.

Copy will be short and simple. Personality, humor and attitude will be injected into the online copy to help main- tain a working balance between information and inspiration. Marketing-speak, boastfulness and exaggeration are to be avoided. Users come to the site out of choice and are turned off by a hard-sell approach. Certainly, we should avoid giving them any reason to turn to our competitors out of frustration.

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 125 11 Conclusion Conclusion

When working on the Epson.com website, you become a steward of the Epson brand. You will be responsible for expressing the innovative and inspirational spirit of Epson to the world. The guidelines presented in this document are intended to insure that alte that vision and provide a strong foundation for your effort to represent the Epson brand online.

For questions, comments or more information, contact :

ENTER NAME HERE - Epson Manager 3840 Kilroy Airport Way Long Beach, CA 90806 562-981-3840

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 127 Introduction

This document describes the standards and guidelines established by Proxicom, Inc. for the Epson.com web- site. Each section of this document covers a specific set of guidelines to be used on Epson.com.

These guidelines will evolve over time. This style guide is not intended as a regimented formula for the creation or maintenance of Epson.com pages, but rather a road map for appropriate creative application. Its purpose is to ensure that any new or updated pages support the Epson brand identity and reinforce overall Epson.com creative direction.

If you have any questions regarding this document, please contact

ENTER NAME HERE - Epson Manager 3840 Kilroy Airport Way Long Beach, CA 90806 562-981-3840

© 2007 SEIKO EPSON CORP. ALL RIGHTS RESERVED. 128