Flat eLearning Design

If you’re an Apple fanatic like myself, you were undoubtedly excited about Apple’s WWDC Keynote this last week (Monday 6/10). Apple made a major move by introducing a completely redesigned user interface (UI) for their iOS software, which powers all of their most popular products (i.e., iPhone, iPad, etc.).

Since the introduction of the iPhone in 2007, along with the iOS UI, Steve Jobs herald it as being five years ahead of anything else – and I’d agree with this. One aspect of the interface that made it so unique and popular was its use of skeuomorphic design. This provided a fresh and exciting interface and also helped first-time users easily relate to a touch-enabled interface – something no one had ever experienced on a mobile device.

As we all know, the design industry goes through phases and trends. This usually forces companies to make design adjustments to meet consumer demands for what’s popular at the moment. Despite how popular the iOS UI was and still is, in recent years, more and more people have been demanding for a refreshed and updated interface. Although skeuomorphism made iOS popular, lately it’s been perceived as too kitschy and almost childish.

So, that’s exactly what Apply did at this year’s WWDC – they changed almost every aspect of the interface, removing all skeuomorphism and visual metaphors. The new iOS UI design is clearly meant to appeal to a more sophisticated user.

Apple’s decision to revamp its iOS UI design was not done without intention. After seeing the new design, it’s clear they’re moving to a new design trend – flat design.

What is Flat Design?

Flat design is the latest trend in graphic and user interface design. Flat design suggests that functionality trumps style. Although it may be fun/comforting for a user to interact with a skeuomorphic interface that looks real-to-life, it may not take full advantage of all that digital interfaces have to offer. So, for flat design, this mean no beveled edges, drop shadows, reflections or rich textures.

Here are some great examples of flat design:

Applying Flat eLearning Design

So, how can you apply flat design to your eLearning courses? In general, flat design is relatively simple to implement. Flat design can add a fresh, clean and unexpected aesthetic to your course’s look and feel. Keeping the graphics simple, allows your learners to focus on the learning content. Additionally, most of the graphic element can be easily created right within your authoring program (i.e., PowerPoint, Articulate Storyline, etc.). However, it’s also important to mention that because flat design is so simple, if not executed properly, the course may look unfinished or incomplete.

To show you how to use flat design in your courses, I created a template as an example.

VIEW DEMO  DOWNLOAD

As you can see from my example, the design is simple yet visually engaging. The combination of basic shapes and smooth transitional animations creates a sense of cohesion and structure.

Guidelines for Flat eLearning Design

Fortunately or unfortunately (depending on how you look at it), there are no hard and fast rules when it comes to apply flat design. Like any type of creative/design style, everything’s up to interpretation by the designer. When designing an eLearning UI, there must be a strong cohesion between the graphic design and the content. Whatever decisions you make, they must be logical, consistent, and most importantly, they must be intentional.

Here are a few basic style tips for flat eLearning design:

  • Fonts: Try to stick with simple sans-serif fonts. These fonts provide a clean and simple look, plus they’re easier to read by the learners. Standard fonts I like to use includes: Century Gothic, Calibri and of course,Helvetica.
  • Shapes: Basic geometric shapes helps to keep the simple look and feel of flat design. Stay away from elaborate curves or lines – square corners helps to maintain uniformity. Also, as I mentioned before, most all of these elements can be created directly within your authoring program.
  • Colors: Color conveys emotion, and flat design should convey professionalism, simplicity and maturity. Bright and unique color pallets are best. Stay away from whimsical, pastel-like colors. Check this out for some inspiration.
  • Animations: Animation plays an important role within e-learning. They help prioritize the delivery of information for the learner and makes things more visually engaging. When it comes to flat design, try to make complex animations look simple. In my example above, I used animations heavily to create transitional effects between slides. This helped reinforce the use of my different layers. Whatever you do, keep things consistent and intentional.
  • Other Stuff: Remember what I mentioned before, when it comes to flat design, no beveled edges, drop shadows, reflections or rich textures!
Tim Slade
Tim Slade is a speaker, author, and award-winning freelance eLearning designer. Having spent the last decade working to help others elevate their eLearning and visual communications content, Tim has been recognized and awarded within the eLearning industry multiple times for his creative and innovative design aesthetics. Tim is a regular speaker at international eLearning conferences, is a recognized Articulate Super Hero, author of The eLearning Designer’s Handbook and creator of The eLearning Designer's Academy.

Leave a Reply Text

Your email address will not be published. Required fields are marked *