Fairtrade DE IDENTIDAD DIGITAL FAIRTR… · This example shows the correct balance of colour and tone. Use the bright colour palette for highlighting text or elements. Use the muted

©2014 Fairtrade International 2014

Fairtrade

2

These interactive guidelines have been created to provide global direction in a vital part of our everyday communications.

We have taken the opportunity to recognise the increasing adoption of The Power of You campaign style in our other communications. We need to ensure that a recognisable global ‘look and feel’ is kept; a powerful part of brand recognition and engaging hearts and minds.

The Power of You typeface, Veneer, is liked for its modern appeal and the bold use of the global colour palette provides a revitalised, eye-catching style.

These guidelines complement our investment in the Fairtrade Brand Guidelines and should be used alongside the originals. The updated look strives to be inspiring and fresh.

Introductioncolour palettebrand MarkTypographyIcons Page layoutsImagesMOving imageBrinGing it to life

Fairtrade Digital Design Guidelines

Tell me the basicsThe Fairtrade digital colour palette consists of two groups of colours. Use the brighter colours (above) sparingly on digital applications, for colour pops, highlights, text blocks, bars and metrics.

Use the muted group (below) to create structure across general backgrounds, and for body text.

This example shows the correct balance of colour and tone. Use the bright colour palette for highlighting text or elements. Use the muted palette below to create visual structure and background tones.

Apple RedR224 G0 B52#E00034

Sky BlueR0 G185 B228#00B9E4

Leaf GreenR190 G214 B0#BED600

Citrus OrangeR255 G160 B47#FFA02F

Plum PurpleR128 G55 B155#80379B

Banana YellowR254 G203 B0#FECB00

Guava PinkR224 G17 B157#E0119D

True BlackR30 G30 B30#1E1E1E

Light GreyR246 G246 B246

Mid GreyR222 G222 B222

WhiteR255 G255 B255#FFFFFF

Introductioncolour palettebrand MarkTypographyIcons Page layoutsImagesMoving imageBrinGing it to life

3

Achieving the right balanceFairtrade Digital Design Guidelines

Tell me the basicsHeadings can be shown either in black or in colour. If using colour, ensure this is done in a subtle and complementary way, avoiding the use of too many colours together.


4

Achieving the right balanceFairtrade Digital Design Guidelines

The Fairtrade Foundation

The Divine Chocolate story


5

Tell me the basicsThis chart is a guide to making sure the colour combinations of text against background on your digital piece are WAI-AA compliant, based on the Web Content Accessibility Guidelines (WCAG) developed by The Web Accessibility Initiative (WAI).

Use those denoted wherever possible.

Accessibility and legibilityFairtrade Digital Design Guidelines

L

L

S

S

L

L

S

S

L

L

S

S

L

L

S

S

L

L

S

S

L

L

S

S

L

L

S

S

L = Large text (more than 18pt Regular / 14pt Bold)S = Small text (less than 18pt Regular / 14pt Bold)

Not compliantAA compliant


6

Tell me the basicsThere are positive and negative versions of the Fairtrade Brand Mark, available in both vertical and horizontal formats.

Make sure the Mark is clearly visible against its background, and that the minimum sizes and exclusion zones shown here are observed. For full details on correct usage, please refer to pages 24-52 of the Fairtrade Global Brand Guidelines.

The International Brand Mark Minimum size / exclusion zonesFairtrade Digital Design Guidelines

X

60px

95px

X

1/3 X

1/3 X

1/3 X

1/3 X

1/3 X


7

Tell me the basicsA full suite of National Fairtrade Organisation Marks are available for use in both English and native language. For full details please refer to pages 24-52 of the Global Brand Guidelines.

For details on using the International Mark versus the FAIRTRADE mark, see page 29 of the Fairtrade Global Brand Guidelines.

National Marks

National Marks in native language (examples)


© 2009 Fairtrade Labelling Organizations International e.V. Copyright www.fairtrade.net/about_this_website.html#c5019

38 Prepared by Generation AllianceIssue 1 – 2010

Brand MarkPrimary National Marks

This Mark is used by individual countries to communicate with their local markets. It allows for differentiation between different countries while maintaining a powerful connection to our global Fairtrade community.

This vertical lock-up of the Symbol and the Word Mark is the preferred version of this mark.

The name of the country is presented in English or in the native language. A logo suite is available for each country.

The same colour, size and clear space rules apply here as per the Primary International Mark guidelines, found on pages 42-51.

National Marks in English (example)

National Marks in native language (example)

SWEDEN

© 2009 Fairtrade Labelling Organizations International e.V. Copyright www.fairtrade.net/about_this_website.html#c5019

36 Prepared by Generation AllianceIssue 1 – 2010

Brand MarkPrimary International Mark

The introduction of the International Mark fulfils a simple purpose – strength through unity. By uniting under the one banner we present a consistent, professional and proud face. This unity reflects the true global stretch of our work.

This Primary International Mark is used in head office communications and when we are talking as a united global entity. In corporate applications, the Symbol is always locked up with the Word Mark.

The Primary International Mark as illustrated on this page with the vertical lock-up of the Symbol and the Word Mark is the preferred version and should be used wherever possible.

Symbol

Word Mark

ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

0123456789

Helvetica Neue is our secondary font. Use Regular weight for body copy, and use Bold for section headings, emphasis – or where it is impossible to use Veneer for headlines. Due to the distressed effect on Veneer, when smaller sizes are needed and legibility is compromised, use Helvetica Neue Condensed as a substitute.


Veneer is our primary digital typeface. It should be used for headlines and navigation on digital applications. Note: Any alternate cuts of Veneer, notably Veneer Two / Three) should NOT be used for digital applications.

8

Tell me the basicsThe typefaces shown here should be used where possible. Preloading of fonts allows websafe versions of our brand typefaces to be used online; however, on some in-house digital applications Veneer and Helvetica Neue may not be available, in which case Arial must be used.

Our brand typefacesFairtrade Digital Design Guidelines

1 Secondary Navigation Helvetica Neue Condensed Bold #a5a5a5 Screen 640px

768px

1000px

1230px

Type N/A N/A 12px 12px

8 Module Title Veneer #1a1a1a Screen 640px

768px

1000px

1230px

Type 50px 35px 35px 35px

9 Blurb copy Helvetica Neue Light #1a1a1a Screen 640px

768px

1000px

1230px


10 Product link Helvetica Neue Condensed Bold #f41da2 Screen 640px

768px

1000px

1230px


11 CTA Helvetica Neue Condensed Bold #1a1a1a Screen 640px

768px

1000px

1230px


12 News title Helvetica Neue Condensed Bold #1a1a1a Screen 640px

768px

1000px

1230px


13 Date Helvetica Neue Light #1a1a1a Screen 640px

768px

1000px

1230px


2 Search text Helvetica Neue Light #a5a5a5 Screen 640px

768px

1000px

1230px


3 Primary Navigation text Helvetica Neue Condensed Bold #1a1a1a Screen 640px

768px

1000px

1230px


5 Link Helvetica Neue Condensed Bold #1a1a1a Screen 640px

768px

1000px

1230px


6 ‘What would you like to see’ Veneer #1a1a1a Screen 640px

768px

1000px

1230px


7 Filters Veneer #1a1a1a Screen 640px

768px

1000px

1230px

Type N/A 14px 14px 18px

4 Title Veneer #ffffff Screen 640px

768px

1000px

1230px



9

Tell me the basicsThe standard typographic formats shown here should be followed wherever possible on your material, to maintain uniformity across all digital work.

Exploring the full range of weights available in the Helvetica Neue family (eg Condensed Bold) enables emulation of Veneer at smaller sizes where Veneer itself would compromise legibility.

Consistent hierarchyFairtrade Digital Design Guidelines

headlines

FF

F

FAIRTRADEgives you the powerto change theworld every day

This example shows A the correct usage for headlines overlaid on image, using the solid coloured bars; and B text-only headline format on a plain background.


Background strips. When creating your own headlines, observe the ‘F’ spacing system. The bars can be any colour from the palette. The text must be black or white, ensuring it is clearly visible against the bars.

A

A

B

B

Free-floating text. Always observe the spacing system shown here. The text should generally be black or white, but can use other colours from the palette where appropriate. It must be clearly legible.


10

Tell me the basicsThere are two headline styles – A

with solid coloured strips behind the text, and

B a text-

only version.

The coloured strips are a simple and effective way to emphasise our visual brand. They can use any colour from the palette. When using these it is crucial to follow the conventions shown here, so that the relationship between text and strips remains constant from piece to piece.

Headline styles


F F

FF


Social media icons Time and weather Twitter feed

Form fields / CTA button

Tab selection

Search / pagination

Map style

Forward / back arrows

Calendar style


11

Tell me the basicsThe examples shown here are not exhaustive, but show a range of visual icon styles that can be used across digital materials. Others may be developed where required to fit with this suite.

All third party icons must follow their own brand guidelines.

ExamplesFairtrade Digital Design Guidelines


12

Homepage features

Tell me the basicsThe Homepage surfaces content from around the site using a curated filter system. The hero image cycles randomly through a number of different messages/images each time the page is reloaded.

Following the look and feel, the information hierarchy established here is a good starting point to ensure your material fits into the Fairtrade brand.

1 Primary navigation appears consistently across the site in the same position

3 Hero image and text. Coloured background can be set to any of the Fairtrade colours

4 Filters

5 Curated modules, highlighting important content

2 Search box


12

3

4

5


13

Tell me the basicsWebsites should be designed to be responsive, automatically adapting to give the optimum presentation on a wide range of different screens – from mobile to desktop.

The breakpoints are shown here as the site adapts to fit mobile, tablet, laptop and large desktop screen.

Mobile Tablet Laptop Large screens

320-767px 768–999px 1000–1319px 1320px+

Responsive designFairtrade Digital Design Guidelines


14

Tell me the basicsExample dimensions for a 1000px–1319px width view, as seen on a large desktop screen.

DimensionsFairtrade Digital Design Guidelines


15

Tell me the basicsA flexible grid has been developed to cater for the three major device groups – desktop, tablet and mobile.

The 12-column grid is shown here in a 1000px–1299px width view.

A flexible grid

1000px

1040px

320px

320px 320px 320px

660px

65px 65px 65px 65px 65px 65px 65px 65px 65px 65px 65px 65px

405px

590px 590px

575px



16

Example page layouts

Homepage Landing page Content page

Tell me the basicsExact layouts will vary across material, however this uniform grid ensures image and text zones follow a consistent rule.

By observing the grids and column formats shown in these guidelines, a strong visual consistency should run throughout all Fairtrade digital applications.



If using strips to hold your text, do not obscure the main focus of the image. Choose an image and copyline that will work together to the best effect.

The text block can appear anywhere on the image. Always keep it level (do not rotate to an angle), and ensure it inhabits a clear area of the image without obscuring the centre of attention.

You can use any colour from the brand palette for the strips, with text overlaid in white or black.


Images can be any height but must always adhere to the 12-column grid as detailed on previous pages. This allows for a wide range of combinations.

17

Tell me the basicsYou can overlay text either directly onto images, or set it against solid background strips. The strips give a bold character, but may not be appropriate for all applications.

Using the background strips can also help emphasise the Fairtrade brand, as well as ensuring the text is always legible against the background.

Full guidelines on photography can be found on pages 66-81 of the Global Brand Guidelines.

Overlaying text on images



When overlaying text directly onto images, always ensure the copy is clearly legible, taking into account the scale the image will be viewed at. The text can be placed anywhere in the image area, but do not obscure the main focus of the image with text. Text used in this way should, where possible, be black or white.



Technical

Formats / QualityFinished movies should be supplied as best quality master files (Apple ProRes 4444 or equivalent) for archive purposes, plus any smaller exports such as mp4 for web upload.

Quality / Aspect ratioFootage should be shot in High Definition, at 1920x1080p resolution. Always shoot in 16:9 widescreen format.

Run timesFilms for web upload should be shorter than 3mins as a general rule. When a longer feature-style piece is commissioned, this will obviously have its own parameters. In either case always ensure the film is concise and sticks to the main points without unnecessary padding. Consider your target audience and ensure they will remain engaged. Make sure your message is being communicated clearly.

DSLR Audio captureSound quality, moreso than image quality, will make or break a film. High-quality audio is essential, using either (1) an external lavalier or boom microphone (with sound from the camera’s built-in mic as a sync-track), or (2) a high-quality shotgun mic connected directly to the camera. It is recommended that both these methods are used concurrently, to provide options for the best audio track to mix, and also to ensure a backup in the case of technical failure.

Camera specs will vary and constantly improve with time, but as a general rule never use the DSLR’s built-in mic for the final audio track. At all times, it is crucial your footage has onboard audio, but only to sync the external audio with in post-production.

Legal

Permissions and consentModel releases must be signed for every character that appears in your film. This must include their full name and job title.

Where property or locations shown in the film can be recognised, it is necessary to obtain a location release. Your organisation should have it’s own releases tailored to local language and legal considerations.

Image copyright All images and footage used in your film must have correct legal permissions in place to cover the broadcast of the final piece. Consider the territories, format, characters, and location to ensure nothing is left to chance. Where necessary credits may be displayed at the end of the film, using the style shown on the following pages.

Music copyrightIn most circumstances, music should not be used in Fairtrade films. Where it occurs, it should be used sparingly and only when strictly necessary. If specially commissioned, correct legal documents must be in place. If purchased from an online library, the correct permissions and usage rights must be taken into account to cover current and future broadcast of the material.

Note: The above are brief pointers, and do not constitute legal advice. If in doubt, seek professional legal advice.

Built-in mic only

Shotgun mic connected to camera

External mic + Shotgun mic for sync / backup

External mic + Built-in mic for sync

18

Tell me the basicsBefore starting your film project, consider what you are trying to communicate and the most effective ways to achieve this. Who are the most compelling interviewees, and what do you need them to say to help your story flow? Consider the best locations to shoot.

Once the concept has been developed, observe the following technical and aesthetic considerations to ensure all Fairtrade films look consistently on-brand.

Before you startFairtrade Digital Design Guidelines

Introductioncolour palettebrand MarkTypographyIcons Page layoutsImagesMoving imageBringing it to life

Clean composition Visual ScalePersonal perspective

Producers Interesting anglesDepth of field / focus

Human impactClear space for captions Product

19

Tell me the basicsWhen shooting your film / briefing your camera operator, consider the points on this page. These are key elements of the Fairtrade film visual style, and can be used together to create a stylish impactful piece, and to ensure brand consistency across all film productions.

ShootingFairtrade Digital Design Guidelines


Opening screen

Background: White

Transition: Fade in/out over constant background

Content: When used, the Fairtrade Brand mark must appear as the opening frame. Alternative: A black background can be used instead of white, using the negative version of the Brand Mark.

Film title

Background: White


Content: The main title appears with the subtitle underneath, separated by a centred keyline. Where no subtitle is needed, centre the main title vertically in the screen and delete the keyline.

Typeface (title): Veneer 164pt in colour from primary colour paletteTypeface (subtitle): Veneer 58pt in black

Alternative: A black background can be used instead, using white text and keyline.

Fairtrade in Belizeworking together for success

20

Tell me the basicsWhere timing considerations allow, top and tail the film with these styles for branding, titles, credits and outro. Always use these standard formats in post-production.

Post-productionFairtrade Digital Design Guidelines


Credits

Background: White


Content: This screen should only be used if necessary. In most cases, the film should appear as a Fairtrade production, without individual credits. However it may occasionally be necessary to credit sources, and this format can be used. If less than five names are to be shown, devote a screen to each. When showing more than five, use a rolling credits format with the same typographic convention.

Typeface (role): Helvetica Neue Regular, scaled appropriately as shown and positioned above the name Typeface (name): Veneer 58pt in black

Alternative: A black background can be used instead, using white text.

Other information

Background: White


Content: Information such as the Fairtrade url, charity number, or any credits if required, can be displayed at the end of the film. This information should be centred on the screen as shown. Only display information that is strictly necessary, and ensure a fresh and minimal layout at all times. If the amount of information dictates, a sequence of multiple screens should be used in preference to overloading one screen.

Typeface (URL): Veneer 58pt in blackTypeface (secondary info): Helvetica Neue Regular, scaled appropriately as shown

Alternative: A black background can be used instead, using white text.

Camera

JOHN SMITH

©2014

fairtrade urlRegistered charity no. 1043886

21




Captions

Background: Film sequence

Transition: Fade in/out over moving image

Content: The interviewee’s name must appear with his/her title underneath. Where possible, ensure this is in the same position for each character throughout the film, observing the safe area as shown. The relationship between name and title should never change.

Typeface (name): Veneer 80pt in whiteTypeface (subtext): Helvetica Neue Medium 40pt in white, 48pt leading

Alternative: Black text can be used if the background is too light to display white text legibly. Changes between white and black captions within a film should be avoided if possible, so assess which would achieve the best balance throughout the film and maintain it throughout.

Subtitles

Background: Film sequence

Content: The subtitling should be horizontally centred in the screen, and appear as white text on 75% transparent black strips. The text should not be hyphenated.

Position: The lower strip should be set against the safe area line for standard screens. The text should always be ranged bottom – ie if only one line of text is used it should still sit on the lower baseline.

Typeface (subtext): Helvetica Neue Medium 40pt in white, 68pt leading

JOSE NOVELOBelize Ministry of Natural Resources and Agriculture

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

22




23

Fairtrade Digital Design Guidelines Examples – Core branding


Tell me the basicsSocial media is an important way of raising and retaining awareness. The Fairtrade visual brand should always be considered a priority when creating or maintaining accounts.

Building a secure future for miners, their families and communities.

Visit fairtrade.org.uk/gold for more information

Ask for our jewellery made with Fairtrade GoldFairtrade Foundation registered jeweller 2014


24

Tell me the basicsSocial media is an important way of raising and retaining awareness. The Fairtrade visual brand should always be considered a priority when creating or maintaining accounts.


Fairtrade Foundation @FairtradeUK

Examples – Core branding

Copyright © Fairtrade International 2013. All rights reserved. 42

The Power of You

Stimulus


The Power of You

Stimulus

25



Example campaign: The Power Of You

© Fairtrade 2010

VisualsLandscape Format(German)

© Fairtrade 2010

VisualsPortrait Format(German)

Tell me the basicsBased on the concept of empowering consumers and producers, The Power Of You campaign has been used effectively across digital and social media to galvanise existing audiences, and mobilise new audiences to connect with Fairtrade.

26



New survey shows aussies shop with a conscience


The Power of You

Stimulus

Example campaign: The Power Of You

RIGHTwrongs WITHA BANANA

Today, you have the power to do something amazing. The power to help farmers build better futures for themselves, and improve working conditions around the world.

Choose Fairtrade, and change the world one purchase a time.

Change the WORLD

Today, you have the power to do something amazing. The power to help farmers build better futures for themselves, and improve working conditions around the world.

Choose Fairtrade, and change the world one purchase a time.

ON YOURTEA BREAK

Tell me the basicsBased on the concept of empowering consumers and producers, The Power Of You campaign has been used effectively across digital and social media to galvanise existing audiences, and mobilise new audiences to connect with Fairtrade.

TrademarkThe FAIRTRADE Marks and the Fairtrade Brand are trademarks licensed by Fairtrade International. The Fairtrade trademarks must not be copied, reproduced or otherwise used without receiving prior written permission from Fairtrade International or its designated sublicensing bodies, the National Fairtrade Organizations.

© Fairtrade International 2014

Artwork approvalFor countries with a National Fairtrade Organization (NFO): find the NFO’s contact details at www.info.fairtrade.net

For countries without a National Fairtrade Organization (NFO): contact Fairtrade International by email [email protected]

Contact details Fairtrade International Fairtrade Labelling Organizations International e.V. Bonner Talweg 177 53129 Bonn Germany

Tel +49 (0) 228 949 23 230 Fax +49 (0) 228 242 1713 www.fairtrade.net

The NFO’s contact details can be found at www.info.fairtrade.net


Documents

Fairtrade DE IDENTIDAD DIGITAL FAIRTR… · This example shows the correct balance of colour and tone. Use the bright colour palette for highlighting text or elements. Use the muted