E-learning Development – Is it time you started using wireframes as part of your e-learning design process?

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 anyone 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 for the first time and everyone focussed on the thing that they didn’t like! After many years working in e-learning design and development we’ve been involved in meetings where designs have been shown 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 e-learning design process?

At Real Projects we are advocates 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 e-learning course will work and how the leaner will interact with the design.

It is not unusual for an e-learning 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 e-learning 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 e-learning 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 e-learning 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 e-learning 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. The client also benefits by being completely involved in the design process and they have a much better idea of how the elearning course will work.