There are lots of influences and techniques that e-learning designers can take and use in their e-learning projects from graphic design, game design, illustration and 3D work. Often techniques from other digital arts are overlooked by e-learning designers. There are many skills from other digital areas like graphic design that can be added and included to your set of skills to improve your e-learning projects. In the first of this series we are going to look at what e-learning can learn from graphic design and how many of the day to day skills used in graphic design can be used in our e-learning projects.
Using wireframes in your design process can save huge amounts of time in the design process and also help with the design of the layout of screens. Wireframes are used in 3D design and modelling but are increasingly used in website and graphic design to show the layout of objects. This is the first part of the development process and shows how the on-screen elements such as site furniture, buttons, video assets, text asset and content areas will be arranged. The wireframe shows the content layout before any design has been applied and is used to show the screen proportions and proposed layout. The advantage of using wireframes is that is focuses the project team on the screen layout and not the graphic content at this stage. Often during the graphic design process reviewers are distracted by the visual elements of the screen and are not able to successful review the interface design, screen layout, site furniture and interface interaction.
Once we have your wireframe layout agreed you can then apply your graphic design to it, this then reduces the number or reviews as the next stage will only focus on the graphic content and not the interface, layout, graphic and site object.
You can create your wireframes using pen and paper or specialised software. We’ve used PowerPoint and PhotoShop to create them.
Fonts – Typefaces
There is now a massive selection of fonts for designers to choice from, however you don’t need to use all and you certainly don’t need to use all of them on each screen or in your course.
You should have a course style – look how good websites and printed material has a style. If you are working with a client on an e-learning project it is likely that they will have a set of brand guidelines that will outline the fonts that they will want to use. Ask to speak to their brand team about font use. Check that the fonts that they have are suitable for an e-learning course – are they suitable for use with large sections of text? Will they work with your headers and images that you have been provided?
Make sure that the font you have selected will work on all the devices that you have to support. You’ll need to carry out a cross-platform check, if you are not sure then go and speak to the technical team and it might be better to select a more safer font that it going to work across all devices.
Can you read it? Make sure that you can read the font that you and the client have selected. This also includes the background. Don’t forget people with accessibility issues. Check out background issues, sizes and contrast. There are some excellent tools to assist with this.
Look at the sizes that are used on screen – is the size that you using making it easy for the user to read your content?
You can get some interesting ideas from website design about interface design – look at how certain page elements remain fix as you move through the site but other interface elements will be introduced to allow you to explore the site, almost like a mini interface. How do you design your e-learning interface? If you have a linear course it is likely to have next/forward buttons but if if you have a more complex navigation structure how do you let people navigate through your course?
Do you have tools tips for your buttons? What happens do you learners if they got lost in your navigation model? If you content is linear then don’t be afraid of just having a linear course. If your client wants a 3D simulation then you’ll need to develop a navigation model that will support it! Don’t forget that you are the developer not the end user, you need to design for the users so keep it simple.
If you are designing buttons do you have?
FAQ or Questions
You might be surprised how many people don’t know what FAQ means. If you area reading this article and you are from the e-learning industry then LMS might be a familiar term but LMS is used in numerous industries and doesn’t always mean Learning Management System.
Don’t be afraid of making your navigation system easy to use or making your course structure simple to use. Unless you are creating a puzzle the purpose of your design to allow people to navigation the content. Some course will require simulations or courses will require linear next/back – you design for the audience.
What type of images do you use for your courses and projects? Do you have an image researcher?. A good image can remove the amount of text that you need on screen and if you combine it with a strapline or statistic can make an impact. In his book Presentation Zen, Garr Reynolds introduces a new way of designing presentations that can easily be applied to elements of e-learning design and also many areas of digital design.
Finding the right image can take time especially as the sheer number of images available can be overwhelming. Try to allow time in your development plan to find the right image and work with your script writer and subject matter expert to agree on the right image for your content. If you are going to buy stock images ensure that your designer changes the images to suit your course design, don’t just download the image and paste it into your course. Make sure that you have re-sized and edited the image.
Buy a big thick black marker and use it to sketch out your ideas on a A2/A3 paper. The marker keeps things nice and big and way from any detail at this early stage. Use this technique right at the start of the project when you are coming up with ideas about layout, structure, site plans and more. It helps to keep everything big and in the open! If you find something that you want to focus on you can go into more detail later. I’ve often found that during e-learning projects that development teams have a script/training material provided a client and go straight into development and miss out on some of the creative elements like sketching!
Sketches are also a good idea to outline screen designs (you might also hear them referred to as scamps) or characters before you have to define them fully for the client.
Designing for multiple devices
Graphic designers have been designing for multiple browsers for years – mac, pc, safari, netscape (remember that), IE 6 (yes, still people use it) chrome and now designers have had to learn how to develop for multiple devices like tablets (iPad, Kindle) and Mobile phones. It is very good to look at popular websites to see how designers have applied a brand and its design across a set of devices to see how the design has been applied. You can see how the buttons work, how the interface works and how the functionality and the design still remains in place. Large corporations and business are also having websites that work on mobile devices and also have mobile apps. Mobile apps work slightly differently than mobile versions of websites and users have different expectations – for example, buttons behave in a different way but interestingly when done well users are able to move seemless across each version. Think about how you can apply this to your e-learning design if you are starting to think about mobile learning on tablet and mobile phones. How can you ensure that you experience is similar? Do you want it to be similar? Do you want your learners to realise that there is a difference between the PC and Mobile version? How will you buttons look? How do you want your content to display? What will you leave out on your mobile version?
There are lots of digital development areas where we can learn tips and techniques. E-learning is now increasingly looking towards mobile learning which will include the use of HTML 5 and other mobile technologies. Are you ready for the move to mobile technologies? What do techniques from graphic design do you use in your e-learning design? What elements from website design do you include in your e-learning design? Do you think that there are things from mobile app development that we can learn in e-learning design?