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.
Although this design language has been renamed to the Microsoft Design Language due to a trademark infringement, the style is still referred to as Metro around the web. Now you can find this look popping up on websites, apps and user interfaces.
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.
Website Design Examples
One common and obvious attribute of the Metro style is the use of a grid. Within the grid, however, you’ll find the rectangles and squares are of different shapes and sizes. Accurate alignment is crucial.
In the United Pixel Workers website below, tiles are used for displaying products and product information. Notice that the descriptive tiles use a pointer to indicate their relationship with a specific product. All of these elements could be used in an eLearning design.
The website shown below of the design firm, January Creative, uses a limited palette of blue and green for tiles. Photos are desaturated to shades of gray and many of the tiles are empty, adding to the restful white space in the 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.
It isn’t always easy to find white icons, but you can find or buy black icons and turn them white with a graphics editor (see my list of icon sites).
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? If you do, please share the link to your design in the Comments section below.
Get the latest articles, resources and freebies once a month
plus a Visual Design Checklist.