Text and images are two of the most commonly used elements in e-Learning. Often designers will simply use a block of text and insert a relevant image to support the text. While this is an effective method of design, using text OVER an image can create a much more dramatic and engaging effect. This style of user interface is becoming more commonplace in print and web design, so it’s only natural us e-Learning designers are taking note and applying it to our design methods as well.

Using text over an image while maintaining readability can be tricky. A few techniques I use to maintain readability are:

  • Darken or lighten the image
  • Add a text box or container
  • Blur the background image

I applied all three of these techniques in the below example, designed for an Articulate e-Learning challenge.