Here at XLPro elearning, when I interact with the graphic design team, they are always on a mission to create something new and unique which has a wonderful visual appeal and at the same time fulfill the desired learning objectives. However, during my interaction, I did realize that e-learning graphic design is not a simple process and requires quite a bit of creative thinking…. ideation, attention to details and constant fine tuning. And like every other art it can be mastered with practice and experience.
After an in-depth discussion with my graphic design team spread over a couple of sessions, I have compiled a list of seventeen essentials for e-learning graphic design, which every e-learning designer must practice.
1. Understand the storyboard thoroughly
After going through the e-learning storyboard, the graphic designer should make notes about the various graphic design instructions to follow and should be clear about the level/s of e-learning as defined in the storyboard, as the complexity and the style of graphic design is going to be more or less defined by the level of e-learning.
It is recommended that the instructional designer or the instructional designing team gives a brief to the graphic designer/s about the style to be followed.
2.Conduct research on the client’s website/social media
Conduct a research to see what is the graphical style is currently followed by the client organization by visiting their website and their social media pages. This will give a good insight on the organizational culture- formal, ultra-formal casual etc., the brand positioning like fun, serious, inspirational, innovative etc, which will help you formulate the design idea.
For example, when we were designing for an agri conglomerate based in India and having a presence globally, we visited their website and found the use of red as a predominant color was high (as it was also a part of their brand color) whether it was for overlay or patterns. Moreover, they were extensively using photo images on their website as well as social media pages. So we went about the visual design of the e-learning course based on photo images and icons and usage of red color to bring the learner focus onto certain important learning elements on screen and it was an instant hit.
A good graphic designer will seek information on the brand guidelines, analyse the client’s website/s (group/brand etc), understand the current trends, etc. All this can help the designer to bring unique graphic design, which matches the storyboard as well as the organizational requirements.
3. Draw inspiration from the current design trends
The best way to know what designs are fresh and contemporary is to visit websites like:
We routinely visit ad agency and graphic design sites like envanto and also look at the project portfolios of e-learning companies and track award winning elearning examples to get idea about colors and design elements.
4.Discuss with the client about the “stated” and “unstated” needs
It is recommended to get on a call with the client to understand thoroughly what kind of e-learning graphic design the client prefers.
Some clients may be quite organized about their e-learning visual design requirements while some others may not be very clear as to how to give the inputs for visual design and what to expect as an output. Whenever as a graphic designer you are encountered with a situation where, the client is not able to express his requirements or has some “unstated needs”, your skills as a graphic designer are put to test. The best strategy in such cases is to present two or three demos/sample styles to the client to enable them to formulate their thoughts and state their needs.
A good start point in such cases could also be some free ready templates available on websites like Articulate.com or e-learning brothers.com.
5. Brainstorm for e-learning graphic style
Once the research and client discussion is completed the graphic designer must start the process of brainstorming various styles for e-learning visual design, which can best represent the content as per the storyboard.
Some of the styles which can be used in e-learning include-
Brainstorm each style to see if they fit the storyboard as well as the client requirement.
6. Understand color theory and choose the color scheme
Once a design style is zeroed down on choose the color scheme, which includes a thorough understanding of the color theory. Color theory is all about mixing right colors to get the desired visual design impact. Read my blog here to know more on how colors can impact the learning process. Certain tools like Adobe Color CC or Colorzilla etc can be a good start point for graphic designer to start off if they do not have many insights about it.
7. Choose typography
For a good e-learning design, good typography is a must as it enhances readability of the on screen text, aids the cognitive ability, creates a visual hierarchy, and even engages learners’ emotions
Fonts are generally classified as serif and sans-serif, please read my blog for more information on how to choose font.
While choosing fonts, keep a few important parameters under consideration:
Choose a font palette that is clean and use a combination of two font styles to suit the heading and body.
Ensure that the font size is easily legible for your learners. Usually, it is 12 to 16 pixels for the body in a typical e-learning screen.
Most of your e-learning courses are accessed through a web browser or mobile browser so it is important to choose font styles which render well in the browsers.
8.Creating e-learning design mockups
Once the e-learning design style and color scheme has been determined, the next logical stage is creating mock ups.
However even before we design mockups in XLPro, we choose/create from our standard e-learning layouts. Layout forms the base against which we visually convey the content or information we want to share with our learners. Once the design style, color scheme and layout is finalised, making a mockup is easy and quick.
However it is always recommended to create at least three variants of mockups so that no aspect of visual design gets missed out and any design bias get eliminated.
9. Presentation of mockups
Our graphic design team/project management team always makes it a point to present the mockup to the client. I feel this is a very critical stage as it serves the following purpose:
Present the thought process and “story behind the scenes” to the client and supplement it with visual reasoning.
State assumptions while making the graphic design like “we chose a modern decor background as we presume you have an open office culture” etc if any
Get to understand the client’s reaction to the mock ups and arrive at a common ground.
Set the tone for the visual design of the complete e-learning
10 Help “others” help you
Once the design mock up is approved by the client, the process of development starts, where the designer uses his creativity and visualization skills to complete the designs approved by the client. The designer uses various tools like Photoshop,Illustrator, Canva, after effects etc to develop the complete e-learning design slide by slide.
At this stage, the most important thing is to follow the cue of approved design and keep the client engaged and involved at each critical stage. This gives the client a feeling of ownership and involvement and they feel as if they were instrumental in designing a stunning looking e-learning module.
Like we keep our clients involved by showing them some important slides like slides where the video from their top management is being played or the look and feel of design assessments etc .
11. Maintain consistent look and feel
Be consistent with the font, design, style, color etc throughout the e-learning module.
For example, you cannot combine serious looking characters or avataars with funny or cartoon characters in the same e-learning module. Similarly you cannot choose a flat icon with a 3d icon.
12. Post production touch ups
After the e-learning design has been developed and integrated into the e-learning module, there might be changes coming up either due to the changes in storyboard or some other development at the client’s end like some design changes. At this stage the graphic designer might be required to make these changes and do the final touch ups.
13. Create reusable graphical assets and name them right
Having worked for over 100 projects in the span of less than 5 years, we understood the significance of creating reusable assets at a very early stage. For example, if we use an icon to denote information then, we will name it accordingly and include it as a part of our library so the next time we need to use an icon to denote information we can retrieve it quickly.
Reusable assets have many advantages like:
Ease of use
Saving of precious time
Easy to share it amongst your colleagues
14. Maintain a library of assets
While creating reusable assets, give them the right name create an index and maintain a library on some shared space as it is easy to retrieve such information.
Most of us don’t organize assets well especially when there is a live project running. However, we should revisit them in the free time and organize it for later effective use.
15. Be mindful of the graphics size
It is important to strike a balance between a well designed good looking e-learning course and one that is so full of bells and whistles in a way that the file size of the elearning course becomes too heavy and entire idea of rapid development is lost in the process. Tools like Photoshop have some good features to make images sharper and the colors more vibrant so that the image quality is not compromised and the size can be maintained.
16.Create responsive designs
Responsive design is about how you can better design or alter the user interface to take into account, the device being used and decide about what and how much content is to be shown. In responsive design planning and visualization are two very essential skills, which you need to exhibit as an e-learning graphic designer.
17. Create learner-centric visual designs
In e-learning graphics design it is very important not to deviate from the core objective, which is to keep the learner’s engaged and focussed on learning. Can e-learning visual designers really impact the learning? The answer is a big yes…..So create a visual design which engages your learners either through the use of rich imagery or avatars.
While most of the above-mentioned essentials look quite simple but the tendency to overlook these is quite high. So what do you think of these must follow essential steps of e-learning graphics design journey?