For a more modern visual design, consider adding monochrome images to your courses. These images are stark, sometimes overexposed (meaning lots of white and a loss of details), and typically black and white.
They don’t have to be just black and white though. Sometimes a pop of color is intriguing. If you have the capability, you can add the pop of color yourself and have it match a primary color of your course.
Monochrome visual design doesn’t always have to be black and white either. It really just means a single color. This could be a cool blue color. Sometimes, it is also sepia (tan/yellow). Other times, it might be shades of brown or green.
WHERE DO WE SEE MONOCHROME VISUAL DESIGN?
Look at the Apple web site. It is very clean and lacking in color. The color it has pops.
Mint.com is another site that is fairly monochrome in design. In this design, the green and aqua blue of their color scheme pops against this stark gray and white color combination.
Here are some sites that can offer some inspiration for monochrome design:
- http://www.inspirationti.me/websites/black-and-white/
- http://www.webdesignerdepot.com/2009/03/50-monochromatic-website-designs/
- http://inspirationti.me/websites/monochrome/
MONOCHROME EXAMPLES FOR ELEARNING
Here are some photos covering various industries that represent the monochrome style.
MONOCHROME IS NOT ALWAYS BLACK AND WHITE
You can have a monochrome image that is MOSTLY black and white. Here are some examples of images that have bits of color, but fit the monochrome style.
HOW DO I CREATE A MONOCHROME IMAGE?
Let’s say you want to incorporate this style, but you don’t actually have a monochrome image to start with. You can create one in PowerPoint very easily.
Here is a video we did on how to create a monochrome image, as well as how to leverage this style within your eLearning projects.
Imagine you are creating a course that has to do with construction. You have this image and you want it to be your opening screen.
To make this monochrome, select the image and click the Picture Tools tab. In the upper-left, you see the color button.
The very first item is 0% saturation or Black and White. Select that and your color image is now monochrome.
You can add color to it by adding a semi-transparent box on top of it and color it to your desired level.
Here are some variations on the concept. They are at 70% transparency.
It’s really very easy to make something that looks clean and modern with this style.
MORE EXAMPLES
SOMETHING TO WATCH OUT FOR WITH MONOCHROME VISUAL DESIGN
With these types of images, there are usually areas of dark and light. Be aware of this as you lay out your text on the screen. You want that to be sure you can read any text you may include.
Look at these images as an example.
You might be able to use the dark chairs to place white text. Also, the area on the right already has a semi-transparent box from the glass in the photo. You could use this area to add darker text.
This photo has a lot of dark areas. It would be to your benefit to use white text on this type of an image or create a semi-transparent box and put the text within it. That would make it easier to see.
You might be able to creatively use a couple of the areas in this photo. For example, could you add dark text over the surgical mask? What about adding white text in the upper left or right corner?
What if you altered the image to look like this? I added a box with a gradient fill to match the background of the photo. Now, I have a large monotone area to work with for white text.
You could even flip the image if you wanted to have the open space to the left.
It all depends on your need and which you think is visually more appealing.
HOW WOULD YOU USE MONOCHROME VISUAL DESIGN?
Think of two or three times you can take advantage of this image style in your eLearning. Share them with the community, so we can all learn from them.
Would you use this as a title screen? What about a content screen? Is there another way to use this that we did not mention? Let us know.
Join the Discussion!