8 Web Design Principles to Use IN ELEARNING DESIGN › wp-content › uploads › 2016 › ... ·...
Transcript of 8 Web Design Principles to Use IN ELEARNING DESIGN › wp-content › uploads › 2016 › ... ·...
© 2016 eLogic Learning. All Rights Reserved.
8 Web Design Principles to Use
IN ELEARNING DESIGN
(813) 901-8600 | [email protected] | elogiclearning.com
© 2016 eLogic Learning. All Rights Reserved.
© 2016 eLogic Learning. All Rights Reserved.
1. Purpose 3
2. Communication 4
3. Typefaces 5
4. Colors 6
5. White or Negative Space 7
6. Images 8
7. “F” Pattern Design 9
8. Mobile Friendly 10
About eLogic Learning 11
page 2
TABLE OF CONTENTS
© 2016 eLogic Learning. All Rights Reserved.
What is the size of the LMS market?
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.
The user should never be confused about what they should be learning or doing.
page 3
1. Purpose
© 2016 eLogic Learning. All Rights Reserved.
Who Uses an LMS?
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 4
2. Communication
© 2016 eLogic Learning. All Rights Reserved.
How is LMS technology delivered?
page 5
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? Here’s an example:
Since most elearning takes place online, pay close attention to
your font choice.
And we can’t forget about font size!
3. Typefaces
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.
© 2016 eLogic Learning. All Rights Reserved.
How is LMS technology delivered?
page 6
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
© 2016 eLogic Learning. All Rights Reserved.
How is LMS technology delivered?
page 7
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.
5. White or Negative Space
© 2016 eLogic Learning. All Rights Reserved.
How is LMS technology delivered?
page 8
Remember how in our elearning video tips blog post we mentioned that our brains process visuals
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.
6. Images
© 2016 eLogic Learning. All Rights Reserved.
How is LMS technology delivered?
page 9
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.
7. “F” Pattern Design
© 2016 eLogic Learning. All Rights Reserved.
How is LMS technology delivered?
page 10
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.
8. Mobile Friendly
© 2016 eLogic Learning. All Rights Reserved. page 11
▶ Request a live LMS demo with a product specialist
▶ Visit our website for more information
▶ Contact 813-901-8600 or [email protected]
Learn more
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.
OUR MISSION “Enriching lives and advancing companies
through training and development.”
OUR PROMISE “Quality. Integrity. Continuous Improvement.
Responsiveness.”
▶ Why We’re Different
Our commitment to fully understanding your business
and objectives is what truly sets us apart. We provide
high-touch implementation and support services that
ensure the eSSential LMS exceeds your expectations
now and in the future. Our agile development process
guarantees clients consistent functionality
enhancements at no additional cost.
▶ 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.
ABOUT ELOGIC LEARNING