University Website Inspired Template Design

sign on screen elearning design
Click on the image to view the demo

Some websites are ideally suited for using as design inspiration for e-Learning course and template development. I’ve had the Deakin University website marked for a while as one of these.

So, when the Articulate e-Learning Heroes Community weekly challenge #212 to “share an academic-theme course starter template” was posted, this was the perfect opportunity for me to go ahead and use this to design a template as the basis for e-Learning course development for academic and higher education using Storyline 360.

The Process

I started by identifying fonts and colours to include in the design.

If you are really particular about matching the font from a website, you can use something like What the Font!! or Font Squirrel Font Identifier to accurately identify any font. If the identification comes back as being a commercial font that you need to pay for (which it did in this case), you can always search for a similar font that you can download for free using something like Identifont. The fonts I found and used for this project are Sommet Rounded Regular for headings and Frutiger Linotype Regular for body text.

Tip: Watch out for any “free for personal use only” terms if you’re downloading free fonts and using them for a commercial project.

Once I’d identified and installed my fonts, I created a Theme Font for the template – I NEVER skip this step when I’m developing a template or even just a course, and I always do this at the very beginning as part of my process as I find that if I leave this and add my content, then try to go back and apply and use a Theme Font, I get varying and random results that take much more time to sort out than I would spend creating the Theme Fonts.

theme fonts storyline elearning

I followed a similar process for identifying and setting up the colours. There are a number of tools you can use to identify colours – I use the built-in colour picker in Storyline 360, or pixie – but ideally if you’re designing for a client, you would ask them for their exact colour values as the colour picker may not match the colours exactly.

Once I’d identified the colours, I set up a new Theme Color in Storyline 360. Again, I NEVER skip this step as this determines the default colour choices for text, shapes, captions, outlines, buttons, and more within the template. This is such a time-saver that it’s totally worth doing this.

theme colours elearning template

Design Elements

The fun part of this project was identifying the design elements to use throughout the slides to make up the look and feel for the design.

So, what do I look for as far as design elements are concerned? After all, we’re talking about basing an e-Learning template/course on a website design. What works, and what doesn’t work?

Obviously there is a limitation on vertical scrolling screens that websites use extensively now, so some of the elements I liked on the Deakin University website couldn’t be incorporated into this design. One of these elements was drop-down buttons that dropped down the content underneath to display the content for the particular section relevant to the button.

elearning design elements

Some design elements lend themselves particularly well to being adapted to an e-Learning screen. One of these elements was images used on this website as “click and reveal” objects that take you to another page when clicked on. In my design I turned these into flip cards – it just made sense to me.  I really liked the interactive element of being able to scroll horizontally through the cards, but I’m still working on incorporating this into my flip cards design for vertical flip cards like this…

elearning flip cards design inspiration

One of the more straight-forward screen designs was this click and reveal. Using icons as clickable objects is an effective way to engage learners and separate out information into chunks using slide layers, or even hidden states. I sometimes use the Articulate Content Library icons, or alternatively there are a number of other places you can source icons, such as Icons8 or The Noun Project.

elearning click and reveal design inspiration

 

elearning click and reveal interaction

Here are some of the original design elements I chose to try and incorporate into my template design. There are a lot of design elements here – and I probably won’t use them all. I like to repeat elements throughout the template slides so that there is that visual connection linking the slides together as one cohesive design. This is a bit of a balance sometimes. You do need to have a mixture of design elements, but not too many that are too diverse.

elearning design inspiration

Tip: Look out for any other resources on websites such as .pdf guides that could be used for your design inspiration as well as the website itself.

Using the Slide Master

I know of many e-Learning designers who don’t use templates or the Slide Master in their e-Learning development at all. In fact, I saw an advertisement not that long ago for a contract position with an organisation that stated, “If you don’t use templates, you’re perfect for this position”!! I am a huge believer in templates and using the Slide Master, so needless to say I didn’t shoot off an application for this work, although I was tempted to challenge them on their mindset! I believe the premise behind this statement was that the organisation was looking for people that were empowering themselves to be “creative” without constraints, but in all reality, you can still be super-creative and still use templates and Slide Masters and in my opinion, end up with a much better result.

I use Slide Masters to achieve consistency in my design and efficiency in my development – it’s that simple. You can have as many or as few master layout slides as you like. Not every element of your design has to be on the master layout slides, in fact I mostly use the master layout slides for the common elements such as the title bar, and for text placement for consistency.

Here’s what my Slide Master looks like for this project – I only have 6 master slide layouts, plus the blank one. The rest of the design is done at the slide level. This includes formatting the slide background using an image for some slides – this way you can use the same master slide for the placement of elements, but change the look by using different images for the background at the slide level.

You could use the Slide Master “placeholders” for images for design elements on your master layout slides, but most of the time I prefer to just add the image at the slide level. I find it just as easy to swap out an existing image for another in Storyline 360.

elearning slide master

I do, however, use the video placeholder when I’m designing template slides that contain videos. For this design, the video slide has the video on a layer, so I added a new Feedback Master Layout slide design using the video placeholder. Why? It seems to take a lot longer to swap out a video for another than it does to insert a new video using a placeholder, so it’s all about efficiency.

Some Extra Tips…

If you’re following a similar process to this – the biggest tip I have for you is to screenshot the screens that you want to try to replicate. DO NOT rely on just revisiting the website to view these visual elements. Why not? Well, websites change their designs – some change them dramatically – some change without notice…This has happened to me more than once. Even when I’ve been searching for inspiration and I come across posts online that have reviewed “amazing website designs”, it’s not uncommon to follow the links and see that the design has changed completely. That’s all well and good, but if you’re using a website for design inspiration – it’s not so good!

If you’re designing a template/course for a client and intend using their website design for inspiration – ask them if they have a Style Guide first. Don’t rely on their website having been designed in line with their Style Guide. Ask for their Style Guide as well – yes, I’m speaking from experience here!

When you save your project as a .storytemplate file, you can reuse your custom template in other Storyline projects. You can read more about this here.

A Bonus Screen

I don’t normally develop a login screen, but I was inspired to add this to this design after I saw the one on the Deakin University website. It’s a simple element that is familiar to everyone and I think it always adds that extra touch of personalisation that can has the potential to engage learners right from the beginning.

If you want to use this feature to view the demo, here’s the information you’ll need:

Username: username
Password:  password

Otherwise, just click on the “Sign on with University 1-Click” to get past this Sign On screen!

The Result

 

With this template, as with all templates I design, I focused on making sure the template was carefully constructed and incorporated the elements of good graphic design, including:

  • intuitive, simple and straightforward navigation
  • appropriate choice of colours and fonts
  • drawing attention to the most important elements on each screen using focal points and visual hierarchy
  • creating balance and avoiding confusion and chaos with too much clutter by leaving some white space
  • using relevant images – images that are emotionally compelling and connect the learner to the subject matter
  • harmonious design – making sure every design element fits cohesively into the overall look and feel

Click on the image at the top of the screen to view the interactive template demo.

Download?

This template is still a work in progress and will eventually be released on my Storyline Templates website. The process I follow to this release is very strict and this means that it’s likely this template will undergo a degree of transformation before it is released.

Extra Resources

https://hopedianne.com/2016/05/10/templates-for-e-learning/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s