Design elements. Brand Identity Guidelines v 1.0 June 2018

Transcription

1 Design elements Brand Identity Guidelines v 1.0 June 2018

2 Table of contents Return to table of contents ebill Design elements v Logo and Clear space 1.1 Sizes 1.2 Position 1.3 Color & background 2. Color 2.1 Specifications & Tints 2.2 Tint prints 3. Typography 3.1 Type style 3.2 Title hierarchy 3.3 Headline, subhead 3.4 Type on background color 3.5 Type sizes 5. Layout 5.1 Margins 5.2 Grid 5.3 Title 5.4 Alignment 5.5 Media Types 5.6 Print formats 6. Pictures 7. Illustrations 8. Teaser 9. Pictograms 4. Look & feel

3 1. Logo and Clear Space Return to table of contents ebill Design elements v1.0 3 ebill is a single brand with one logo. Single brand Sufficient visibility must be guaranteed for application of the logo. Therefore, maintain 1 X (logo reference size) clear space around the logo. For exceptions, reduce clear space to at least 1/2 X. Logo reference size reference size = 1 X Exception: For implementation in applications such as an online-banking tool the logo may be implemented with less clear space to gain good legibility. Optimal clear space: 1 X Minimal clear space: 1/2 X 1 X 1/2 X 1 X 1/2 X 1/2 X 1/2 X 1 X 1 X

4 1.1 Sizes Return to table of contents ebill Design elements v1.0 4 The format defines which logo size to use. Logo files are generated for every format. Portrait and landscape formats use the same size. Format group minimal size Logo size 6 mm Logo files for download Logo files in different file formats, sizes and color versions are available to download. Business Card / A8 A6 10 mm 14 mm File naming examples: ebill-logo-bluewhite-cmyk A6/5 16 mm A5 19 mm A4 20 mm A3 A2 A1 A0 30 mm 40 mm 60 mm 85 mm Download logo files ebill logos 1 mm = inches

5 1.2 Position Return to table of contents ebill Design elements v1.0 5 Standard logo alignment is upper left. In exceptional cases, the logo is bottom right (e.g. brochures). Standard position top left aligned for: Stationery, brochures Product sheets PPT title pages and content pages Web design Online Banner Print ads Posters Standard position bottom left aligned for: PPT titel pages and content pages with with partner logo Online Banner with partner logo Print ads with partner logo Partnerlogo: When using a partner logo, the ebill logo is placed on the right, preferably on top. Bottom right is also possible if there shall be a logo hierarchy. The two logos are aligned in the middle of each other if they are on the same level.

6 1.3 Color and background Return to table of contents ebill Design elements v1.0 6 The preferred logo version is the color logo against a white background. Standard: Color logo Standard on grey background: Negative logo Standard on colored background: Negative logo Standard: Color logo The logo appears in Vivid Cyan or in rare cases in its color negative. Use this version also for gray backgrounds up to 60% black. Use only the color negative on colored backgrounds. Special application: Black and white logo Logo is either 100 % white or 100 % black. Use these versions on blackand-white applications. Vivid Cyan White White Special application: Black logo Special application on grey background: Black negative logo Important Sufficiant contrast must be guaranteed. Black White Don t Logo is never in a color different as the ones described above. It is forbidden to built a similar looking design. The correct logo has to be used at all times and in any application. Don t place the Vivid Cyan Logo on colored backgrounds. Don t ebill ebill

7 2. Color Return to table of contents ebill Design elements v1.0 7 The ebill corporate colors are used throughout all ebill communication. The color of the logo is Vivid Cyan, which can also be used for type and graphic elements. White as background color plays a major role in the overall appearance. Clay is the dominant color for fields and graphic elements and a calm/neutral color in contrast to the vibrant logo color Vivid Cyan. On a less visible level, Plum brings in freshness and can be used to help user guidance, e.g. in the structuring of content. Fuchsia is strictly used as a highlight color and should be used sparingly. Rock is the color for type and lines. Logo White space Fields Typography Fields Typography Lines

8 2.1 Specifications & Tints Return to table of contents ebill Design elements v1.0 8 The color profiles used are certified according to ISO Coated paper: ISO Coated v2 Uncoated paper: PSO Uncoated Newspaper: ISO Newspaper Screen: srgb Corporate colors RGB HEX CMYK Coated CMYK Uncoated CMYK Newspaper Vivid Cyan FBBDC Plum A3C9E Fuchsia F Rock E4E4E Clay ADA Corporate colors RGB Tint 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% Vivid Cyan Plum Fuchsia Rock Clay Corporate colors HEX Tint 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% Vivid Cyan 1FBBDC 35C2DF 4CC9E3 62CFE6 79D6EA 8FDDED A5E4F1 BBEAF4 D2F1F8 E8F8FB Plum 9A3C9E A44FA8 AE63B1 B876BB C28AC5 CC9DCE D7B1D8 E1C4E2 EBD8EC F5EBF5 Fuchsia F01394 F12A9E F342A9 F459B4 F671BF F789C9 F9A1D4 FAB8DF FCD0EA FDE7F4 Rock 4E4E4E 5F5F5F A6A6A6 B8B8B8 CACACA DBDBDB EDEDED Clay ADA398 B5ACA2 BDB5AC C5BEB7 CDC7C1 D6D1CB DEDAD5 E6E3E0 EEECEA F7F6F4 Download color palettes ebill colors (ASE)

9 2.2 Tint prints Return to table of contents ebill Design elements v1.0 9 Please use the defined color tints as a reference for screen design. Corporate colors CMYK Coated Tint 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% Vivid - Cyan Plum Fuchsia Rock Clay Corporate colors CMYK Uncoated Tint 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% Vivid Cyan Plum Fuchsia Rock Clay Download color palettes ebill colors (ASE)

10 3. Typography Return to table of contents ebill Design elements v NOTO is the ebill corporate typeface and the standard for all print and online media. Licensing NOTO is for free. The font has multiple styles and weights, and is freely available to all. NOTO supports all languages with a harmonious look and feel. NOTO Serif, Bold ABCDEFGHIJKLMNOP QRSTUVWXYZ abcdefghijklmnopqrstuvwxyz NOTO Sans, Regular ABCDEFGHIJKLMNOP QRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Download Typeface

11 3.1 Type style Return to table of contents ebill Design elements v We use 7 fonts of the NOTO typeface. NOTO Serif Alignment Aa123 Noto Serif, Bold Headline Markups Quotations Standard Justified: for body copy NOTO Sans Standard Left aligned: for headlines, subtitles, lead texts, captions, marginalia, diagrams and tables Aa123 Noto Sans, Regular Noto Sans, Itlaic Noto Sans, Bold Lead texts, subtitles, body copy, captions Flush left and body copy justified Exceptional Right aligned Centered Noto Sans Condensed Noto Sans Condensed, Italic Noto Sans Condensed, bold Diagrams Tables Marginalia Descriptions Picture captions Alternate typography For use the system font Arial in black as the fall-back font cannot reliably be set. This ensures readability even if the receiver has none of the Noto typefaces installed. Arial Aa123 Arial Regular Arial Regular Italic Arial Bold Arial Bold Italic copy text

12 3.2 Title hierarchy Return to table of contents ebill Design elements v Ensure the message is clear and direct. Offering multiple reading levels structures the content and helps guide the reader. Create title hierarchy Type style Color Use of blank lines Extended title hierarchy Typeface Color Headline or document title Subhead NOTO Serif, Bold NOTO Sans, Regular Basics Subtitles and body copy: same size Blank lines (where possible): one after subtitle, two before next subtitle Blank lines (minimum): none after subtitle, one before next subtitle Lead text eram eros mod dolse quisit acipism odolortio sumodolore amet facilis non veliquipisl elit sit liquip. Subtitle Level 1 NOTO Sans, Regular NOTO Sans, Bold Don t Do not use more than one different color right after each other as it makes the design look too playful. Subtitle Level 2 Subtitle Level 3 NOTO Sans, Bold Italic NOTO Sans, Regular Body copy lorem ipsu dolor amus core volupta dolor rovidel sit ipsapiet quid qui Beribus idebis veribus, ellit officienias restem dolorem of que nis mos doluptas idundaes ut eaquam erum. NOTO Sans, Regular Subtitle for descriptions, marginalia, picture captions Copy of descriptions, marginalia, picture captions NOTO Sans, Condensed Bold NOTO Sans, Condensed

13 3.3 Headline, subhead Return to table of contents ebill Design elements v Headline is always NOTO Serif. Size is flexible within defined minimal and maximal sizes. In contrast, subhead is always NOTO Sans Regular. Size is fixed per format group. Distance between headline and subhead is 2 X (logo reference size). In exceptional cases, reduce to 1,5 X (e. g. on A6 landscape format). Standard Headline or document title 2 X Subhead Exception Headline or document title Subhead 1,5 X

14 3.4 Type on background color Return to table of contents ebill Design elements v Only use shown ensembles for type on background color. Tint color box with Rock type Full color box with white type Color type with top and bottom line on white Usage Use the color combinations shown for: Divider pages with full-bleed background color as a bracket or to indicate sections of brochures, event collateral, etc. Text boxes Type on Pace transparent Tables Background: 50% Vivid Cyan Type: 100% Rock Background: 40% Rock Type: 100% Rock Background: 100% Vivid Cyan Type: white Background: 100% Rock Type: white Type: 100% Vivid Cyan Type: 100% Rock Ensure legibility Always maintain good legibility. Don t use Clay or Vivid Cyan on Plum and Fuchsia. Type in Clay printed on some color laser printers might not be as legible as when professionally offset printed. Consider production when selecting colors. Background: 60% Plum Type: white Background: 50% Clay Type: 100% Rock Background: 100% Plum Type: white Background: 100% Clay Type: white Type: 100% Plum Type: 100% Clay Background: 60% Fuchsia Type: white Background: 100% Fuchsia Type: white Type: 100% Fuchsia Don t Background: 100% Plum Type: 100% Vivid Cyan Background: 100% Fuchsia Type: 100% Clay

15 3.5 Type sizes Return to table of contents ebill Design elements v Type size or range is defined for several standard formats (ISO) and media types. Type Type size Line spacing Brochure A4 Brochure A5 Brochure A6/5 Brochure A6 Fact sheet Newsletter Invitation Advertising Headline Headline size is flexible within defined minimal and maximal sizes. Use big for prominent communication and small for elegant and high-quality media. Subhead Subhead size is fixed per format group. Distance to headline is 2 X (logo reference size). In exceptional cases, reduce to 1,5 X. Body copy Body copy size is fixed per format group. For body copy sizes in advertising, refer to advertising guidelines. Horizontal spacing (optional) NOTO Sans Condensed > 14 pt = pt = pt = + 15 < 11 pt = + 20 NOTOS Sans Regular all sizes = 0 110% of type size Headline pt 110% of type size Headline pt 110% of type size 110% of type size 110 % of type size Headline pt 27.5 pt Headline pt 25 pt Headline pt 23 pt Headline pt 21 pt Subhead pt 17 pt Subhead pt 15 pt Subhead pt 14 pt Subhead pt 13 pt Body copy 8.5 pt 8.5 pt 12 pt * Body copy 7.5 pt 7.5 pt 10.5 pt * Body copy 7 pt 7 pt 10.5 pt *

16 Ad Valorem Fee The ad valorem fee depends on transaction volume, payable per participant. The level of this fee depends on the product segment concerned. For the Equity segments, the type of Interface being used and the respective Commitment Level are of importance Transaction Fee Fix fee for all on- and off-order book transactions, payable per participant. The level of this fee depends on the product segment concerned. 4. Look & feel Return to table of contents ebill Design elements v Examples of applications: Digital ads Direct mailings Events/Exhibitions Fact sheets Image and product brochure covers Invitations Newsletters Presentations Print ads Websites Brochures E-Rechnung wird ebill Roadmap und Checkliste für Banken Lorem ipsum dolor. ebill-quickguide At vero eos et accusam et justo duo dolores et ea rebum Digital media Lorem ipsum dolor sit amet Lorem ipsum dolor Stet clita kasd gubergren sea takimata sanctus. Lorem ipsum dolor sit amet consetetur sadipscing elitr. 6 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 4 Scale Floor Transaction Fee Cap Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet - Consetetur sadipscing elitr - Sediam nonumy eirmod tempor invidunt ut - Labore et dolore magna aliquyam erat - Sed diam voluptua - At ver eos et accusam et justo duo dolores et ea - Stet clita kasd gubergren, no sea takimata 5

17 5. Layout Return to table of contents ebill Design elements v Characteristic of the ebill layout: the left margin is wider than the right margin. Margins are defined for each DIN format group.

18 5.1 Margins Return to table of contents ebill Design elements v Shoulder Shoulder equals 1/6 of format height on portrait formats and 3/12 on landscape formats. Align typography, e.g. headline of brochure cover, on the shoulder. Standard DIN formats / proportions Shoulder Narrow formats Extended formats Adapt for US formats Top and bottom margins are the same for US and DIN formats. Live area width is also identical. Please adjust bottom margin to the closest baseline Margins A3 portrait A3 landscape A4 portrait A4 landscape A5 portrait A5 landscape A6/5 portrait A6/5 landscape A6 portrait A6 landscape Top Left Right Bottom Shoulder Measurements in mm

19 5.2 Grid Return to table of contents ebill Design elements v Apply the horizontal grid and column grid accurately to ensure consistent design of all ebill media. Horizontal grid, portrait format: 6 parts 1/6 Column grid, portrait format: 8 parts Horizontal grid Divide format height into 6 parts. If necessary, divide into 12 parts. 1/6 1/6 Column grid On print media, use 8 columns with gutters in between. On other media, divide live area into 8 parts (e.g. advertising). 1/6 1/6 1/6 1/8 1/8 1/8 1/8 1/8 1/8 1/8 1/8 Horizontal grid, landscape format: 6 parts Column grid, landscape format: 8 parts 1/6 1/6 1/6 1/6 1/6 1/6 1/8 1/8 1/8 1/8 1/8 1/8 1/8 1/8 Column grid A3 portrait A3 landscape A4 portrait A4 landscape A5 portrait A5 landscape A6/5 portrait A6/5 landscape A6 portrait A6 landscape Columns Gutter width Measurements in mm

20 5.3 Title Return to table of contents ebill Design elements v Characteristic for ebill is the versatile use of the grid. Pictures are always full-bleed on at least one side. Examples portrait format Exhaust the possibilities! Examples landscape format

21 Lorem ipsum dolor sit amet, consetetur 5.4 Alignment Return to table of contents ebill Design elements v Align logo within margins. Typography is always within margins and, on inside pages, aligned on the column grid. Certain applications have a shoulder for alignment. Pictures bleed to one, two, three or four sides of the format or are within margins and aligned on the column grid. Print ad Lorem ipsum dolor sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sea takimata sanctus est Lorem ipsum dolor sit amet. Brochure Horizontal grid Use to align headline and subhead on defined brochures and to structure content. Optional for aligning pictures and type on inside pages. Lorem ipsum dolor Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor. At vero eos et accusam et justo duo dolores et ea rebum

22 5.5 Media Types Return to table of contents ebill Design elements v The following examples demonstrate the versatile grid. Use different layouts for product/sale and corporate publishing. The layout establishes the essence of ebill s visual identity and at the same time provides flexibility for a wide range of designs. Lorem ipsum dolor Stet clita kasd gubergren, no sea takimata Lorem ipsum dolor Stet clita kasd gubergren, no sea takimata The example shows the basic layout of a brochure cover step by step. Media-specific guidelines For application of the design to specific media, refer to the chapter for that medium Select format. Construct margins and choose corresponding logo size. Place logo within margins. Construct horizontal grid. Place headline and subhead. Place picture or color Background in the grid.

23 5.6 Print formats Return to table of contents ebill Design elements v DIN format is standard for printed publications. US formats All examples in the guidelines are based on DIN formats. For using US formats, please use the conversion table below. Portrait format Fact sheets and product sheets are portrait format only. DIN format mm A0 841 x 1189 A1 594 x 841 A2 420 x 594 A3 297 x 420 A4 210 x 297 A5 148 x 210 A6/5 210 x 105 A6 105 x 148 A7 74 x 105 A8 52 x 74 A9 37 x 52 A10 26 x 37 DIN format mm US format inches mm A3 297 x 420 Tabloid 11 x x 432 A4 210 x 297 Letter US 8.5 x x 279 A5 148 x 210 Statement 5.5 x x 216 A6 105 x 148 Card 4 x x 152 Measurements in mm 1 inch = 25.4 mm 1 mm = inches

24 6. Pictures Return to table of contents ebill Design elements v Only the official ebill pictures shall be used in connection with the brand ebill. Pictures are high contrast with the look and feel of natural light. Artificial lighting with a daylight-like appearance is preferred. Focus is on the main subject, creating dynamics through foreground/ background blur. ebill avoids unrealistic and artificial color effects, color casts and flares, as well as strong, direct back lighting. Download pictures Banks pictures Billers pictures

25 7. Illustrations Return to table of contents ebill Design elements v Illustrations serve to graphically depict more complex situations, moods, actions, objects and characters. Unlike pictograms, they are permanently assigned to their respective message. Illustrations may be used in any environment, but in all cases only play a supporting role (e.g. not as key visuals for campaigns). Example The following example demonstrates ebill s style and approach. Contact Please contact SIX Marketing Payments for the usage of illustrations.

26 8. Teaser Return to table of contents ebill Design elements v Teaser are always designed with the playful brush shown here. Click on the link below for downloading the vector files, with which the teaser s shape and text can be adapted as desired. Teasers should not take up too much space. Example Digital invoices. Simple. Secure. Fast. Digital invoices. Simple. Secure. Fast. Simple. Secure. Fast. Simple. Secure. Fast. Digital invoices. Simple. Secure. Fast. Download teasers ebill teasers

27 9. Pictograms Return to table of contents ebill Design elements v A pictogram shows only one thing (such as a building, person, technical tool or signal). It may not depict various things, like an essay. That would be too much information and require an illustration not a pictogram. Pictogram styles Pictograms have a specific formal language that ensures a characteristic, differentiated and consistent appearance. Pictograms are available as outline transparent, plain or solid versions, in all ebill corporate colors. Outline Outline/Transparent Solid Plain Pictograms to download A standard set of pictogram is available. For further information, please contact the SIX Marketing Payments responsible for ebill. Examples Download pictograms ebill pictograms