Version 04 June 2015 NOC & CBO Style Guide

Transcription

1 Version 04 June 2015 NOC & CBO Style Guide Neotropical Ornithological Congress & Congresso Brasileiro de Ornitologia, Manaus 2015

2 TABLE OF CONTENTS 2 Objective 3 Graphics Logo variations Lockups Identity components 7 Positioning Arrangement Spacing 9 Colors 11 Typography 12 Web Background 14 Contact 1 Table of Contents Table of Contents

3 OBJECTIVE DESIGN This document serves as a resource to give clarity to the design of the NOC CBO logo and accompanying identity design. Specifications will be defined and explained in order to execute a well-developed identity. These specifications are to be followed in all applications of the logo, including non-noc-cbo designs. DESENHO Este documento serve como um recurso para dar clareza ao projeto do logotipo NOC CBO e acompanhando design de identidade. Especificações será definido e explicado, a fim de executar uma identidade bem desenvolvido. É necessario seguir estas especificações em todas as aplicações do logo, incluindo os desenhos não-noc-cbo. PURPOSE The objective of the Manaus 2015 Joint Congress of the Neotropical Ornithological Society and the Sociedade Brasileira de Ornitologia is to present new information, foster the exchange of ideas between participants, encourage professional networking, and be memorable and fun. The purpose of the identity design is to represent this event consistently accross all platforms. In this way, the message of the organizers and sponsors will be communicated clearly and successfully. PROPÓSITO O objetivo do Manaus 2015 Congresso Combinado da Neotropical Ornithological Society e a Sociedade Brasileira de Ornitologia é apresentar novas informações, promover o intercâmbio de ideias entre os participantes, incentivar networking profissional, e ser memorável e divertido. O objectivo do desenho de identidade é para representar este evento consistentemente atravessando todas as plataformas. Desta forma, a mensagem dos organizadores e patrocinadores será comunicada claramente e com sucesso. 2 Objective Table of Contents

4 GRAPHICS LOGO VARIATIONS The central component of the identity design is the NOC CBO logo, which has four forms: 1 basic icon: includes location, year, title, acronyms no less than 148px or 2cm no less than 72px or 1cm Usage: website header name tags participant posters banners/signage correspondance (if other text is included elsewhere in the document) within a series of logos other (use descretion, stay within sizing guidelines) 2 simple text: includes names of congresses no less than 114px or 2cm Usage: website event schedule/program letterhead/correspondence business cards gifts and sale items: t-shirts, bags, notebooks, etc. other (use descretion) no less than 200px or 3.5cm 3 Graphics Table of Contents

5 LOGO VARIATIONS (cont d) 3 full text: includes theme, editions, dates no less than 133px or 2.25cm Usage: banners/signage gifts and sale items: t-shirts, bags, notebooks, etc. other (use descretion) NOT for use on the website as this text is already on the header of every page no less than 200px or 3.5cm 4 promotional text: includes web address no less than 133px or 2.25cm Usage: promotional materials advertisements NOT for use on any materials that will be kept after the congress is over no less than 200px or 3.5cm 4 Graphics Table of Contents

6 LOGO LOCKUPS Aside from the four variations described above, these additional lockups may be used in special situations: Separated over photographs or color gradients. See more in photographs & tags Julho 2015 Manaus AM, Brasil Narrow width for vertical spaces. content here Text top left, icon bottom right, for use in letterhead, presentations, etc. 5 Graphics Table of Contents

7 IDENTITY COMPONENTS The full logo may not always be necessary to identify the congress. Color gradients, the bird icon, and the text, set in the Lato font, can represent the identity in situations where the congress has already been identified. Here the feather shape, gradients, and bird icon are used to communicate the identity. The foot of the front bird is flat, so it should always be touching a flat surface when used apart from the logo. 6 Graphics Table of Contents

8 POSITIONING ARRANGEMENT The basic logo can be top, left, or right aligned, or covering the entire width of the background. See more in photographs & tags. It should not be base aligned. That would compromise the legibility of the text. No! 7 Positioning Table of Contents

9 ARRANGEMENT (cont d) Logo versions 2/3/4 may only be top aligned. Do not right or left align. That would compromise the legibility of the text. No! SPACING All versions (1/2/3/4) can be centered or free-floating. They should have sufficient spacing to separate the logo from other components within a design. at least 40% of height at least 20% of width 8 Positioning Table of Contents

10 COLORS SWATCHES The logo and accompanying designs will follow a specific color palette. This will result in a clean, cohesive identity. The central color is Teal, and additional colors are Tourquoise and Tealquoise. # RGB: 0, 102, 102 CMYK: 90, 42, 55, 22 #66cccc RGB: 102, 204, 204 CMYK: 55, 0, 24, 0 # RGB: 51, 153, 153 CMYK: 76, 21, 42, 2 Teal Turquoise Tealquoise GRADIENTS The logo may be rendered in a Teal to Turquoise gradient. For logo variations 2-4, the text and horizontal bars at the base of the logo shall be rendered in solid Turquoise. Teal Turquoise text and horizontal bars are solid turquoise only basic section contains gradient 9 colors Table of Contents

11 COLORS (cont d) WHITE The logo and independent components may appear rendered in white on top of color. PHOTOGRAPHS & TAGS Only highly trained, professional designers are permitted to use the logo over photographs. If you do not fit that description, contact the design team with your requested layout. The basic logo (version 1) and independent components may appear rendered in white, on top of extremely detailed or extremely blurred photos of plummage and other photographs of birds. When tagging a photograph, by attaching the basic logo to the top, left, or right edge of the image, the two leftmost, topmost, or rightmost anchor points (respectively) may be extended outward to account for bleed and avoid cropping the logo when printed. 10 colors Table of Contents

12 TYPOGRAPHY FONTS The typeface family used throughout the identity is Lato which is available for free on latofonts.com. The code for implementing the webkit is below, and also available on google.com/fonts/specimen/lato. Lato Thin 100 Lato Thin 100 Italic Lato Light 300 Lato Light 300 Italic Lato Normal 400 Lato Normal 400 Italic Lato Bold 700 Lato Bold 700 Italic Lato Ultra-Bold 900 Lato Ultra-Bold 900 Italic = Lato Regular = Lato Italic = Lato Black = Lato Black Italic Print family equivalent names <link href= set=latin,latin-ext rel= stylesheet type= text/css > 11 typography Table of Contents

13 WEB BACKGROUND RESPONSIVE GRID The NOC CBO website ( uses an adaptive grid that adjusts depending on the screen size of the device where the website is viewed, ranging from smart phones to desktops. The breakpoints shown here refer to current standards. As new technology is introduced, these may be adjusted based on updated sizing. 768 x 1024* *Although width varies among larger sizes, content remains the same. Only the background changes x 768* 1366 x 768* content 320 x 480 content content 480 x 320 content content Vertical and horizontal small mobile devices use an reduced interface over a single-layer gradient background. Vertical mid-sized mobile devices use a full interface over a singlelayer gradient background. Horizontal mid-sized mobile devices use a full interface over a double-layer gradient background. The bottom layer is 90% opacity and the top layer 100%. Desktops with large displays use a full interface over a double-layer gradient background, plus the double-bird identity component. The bottom layer is 90% opacity and the top layer 100%. The double-bird is placed as a midlayer inbetween the other two. It is black, 10% opacity. 12 Layout Table of Contents

14 BACKGROUND The background has three variations that respond to grid adjustments (see above). The top layer of the larger backgrounds has a 30% drop shadow with a 7% spread/blur, and 0 x/y offset. A separate, single-layer background for smaller devices should be created to speed up load times. The code for the color gradient is: html: <body><div class= mainbody >insert page content here</div><body> css:.mainbody { /*fill screen*/ position:absolute; top: 0px; bottom: 0px; width: 100%; /*specify color: default for older browsers, then gradients for newer browsers*/ background: #339999; background: -moz-linear-gradient(top, # %, #66cccc 100%); background:-webkit-linear-gradient(top, # %, #66cccc 100%); background: -o-linear-gradient(top, # %,#66cccc 100%); background: -ms-linear-gradient(top, # %,#66cccc 100%); background: linear-gradient(top, # %, #66cccc 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr= #006666, endcolorstr= #66cccc,GradientType=0 ); } Do not directly target the <body> element with the gradient style. It is necessary to assign a class to a <div> element within the body for the gradient to render correctly. If you feel that this is incorrect, please contact the design team to request an update to this code. 13 Layout Table of Contents

15 CONTACT DESIGN Isadora Williams / Isadora Creative Services isadora@isadoracreative.services DEVELOPMENT Fabio Vasconcelos / NewMD fabio@newmd.com.br SOCIAL MEDIA Mateus Ferreira mateusf.bio@gmail.com Mariana Tolentino marianatolentino@gmail.com ORGANIZATION Magalli Henriques noc.cbo2015@gmail.com PRODUCTION Inês Daou / Iaí Promoções ines@daou.com.br 14 Contact Table of Contents