Create A Metro Style Design For eLearning
The visual look of the Metro design style came from Microsoft’s Windows Phone 7 and is now used in other products, such as Windows 8. It consists of bright tiles, clean typography, white icons and and very little chrome. The visual elements draw from the flat design trend, which reduces objects to a simple look. There are no shadows, shiny gloss or 3D effects.
It looks like it would work well for eLearning design too. It’s easy to implement, kind of cheerful, and doesn’t have that typical eLearning look. If you’re looking for a fresh approach, consider incorporating the Metro look into your next eLearning or mLearning project. Below are some examples for inspiration and then an explanation of how to create an eLearning Metro design.
Three Steps for a Metro eLearning Design
I decided to try out this style with a course that teaches medical researchers how to bill for their studies. This dry but necessary content could use some brightening up. And creating squares and rectangles in a grid is one of the easiest designs to create and modify. Here’s how you can do it in three easy steps.Step One: Create the Tiles.
Start with a set of colorful tiles in a grid arrangement you find pleasing. Use colors appropriate for the audience and content. Vary the size of the rectangles but use size, shape and color to create balance. I did this project in Photoshop, but it could be easily done in PowerPoint or other tools.
I noticed that in many of the Metro designs I saw, the saturation or vividness of the colors were consistent throughout the design, so that no one particular tile would stand out. I played around with various saturations to see how it would work if the saturation was not consistent. I started with this design below for a title screen. This design could also work for a menu screen, where a subtle animation would get triggered upon selecting an item.
Step Two: Add text and images.
When your tiles are arranged, add text, icons and photos. You could leave a few tiles empty, as in one of the website examples above. If you are creating a title graphic, you may want to place the title in the upper left because that’s where most people look first.
In my example below, I made the title box white and purposefully made the text colorful so it would be a focus of the graphic. Still, it’s hard to compete with the photo of the doctor on the right. That’s why in Step Three I flipped the doctor image so his eyes were pointing in toward the design. After adding the objects, I had to increase the saturation of some colors to provide greater contrast with the white text and white icons.
Step Three: Tweak until the design works.
Designs rarely work the first time. Play with ideas, move things around and try different photos and icons. Although I purposely placed my icons in a centered position, it could be more interesting to align them right or left.
In the draft below, the doctor photo on the right is flipped. It’s always best to have people looking in toward the design if you want to bring the focus back in. I also added text to show the three sections of the course for balance. And I exchanged the needle icon for a fatter pill bottle icon. I just thought it worked better in that space. If this were a menu design, I would follow the section menu color palette throughout the section, in some way.
What do you think of the Metro style? Are you going to try it?
For More Information Visit : Here
