The Primate Project: Style Guide

Style Guide A guide and rules of how to design for The Primate Project across web.

Contents Brand Guidelines

Social Media

Website

Website

1.1 Logo

2.1 Social Media Assets

3.1 The Website

3.7 Blog

1.2 Colour

2.2 Social Media Assets

3.2 Iconography

3.8 Form

3.3 Navigation

3.9 Footer

1.3 Typograhy

3.4 Header 3.5 Photography 3.6 News/Information

Brand Guidelines An introduction to the basic elements of how to design for the brand.

1.1

The Logo Logo Choice

Colour

Border

The logo is an icon of a gorilla to represent the charity is for

The logo should only be used in two colours - black and white.

When the logo is used to its full extent - icon and type - there

primates. It is clear and straight to the point. The type that

When used on a dark or photographic background, it should be

should be no border around the icon. However, when used only

accompanies the icon is written in a slab seif - a friendly and

in white, while on a light background it should be used in black.

as an icon, a border should encase it in the same colour.

approachable style.

It is important the icon can be recognised on its own as this is used throughout the social media.

1.2

#0A180A

#073021

#2C7329

#5AA637

#EFE9E9

#FFFFFF

Colour Neutral Colours

Green

Contrast

White and a light shade of pink have been used for the

Different shades of green play a big role in the branding. Not

The different colour palettes should be used together to create

background, as well as for type on dark or photographic

only do they provide a greater contrast against the neutral

contrast, to allow easy reading for the user.

background.

colours, they represent where the primates live - the jungle. As

These are both neutral, easy to read on, and stand out against

a lot of the photography features their green habitat, it works

the darker greens that are used throughout the brand. It

harmoniously with them.

brightens up the brand where there are a lot of dark greens featured.

1.3

Header

Roboto Slab Bodycopy

Open Sans Typography Roboto Slab

Open Sans

This has been used in bold throughout the branding, and as

This has been used for the bodycopy and navigation of the

a header. This font is specifically a web font, and is therefore

brand. This was also specifically made the font, making it legible

appropriate for the medium and works well on screen. As it is a

and appropriate for the screen. It is readable, clear and comes in

slab serif, it is friendly, approachable and trusting - all of which

different weights which makes it easy to emphasis information

the charity is.

throughout the brand.

Social Media A guide and rules of how to design for the social media aspect of the brand.

2.1

Social Media Assets Dimensions

Logo

Border

The assets should always be created at 1200x1200px. This helps

This should always be used in white as it will appear on

There should always be a border that surrounds the assets. It

consistency across the brand, and is the optimal size to ensure

photographic backgrounds. It should be used as an icon only,

should be 0.6cm around every edge, in the colour #073021 and

it looks good across all screen sizes. However, if the ads are paid

therefore would need a border around it. It should always be

with a 80% opacity.

for promotion, they should coincide with the official rules of

placed in the top right, or bottom right corner - whichever is less

Facebook.

obtrusive of the photography.

It should always be placed 0.8cm away from two edges of the asset.

2.2

Social Media Assets Photography

Content

Platforms

When photography is being used on the assets, they should

The content on the asset should always be a brief summary

The assets should be posted from the two social media

be of high resolution and quality. They should show primates

of what the post is about - full details would accompany the

platforms the charity uses - Facebook and Twitter. Posts should

in their natural habitat, with no text or manmade objects in

image on the Facebook or Twitter post. The header font, Roboto

be shared frequently, with content relevant to seasons and

the background. They should only show the primates that the

Slab, should always be used to display this information in the

events if that can be achieved. For example, on International

user can adopt through The Primate Project. They should show

neutral colour #EFE9E9. The text should be placed on a rectangle

Primate Day, there should be an asset promoting that.

close up, candid shots of the primates. The focal point of the

background in the colour #6EA956 with an opacity of 80%. The

photograph should never overlap with text on the assets.

content should be placed 2.2cm from two edges of the asset.

Website A guide and rules of how to design for the website.

3.1

The Website Significance

Tone of Voice

Aesthetic

The website is a crucial part to the brand, as it is where users

The language used on the website should be informative

The design of the site is contemporary and clean, creating a

can find information, keep up to date with the project, and

and factual, yet easy to digest and appeal to both adults and

trustworthy and reputable view of the charity. There is a large

most importantly, adopt a primate and donate to the project.

children. It should be emotive, conversational and talk directly

focus on photography throughout the site as it is how people

Without the website, users wouldn’t be able to help the project

to the user. By using phrases such as ‘this is where you come

can connect with the primates - it is the closest thing they will get

do the work it does. So it is important that the website provides

in’, ‘make a real difference to their lives’ and ‘read more about

to seeing the animal they are helping.

all of the necessary information, is easy to use and is a good

how you can help here’, it talks directly to the user and how they,

experience for the user.

specifically, can make a difference to the project.

3.2

EN Iconography Aesthetic

Height

The icons used throughout the site should match the overall

The height of the icons should always be the same to create

aesthetic of the brand. This is clean, straight to the point and

consistency across the icons. The height of the section the icons

easy to understand. They should be in the dark green used

are placed in should also be the same height across every page

throughout the branding, #0A180A. They should have the same

they are featured on.

stroke outline size - 13pt.

3.3

Navigation Content

Secondary Navigation

Hover and Active States

The navigation includes a lot of key information for the user. It

When the user clicks on the Primates link, a secondary

When the user hovers on any of the links in the navigation, they

gives the user an insight of the charity - with the logo, tagline and

navigation slides down. This gives the user more options - the

transform to Extra Bold so that the user knows the site has

use of colour. It also gives them options to visit their other online

choice of which primate they wish to explore further. When that

recognised them. The link also stays on Extra Bold when the user

channels - Facebook, Twitter and Instagram. It allows them to

option is chosen, the seconday navigation slides back up.

is active on that page.

search for something they want, as well as direct links to the important sections of the site and quick, stand out buttons for adoption and donation.

3.4

Header Photography

Content

Arrows

When photography is being used on the header, they should

When content is being used on the header, it should match

When the header is an image slider, arrows should be used on

be of high resolution and quality. They should show primates

consistently across each page. The header should be in the

either side of the image. They should be placed directly outside

in their natural habitat, with no text or manmade objects in

font Roboto Slab, and should be used over the photograph.

of the margins. When they are being used as a link for the

the background. They should only show the primates that the

The bodycopy should be in the copy font Open Sans, inside

content, one should be placed next to the rectangle.

user can adopt through The Primate Project. They should show

a rectangle. This should either be the dark green #0A180A

close up, candid shots of the primates. The focal point of the

or the neutral #EFE9E9 depending on the brightness of the

photograph should never overlap with the featured content.

photography used.

3.5

Photography Photography When photography is being used, they should be of high resolution and quality. They should show primates in their natural habitat, with no text or manmade objects in the background. They should only show the primates that the user can adopt through The Primate Project. They should show close up, candid shots of the primates.

3.6

News/Information News/Information When displaying news or sections of information on the website, therewsghould always be a 60/40% ratio of photography to text.

The text should always be left aligned, and the spacing between the heading and copy should always be the same.

3.7

Blog Blog When a blog post is featured, the title, caption and image should be centered. An image should be used to reflect either the content of the blog, or the author. It should also be within an eclipse shape. The copy of the blog should be left aligned. There should be an arrow at the bottom of the section which when clicked, slides down to reveal the rest of the article.

3.8

Forms Fields

Buttons

Pick A Primate

Forms are used for the petitions and payment section of the

These should also be long in length, in the dark green that is

The first step of the adoption form asks the user to ‘pick a

website. The fields should be long so that the user can see all of

used throughout the branding, #0A180A. The text on the button

primate’ that they want to adopt. A close up shot of the primate

the information they input, rather than sections of it.

should clearly state the function, and should be in capital letters

should be contained within a circle, and without a border. When

with Open Sans being used.

the user selects their chosen primate by clicking on a circle, a border appears around the image to show this.

3.9

Footer Layout

Content

When photography is being used on the header, they should

When content is being used on the header, it should match

be of high resolution and quality. They should show primates

consistently across each page. The header should be in the

in their natural habitat, with no text or manmade objects in

font Roboto Slab, and should be used over the photograph.

the background. They should only show the primates that the

The bodycopy should be in the copy font Open Sans, inside

user can adopt through The Primate Project. They should show

a rectangle. This should either be the dark green #0A180A

close up, candid shots of the primates. The focal point of the

or the neutral #EFE9E9 depending on the brightness of the

photograph should never overlap with the featured content.

photography used.