The Rapid Elearning Blog

Articulate Rapid E-Learning Blog - create a new look for your training courses

Graphic styles change. What was hot one day, starts to look old the next. One way to make your courses look fresh is by adapting to the changing styles. The past few years we’ve seen a shift from bevels to glossy gel to reflections. Now the hot design look is flat UI (user interface).

Just the other day someone asked me for feedback on a course they wanted to makeover. I recommended that they try and convert it to a flat design. It wouldn’t take much time to do so, and in a short time you’ve got a whole new look.

What is Flat Design?

Do a search and you’ll find all sorts of resources online concerning flat UI design, but here’s my basic overview:

  • Simplicity. The goal is to have a simple design that is clean. For example, instead of creating an overhead desktop that looks real, create one that has the essence of the desktop with less distracting detail.

Articulate Rapid E-Learning Blog - overhead desktop template

Articulate Rapid E-Learning Blog - flat UI desktop template

  • Consistency. What generally works with flat design is to stick with similar line styles. Choose straight or round. But don’t mix them. Or when you do, use it for effect. For example, use a circle on a screen with all straight lines to create contrast. And that contrast is a great way to draw the learner’s attention to a specific place on the screen. Also, if you go with rounded corners, make sure the rounded elements are the same.
  • Limited depth. The one thing you see with a lot of flat design is that there are rarely any drop shadows. And when they do exist, they’re simple. Depth is created by stacking objects or with solid color drop shadows.

Articulate Rapid E-Learning Blog - what is flat UI

  • Simple colors. Select a solid color scheme. If you do a search for flat design color schemes you’ll notice that they tend to be bold but a bit muted. Here’s a good starting point to find some colors. An easy way to get a muted look is to add a semi-transparent white shape over the colored shape.

fArticulate Rapid E-Learning Blog - flat UI color scheme

  • Lots of white space. White space is great for learning design. It forces us as designers to get rid of content. Since we have less space, we need to make sure that the information we put into it is clear and contributes the message we want to convey.

Free E-Learning Template: Interactive Tabbed Notebook

To put my own thoughts into practice I did a makeover of an existing PowerPoint template that’s available as a free download in the elearning community. The original tabbed notebook was part of a workshop I did on creating interactive elements for rapid elearning design.

Articulate Rapid E-Learning Blog - example of tabbed template

Click here to view the elearning example.

As you can see, the original design is simple and a bit dated. Below is the new design with an updated flat UI look.

Articulate Rapid E-Learning Blog - free flat UI elearning template in PowerPoint

Click here to view the elearning example.

How to Create the Flat UI Template

Here are some of the decisions I made converting the old template into an updated flat UI design.

  • Created a minimalist version of the notebook. I wanted the essence of a tabbed notebook with as little detail as possible. I decided to include a cover, tabs, and a simple spiral.
  • I played around with different ideas for the spiral. For the PowerPoint version I stuck with straight lines. I remade the template for Storyline and used the rounded shapes instead. Which spiral type do you like best?

Articulate Rapid E-Learning Blog - flat UI elearning template in Storyline

Click here to view the interactive Storyline version of the template.

  • To create depth without detail I added a corner on the page to imply a bend and I added a solid line under the main page to lift it a bit from the tabs.
  • All of the colors are built using the design schemes so you can easily swap out colors or add your own design colors.

Articulate Rapid E-Learning Blog - chnage color schemes with your free template

  • I stuck with a simple font pair, using Rockwell Condensed for the titles and Trebuchet MS for the body.

Download the Free Template

You can download the free templates below. I created one in PowerPoint to use with Articulate Studio and another to use with Storyline. You’re free to use them as you wish.

If you do a flat UI makeover of an older course, I’d love to see the results. In fact, David had a recent challenge asking for a flat UI design. You can show off your work in that forum thread.

Related Posts with Thumbnails

Upcoming Events (2015)

We’re hosting a series of two-day elearning workshops that focus on practical tips and tricks. You can register for one day or two days.


E-learning Community News

Check out all of the free resources below. You can grab a bunch of free downloads, see some nice examples, and learn everything you need to build great elearning.

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for elearning, instructional design, and training jobs

Participate in the weekly elearning challenges to sharpen your skills 

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool elearning examples to check out
and find inspiration.

Getting Started? This elearning 101 series and the free e-books will help.



10 responses to “Create a New Look for Your Online Training Courses with this Simple Tip”

Thanks a lot for this post. It is really interesting and results are impressive.

Personally, I lean a bit more to a modification of the ‘old look’. The difference between the old look and the new look is quite extreme. Both looks really serve different purposes. I think the more realistic look and coloring is a great attention getter and keeper of visual learners. With e-learning, we rely so much on auditory and visual engagement that I would not want to compromise one of them for the sake of a ‘new’ look. Thanks for the post.

@Melissa: A lot of visual design is subjective. However, I don’t think going with one look over the other is compromising the learning experience.

December 7th, 2013

Interesting thoughts. I liked your old notebook style, but when you place the new style below (which is very nice!), I can see the difference and in a moment the old one is outdated.

I had the same experience with the minimalistic new IOS design. When installed it looks terrible the first time and after a week I did not want to go back and loved it.

Design is a strange thing. Same with fashion; when you look back at older photo’s of yourself wearing funny clothes (which were not supposed to be funny that time).

Thanks for this great post Tom. You got me thinking about my own designs and when David came up with a weekly challenge about Result Slides I thought lets go for it and combine this challenge with the ideas of your post.

I designed a flat compass, used UI colors and a font that is great to use in flat designs. I have used the font Lato which you can download here for free http://www.templaza.com/blog/best-fonts-for-flat-ui-design/62

Here is the result of my flat result slide;
http://www.eyespirations.com/index.php/portfolio-item/result-slide/

Thanks,
Paul

@Paul: I like the results slide because it doesn’t look typical. Thanks for sharing and for participating in the challenges.

December 10th, 2013

Hi!
I would completely agree with your article. you highlighted many interesting points. Thank you for great and helpful post.

Brilliant! Thanks so much for the lesson on the tabbed notebook. I spent the day tinkering and learning from your lesson module. I really enjoy your lessons and generosity of ideas. I often stop to develop a new skill before I even know what I’ll do with it. Thanks for making it fun! And your careful attention to all the steps involved is a huge help!

December 11th, 2013

I love the “desktop without the details” you created. Is that available as a template too?