Using and creating wireframes in e-learning

I’ve previously written an article about using wireframes in e-learning design.
There is a lot of benefits of using wireframes and prototyping in your screen and graphic design in your e-learning projects. They are excellent for showing clients screen layout and also for identifying the content areas within the screen – especially if you are using a fixed screen design.

With mobile and tablet design now also a consideration wireframe and prototype design is increasingly important to ensure that your design works across all formats and the proportions work well. I think the concept of MVP (Minimum Viable Product) and wireframes are the first part of the process. You can design your prototype wireframes and show them to your client or project team and get an initial view of how the screen is going to work with out having to apply lots of graphic design time. At this early stage you can apply interface elements like navigations buttons and site furniture to see how much space each take and how they may  work on the screen.

If you find the wireframe process works for you you may development an icon set that represents certain on screen elements – for example buttons, video areas, text areas, animations so that this speeds up your wireframe development process further.

You do need to consider that some people may struggle to visual the wireframe, but it is to show the potential layout and purpose of the screen not to show the finished graphic design. In client meetings I’ve actually used cardboard cut outs to move the elements around a board to show how we can move around screen elements. This can be a really quick way to create screen layouts as opposed to a series of graphics reviews conducted via email. Once you’ve agreed on the layout you can then move to the graphic style and then apply it to the wireframe.

Smashing Magazine has produced an excellent article on creating wireframes in InDesign this month. You can view their article at the Smashing Magazine Website.

Do you use wireframes in your work? Do you use prototypes? Do you use the MVP process? How do you start you development process?

Scott Hewitt




Tags: , , ,

No comments yet.

Leave a Reply