Digital Brand Guidelines: Clarion Housing Group 1.0 …...Clarion Housing Group Digital Brand...

Clarion Housing Group Digital Brand Guidelines

1.0Introduction

Our logo sets us apart Compromised of a cube shape

Version 2.01

Digital Brand Guidelines:Clarion Housing Group

Version 2.0November 2017


1.0Introduction

Version 2.01

Consistency, married with high levels of usability.

This document builds upon the existing Clarion Housing Group brand guidelines with a clear focus on how the brand is presented online and across digital platforms.

In it we explain the best practice for creating a consistent brand with a distinctive and ambitious style which translates fluently from print to screen, aiding legibility and usability.


2.0Contents

If you have any questions on this document please contact:

Digital TeamClarion Housing [email protected]

Version 2.02

Concise and informative.

1.0 Introduction 1

2.0 Contents 2

3.0 Logo 3

4.0 Colour 7

5.0 Patterns 8

6.0 Typography 9

7.0 Imagery 13

8.0 Iconography 14

9.0 Grid 15

10.0 Button Styles 16

11. Form Styles 17


3.0Logo Variants

Our logo sets us apart. It is unique to the Clarion brand, and where possible the ‘full’ stacked version should be used.

When used on screen there will often be times when vertical space is at a premium and the brand will need to be shown at smaller sizes. To remain legible the full stack version may not be suitable.

An adaptation of the mark for digital usage has been created to retain clarity of the associated word mark, where the cube sits to the left of the textual element.

Additionally there will be times when the mark will appear alone. This is reserved for smaller allocations of space and when sized under the minimum recommendation for the text to stay legible.

Version 2.03

Fig.2Horizontal Adapted Logo

Fig.1‘Full’ Stacked Logo

Fig.3Cube - Logo Mark

Fig.4Reverse Colour LogoAll three versions can be used in reverse as per the main guidelines specification


3.1Sizing and clearance

Logo sizingTo maintain legibility at small sizes, each variant has its own recommended minimum size noted by its pixel width below.

When placed into a digital interface the logo should, technology permitting, be an SVG asset, which will allow the shape to scale and work across retina and non retina devices with ease.

Clearance spaceClearance space around the logo should always be equal to twice the height of the ‘Clarion’ word-mark.

In the case of the Clarion Cube, the space given to keep it free of interface elements should be a minimum of 50% of the Clarion Cube itself.

Version 2.04

Fig.2Minimum size = width 124pxAlignment of this variant should be central or left aligned

Fig.1Minimum size = width 70px

70px 124px 30px

Fig.3Minimum size = width 30pxClearance space = 1/2 size Clarion Cube


3.2Logo positioning & abstraction

Logo positioningThe Group logo in all three variants can be positioned centrally, to the left or right hand side of an interface with the exception of Fig. 2.

All marks should be aligned upon a vertical centre within any white space given and where possible their clearance space should also be respected.

AbstractionThe cube shape alone can be abstracted in limited and specialised instances. The cube in its simplified form is mirrored in the clarion patterns and as such, its abstraction through scale can be used to create visually branded elements. An example of this may be an iOS application icon where we utilise the form and colour way to depict the Clarion Group brand.

Version 2.05

Fig. 1Stacked logo show in left / centre and right positioning.

Aligned along the vertical centre.

Fig. 2Alternate logo to the left & centre.

Aligned along the vertical centre.

Fig. 3Example of the cube in three alignment positions.

Aligned along the vertical centre

Fig. 4Example of abstraction of the cube mark.

Positioned and scaled to crop the main shape along its right edge. (Note no text is visible)


3.3Dual branding & partnership

Primary BrandOccasions where dual branding will occur digitally will likely to be rare. Website headers, splash screens or empty app states, should utilise the primary or dominant brand over any sub or partner brands.

Relationship A hierarchy of scale and position should be established to allow the focal brand to remain dominant but for all logos to be legible. As the variation in size and pixel density can change, the proportion of scale should remain flexible, however the dominant brand should always appear larger and to the left or above the sub, sister or partner brand.

Version 2.06

Horizontal AdaptationPrimary brand should sit above or to the left of the sub, sister or partner brand.

The minimum clear space should be applied to the logo as noted on pg.4.

When positioned to the right it is recommended that double clearance is given.

The sub brand should be smaller in scale than the primary brand.

If a Clarion sister brand is used the lead word should sit along the same baseline.

Partner brands follow the same visual treatment and alignment as noted above.

Full Stacked logoPrimary brand should sit to the left of the sub, sister or partner brand.

The minimum clear space should be applied to the logo as noted on pg.4.

It is recommended that triple clearance is given across a horizontal plain.

The sub brand should be smaller in scale than the primary brand.

If a Clarion sister brand is used the lead word should sit along the same baseline whereas a partner brand should lock itself to the bottom of the Clarion Logo.

Partner brands follow the same visual treatment.


4.0W3C Accessible Palette

Colour plays an important role in establishing our brands unique personality. The Clarion Housing Group palette conveys a feeling of strength and ambition and allows for the use of variation, interaction and state-full nature through a range of differing percentage tints.

As a user conscious brand, we ensure that our palette is accessible to a minimum AA standard, compliant with W3C’s recommendations and guidelines.

This means that certain pairings of colours should be avoided when used digitally to aide certain users. These recommendations do not apply to logos, text in logos, or other decorative elements.

Version 2.07

Fig.1 W3C Accessibility ChartThe colours shown above, also work reversed out on colours stated. Designer discretion is advised.

Full PaletteSee full guidelines for all Hex & RGB value.

AAAVery good accessibility. Strong Contrast.AAPasses W3C accessibility. Minimum for small text.AA+Accessible when used on 14px bold or 18px+ text.

WhiteHex: #FFFFFFRGB: 000 / 000 / 000

Dark Navy: AAAHex: #003E51

Dark Navy: AAHex: #003E51

White: AAAHex: #FFFFFF

Dark NavyHex: #003E51RGB: 000 / 062 / 081

AquaHex: #00BFD6RGB: 000 / 191 / 214

LimeHex: #C8D308RGB: 200 / 211 / 008

Dark Navy: AAAHex: #003E51

Accessible Lime: AA+Hex: #939b06

Lime: AAAHex: #C8D308

Grey (40%): AAHex: #BCBCBB

Coal: AAAHex: #050505



Grey: AAAHex: #575756

Grey: AA+Hex: #575756

Grey: AA+Hex: #575756

Grey (80%): AA+Hex: #797978

Dark Navy (80%): AAHex: #2D6072

Dark Navy (40%): AAHex: #99b2b9

Dark Navy (80%): AA+Hex: #2D6072

Dark Navy (80%): AA+Hex: #2D6072

Dark Navy (60%): AAHex: #648693

Aqua: AAHex: #00BFD6

Aqua (40%): AAAHex: #99E5Ef

Aqua (60%): AAHex: #66D9E6

Aqua (80%): AAHex: #33CCDE


5.0Patterns

Distinctive, connective and flexible. The use of patterns, is at home digitally as it is when used within the Clarion brand for print.

The pattern utilises the geometric shape of the logo. It is a subtle way of bringing the Clarion brand and personality into communications that may otherwise seem a little ambiguous.

The patterns should be used to help break up rigid lines or to frame aspects of an interface.

There are two pattern varieties that the Group branding incorporates. A simple linear design and a solid gradient variety which both use the full extent of the colour palette. Both patterns can be built from the left or right.

Version 2.08

Fig.1Linear patternation.

Can be any primary colour or tint.

Unless clipped / masked in a container the form should end upon its structured edge.

Can sit upon a solid block of colour from the palette.

Fig.2

Solid gradated pattern.

Can be used in any primary brand colour.

Constructed from % tints: 100 / 80 / 60 / 40.

Should have ragged edge from pattern shape unless butted against edge of interface.


6.0Typography - Fonts

To maintain a position of clarity when articulating information digitally through text displayed on screen, the typographic implementation needs to be consistent and have legibility at the fore.

Rubik, replaces the use of Din as the primary sans serif typeface for digital use. Chosen for its similarity in form to Din as well as its specialised tinting for screen.

Being tinted for screens means that it will work consistently across devices and has been crafted to have an optimised appearance on digital displays.

The structured letter forms and large counters provide good legibility at both display and body copy sizes and the wide variety of weights allow for it to be used to create hierarchy and structure within the visual flow of a layout or interface.

Version 2.09

N.B: At times, system specific typefaces will better serve the needs of users. For example on iOS and Android it is generally considered best practise to set longer bodies of type in the respective faces to give users a seamless experience between brand and device.

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / &\<-+÷×=>®©$€£¥¢:;,.*₪

Clarion uses Rubik to feel approachable, modern and authoritative.

Light

Light Italic

Regular

Italic

Medium

Medium Italic

Bold

Bold Italic

Black

Black Italic

Fig.1RubikCharacter setWeights & Styles

I am a Display Title


6.1Typography - Usage

UsageWhen set correctly, our typography helps to communicate information simply and accurately.

Using Rubik is simple and can be embedded directly from Google using an API through the Google fonts service. Google fonts is free and without any license or usage restrictions* https://fonts.Google.com/specimen/Rubik?selection.family=Rubik

Hierarchy & typesettingCreating pace, rhythm and hierarchy are key to building engaging interfaces and bringing importance to certain information. We use the size, weight and style of the typeface to create this.

Headings appear larger and in a heavier weight, with smaller text being used alongside generous line heights to increase readability on screen.

*Correct at the time of writing Version 2.010

I am an example of a Heading 1

I am a Display Title



I am an example of a paragraph of body copy

Fig.1Example of the relationships created by altering size and weight around a set 16px EM.Note: Actual values will vary dependent on screen size, build and technology.

Fig.2Initial value setting for structured typographic style sheet.Additional values to be set for responsive breakpoints and additional styles including in line styles, sub heading expansions and state-full properties.

H1Rubik - Medium32px on 36pxNegative Letter Spacing40 px bottom margin

Display - HeavyRubik - Bold48px on 48pxNegative Letter Spacing60 px bottom margin

Display - LightRubik - Medium48px on 48pxNegative Letter Spacing60 px bottom margin

H2Rubik - Regular26px on 28pxNegative Letter Spacing20 px bottom margin

H3Rubik - Medium18px on 22pxNegative Letter Spacing20 px bottom margin

BodyRubik - Light18px on 22px0 Spacing10 px bottom margin


6.2Typography - Application

On Screen UsageThe application of typography across the digital assets in Clarion Housing Group portfolio should be treated individually.

Version 2.011

Fig.1An illustrative interpretation of the typographic style chart on pg.10 within the context of a dash-board landing page*. The image to the right shows how the varying weights and sizes of Rubik can be used to create hierarchy and structure within a interface layout.

H1

H3

H2

DL

H3

P

*For illustrative purposes only


6.3Typography - Serif Display

Serif typefaces are omitted from the digital guidelines as a standardised typographic element, to maintain a modernisation of the brand digitally.

At certain times serif typefaces are permitted to be used as a display or illustrative element only . The curvature and beauty of the serif should be used to enhance a layout and exaggerate a feature or form.

Playfair is used as a Google font alternative to Caslon and is available in 6 weights / styles which should give the flexibility needed for its limited use.

When Playfair is used it should be treated as an image, and its legibility and conventional typesetting properties need not be adhered to.

Version 2.012

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . * g Regular

Italic

Bold

Bold Italic

Black

Black Italic

Fig.1PlayfairCharacter setWeights & Styles


7.0Imagery

Imagery used within the Clarion Housing Group digital portfolio needs to be consistent with imagery used offline and within printed publications but also adaptive & flexible. It is likely that it will need to be able to work at a variety of aspect ratios and sizes.

Imagery should be shot or sourced with a variety of crops in mind to cover 16:9 / square / portrait formats. Crops within different modules will differ dependant on the layout of the page / screen /device.

Images may be handled in a variety of ways dependant on the factors noted above, resulting in a variety of formats and treatments.

13

Potential Image Aspects Ratios16:9 (Top)Square (L)Portrait (R)

Fig.1The dark area in the centre would be deemed the image ‘safe’ zone to work with all aspect ratios.

Version 2.0


8.0Iconography

The use of iconography in the digital world is pivotal, with uses spanning, navigation, signposting, way-finding, labelling as well as providing a variety of visual cues for the user to better serve their needs.

To optimise the clarity of the existing icon set that has been created for use across print, a 'small size' version of the key icon set has been created to sit pixel perfect. These icons can be scaled and retain pixel precision. They should be implemented in digital projects as SVG assets. They come with and without the Hex frame for different use cases.

14

Fig.1Left: Simplified re-drawn pixel perfect digital icons. 24px & 38px squareRight: Original artwork, zoomed with pixel preview on.

Fig.2

Key icons within Hex frames

Scalable SVGS

Assets supplied in #000000 to be amended and changed in CSS into Clarion accessible colours

SVG assets that can be animated

Work at small sizes and retain pixel clarity.

Minimum size to be used is base file @1x.

Version 2.0


9.0Grid

Using a grid helps to provide structure and consistency across devices. It is the underlying framework that a front end project will build upon to create a responsive interface and to maintain a vertical and horizontal rhythm within a website or digital experience.

Not all projects will require the same layout and there isn’t a one size fits all approach however as a rule of thumb it is suggested that a 12 column responsive grid should be used for screens 640px and above with a 6 column grid for mobile devices and screens up to 640px wide.

15

Fig.1Desktop wire frame with a 12 column grid12px outer margins with 24px column gutters

Fig.2Mobile wire frame with a 6 column responsive grid12px outer margins with 24px column gutters

Version 2.0


10.0Button Styles

Interface controls like buttons need to feel intuitive and respond to user gestures and interactions through state-full aspects of their appearance or behaviour.

Controls should be contextually and dynamically sized based on their screen, purpose and importance. For example a mobile primary button should be larger than one seen on desktop to allow for a greater tap target.

An inactive button will not have hover and pressed states as its appearance should denote inactivity.

16

Fig.1Across: Button states across primary - passive Descending: Active, hover and pressed interaction states

Primary Button#00BFD6 with #003E51 textFill lightens upon hoverFlat shadow removed upon click / tap

Secondary Button##003E51 with #FFFFFFFill lightens upon hoverFlat shadow removed upon click / tap

Passive Button#FFFFFF with #9A9A9A Stroke and #003E51 textStroke darkens upon hoverFlat shadow removed upon click / tap

Inactive#BCBCBB with #797978Non interactive

Active

Hover

Pressed

Submit

Submit

Submit

Submit

Submit

Submit

Submit

N/A

N/A

Next

Next

Next

Version 2.0


11.0Form Styles

Forms are an important part of digital interfaces, especially when data is being obtained, modified, or during applications.

Forms within the Clarion digital ecosystem are legible, clear, and easy to use on both desktop and mobile, applications and more. Large hit areas, current position indicators, pre filled hints and large clear text make it easy to fill the form fields swiftly as well as easily navigating your way back through the form to make amendments.

17

Fig.1Form field styling

Large hit / click / entry areas

Dynamic & contextual positioning

Field hints

Large text for clear data entry

Use of semiotic colour references to clearly define where errors have been entered, as well as contextual error messaging.

Version 2.0

David

First Name

Invalid Character

@email.com

Email Address

|

Surname

Error: Message

Responsive FormsThe form width, should adapt based on the desired width and layout of an interface.

Users should only have to fill in the minimum number of fields when registering / applying to reduce friction points.

Where possible forms should be auto completed to make completion quicker.


1.0Introduction

Our logo sets us apart Compromised of a cube shape

Version 2.018

Clarion Housing GroupLevel 66 More London Place Tooley Street London SE1 2DA

clarionhg.com

Version 2.0November 2017

Digital Brand Guidelines

Clarion Housing Group Limited is a charitable registered society (Reg No 28038R). Registered with the Homes and Communities Agency (Reg No LH4087) VAT No 675 646 394. Registered office: Level 6, 6 More London Place, Tooley Street, London, SE1 2DA

Digital Brand Guidelines: Clarion Housing Group 1.0 …...Clarion Housing Group Digital Brand...

Documents

Transcript of Digital Brand Guidelines: Clarion Housing Group 1.0 …...Clarion Housing Group Digital Brand...