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: 

  • e-Learning 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

Sources of help and information for NES staff

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. 

Follow the Turas style guide version 2 (currently in development) for detailed guidance. All sections of the guide are relevant.

Font style - Turas Learn continues to use Source sans pro as default for both headings and body text. Other Turas systems have updated to Hind maduri and Open sans. 

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 style guide version 2 (currently in development). 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 Writing content section of the Turas Style guide.

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 style guide.

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 Style guide writing content under the Content A-Z section

Number two on a green circular shaped icon

Checklist for e-Learning 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 style guide version 2 (currently in development) where appropriate. Useful sections to consult are Accessible 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 e-Learning 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 style guide version 2 (currently in development) 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 e-Learning 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 style guide, the default palette in Articulate Rise, and the e-learning palette. (The e-learning palette will be provided in Turas Style Guide version 2). 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 Style guide). 

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 Style guide – refer to the Writing content section> Content A-Z  

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 e-Learning 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 style guide 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 e-learning 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 style guide 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 Style guide.

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 Style guide 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 style guide 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 sway.office.com/U0y71pcjCGGA0nLD 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 e-Learning 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 e-Learning 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 style guide version 2 (note this is currently in development). 

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 style guide version 2. Useful sections to consult are ‘Accessible 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. 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 at Published documents section on the Digital accessibility page on the NES Intranet 

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 Style guide writing content under the Content A-Z section.