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.