Flatten Up Your E-Learning Design Skills (Challenge #4) Posted Friday, September 20, 2013 at 5:01 PM

Add to Favorites

Flat Design

If you’re like most e-learning designers, you’re always trying to grow your skills and improve what you create. Yet practicing your craft can be a challenge if you work for a company that’s comfortable in your comfort zone, and doesn’t always embrace your stretch opportunities. So you may have plenty of work, but when you do too much of the same thing, your skills and creativity can start to feel flat.

 

Well, this week’s challenge is around flat—flat design, that is. Flat design is hot right now, and I’m guessing a lot of your clients haven’t embraced this trendy style. So here’s your chance to rev your design engines from flat-line to phlat-tastic!

 

Challenge of the week

Show and share your best flat design template ideas for e-learning:

 

  • Objective: Create a flat design course template. Include at least three different content slides, and more if you’d like. Your slides can be static or built out as working interactions. The objective is to show how your flat design will carry across your project.
  • Tools: You can use Articulate Storyline, Articulate Studio, or PowerPoint to create your examples.

Resources

Tom has some great posts on finding design inspiration, creating starter templates and using websites to get started. If you read only one post, I’d check out the post on creating an e-learning template. It outlines the most common slide designs found in courses.

 

Tim Slade shared an awesome flat template a few months back. Check out the slides he included for layout inspiration.

 

Flat design examples:

Last week’s challenge

You guys are amazing! The ideas shared in last week’s gate screen challenge were superb. Examples included a variety of use cases from scenarios, reviews, and even social media.

 

To flatten you up for this week’s challenge, check out the creative examples your fellow community members shared last week:

E-Learning Challenge #3: Gate Screens in Online Courses

Have a flat-tastic week, E-Learning Heroes!

 

 

 


 

More about the e-learning  challenges:

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

 

Post written by David Anderson

 

 

35 comments so far

Dana Dutiel

116 posts

Dana Dutiel

116 posts

Posted Saturday, September 21, 2013 at 9:04 AM

Here is my third attempt - I will get the hang of this - this link should go to the .pptx file

Thanks for your patience with a newbie

community.articulate.com/.../flatdesign_5F00_ecourse.pptx

Thanks,

Dana

Dana Dutiel

116 posts

Posted Saturday, September 21, 2013 at 9:07 AM

so I am having some type of weird issue with the links not working and instead of uploading for the 16th time and adding to the confusion - hopefully this is ok

Thanks,

Dana

Dana Dutiel

116 posts

Posted Saturday, September 21, 2013 at 5:30 PM

Andrzej,

Your flat design looks amazing.  I am always looking at Template Monster for inspiration as well. I love how smooth your animations are and the color scheme.  

This time I went with a sample from fltdsgn

Ken S

3 posts

Posted Saturday, September 21, 2013 at 10:47 PM

@Dana @Andrzej thanks a lot for sharing this I am currently at stage of completion of a course for Doctors in similar Flat templates.

User Rank David Anderson

3,251 posts

Posted Sunday, September 22, 2013 at 9:40 AM

Hey Dana that looks really great! The colors are great and you included more than enough slides to show how the entire scenario plays out.

Thanks for posting both versions of your PowerPoint file.

Well done:-)

User Rank Kevin Thorn

1,547 posts

Posted Sunday, September 22, 2013 at 4:51 PM

Very cool. I'm inspired by all these inspirational designs!

Belen Casado

275 posts

Posted Monday, September 23, 2013 at 2:08 AM

Really cool!

Good and inspiring idea to "Flatten Up Our Course Design Skills".

I'll try it.

GABI CAHALON

4 posts

Posted Monday, September 23, 2013 at 9:10 AM

Hey guys

Here is my first  attempt here at Weekly Challenge.

www.dropbox.com/.../IS.ppsx

Sarah Ednay

35 posts

Posted Tuesday, September 24, 2013 at 4:35 AM

Hi

I had a play with flat design a little while back, mainly because I was interested in using the trend for the “Icon-isation” of everything. That aspect has been really helpful for our technical courses when everything we talk about is really just another ‘black box’ or ‘silver tube’ widget (yawn).

I think it is great that flat and simple is "in" because it is so much easier to produce the graphics yourself. This was all Powerpoint (and I owe a thank you to Tom Kuhlmann for highlighting the union shapes feature in PPT10 !)

It is really a bit of a mix of non-flat and flat (I guess that’s probably taboo in the flat world) as some assets came from existing live pptx. It doesn’t really get going on flat till the catalogue and sub-menu pages. Maybe I’ll get brave and flatten it all when I get a chance to finish it. I’m a Storyline novice as I still as get very little time with it, and it is still a work-in-progress so it is a bit glitchy. It is designed to be a supporting e-resource for live training.

dl.dropboxusercontent.com/.../story.html

Ok, back to the vat return now ...another hat  :(

Posted Tuesday, September 24, 2013 at 7:28 AM

I didn´t want to miss this great initiative!

Here´s my attempt:

dl.dropboxusercontent.com/.../story.html

I used this website as inspiration: http://everylastdrop.co.uk/

Many thanks!

Mayra :)

Gina Heumann

88 posts

Posted Tuesday, September 24, 2013 at 10:31 AM

Here's my first attempt at flat design - just a really simple series of screens. The hardest part for me is always thinking of a theme:

googledrive.com/.../0B5aMwOy9Y6c8a1pzN3I3VnNTRUk

User Rank David Anderson

3,251 posts

Posted Tuesday, September 24, 2013 at 4:21 PM

@Sarah - I like that you shared your hybrid (flat, non-flat) example! I don't think it's taboo and in fact it's a great example for anyone interested in applying some flat design concepts without making over their current design model. Thank you!

Ian Minderman

47 posts

Posted Friday, September 27, 2013 at 4:57 AM

My VERY simple flat design and my first challenge entry.  Be kind. =) mindermans.com/.../player.html

Posted Friday, September 27, 2013 at 5:11 AM

Very cool examples, everyone!

Here's my quick sample: Flat design template

Mark Woolwine

58 posts

Posted Saturday, September 28, 2013 at 1:00 PM

These are all great examples:

Here is my example: markwoolwine.com/flatdesign

User Rank David Anderson

3,251 posts

Posted Saturday, September 28, 2013 at 1:05 PM

Nice demo, Mark! Really like what you did with the color-based progress meter and tabs interaction. Thanks for sharing!

David Lindenberg

95 posts

Posted Saturday, September 28, 2013 at 2:03 PM

A bit late to the party, but here is my example.

dl.dropboxusercontent.com/.../story.html

From David's list of flat design resources, I found this theme and tried to imitate a bit of the feel.

themeforest.net/.../panes-wordpress-on-one page/full_screen_preview/5026910

btw - the Glossary and Dept Contacts are just hoverable - not linked to anything.

David Lindenberg

95 posts

Posted Saturday, September 28, 2013 at 2:07 PM

Oops..my inspiration site link is messed up.  Here is the site I was trying to imitate.

themeforest.net/.../5026910

User Rank David Anderson

3,251 posts

Posted Monday, September 30, 2013 at 2:54 AM

Nailed, it David. Clean and elegant.

Thanks for jumping in!

Ken S

3 posts

Posted Monday, September 30, 2013 at 3:13 AM

@all its nice to see such impressive flat design concepts and ideas. keep it up all.

byron tik

56 posts

Posted Thursday, October 03, 2013 at 6:00 AM

<b>Can we use html in the comments section to show an image?</b>

User Rank David Anderson

3,251 posts

Posted Thursday, October 03, 2013 at 6:09 AM

Hey Byron - Our forums allow you to attach images, but the blog comments only accept text. Text links will be converted to HTML so you could like to something like Droplr, Dropbox, or any externally hosted image.

If you have some designs you'd like to share, the forums are a good way to go for posting attachments. I can also post the image for you on our S3 servers if that's easier.

byron tik

56 posts

Posted Thursday, October 03, 2013 at 6:27 AM

Here we go, a forum post on flat design with two images:)

community.articulate.com/.../37201.aspx

User Rank Kevin Thorn

1,547 posts

Posted Thursday, October 03, 2013 at 8:38 AM

Very cool interpretation David L. Nicely done!

@Byron, as a fan of the hand-drawn style, that looks really great!

David Lindenberg

95 posts

Posted Saturday, October 19, 2013 at 2:24 PM

Hey All. First off, thanks @David Anderson and @Kevin for the kind words.  I've written a blog post that touches on how I created some of the interactions in my sample.  Thought I would share!

davidlindenberg.com/.../articulate-weekly-challenge-flatten-up-your-course-design-skills

User Rank David Anderson

3,251 posts

Posted Saturday, October 19, 2013 at 3:05 PM

Great write up on your demo, David. Thank you again for sharing your work with the community!

Jackie Van Nice

688 posts

Posted Tuesday, August 19, 2014 at 11:36 AM

For the desktop challenge (which will be coming up next week; I've already time traveled there and dropped off my entry) - I used an example of a real course I made a few years ago using some community assets.

For this challenge I thought I'd make it over to be nice and flat. This seemed like an original idea right up until the moment I found this blog post from Tom where he discusses doing the exact same thing: www.articulate.com/.../create-new-look-online-training-courses-simple-tip

So I grabbed yet another community resource - Tom's lovely flat desktop template - and made over the main menu screen and two content screens from my own course.

Here's the old "before": www.jackievannice.com/.../story.html

Here's the flat "after": www.jackievannice.com/.../story.html

These screens are far cuter side by side, so once I stop churning out challenges I'll try to do a blog post about them.

Jennifer Valley

21 posts

Posted Wednesday, September 03, 2014 at 3:00 PM

This week I also created a flat design PowerPoint which is modeled after the Green Bulb PowerPoint template and was inspired by an image I found on www.freepiks.com.

I've posted to it my portfolio and it's also available for download.

Portfolio: jennifervalley.blogspot.com/.../photo-diaries.html

Download: www.googledrive.com/.../0B8fzCiZzCiQmNGFSempZRjJlWTA

Lesley Lewis

13 posts

Posted 1 hour ago

Hi everyone,

Here's my contribution to the flat design challenge. drive.google.com/.../edit.

Its a PowerPoint Presentation for now (i'll try to run it through articulate storyline 2 for more effects sometime soon). My inspiration came from the Metro UI Flat design that can be found here....www.tempees.com/.../metro-ui-kit.

Hope everyone has a great week!