ecologyaction.ca style guide

Transcription

1 ecologyaction.ca style guide

2 Style Guide Creating the face of Ecology Action Centre Our logo, colour palette, typography, and photographic style are the 4 key elements to our identity. They re more than just individual pieces. They re the tools we use to create a coherent and approachable face for Ecology Action Centre. The following pages will explain more about the elements and how to use them consistently across all media and communications.

3 Logo Variations Logos for every occasion. Our logo is available in a trio of colour options that will give all of the flexibility needed for every application. COLOUR LOGO Colour For use against light backgrounds in colour applications. Black and White For use against white backgrounds in limited colour applications. BLACK AND WHITE LOGO Reverse For use against darker backgrounds including the majority of our brand colours, in both full colour and limited colour applications. REVERSE LOGO

4 Logo Variations Other Logo options. The stacked version of the logo is also available in three colour options. This version is to be used in areas where the original logo does not fit. COLOUR LOGO Colour For use against light backgrounds in colour applications. Black and White For use against white backgrounds in limited colour applications. Reverse For use against darker backgrounds including the majority of our brand colours, in both full colour and limited colour applications. BLACK AND WHITE LOGO REVERSE LOGO

5 Logo Minimum Size and Clear Space How low can you go? Minimum sizes for the logo have been created for both on and offline. Room to breathe. This is the guideline for the minimum amount of clear space that is necessary around our logo. The space around the logo is equal to the height of a lower case o in the logo px 1 72 px

6 Logo Misuse Logo no nos. We want our logo to be consistent and recognizable wherever it appears. Here are a few things to avoid when you are working with it. DO NOT PLACE LOGO ON NON-BRAND COLOURS DO NOT USE NON-BRAND COLOURS DO NOT OUTLINE LOGO ELEMENTS DO NOT STRETCH OR DISTORT LOGO DO NOT ADD DROP SHADOWS OR OTHER EFFECTS DO NOT CHANGE ARRANGEMENT OR STACKING

7 Typography Primary Typography. Century Gothic This font is a spacious, modern version of a classic mid-century font. The Century Gothic design embodies the digital age with its sleek sans serif style, but still retains the geometric look common to early 20th-century typefaces. This typeface is supported by all major browsers on the web and is therefore considered a safe font to use for web design as it will translate well across multiple platforms. Typography Rules: All type should be Century Gothic, except pull quotes and/or other highlighted information. CENTURY GOTHIC REGULAR AaBbCc0123 CENTURY GOTHIC ITALIC AaBbCc0123 CENTURY GOTHIC BOLD AaBbCc0123 CENTURY GOTHIC BOLD ITALIC AaBbCc0123 All body type should be Century Gothic Regular. Avoid the use of ALL CAPS whenever possible.

8 Typography Secondary Typography. Garamond This member of the Roman type family has survived the centuries because of its remarkable readability. As one of the oldest typefaces, Garamond conveys a sense of solid tradition, yet it is still soft and attractive thanks to its elegantly rounded serifs and its diagonally emphasised strokes. Garamond should be used as a secondary font to the primary font Century Gothic. For example, Garamond could be used in pull quotes to stand out from the rest of the text. Typography Rules: Secondary font should only be used to accent the primary font. Secondary font should not be used as body font. GARAMOND REGULAR AaBbCc0123 GARAMOND ITALIC AaBbCc0123 GARAMOND BOLD AaBbCc0123 GARAMOND BOLD ITALIC AaBbCc0123

9 Typography Display Typography. Local Market This font provides a more organic, playful look, with its handwritten style. The Local Market font family styles include Local Market Display, and Script. The Local Market script font is perfect for pull quotes, while the display/basic Local Market font works best for headers and titles. Typography Rules: LOCAL MARKET DISPLAY AaBbCc0123 LOCAL MARKET SCRIPT AaBbCc0123 Display fonts should only be used as accent fonts to the main body fonts, and should not be used for a large body of content or main body content.

10 Logo Bar GREEN LOGO BAR WITH BLEED Rules for the Logo Bar. To help keep our logo consistent in any situation we have created a logo bar. This bar has a height equal to the height of the logo x 3 and should be placed on the bottom of the page. When using the bar in applications that require a full bleed the bar must appear in one of our two primary colours, Forest Green or Navy Blue. ecologyaction.ca Wilderness A bar has also been created to be used when full colour bleed is not an option. To represent an action area, use the corresponding secondary colour for the area title as well as the website. Please see examples on this page. An Introduction to our Project Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for lorem ipsum will uncover many web sites still in their infancy. What makes the our food project unique? Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections and of de Finibus Bonorum et Malorum (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, Lorem ipsum dolor sit amet.., comes from a line in section I am so thrilled to have the chance to learn how to save old varieties of seeds, like my Grandfather s sweet peas. I worry that we are losing our Elder s Knowledge. - Parrsboro workshop participant ecologyaction.ca Wilderness ecologyaction.ca Food BLUE LOGO BAR WITH BLEED LOGO BAR WITH OUT BLEED ecologyaction.ca Wilderness

11 Photography Primary photography. One of the most important elements in establishing any identity is photography. Photography plays a big part in getting consumers to identify with your organization. It gives them a glimpse into your world and helps them decide whether or not they d like to be a part of it. Informative yet approachable. That is the focus of our primary photography. Our photos will feature a person or people as a single unit. All of the people should be in situation, relating to the section they are placed in. Photos should also be of real Nova Scotians whenever possible.

12 Photography Secondary photography. The secondary photography should focus on the atmosphere of each action area rather than the people representing it. This being said, each photo should complement the division s colour palette with a high contrast and vibrant colours. The secondary photos should not have any distractions and be photos of Nova Scotia whenever applicable. These photos can be used within each action area as secondary photos only.

13 Circles Using circles. Circles add an additional graphic element to our visual identity. The circles relate back to the Ecology Action Centre logo and, when placed in a cluster, create a playful look. Depending on the layout, the circles can either enclose photography, or a solid secondary colour (to add texture to any negative space). Placing photographs in circles also allows us to feature multiple images within one layout while still maintaining a clean, consistent, and professional look. The do s and dont s. An Introduction to Our Project The Our Food Prjoct is a four year intiavtive from made possible by the generous funding of the Public Health Agency of Canada (PHAC). Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. I am so thrilled to have the chance to learn how to save old varieties of seeds, like my Grandfather s sweet peas. I worry that we are losing our Elder s Knowledge. - Parrsboro workshop participant ecologyaction.ca What Makes the Our Food Project Unique? Our work has positive impacts because we support community groups that work on food-related issues to take it to the next level by connectingm convening and catalyzing. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis tortor vitae mauris finibus pulvinar. Nullam luctus dui in ex aliquet, quis iaculis neque blandit. Phasellus sed mi id nibh iaculis vehicula sit amet quis tortor. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Food Do: Overlap circles to create a cluster Make sure all circles have a white outline stroke to keep all circles divided. Remember less is more. It can quickly become very busy if over used. To change up the look, create different clusters on each layout. The Our Food Project Reconnecting Food & Community The Our Food Project Reconnecting Food & Community Don t: Do not get too carried away with many clusters. Make sure the content has room to breathe.

14 Identity Colours Colours. Consistent use of colour is one the easiest and most effective ways to break through visual clutter. It s an opportunity to rise above the noise and show off your personality. Our seven action areas are all brought together by our primary colours of navy blue and forest green. Each action areas has an individual colour to represent them. Ranging from orange to royal blue.

15 Colour Swatches Primary Colours. SPOT COLOUR - FOR PRINTING ON COATED STOCK 295 C 3425 C SPOT COLOUR - FOR PRINTING ON UNCOATED STOCK 295 U 356 U CMYK - FOR FULL COLOUR PRINTING C M Y K C M Y K RGB - FOR USE ON SCREEN R G B R G B HTML WEB COLOUR - FOR USE ONLINE

16 Colour Swatches Secondary Colours. Built Environment Energy Food Wilderness SPOT COLOUR FOR PRINTING ON COATED STOCK 143 C 121 C 382 C 361 C SPOT COLOUR FOR PRINTING ON UNCOATED STOCK 122 U 107 U 381 U 368 U CMYK FOR FULL COLOUR PRINTING C M Y K C M Y K C M Y K C M Y K RGB - FOR USE ON SCREEN R G B R G B R G B R G B HTML WEB COLOUR - FOR USE ONLINE F1B434 FDD757 C4D600 43B02A

17 Colour Swatches Secondary Colours. Transportation Coastal & Water Marine SPOT COLOUR FOR PRINTING ON COATED STOCK 570 C 2995 C 285 C SPOT COLOUR FOR PRINTING ON UNCOATED STOCK 570 U 2995 U 285 U CMYK - FOR FULL COLOUR PRINTING C M Y K C M Y K C M Y K RGB - FOR USE ON SCREEN R G B R G B R G B HTML WEB COLOUR - FOR USE ONLINE 6BCABA 00A9E0 0072CE

18 Charts and Graphs Simplifying information. Simple infographics will make large amounts of information more digestible and easier to understand. 25% 34% All infographs/graphs & charts should use the brand colours. All graphs/charts should always use the primary font Century Gothic. Use medium to light gray to complement the colours used in the graphs or charts. Please see charts below for examples of the use of gray. Stay away from over complicated 3D style graphs whenever possible. 16% 29% EXAMPLE OF VISIUAL CHARTS/GRAPHS 94% 78%

19 Tables Putting it in a table. EXAMPLE OF TABLE Many of our brochures, spec sheets, etc. contain tables of information. It s important that they always look consistent, regardless of their topic. Criteria Model 1 Model 2 Model 3 Use of existing resources Bus 203 Bus 305 Bus 530 Area coverage The title bar should be a solid EAC colour Anticipated transit with alternating background colours of white and the EAC colour set at transparency Age-groups of 50 percent or less. The bottom row of the Costs table should always be coloured so the table is clearly defined. Each column is divided by a thin, white line. The copy in the table should be set to the same colour as the title bar. Criteria Model 1 Model 2 Model 3 An alternative version exists for tables that have subheads. In this case, the table is set Area coverage up the same as the original, but with the Anticipated transit subheads being an alternate EAC colour. Age-groups Costs

20 Iconography Intuitive icons. Simple, progressive and easy-to-understand icons will also support our overall brand. To tie back to our logo, we use circles around the icons. They are always illustrated designs of objects, in our brand colors or in white.