It's done! Flat design course example

Nov 16, 2013

Kevin Hart
By Kevin Hart

You may have last heard from me here.

Talk about panic.  I was very VERY lucky in two areas:  1.  I got a huge extension on the project.  2.  I had a large community of support.

It took a total of 35 days to complete about a 45 minute course.  All from scratch.  And they weren't just 35 normal days.  It was 35 12-18 hour days.  Someone said I could get it done in a couple days.  If I had done a basic course, that would have been possible, but I wanted something that was going to get their attention. 

My major stumbling block was were to start.  Basically, all I had to work from was an audit that was performed last year.  There were no other supporting documents.  Not even any official policies.  And my discussions with the SMEs was basically them reiterating and expounding upon the security audit.  So I had scenarios in mind, but that was about it. 

Then I came upon some inspiration of where to even begin designing. 

First it was the weekly challenge of designing a flat course.

That led me to Tim Slade's course example which was my leaping off point.

Which also led me to one of his commenters who gave me a way to work Tim's animations into a non-linear course.  (all in the layers)

When I was laying everything out, I found this blog post which made me look for an easy way to build the course in a grid. 

I found the PhiMatrix which is a really simple free .exe that lays a grid over anything on your screen.  I simply set and locked the grid, traced it, save as an image, then pasted it into the slides, and hid it when I didn't need it anymore.  (all my slides still have it hidden, actually)

For the content I pulled almost every trick out of my "engagement" hat.   The branching scenarios were the time killer. 

I also use my own "player" with my own buttons that I can put in, take out or animate as I need. 

The last thing to be done was the introduction.  I had seen this video infographic last year.  It obviously stuck with me and I wanted to create something similar.  As we all know, storyline has a few limitations that wouldn't let me do everything he did in the video.

I was about to download an Adobe product when I came across this Screenr.  It gave me the idea that I could do the whole thing using layers.  (because I wanted a music soundtrack, I couldn't do multiple slides.)  The intro is a blank base layer with about 25 layers on top of it.  I will tell you, however, because it's such a graphic heavy slide, it made my program crash on about 10 occasions.  There was one night I was in tears over what I lost that night.

Here is a small sample of the course.  It's only the intro and the menus.  But it gives you an idea.  If I can, I'll upload the whole thing so you can sample it.  (If you're reading this after 11/26/13, the link won't work)

I'd attach the whole course here, but I used a bunch of graphics from Shutterstock so I can't legally redistribute them. 

Speaking of shutterstock, there's a fantastic character artist out there who goes by Artenot.  He's one of the very few designers out there who has characters in multiple (like, hundreds) of poses.  They're all cartoon, but that's generally what I look for. 

Let me know of any feedback you have and thanks for all the community support.

42 Replies
Kevin Hart
over 10 years ago11/17/13 at 9:07 am (UTC)

Thanks for the compliments, folks!   To be honest, I knew that the only people who would appreciate what it takes to do something like this in Storyline, would be people who use Storyline. 

The music, I should mention, and how the slides timed to it, was a complete (but happy) accident.  I dropped in the music, watched it, and almost fell out of my chair.  My colleague swore I went back and changed timings to fit the music.  I didn't.  Apparently I naturally time animations at 90 beats/minute.  (My music professors would be proud)

Phil, I love ultra-picky.  (I'm ultra-picky, too)   The button flicker.... I have NO idea how to fix that.  The buttons all have 4 states.  Normal, Hover, Down and a custom one called Done that is variable triggered when the section is complete.  So why they seem to disappear or flash when you're moving to and from them is beyond me. 

As far as the shadows... I struggled with those.  I noticed some very simple, non-transparent, non-blurred-edge drop shadows on many of the example webpages I looked at.  And a few of the web guides I used said they're OK when used in this manner. 

I did more research on this design than I've done for any other course design I've done for any other course.   Right now there are TONS of resources available because it's so hot right now.  Especially for websites.  It was actually a nice change to have so many absolutely consistent sources on this style who can say. "This is exactly how to get it right."  Usually, with elearning (or even with websites), It's been, "Here's a guide but we can't give you exact details like colors, or what kind of pictures to use, or layout.  But if you follow this guide, you'll end up with something nice." 

Here's some more detail on the design:

Where I got my color scheme:

Flat UI Colors

Websites used for inspiration:

Flat UI design

Flat Design Luv

Flat Design Gallery

Fonts:  (I did WAY more research on fonts than one would find logical). 

For the inforgraphic video, (you're encouraged to to multiple, complimentary/contrasting fonts)  I wanted a retro, MadMen (my mom said  "Get Smart")  font theme. 

Franchise

Seaside Resort

Keep Calm

Napa SF

Steelfish

Great Lakes

For the rest of the course I stuck with two fonts.   Which is also the trend right now.  1 font.  Many weights and sizes.   I've always been curious about which fonts lead to the best and quickest comprehension.   What I learned was that you should avoid "Cleartype" fonts.  (there's lots out there if you're curious)  So I avoided all Microsoft fonts, even though I do love the Segoe fonts. 

The latest and greatest font for readability is Source Sans Pro.  There is a ton of documentation about this font and why it works so well.   Download the whole family of 12 fonts.  If you need a bold, instead of bolding the base font, use one of the built-in bolds.  It just works better.

For any dialogue balloons I used Cartoonist Hand.

Interesting sidenote, some of the research I read on fonts says that the more difficult a font is to decipher, the more likely a reader is to remember what they read.  This mostly pertained to fonts that had good contrast and the font size was appropriate.

Phil Mayor
over 10 years ago11/17/13 at 10:34 am (UTC)

Hi Kevin

i think the flicker is because the normal state is missing from the hover state, normally I fix it by duplicating the hover state, deleting the hover state, create a new hover state and copy and paste the image poverty the top of the hover state.  If this is not tge reason I can have a look if you want.

i was being ultra picky, it really is beautiful

Nancy Woinoski
over 10 years ago11/18/13 at 10:02 am (UTC)

Hi Kevin, just took a look at your sample and I think it is outstanding. The writing is conversational which I love and it moves at a really good pace. It's is a great example of what you can do with the animation is Storyline. I also really like that you are looking for design influences outside of traditional elearning courses.

Cheng Li
over 10 years ago11/18/13 at 12:14 pm (UTC)

This is awesome. I really have no comments on the design. Very creative design and seamless transition. 

And again, this is a great demonstration that this community is the best of the best!

Kevin, if I may ask, how do you decide the slides duration so that learners can read contents on slides without spending too much time? Of course, there are both fast and slow readers.

Cheng

This discussion is closed. You can start a new discussion or contact Articulate Support.