8 web design principles - elogic learning...remember how in our elearning video tips blog post we...

13
The LMS you want, the partner you deserve 8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

Upload: others

Post on 31-May-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

The LMS you want, the partner you deserve

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

Page 2: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

2© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

Copyright

© Copyright 2018 eLogic Learning. All rights reserved. All trademarks are the property of their respective owners. No portion of this ebook may be reproduced without expressed permission from eLogic Learning.

Contact Information

eLogic Learning14934 N Florida Ave.Tampa, FL [email protected]

Page 3: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

3© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

TABLE OF CONTENTS

4 Overview

5 Purpose

5 Communication

6 Typefaces

7 Colors

8 White or Negative Space

9 Images

10 "F" Pattern Design

11 Mobile-Friendly

12 About eLogic Learning

Page 4: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

4© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

OVERVIEW

The world is becoming a very design-oriented place as companies discover the power of design in grabbing the attention of people interacting with their brand or information. In such a bright and carefully-arranged world, users will get frustrated with bad design. In elearning, it's vital to hold the attention of users to keep them engaged. Engaged users learn better.

Web designers are the experts on engaging design – so why not steal their ideas for making elearning more engaging? Here are eight principles web designers swear by so you can appropriate them for your own learning development use.

Page 5: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

5© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

1. PURPOSE

Just as in web design, each slide, page, video sequence, etc. should have a specific purpose. In a module about Personal Protective Equipment (PPE), one slide may be communicating the importance of wearing goggles while the next is all about the importance of ladder safety.

Likewise, if the purpose of a particular slide is to get the user to take an action, then make sure that desired action comes across loud and clear in the directions through use of a button, blank type field or something similar.

2. COMMUNICATION

It’s no secret that people want information quickly. We don’t always have the luxury of time on our hands so make sure you are communicating your topic clearly and effectively.

Some great ways to do this are by using:

• Headines

• Sub headlines

• Bullet points

• Font styles (bold, italics, underline)

Page 6: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

6© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

3. TYPEFACES

Did you know that the best font type to use on the web is a sans serif font? What does that even mean?

Sans serif fonts don’t have the decorative lines at the edges of their letters, numbers and symbols like serif fonts do. Still not sure what we’re talking about? View the example below.

Since most elearning takes place online, pay close attention to your font choice.

And we can’t forget about font size!

Choose a font size that is larger and easy to read. If you are having to use a small font to fit a lot of material on one page then you might want to take another look at your content and see if there’s any unnecessary information you can take out.

Page 7: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

7© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

Colors can be an easy way to break up information while adding a fun design element to your content.

Some of the best ways to use color are by using the different color families. These are color groupings like complimentary, secondary, contrasting or even your branded colors. However, it’s important to note that you should stick with just one color family (per slide at the very least).

4. COLORS

Page 8: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

8© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

5. WHITE OR NEGATIVE SPACE

Colors can be great but even lack of color can be a powerful design element.

You may have heard the term “white space” or “negative space” at some point in your life and this is a key element of good website design. Don’t feel like you need to fill up the entire page. Sometimes, leaving white/negative space creates a bigger impact than a busy page.

Page 9: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

9© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

6. IMAGES

Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text? That still rings true even in text-based elearning content.

Coupling your text-based information with a strong graphic is a great way to help communicate your learning objectives.

Always make sure you’re using photos you’ve either purchased or have downloaded from any of the free stock photo websites out there (Note: some of the free stock photo sites require attribution in order to use their free photos).

Some of our favorite free stock photo sites that actually don’t require attribution are Pexels, Pixabay and StockSnap.io.

Page 10: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

10© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

7. "F" PATTERN DESIGN

Have you ever seen a heat map used to track how people’s eyes look at information on websites? Here’s what one looks like:

Can you see the connection between the picture above and this section’s sub headline? It kind of looks like an “f”. That’s because our eyes naturally process information by starting at the top left and reading to the right and down.

Make sure your content works with this “f” pattern and that you include your most important information (such as the topic and maybe a key point) in the top left corner and continue to the right and down.

Page 11: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

11© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

8. MOBILE-FRIENDLY

We’re a society that’s constantly on-the-go. Therefore, elearning content needs to align with this constantly moving lifestyle.

There are a number of different ways to make sure your content is mobile ready. One is to create your content via an authoring tool that makes your content responsive. This means the training will resize to the user’s device automatically and in a way that maintains the proper dimensions of your various content elements.

Another way is by creating mobile-specific training that is built for the small screen size of mobile devices. This could be through an app, a mobile site, or using a mobile-specific template from an authoring tool.

If you’re using a learning management system (LMS), make sure that it is mobile-ready as well since this is how you’ll be delivering your content.

Page 12: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

12© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

AWARD-WINNING LMS SOLUTION

Each advancement we make to the eSSential LMS is to ensure our client-partners can achieve their training and development objectives now and in the future. The eSSential LMS is recognized as a top learning management system year after year because of our commitment to continuous improvement and customer support.

We’re honored to be recognized by some of the most renowned analysts and organizations in the eLearning industry, but we’re most proud of the recognition we receive from our client-partners!

Brandon Hall – Silver Award Best Advance in Learning Management Technology for Compliance Training (2017)

Talented Learning – Best All-Purpose Extended Enterprise LMS, Top 3 Continuing Ed LMS, Top 3 Compliance LMS (2017); Best All-Purpose Extended Enterprise LMS, Top 2 Continuing Ed LMS, Top 3 Compliance LMS (2016); Top 3 Continuing Ed LMS, Top 10 Channel LMS, Top 10 Customer LMS, Top 10 Compliance LMS (2015)

The Craig Weiss Group (formerly Elearning 24/7) – #1 LMS (2018 & 2017)); Top 3 LMS (2016); Top 3 LMS, Top 2 Extended Enterprise LMS, & Top 5 NextGen LMS (2015); Top 5 LMS (2014)

CODiE – Best Corporate / Enterprise Learning Solution Finalist (2017)

Training Industry – Learning Portal/LMS Watch List (2017)

Elearning! Magazine – Beast of Elearning! Award of Excellence – Enterprise LMS (2017); Best of Elearning! Cloud LMS (2015)

Capterra – Top 20 LMS Software (2014 & 2015)

Bloomin’ Brands – Purveyor of the Year (2009 & 2010)

AND MANY MORE!

Page 13: 8 WEB DESIGN PRINCIPLES - eLogic Learning...Remember how in our elearning video tips blog post we mentioned that our brains processes visual information 60,000 times faster than text?

13© 2018 eLogic Learning. All Rights Reserved.

8 WEB DESIGN PRINCIPLES TO USE IN ELEARNING DESIGN

ABOUT ELOGIC LEARNING

eLogic Learning is an award-winning industry leader in learning management systems, custom course content and learning strategy development. Founded in 2001, eLogic provides personalized solutions to each of its client partners to help their learning and development efforts succeed.

WHY WE’RE DIFFERENT

eLogic also puts a strong emphasis on its partnership approach. We believe clients shouldn’t be treated as just an income source or numbers on a spreadsheet but as partners who can trust us to keep their best interests in mind and help them succeed.

Now, we’ve noticed a lot of other vendors throwing around the words “partner” and “partnership” lately too, but that really isn’t enough, is it? For us, it goes beyond just words. We’re here to make sure we deliver on our promise to help our client-partners increase productivity, mitigate risk and generate revenue and/or see a return on their investment.

WE GIVE BACK

We are committed to devoting our time, resources and efforts to benefit the world around us. That’s why with each new client or sale, we celebrate our success by having our employees select a charity where we donate a portion of the proceeds. It’s our way of saying thanks and giving back.

LEARN MORE

You can learn more about eLogic Learning, eSSential LMS, or even schedule a free live demo by clicking the buttons below:

REQUEST A DEMO CONTACT US VISIT OUR WEBSITE