DESIGN / GENERAL GUIDLINES

Transcription

1 DESIGN / GENERAL GUIDLINES 20167General Guidlines / Nytec

2 WE DELIVER SOLUTIONS FOR LIFESTYLE TECHNOLOGIES. We deliver award-winning design and engineering solutions for lifestyle technologies. Through a tailored approach, we partner with our customers to define next-generation products and user experiences, with a focus on IoT, Wearables, Mobile Computing, Smart Auto, and Micro Technologies. With over 300 employees, we provide on-site talent, or manage the project end-to-end at our Product Innovation Center. Innovation Problem Solving Solutions

3 20167General Guidlines / Nytec 3 Index DESIGN AND GENERAL GUIDLINES 1 THE NYTEC LOGO The Logo Introduction The Logo Application The Logo Elements Clearspace Incorrect Applications 4 THE CORPORATE STATIONERY The Corporate Letterhead The Corporate Business Cards The Envelope 2 THE CORPORATE TYPOGRAPHY The Corporate Fonts Primary Font Secondary Font Font Hierarchy 5 THE GRID SYSTEM The Grid Systems Vertical Grid Systems A4 Horizontal Presentation Grid Social Media: Instagram Grid Webpage Grid 3 THE COLOR SYSTEM Primary Colors Secondary Colors 6 IMAGE SYSTEM The Corporate Image The Corporate image color The Corporate image solid background color

4 THE LOGO INTRODUCTION 01 Our logo is the ket building block of our identity, the primary visual element that identities us. The signature is a combination of the symbol itself and our company name they have a fixed relationship that should never be changed in any way. NYTEC LOGO The Logo Introduction The Logo Application The Logo Elements Clearspace Colored space Incorrect Logo Applications

5 20167General Guidlines / Nytec 5 THE LOGO APPLICATION The Nytec logo comprises two elements, the logo symbol and logo type. The logo symbol is a powerful image evoking the culture of communication between design and engineering. The general Logo The main logo is the dark logo used on white colored background. For darker backgrounds you will find an alternative below. Recommended formats are:.eps.ai. png ( 300px). jpg( 300px).tiff. 1 The logo symbol Use symbol logo for merchandise, arranged products, etc. with chosen colors. When used on dark background, choose light colors. you will find an alternative in next page. 2 The logo title carefully chosen for its modern and yet refined, highly legible style. Used lower case letters with chosen colors. The font that is used here is Segoe UI Light.

6 COLORED SPACE Any color can be used except same color of logo as background color or opacity lower than 20%. You will find an alternative iniincorrect Logo Applications section. Logo Dark Version Will be used when the background color is light colored. Logo Light Version Will be used when the background color is dark colored. Attention: Use of any stylized, animated, hand drawn or other versions of a inofficial logo is not permitted. This undermines the logo system and brand consistency. Please consult with Nytec if you have any questions or need further help.

7 20167General Guidlines / Nytec 7 CLEARSPACE Any color can be used except same color of logo as background color or opacity of 20% and lower. you will findiincorrect Logo Applications in next page. Definition Whenever you use the logo, it should be surrounded with clear space to ensure its visibility and impact. No graphic elements of any kind should invade this zone. Computation To work out the clearspace, measure the height of the logo and apply: Clearspace= Height ¹/2 Full logo ¹/2 x ¹/2 x ¹/2 x ¹/2 x The logo symbol ¹/2 x ¹/2 x ¹/2 x ¹/2 x The logo title ¹/2 x ¹/2 x ¹/2 x ¹/2 x

8 INCORRECT LOGO APPLICATIONS When using Nytec logo, please avoid using incorrect applications and keep the original logo design consistent. Please do not: use drop shadow, apply strokes, stretch or condense, change trackings, change the shape of the symbol logo and change the typeface of title logo. THE FULL LOGO Do not use drop shadow. Do not apply strokes. Do not stretch or condense. Do not change trackings. Nytec Do not change typeface.

9 20167General Guidlines / Nytec 9 THE LOGO SYMBOL Do not flip or change angles of the current logo symbol. 5mm Do not scale down to smaller than 5mm. Do not overlap or change spaces of the current logo. Do not change the opacity lower than 20%. 10% 15% 19% The logo title *Refer to full logo instructions for more incorrct logo title applications. Do not change the placement of each letters. 7pt Do not use font size smaller than 7pt.

10 THE CORPORATE FONTS 02 Typography plays an important role in communicating and over all tone and quality. Careful use of typography reinforce our personality and ensures clarify and harmony in all design communications. TYPOGRAPHY The Corporate Fonts Primary Font Secondary Font Typography Hierarchy

11 20167General Guidlines / Nytec 11 PRIMARY FONT segoe UI DESIGNER Steve Matteson BOLD Use for Title SEGOE UI LIGHT Small type/ specific info SEGOE UI SEMIBOLD 15pt Use for Subtitles ABCDEFGHIJKLM- NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz REGULAR 11pt Use for Body text ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz FIGUERS Use for numbers SPECIAL CHARACTERS Use for Characters!?@#$%^&*()~ πøˆ œå ß ƒ æ µ çω

12 SECONDARY FONT Proxima Nova DESIGNER Mark Simonson Studio BOLD Use for Title PROXIMA LIGHT Small type/ specific info PROXIMA SEMIBOLD 15pt Use for Subtitles ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz REGULAR 11pt Use for Body text ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz FIGUERS Use for numbers SPECIAL CHARACTERS Use for πøˆ œå ß ƒ æ µ çω

13 20167General Guidlines / Nytec 13 TYPOGRAPHY HIERARCHY Typography hierarchy is another form of visual hierarchy, a sub-hierarchy per se in an oveall design project. Typographic hierarchy presents lettering so that the most important words are displayed with the most impact so users can scan text for key information. Typographic hierarchy crates contrast between elements. There are a variety of ways you can create a sense of hierarchy. CONTEXT TEXT AND INNER HEADLINES Caption Text Usage: information for documents, image, etc. Nytec Innovation Center Proxima Nova Light 7pt type / 60pt Leading Copy Text Usage: Body copy Nytec Innovation Center Proxima Nova Regular 8pt type / 60pt Leading Headlines Usage: Copytext Nytec Innovation Center Proxima Nova Regular 10pt type / 60pt Leading Sub Text Usage: Secondary Nytec Innovation Center Proxima Nova Semibold 16pt type / 80pt Leading Headline Text Usage: Title tex Nytec Innovation Center Proxima Nova Semibold 35pt type / 50pt Leading

14 THE PRIMARY COLOR SYSTEM AND COLOR CODES 03 Color plays an important role in the identity program. The givien colors are recommendation for various media. A palette of proimany colors has been developed, which comprise the One Voice color scheme. Use of these colors will contribute to the cohesive and harmonious look of the Nytec brand identity across all relevant media. check with your designer or printer when using the corporate colors that they will be always be consisitent. COLOR SYSTEM Primary Color System Secondary Color System

15 20167General Guidlines / Nytec 15 THE PRIMARY COLOR SYSTEM Explanation: Nytec has three official colors: Cyan, Cool Gray and Black. These colors have become a recognizable identifier for the company. Usage: Use them as the dominant color palette for all internal and external visual presentations of the company. PRIMARY COLOR CYAN COLOR CODES CMYK : C67 M2 Y0 K0 PANTONE : 298C RGB : R65 G182 B230 HEX : 41B6E6 100% 80% 60% 40% 20% PRIMARY COLOR COOL GRAY COLOR CODES CMYK : C26 M16 Y9 K43 PANTONE : 10U RGB : R129 G131 B135 HEX : % 80% 60% 40% 20%

16 THE SECONDARY COLOR SYSTEM Explanation: The Secondary colors are complementary to our official colors, but are not recognizable identifiers for Nytec company. Secondary colors should be used sparingly, that is, in less than 10 percent of the lallette in one piece. Usage: Use them to accent and support the primary colo palette. 100% Tones SECONDARY COLOR ORANGE COLOR CODES CMYK : C0 M65 Y100 K0 PANTONE : 021C RGB : R254 G80 B0 HEX : FE % Tones SECONDARY COLOR NAVY PEONY COLOR CODES CMYK : C93 M61 Y9 K42 PANTONE : 2140 CP RGB : R47 G78 B116 HEX : 2F4E74 100% Tones SECONDARY COLOR NAVY PEONY COLOR CODES CMYK : C93 M61 Y9 K42 PANTONE : 2140 CP RGB : R47 G78 B116 HEX : 2F4E74

17 20167General Guidlines / Nytec 17 Colors must fit together as pieces in a puzzle or cogs in a wheel. HANS HOFMANN

18 THE CORPORATE STATIONERY Stationery is a primary means of communication and it is essential that every application be a consistent reflection of our corporate identitiy. 04 STATIONERY Business statinery. It includes specifications for typhography, color, printing method, paper stock and word processing. Stationery brand management guidlines do not include invoices, bills of lading, credit letters, business forms, checks, tags or other business processes. The Corporate Letterhead The Corporate Business Cards The Envelope

19 20167General Guidlines / Nytec 19 THE CORPORATE LETTERHEAD Explanation: This shows the approved layouts with the primary elements of Nytec s stationery system for the front- and backside of the letterheads. Usage: The letterhead will be used for all official communication that is going out of Nytec. Parameter demensions SIZE: 297 x 210mm DIN: LETTER FONT SIZE: 9pt Weight 120g/m Uncoated White

20 THE CORPORATE LETTERHEAD Explanation: This shows the approved layouts with the primary elements of Nytec s stationery system for business cards. Usage: The business cards will be used for all official contact and communication of Nytec. Parameter demensions SIZE: 88 x 55 mm Weight 800g/m Uncoated White Print CMYK F B

21 20167General Guidlines / Nytec 21 THE CORPORATE ENVELOPE Explanation: This shows the approved layouts with the primary elements of Nytec s stationery system for envelope. Usage: The Envelope will be used for all official contact and communication of Nytec. Parameter demensions SIZE: 229 x 102 mm Weight 400g/m Uncoated White Print CMYK F B

22 THE GRID SYSTEM 05 Grid is a structure made up of a series of intersecting (vertical, horizontal and angular) or curved guid lines used to structure content. A grid can be used to organize graphic elements in relation to a page, to other graphic elements on the page, or relation to other parts of the same graphic element or shape. GRID SYSTEM The Grid Systems Vertical Grid Systems A4 Horizontal Presentation Grid Social Media: Instagram Grid Webpage Grid IMAGE BOX TEXT BOX

23 20167General Guidlines / Nytec 23 VERTICAL GRID SYSTEMS A4 Explanation: This shows the approved Nytec s vertical A4 size grid system for images, glyphs and paragraphs. Usage: The Vertial Grid System will be used for catalog, magazine and simple prints(flyers) for presentations or advertising description.

24 Trident Nytec Confidential HORIZONTAL PRESENTATION GRID Explanation: This shows the approved Nytec s Horizontal presentation grid for all the presentation layouts that the company is showing. Usage: The Horizontal Presentation grid will be used for monitor display and any kinds of presentation that the company is having. Parameter demensions SIZE: 160p0 x 90p0 FORMAT: HDV 1080 MARGINS: T:3P1, B:7P6 FILE: ID / PP Nytec Project Nytec Project Presentation 24 Trident Nytec Confidential 24 Trident Nytec Confidential 24

25 20167General Guidlines / Nytec 25 SOCIAL MEDIA: INSTAGRAM GRID Explanation: This shows the approved Nytec s Horizontal presentation grid for all the presentation layouts that the company is showing. Usage: The Horizontal Presentation grid will be used for monitor display and any kinds of presentation that the company is having. Parameter demensions ASPECT: 5:7 MARGINS: 12 (use instasize) FORMAT: INSTAGRAM PROGRAM: ADOBE LIGHT ROOM, INSTASIZE,INSTA GRID FILTER: VSCO FILM FE FILE:.JPEG,.PNG,.MOV USE ASPECT OF: 5:7 USE MARGINS OF: 12 ( Use instasize )

26 WEBPAGE GRID Explanation: This shows the approved Nytec s wedsite layout with a typography layout and grid. Usage: The website grid will present the deisgn layout of Nytec s current website. WHEN BACKGROUND IMAGE IS USED Parameter demensions SIZE: 160p0 x 90p0 FORMAT: HDV 1080 MARGINS: T:3P1, B:7P6 FILE: ID / PP

27 20167General Guidlines / Nytec 27 SOLID COLOR BACKGROUND WITH PRODUCT Solid Color Background Title Text Body Text Product Placement USING ADDITIONAL IMAGE Give margins around images Give margins around text

28 THE IMAGE SYSTEM / COLOR 06 Corporate Images are responsible to transfer the values of Nytec to our customers or our potential customers. It is a composite psychological impression that continually changes with the firm s circumstance, media coverage, performacne, pronouncements, etc. Nytec uses various corporate advertising techniques to enhance their public image in order to improve their desirability as a supplier, employer, customer, borrower, partner,etc. IMAGES SYSTEM The Corporate Image The Corporate Image color Corporate Image Soild Background color

29 20167General Guidlines / Nytec 29 THE CORPORATE IMAGE COLOR Adobe LightRoom - Library - Develop - Vsco Film FE - standerd (use any film that fits the image style). EXAMPLES FOR NYTEC IMAGE SYSTEM Requirements: High contrast Sharp image Modern and clean style Products with soild background color Use Vsco Film FE - standerd

30 CORPORATE IMAGE SOILD BACKGROUND COLOR Explanation: This shows the approved soild background color system for Nytec s wedsite layout. Usage: The soild backgound color use for Nytec website will help to emphasize story of our company. EXAMPLES FOR Soild background color system ACCENT COLORS

31 20167General Guidlines / Nytec 31

32 NYTEC PRODUCT INNOVATION CENTER 416 6TH ST S. KIRKLAND WA 98033