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.
Creative Crunch makes use of two typefaces and a single primary colour throughout the site.
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.
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.
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 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.
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?
Alternatively, they can also look like this!
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.
The styling for job postings can be seen in action on the Digital Designer live job.
The styling for job events can be seen in action on the Sally Payen post.
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.
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.
The styling for interviews can be seen in action on the Georgi Chalakov post.