Why and How to Create a Branded Prototype in Storyline 360

Take a look at the following images. 

Can you name each company? Pretty easy, right? Without words, you can still identify each brand.

Beyond a recognizable logo or brand mark, branding is a company’s identity. It’s part of their story. It shows who they are as a company, what they care about, and what they do. And because branding is such an important aspect of a company’s identity, there will be times when a company requests that their online training reflect their brand.

To ensure the course you create is in line with the brand guidelines, it’s a good idea to create a prototype before you get too far along in the development process. That way you can get feedback and make adjustments before building out the entire course. 

Now that you understand why it’s important to start with a prototype when you’re creating a branded course, let’s take a closer look at how to do it! 

Study the Company’s Brand

Taking the time to understand a company’s brand can help you capture the essence of their brand in your course design. Does the brand convey a youthful and energizing tone? Or maybe a modern and muted design? It’s all in the details—from colors to image choices to typography. Studying and adapting these elements into your projects could help you narrow in on a course design that mirrors a similar tone. Here are some things you can do to ensure the course you create embraces the company’s brand.  

Look at the branding guide

Branding guides include a lot of helpful information, ranging from typeface and logo variations to color palette, imagery guidelines, etc. If you’re unable to obtain a branding guide from the company, search for it online. For larger companies, you might get lucky and find one in your search results. Just make sure it’s up-to-date.

Check out their website

Companies spend a lot of money building websites that match their branding guidelines. Take some time to explore each page and read what they’re about. Look at the formatting of the text and the layout of each page. As you click on or hover over objects on the screen, what design elements do you notice? What types of images do they use—clean and simple or colorful and lively? Are the buttons rounded or rectangular? How do they behave? What other design details do you notice?

Watch their online videos

Videos are another great asset to help you understand a company’s brand in a new way. Oftentimes, you can find branded videos on a company’s YouTube, Vimeo, or other video platform page. Pay close attention to the animations, language, and type of music they use. Do most of their videos incorporate voiceover, or do they tend to rely on on-screen graphics and text to convey their message? You might want to include similar elements in your project.

Visit their social media pages

A company’s social media can be a great resource for design ideas. Some companies even hire people to specifically design branded online content they can post. View the content they share and look carefully at the design of their images, ads, or GIFs. These assets might serve as an inspiration for your slide designs.   

Search for PowerPoints or other documents online

It can be super helpful to see additional examples of branding used in other creative ways. Some companies have a bunch of branded PPTs and PDFs searchable online, but they can be hard to find. For specific results, try searching—filetype:PDF <Company Name> or filetype:PPT <Company Name>. Here are examples of what that looks like:

This will pull up a list of company-branded documents or presentations that are generally full of design ideas that you can use for your project. Check the dates to ensure the branding is up-to-date.  

Create a Prototype

Once you have a solid grasp of a company’s brand, it’s time to apply those elements into a company-branded Storyline 360 prototype. A prototype is a halfway point between a storyboard and the final version of a course. I find that a prototype gives stakeholders a preview of what the entire course experience will be like.  

Another great use of a branded prototype is to streamline the development of a series of micro-learning courses in Storyline 360. I’ll choose the storyboard with the least amount of content and then build out a prototype so stakeholders can see an example. It’s a great way to get feedback and make adjustments before building out the entire series. 

So that’s when and why you should create a branded prototype. Let’s take a closer look at how to do it! 

Creating a branded prototype in Storyline 360

To show you how to create a branded prototype, let’s use this mock-up My Pet website. I’ll walk you through how to incorporate this company’s brand identity into a Storyline 360 prototype.

Start with a blank template 

When you first create a new project in Storyline 360, it defaults to a story size of 4:3 with default navigation buttons and other slide properties. I recommend changing your slide size before adding content to your course so you don’t have to worry about reworking your slide design later. I like to use a blank story template that defaults to the story size 16:9, with the default next/previous buttons unselected so I can create my own custom navigation on each slide. I also edited other slide properties and player features.  

Of course, there are many ways to go about setting up your own project templates. This is just how I prefer to have my projects set up so I don’t have to make the same edits every time I create a new Storyline 360 project.  

If you’re an Articulate 360 Team Subscriber, you can share your template using Team Slides in Storyline 360 so everyone on your team can easily access it and reuse it.

Create a branded color theme 

You can completely customize the default color theme to match the company’s brand. All you have to do is create a new color theme and input the branded color codes from the company’s branding guide. If you don’t have access to the branding guide, you can still create a branded color theme for your project by using the eyedropper tool in Storyline 360 to color-pick the prominent colors off the company website. I like to name the color theme the same as the company so it’s easy to find and select when creating other projects.  

Create a new theme font

Use the company’s approved fonts or find ones that closely match to create a new theme font. If you plan to share the story file with another person to edit, then you might want to stick with standard fonts that closely match the branded fonts.   

One easy way to find a matching font is to type out a sentence from the company website into your project. Have the website open on one side of the screen and your Storyline project open on the other. 

Because Storyline 360 allows you to preview the font before selecting it, you can simply highlight the text in your project and slowly hover over each font option until you find one that matches the website font. Check out this article for more info on working with text in Storyline 360.    

If you still can’t find a good matching font, try searching—dupe for <font name> or alternative to <font name>. 

Customize slides 

Now it’s time to build your slides. Reference the website, branding guide, online videos, social media pages, and other documentation you researched earlier to guide your slide designs.   

If you’ve already created a storyboard, pull content from that and build the slides you want to showcase. This might include a title slide, content slides, a complex interaction, and quiz slides. Use master slides and feedback masters to significantly reduce your development time, especially if you plan to use similar layouts throughout your project.  

Want to see an example? Then check out how I interpreted this My Pet company brand …

… into this My Pet Company Branded Prototype. 

Customize the player

The last thing you’ll want to do is customize the player so it matches the rest of your course. To do that, start by opening the Home tab and clicking on Player Properties. From there, click on Colors & Effects and choose Custom.

Here you can choose a custom accent and background color, You can also personalize the accessibility focus colors, which highlight clickable objects when learners navigate with their keyboard.

For this example, I chose a pink accent color and a white background so it’s cohesive with my slide designs.

Depending on how many of the player elements you’ve activated, you’ll see more or less of the accent color. In this example, I’ve unchecked everything except the accessibility controls, so the player pretty much blends into the background:

But if I turn on more of the player elements, you can see more of the accent color that I chose:

See how sleek it looks when the player and slide designs match? It gives your course a more cohesive feel.

Wrap-Up

By using all of these tips, you can create your own e-learning courses that visually embrace a company’s brand identity. Do you have any other tips or tricks you like to use when branding your Storyline 360 courses? Let me know in the comments below!

Need to brand a Rise 360 course? Then check out this article to help you get started.  

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.