Style Publishing Guidelines

These are the style guidelines outlined by the branding team (Alex, Ollie and Richard) for Creative Crunch to help ensure that the different posts and pages are visually cohesive and share the same styles.

Contents

General Information

Creative Crunch makes use of two typefaces and a single primary colour throughout the site.

Typography

Montserrat and Open Sans Regular

Montserrat Bold is used for headings and Open Sans Regular is used for body text, the use of these typefaces should be consistent throughout Creative Crunch.

If you are creating graphics or using typography within a video, this should be reflected so Creative Crunch has a consistent and cohesive visual identity.

Colour

Creative Crunch uses a turquoise colour to highlight different areas of a webpage or to stylise pieces of content, you can find the HEX colour code below.

#2EC4B6

If the turquoise colour is being used as a background colour above body text, the body text should remain the default colour to ensure that the text is accessible.

Alongside this, white, grey and black can be used.

Images

Images should provide context to the writing. Images should make use of colour and not be distracting when used as a featured image for a post. For posts about people, a portrait of the person is preferred.

It is important to ensure that the images have metadata so they can be correctly indexed by search engines, you can see an example of this below.

Some other good practices are to ensure that the images are high resolution, this ensures that they will not be pixelated on a visitor’s display.

A recommended image size is around 1500-2000 pixels wide, this is good guidance for featured and large images. Smaller images should be around at least 500 pixels on it’s longest side.

Images that will be used as featured images across Creative Crunch should be in landscape orientation so that it is displayed correctly within the designed.

For images such as photographs, JPG format is recommended as it is a low file size, but with graphics or images that use transparency, you may wish to use PNG format.

Page and Media Information

Pages should make use of Gutenberg blocks first and then use Elementor to bring in any desired functionality that is not supported by the Gutenberg block editor.

FAQs

The FAQs page should make use of the Accordion block found within the Gutenberg block editor.

To ensure that Creative Crunch has a consistent visual style throughout the site, the FAQs page should apply the turquoise colour to the accordion by setting the background colour to the turquoise colour HEX code.

Is this is what a question should look like?

Yes it is, using the turquoise colour allows for the brand identity to be clear!

Alternatively, they can also look like this!

The bolder typography allows the text to be more visible with a white colour.

When using regular font-weight, the text colours should be left to their default values as this ensures for accessible typography contrast to be maintained. When bolder typography is used, white text can be used as it is more legible.

Job Postings

The styling for job postings can be seen in action on the Digital Designer live job.

Events

The styling for job events can be seen in action on the Sally Payen post.

Coronavirus

Due to coronavirus, it is likely that events have been postponed or cancelled, a banner should be added to the beginning of a post announcing this, the appropriate criteria should be selected.

This event may be been postponed or cancelled due to the coronavirus (COVID-19), please follow current government and university guidance.

COVID-Banner-Colour

The banner above can be copy and pasted into your post/page.

This banner should be created in a paragraph block.

Yellow background colour should be used and bold black text colour as this will be visually prominent on the page and alert the reader, this follows the same styling as the NHS banner.

The yellow colour is selected as the background colour in the WordPress text editor, whilst the text colour is left unchanged as the default value.

Interviews

The styling for interviews can be seen in action on the Georgi Chalakov post.