Create A Metro Style Design For eLearning

metro-elearning_thumbThe 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.

metro-windows-start

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.

metro-website1

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.

 metro-website2

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.

 metro-elearning1

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).

metro-elearning2

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.

 metro-elearning3

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 eLearning Coach delivered to your Inbox every few weeks, with ideas, articles,  freebies and resources.

Related Posts Plugin for WordPress, Blogger...

Comments

  1. tessello says

    Great to see the Metro look (and tiled layouts more generally) getting recognised for the massive potential benefits to learning designers.

  2. Montse says

    I didn’t care for the flat look at first, but I’m finding it more fun to work with. It’s deceivingly simple and takes a bit more work to get right than most people (include me) think.

    Here’s a template I put designed for Articulate’s eLearning challenge on flat design: http://montse.org/storyline/flat/

  3. Connie Malamed says

    Hi Montse,
    I felt the same way at first but started to love the trend. It just feels light. Like we’ve been weighed down with too much skeuomorphism all these years. It was needed at first, but not anymore. Look forward to seeing your design! I didn’t know about this eLearning challenge, so thanks. I’m sure others will be interested too.
    Connie

  4. Zifang says

    Great post! Recently I’ve across a few posts about using the Metro look. I like it, not just because it looks simple and clean, but it should work well on tablets and phones. Having a big area to touch is so much easier!

    @Montse – great template, I love it.

  5. tessello says

    @Zifang – I agree: The unexploreded strength of Metro-esque design is its implicit tactility. There’s something about the tiles that makes you want go get your hands on them, reach out and move them around, reconfigure them to your preferences. Or even just ‘open’ them up, to see what’s beneath them!

  6. Valary Oleinik says

    Great idea! I’m looking forward to creating a PowerPoint template to help set up something like this. It would make a great “home” slide for an interactive presentation that allows the presenter to dive into the various boxes as s/he is speaking or for a kiosk style presentation. Definitely would be a fresh look.

  7. Monze Ontiveros says

    I’m a elearning developer and graphic designer for PwC Mexico. I love this style, but maybe is around everywhere right now. In PwC we use it a lot, but we overlap the squares into each other. I think that with a twist is useful and easy to use and to produce. Love to see Microsoft setting a trend again!

  8. Jessica says

    Hi Montse,

    I loved your template you put together on flat design. You mentioned you designed this in Articulate. Can you possibly share with me, how you darken the rest of the tiles once you click on the tile you have chosen? I have been playing around with this and cannot figure how to do this!

    Many thanks,
    Jess

  9. Connie Malamed says

    Hi Jessica,
    One way you can try this, if you are using PowerPoint as your base, is to go to the next slide and let the darkening happen there. Then make a gray or black partially transparent box over the entire menu area, and copy and paste the enabled tile (the one you want bright) on top of your transparent darkened rectangle. If this doesn’t look great, you can place separate black and slightly transparent tiles over the items. If you don’t want users to have to click NEXT again, then move from the darkened slide in 1 second. In Storyline, you can do this with layers.

    Connie

  10. Montse says

    Hi Jessica,

    I am still working on this template series, but I would be happy to send you a sample. Please feel free to email me at montse at montse org and let me know if you work in PowerPoint/Presenter or Storyline.

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>