{"id":907,"date":"2022-10-04T10:56:26","date_gmt":"2022-10-04T09:56:26","guid":{"rendered":"https:\/\/blogs.york.ac.uk\/communications\/?p=907"},"modified":"2022-10-04T10:56:28","modified_gmt":"2022-10-04T09:56:28","slug":"branding-our-e-learning-tool","status":"publish","type":"post","link":"https:\/\/blogs.york.ac.uk\/communications\/2022\/10\/04\/branding-our-e-learning-tool\/","title":{"rendered":"Branding our e-learning tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To coincide with the launch of our new <a href=\"https:\/\/blogs.york.ac.uk\/marketing\/2022\/09\/06\/expanding-our-cms-training-toolbox\/\">Web CMS training module<\/a>, we created a new branded theme for the e-learning platform <a href=\"https:\/\/xerte.york.ac.uk\/play.php?template_id=116#page1section2\">Xerte<\/a>. We wanted something flexible and functional that would suit any potential e-learning application, while effectively implementing the University&#8217;s new look and feel.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">The process started with our Graphic Designer mocking up some slides, based on content we\u2019d already written for a new training module. The designs make use of the bold new colours and rounded edges that are key to the\u00a0brand, with a subdued grey background to ensure it suits all kinds of different projects and subjects.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-3a88641f wp-block-group-is-layout-flex\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-style-default\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"449\" data-id=\"912\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-1-1.png?resize=798%2C449&#038;ssl=1\" alt=\"\" class=\"wp-image-912\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-1-1.png?w=798&amp;ssl=1 798w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-1-1.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-1-1.png?resize=768%2C432&amp;ssl=1 768w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" data-id=\"911\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-2.png?ssl=1\" alt=\"\" class=\"wp-image-911\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"449\" data-id=\"909\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-3.png?resize=799%2C449&#038;ssl=1\" alt=\"\" class=\"wp-image-909\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-3.png?w=799&amp;ssl=1 799w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-3.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-3.png?resize=768%2C432&amp;ssl=1 768w\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"449\" data-id=\"910\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-4.png?resize=799%2C449&#038;ssl=1\" alt=\"\" class=\"wp-image-910\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-4.png?w=799&amp;ssl=1 799w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-4.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-4.png?resize=768%2C432&amp;ssl=1 768w\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">We passed these mock-ups over to an external developer who talked us through the various considerations for designing Xerte themes. There are many different applications of Xerte, from complex maths problems to fire safety training, and over 80 types of pages available to creators, meaning each one had to be specifically designed and checked.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We worked through these in collaboration with Lilian Joy, the University\u2019s Xerte contact and digital accessibility whiz from the Programme Design and Learning Technology team. She offered valuable insight into the needs of Xerte users at the University, which informed our approach to designing the pages. The developer then translated our designs into a working theme that is fully accessible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot-old-1024x598.png?resize=1024%2C598&#038;ssl=1\" alt=\"\" class=\"wp-image-913\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot-old.png?resize=1024%2C598&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot-old.png?resize=300%2C175&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot-old.png?resize=768%2C448&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot-old.png?resize=1536%2C897&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot-old.png?w=1667&amp;ssl=1 1667w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption>Before<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot-1024x498.png?resize=1024%2C498&#038;ssl=1\" alt=\"\" class=\"wp-image-914\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot.png?resize=1024%2C498&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot.png?resize=300%2C146&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot.png?resize=768%2C373&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot.png?resize=1536%2C746&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-xot.png?w=1914&amp;ssl=1 1914w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption>After<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Colours and typography<\/h2>\n\n\n\n<figure class=\"wp-block-image alignright size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"202\" height=\"333\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/xete-highlight-colours.png?resize=202%2C333&#038;ssl=1\" alt=\"\" class=\"wp-image-915\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xete-highlight-colours.png?w=202&amp;ssl=1 202w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xete-highlight-colours.png?resize=182%2C300&amp;ssl=1 182w\" sizes=\"auto, (max-width: 202px) 100vw, 202px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Our brand makes use of a bespoke font, York Grot, and we\u2019ve used that to offer a striking heading option. We also updated the body text to Graphik, our secondary font that pairs perfectly with York Grot.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Colour-wise, we settled on a deep, vibrant blue as our header colour that would suit a wide range of topics and also complement the widest range of secondary colours. Secondary colours are available for in-text forms such as highlight boxes, to focus attention on important content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-highlight-1024x522.png?resize=690%2C350&#038;ssl=1\" alt=\"\" class=\"wp-image-918\" width=\"690\" height=\"350\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-highlight.png?resize=300%2C153&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-highlight.png?zoom=2&amp;resize=690%2C350 1380w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><figcaption>Example of a highlight box (Wiki guides)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Xerte also has a style of template called Bootstrap, which gives projects more of a web page feel. Don\u2019t worry &#8211; we\u2019ve done that up too!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap-old-1024x440.png?resize=690%2C296&#038;ssl=1\" alt=\"\" class=\"wp-image-916\" width=\"690\" height=\"296\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap-old.png?resize=1024%2C440&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap-old.png?resize=300%2C129&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap-old.png?resize=768%2C330&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap-old.png?resize=1536%2C660&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap-old.png?w=1905&amp;ssl=1 1905w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><figcaption>Before<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap-1024x456.png?resize=1024%2C456&#038;ssl=1\" alt=\"\" class=\"wp-image-917\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap.png?resize=1024%2C456&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap.png?resize=300%2C134&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap.png?resize=768%2C342&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap.png?resize=1536%2C685&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/xerte-bootstrap.png?w=1909&amp;ssl=1 1909w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption>After<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Using the theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The new theme is available for Xerte users across the University, offering a branded template with a cohesive look and feel for student-, staff- and externally-facing training slides. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/xerte.york.ac.uk\/play.php?template_id=116#page1section2\">Find out more about using Xerte<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>To coincide with the launch of our new Web CMS training module, we created a new branded theme for the e-learning platform Xerte. We wanted something flexible and functional that would suit any potential e-learning application, while effectively implementing the University&#8217;s new look and feel.<\/p>\n","protected":false},"author":153,"featured_media":909,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[38,18,64],"class_list":["post-907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-content","tag-design","tag-e-learning"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2022\/09\/blog-xerte-3.png?fit=799%2C449&ssl=1","uoy_author":{"name":"Jennifer Jones","bio":"","image":{"src":"https:\/\/secure.gravatar.com\/avatar\/?s=200&d=mm&r=g","width":200,"height":200,"alt":""}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/posts\/907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/users\/153"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/comments?post=907"}],"version-history":[{"count":0,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/posts\/907\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/media?parent=907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/categories?post=907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/tags?post=907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}