Components for Learning

Imagine this is an instructional material that you are authoring right now. As the passionate educator you are, you will try hard to provide your students with the most delightful and enlightening learning experience, as you always do.

Learning experience refers to the context and procedures involved in the act of learning.

But the more you write, the more difficult it gets to keep up the students' momentum by only using plain text. Wouldn't it be great to count on an entire collection of predesigned visual formats that make your material more dynamic?

Click on the right arrow to continue reading. The purpose of this slider is just to show you how the components look once implemented.

Let's say you want to give your students a quick tip. With the Tip component, you could easily display it in a visual and meaningful manner without needing to specify in your text something like 'Here's a quick tip...'

You don't need to memorize all the components available; you can always check the project's Guide to choose and apply the most suitable component for every case.

To this end, Components for Learning rely on the most common UX/UI patterns to help minimize the learners' cognitive load.design

But how do those components help with the cognitive load decrease? In the first place, when using them consistently, the learners will rapidly learn their meanings and will identify them almost immediately.

Wait, you said 'meaning'? Weren't we just talking about visuals?

Well, not exactly. Design is not limited to colours and shapes: far beyond those, there is the function. Assigning an element meaning and purpose, making it recognizable and easy to identify, is the key to a useful design system.

Most of the Components for Learning are semantic, meaning they are intended for a particular use. For instance, this one aims to highlight the most relevant concepts in a course.

On the other hand, the components have been designed considering the best inclusive and accessible practices, also applying the most common UI patterns and UX best practices.

This collection of components is also based on the main principles of design systems, hence being modular and easy to combine and reuse; especially relevant to its development has been the Atomic Design approach, theorized by the american designer and speaker Brad Frost:

In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter is comprised of atoms. (...) Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That's the basic gist of atomic design.

BRAD FROST, Atomic Web Design

All the components in the set are also responsive –they render well on most devices of different sizes– and minimal, so they easily fit into most theme designs.

The demo ends here; if you click the right arrow button again, you will return to the slider's start.

Components designedfor learning contents

Components designed
for learning contents