© 2016 eLogic Learning. All Rights Reserved.

8 Web Design Principles to Use

IN ELEARNING DESIGN

(813) 901-8600 | info@elogiclearning.com | 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 info@elogiclearning.com

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