Using Wireframes to Design eLearning

Here’s another article that I ran across. I think that this is a good idea to do some wireframe sketches of various course elements before adding fonts, colors, and other visual elements. This might help during early review periods to focus on the content instead of the look/feel. It could also help the graphic designers to more quickly develop. Have a read below.

E-learning Development – Is It Time You Started Using Wireframes in Your E-learning Design Process?
By L Scott Hewitt

Wireframes are used as part of the design process is a range of industries. For many people they are most closely associated with 3D design, however an increasing number of e-learning designers are using wireframes as part of their design process.

If you come across people involved in a creative industry such as e-learning design, website design or graphics they will tell you about the time when they showed a design to a client and the first thing that they focussed on was the thing that they didn’t like! After many years working in e-learning and website design I’ve been involved in client meetings where designs have been shown to the client and the whole focus has been how it looks and not how it works. It is not unreasonable to think that if you show someone a visual design that you will get this reaction but does it help you during the elearning design process?

Personally I’m an advocate of the use of wireframes in the design process; they are a fantastic aid for the instructional designer, the client and the graphic design. They provide a focus for how the elearning course will work and how the leaner will interact with the design.

It is not unusual for an elearning designer to get a brief and start straight away creating the visuals and hoping that this is going to be exactly what the client wants. We all know that planning is critical to the success of a project so what not do some planning and build a wireframe?

You can think of a wireframe like an architects plan for a building. Your wireframe should be a simple outline of all of the objects that you are going to place on the page. It doesn’t matter if you are using a development tool like articulate or you are designing from scratch the wireframe can help to define how your elearning course is going to work.

Website designers have been using wireframes for some time with magazines such as .net including the use of wireframes in design articles. There are a number of parallels between elearning design and website design so perhaps its time to add wireframes to your development process?

A well thought out wireframe will map out the structure of a page and breakout the individual functions. Critically they can help the client understand what the page purpose is. If you provide a lavishly illustrated graphic this can often be a distraction and the focus turns to colour, font, size and images. Graphic design is integral to the success of an elearning project but try doing a wireframe first. Initially you may experience some resistance to using wireframes, especially if the client is expecting lavishly detailed design boards!

When talking to the client explain the purpose of the wireframe and how it will help them, explain how they are used to map out how the actual page will work and what the page proportions are. The wireframe can be easily changed and gradually you’ll move away form the “can we have that in blue” comments that are a distraction at this stage.

The wireframe should be carried out at the start of the design process; they should explain how the elearning design will work. For example: when you press a button, what will be the outcome. You can expand your wireframes to all of the page types that you have and you can then create your site map from the wireframes.

Once the wireframe structure has been agreed you can pass this to the graphic designer who can then focus on the visual design and make sure that the interactive design is realised. The first design that you pass to the client can then focus on the visuals and hopefully you’ll avoid the “can you just move this and this and this”. It is much easier to move and manipulate the page at wireframe stage than at the design stage. My own experience is that the wireframe makes the design task easier for the graphic designer and interactive designers can get their ideas across in much more effective manner.