Epson.com Design and Branding Standards and Guidelines Document version 1.0 Modified March 19, 2010
Prepared by : Table of Contents
Introduction The Epson Brand: 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 SEIKO 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: Printer 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 “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. 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