Styling, design and branding

Add to favourites
Statement
a stylised computer monitor icon displays a square and a circle overlapping each other

Styling, Design and Branding

Digital learning resources should adhere to corporate identity and brand standards to ensure a clear and consistent style throughout. 

About this guideline

The following principles must be applied to ensure that the digital learning resource meets corporate identity and brand standards. 

The design process must include an awareness and understanding of corporate identity and branding guidance, for all elements of the digital learning resource. 

The style adopted must be consistent throughout the resource, adapted where required for different presentations and interfaces (mobile phone, tablet, desktop PC, etc.) 

Where logos, images and/or photographs are used, these must adhere to copyright guidance and relevant permissions as appropriate (refer to separate Copyright Guideline for further details) 

Images/animations/videos/ photographs included in the digital learning resource must be used in a way which reflects an inclusive approach and reflects the diversity of the health and care workforce and the wider community.

Who is this guideline for?

This Guideline will be of interest to anyone who is: 

  • creating or updating a digital learning resource 

What types of resources does this guideline apply to?

This Guideline is relevant to most types of digital learning resource including the following: 

eLearning modules  

Video  

Turas Learn  

Live or recorded online sessions. This Guideline will particularly apply to any graphics or presentations  

Virtual reality. This Guideline may apply 

Presentation software  

Websites 

Documents published online

Further enquiries and useful information

Turas design system

Web aim contrast checker tool 

Contact the Technology enhanced learning (TEL) team, eLearning team and the Learn Content team through the Digital Learning Help desk

Sources of help and information for NES staff

NES Intranet Brand and corporate identity pages  includes link to brand guidance document, PowerPoint and templates, NES video backgrounds 

Articulate Rise house style module (Guidance on the House Style for Rise modules at NES is in development). 

NES Branding guidance (2017)  

NES Sway template  Note you may need to sign in with your NHSScotland O365 login or paste https://sway.cloud.microsoft/U0y71pcjCGGA0nLD?ref=Link into your browser and sign in to access the template

The TEL support team  

Video and recording page on NES  Intranet – contacts for WeVideo access and more information 

TEL eLearning and education page on NES Intranet includes Sway information 

Digital Learning Help service desk. NES staff can contact the TEL team, e-Learning team, Learn Content team, Design team, and video help via this helpdesk 

Checklists
Number one on a green circular shaped icon

Checklist for Turas Learn pages

Basic Turas Learn styling and design requirements are provided below for quick reference. 

Access the Turas design system for detailed guidance. All sections of the guide are relevant.

Font style - Turas Learn uses Hind maduri for headings and Open sans for body text. 

Font size - No action required because Turas Learn provides default sizes for body text (16pt) and headings.  

Colour - Use the colour palettes provided in the Turas design system. Refer to the appropriate section: User interface palette, Application graphics style, Illustration style, and Secondary palette.

Use sentence case. Exceptions to this are explained in the sentence case section of the Turas design system.

Avoid all caps text, with exception of acronyms.

Make use of headings to chunk content, to indicate hierarchy and allow the user to scan quickly.

Avoid very long headings.

Icons - Recommended icons are available in the Turas design system.

Use left alignment for text where possible. Any centred text should not go over more than two lines.

Follow the grammar and use of language rules provided in Turas design system writing content section under the content A-Z section

Number two on a green circular shaped icon

Checklist for eLearning modules 

If using Articulate Rise, refer to the NES Rise House Style module (Guidance on the House Style for Rise modules at NES is in development). 

Adhere to the Turas design system where appropriate. Useful sections to consult are Inclusive design, Design, and Writing content. Be aware that some Turas Learn style guide recommendations apply only to the Turas system and will not apply to other types of digital learning resource e.g., use of icons for weblinks, contact the eLearning team if in doubt. 

Basic e-Learning styling and design requirements are provided below for quick reference: 

Font style (See also Technical Requirements Guideline) – Use a sans serif font. Your first preference should be to follow Turas design system recommendation for headings (Hind maduri- semi bold) and body text (Open sans - regular). However, both headings and body text in Open sans, or both headings and body text in Source sans pro are acceptable in an eLearning module if you are unable to comply with the first preference. 

Font size - Ensure all text is large enough to be easily read. Recommendations include: 

Articulate Rise - Open sans body 18pt or 20pt 

Articulate Rise - Source sans pro 20pt 

Articulate Storyline – depends on size of player, contact e-learning team for advice 

Evolve – Open sans 18pt or 20pt and spacing increased to 1.5  

Contrast – Text should contrast sufficiently with the background to meet web content accessibility guidelines (WCAG) AA. Use a contrast checker tool or use a colour from recommended palettes. 

Colour palettes – To be assured that you are meeting contrast requirements for text you can use the interface palette in the Turas design system or the default palette in Articulate Rise and the eLearning palette. (The elearning palette is in development). Any custom colours you use should be checked with a contrast checker tool. Be aware that web links in Articulate Rise use the theme colour you have selected, and this colour must therefore pass the WCAG AA for normal text. 

All important and instructional images should provide adequate contrast and have alt text descriptions. 

Use sentence case (some exceptions to this are explained in the writing content section of the Turas design system). 

Avoid all caps text (with exception of acronyms). 

Do not use italics. 

Avoid using underlined text as it can be confused with hyperlinks. 

Headings should be provided for all sections of text, videos, diagrams, graphs, and activities. 

Avoid very long headings. 

Text should be left aligned where possible (any centred text should not go over more than two lines, note that some guidance recommends that only one line of centred text is permissible). 

Follow the grammar and use of language rules provided in the Turas design system. Refer to the writing content section and Content A-Z  section

Bullet points can be useful but do not reduce everything to a bullet list, the content should be readable and flow. 

Provide the source of all images either under the image or in acknowledgements at end of module. 

Photo images and illustrations must represent a diverse and inclusive workforce and community. 

Decorative images can sometimes be useful (for instance when they to help to reinforce an idea or identify a new topic) but avoid unnecessary or distracting images. 

Avoid placing body text and labels text over images. 

Course images (the hero image) in Articulate Rise should be compatible with responsive design (photo images often lend themselves best to the cropping that occurs with responsive design, avoid logos in the course image as these do not work well with responsive design). 

The NES logo should usually be included in a module along with any partner logos. Due to the small size of the default logo space in an Articulate Rise module you may wish place multiple logos at the end of the module, or on the first lesson. 

The following features are required in a Rise module (see NES Rise house style module or contact eLearning team for more info): 

accessibility statement 

exit course button 

exit instructions at very end of module. 

The side menu should be set to ‘initially displayed closed’ in Articulate Rise. 

Be consistent with the layout of your module and consider using a simple graphics grid (images and text line up vertically and/or horizontally and this layout or pattern repeats throughout the module). 

Be consistent with bullet lists. Recommendations differ and the Turas design system and NES Rise house style can be consulted for differing approaches. 

Introductory text should be used for the start of new lessons, and provide introductions for videos, diagrams, graphs, and activities. 

Provide user instructions for all interactions and activities and include icons representing the controls where appropriate. 

Be consistent with referencing, however there is no recommended format at NES, you are free to choose Harvard or Vancouver referencing. 

If using Articulate Storyline, check suitability of your template and player with eLearning team before starting build.

Number three on a green circular shaped icon

Checklist for video 

NES title, credit and caption templates are available from the WeVideo editing interface. 

Any text in the video should be large enough to read and remain on screen long enough for it to be read. 

Any text on screen should usually be in a sans serif font 

Any text on screen should use sentence case if possible  

If using both text on screen and narration make sure they match or are similar. 

Any text on screen should contrast sufficiently against the background. Busy backgrounds may require a solid or transparent text box behind any overlayed text. 

Consult Video and recording page on NES Intranet 

Consult Film and animation section page 28 in NES Branding guidance document (2017) 

Number four on a green circular shaped icon

Checklist for live or recorded sessions

This Guideline will particularly apply to any graphics or presentations that form part of the live or recorded session. Refer to the PowerPoint guidelines below and use the guidance that is applicable. 

Number five on a green circular shaped icon

Checklist for presentations - PowerPoint

Use a NES PowerPoint template if appropriate, available from page 38 NES Branding Guidance document (2017)   

Check presentation guidance , page 26 NES Branding Guidance document (2017)   

Ensure your layout and design is consistent. If building from scratch or adapting a template then consider using a simple graphics grid (i.e., text is aligned vertically and or horizontally and similar layouts used across all slides). 

Font size - Ensure the text is large enough to be easily read. 

Font style – Use a sans serif font. You may wish to follow Turas design system recommendation for headings (Hind maduri - semi bold) and body text (Open sans- regular). However, all Open sans, all Source sans pro and all Arial are also acceptable. 

Contrast – Text should contrast sufficiently with the background to meet web content accessibility guidelines (WCAG) AA. Use a contrast checker tool and appropriate colour palettes if in doubt. 

Any custom colours you use should be checked with a contrast checker tool.  

All important and instructional images should provide adequate contrast 

Colour alone should not be used to indicate meaning in graphs and diagrams. 

Use sentence case. Exceptions to this are explained in the writing content section of the Turas design system.

Avoid all caps text (with exception of acronyms). 

Do not use italics. 

Take care with underlined text as it can be confused with hyperlinks. 

Headings should usually be provided for all slides diagrams and graphs 

Avoid very long headings. 

Text should be left aligned where possible (any centred text should not go over more than two lines, note that some guidance recommends only one line of centred text is permitted). 

Follow the grammar and use of language rules provided in Turas design system writing content under the content A-Z section.

For the avoidance of doubt, provide the source of all images either under the image or in acknowledgements at end of module. 

Photo images and illustrations must represent a diverse and inclusive workforce and community. 

Avoid unnecessary or distracting images. Use decorative images sparingly. 

Avoid text over images. 

Be consistent with bullet lists. Turas design system provides one approach, but recommendations differ. 

Be consistent with referencing, however there is no recommended format at NES, so you are free to choose Harvard or Vancouver referencing. 

Number six on a green circular shaped icon

Checklist for presentations - Sway

Use the NES Sway template. Note you may need to sign in with your NHSScotland O365 login or paste https://sway.cloud.microsoft/U0y71pcjCGGA0nLD?ref=Link into your browser and sign in to access the template

Practise restraint when making use of movement and animation effects. 

Refer to the PowerPoint guidelines above and use the guidance that is applicable. 

Consult Sway section of TEL eLearning and education page on NES Intranet – includes Using Sway in NES and Sway accessibility information. 

Number seven on a green circular shaped icon

Checklist for virtual reality 

Virtual reality is a new tool at NES and has not been tested widely. You are advised to read the checklists for eLearning modules and video and use the guidance that is applicable. 

Number eight on a green circular shaped icon

Checklist for websites 

Use the relevant, detailed guidance available in the Turas design system

You may wish to consult the checklist for Turas Learn pages above for basic styling and design requirements. 

Number nine on a green circular shaped icon

Checklist for documents published online

Follow relevant advice in the Turas design system. Useful sections to consult are ‘Accessible design’, ‘Design’, and ‘Writing content’. Be aware that some style recommendations apply only to the Turas system and will not apply to other types of digital learning resource. Contact the TEL team if in doubt. 

Follow relevant advice in the NES branding guidance document (2017) 

Documents should be designed to be accessible. Follow advice available in the accessibility checklists section of the NES TEL Intranet pages 

Basic documents published online design and styling guidelines below for quick reference 

Use a sans serif font, 12pt minimum 

Use the Word heading styles 

Avoid all caps text (with exception of acronyms). 

Do not use italics. 

Take care with underlined text as it can be confused with hyperlinks. 

Text should be left aligned where possible (any centred text should not exceed two lines, note that some guidance recommends that only one line of centred text is permitted). 

Ensure good contrast between text and background 

Follow the grammar and use of language rules provided in Turas design system writing content under the content A-Z section.