eLearning: Wireframing 101

One of the most important steps in building an eLearning course is the "wireframing" process. 

What is Wireframing?

Wireframing is the process of conceptualizing the navigation that will be used for each of the lessons in your course and working out as many kinks as possible before you begin to build the project.

In the example below, there are three simple sections notated. While the example focuses on eLearning, the concept could easily apply to a web page, flyer, newspaper, or magazine layout. To be clear, I'm not talking about specific course content here, nor the specific design; I'm referring to the overall placement of page elements.

 

The "Header" is the first thing the learner or user sees, so it needs to be something that will, at first, draw them in and then keep them interested. The "Body" is the main part where most of the content resides. The "Footer" is where information is placed that is of lesser importance, i.e., disclaimers, copyright info, and alternate text links.

Why Wireframe?'

Wireframing is a key part of the process in building an interactive course. You must plan each click your user might take and what the outcome of that click will be.

 

The wireframe below shows some simple navigation that houses "Home," "Our Team," "Services," and "Contact." You can see from the image that this wireframe depicts what the user will see when they press the "Services" button.

 

By planning all these details out ahead of time, the production time and cost is greatly reduced and so is the error margin.

How to Wireframe

In my experience, the best way to create a wireframe is sketch it out on a simple sheet of paper. At first, I wasn't a fan of paper, but I was told that using paper was the most fluid way to begin a design. I had to retrain myself to sketch on paper but I now see the advantages. 

 

After sketching my ideas on paper, I use Adobe Illustrator and redraw the concepts digitally (especially if I'm going to present the concept to a client). I must stress however that you don't have to be an illustrator or use fancy programs to create a wireframe… simple rectangles and lines will work just fine. You just want to ensure you have mapped out every aspect of the course navigation before you begin to produce it.

Which Applications Should You Use to Wireframe?

There are a variety of applications you can use to create Wireframes or wireframes. Here are a few:

• A piece of paper
• Adobe Illustrator
• Adobe InDesign
• Adobe Photoshop
• Microsoft Word
• Microsoft PowerPoint
• Apple Keynote
• Online services such as Blueprint, Balsamiq and Omnigiraffe

I use Illustrator because it's a regular part of my workflow, but I recommend PowerPoint to most people who are just starting out. Everyone has PowerPoint, it's relatively easy use, and you can build your wireframe quickly.

How to Begin Wireframing

The image below shows two wireframes. One uses white background boxes and the others are filled with gray. I prefer the bottom one because I am a visual thinker and the gray helps me understand the regions more. However, both are correct.

 

The image below shows two different treatments for a navigation bar.

In the first example, I used separate boxes to indicate buttons and I grayed out the one that the user has pressed. In the second example, the buttons are all connected so I showed it a slightly different way. Both are correct.

How complex or simple you make the wireframe is up to you. Here is an example of a very complex wireframe. Notice the different shades of gray used to designate hierarchy.

Final Thoughts

Keep your wireframes clean and organized. Show things as close to scale as possible, and label items as you go. Work out all the details at this stage, and production will be a breeze.

***
If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.