Pages Navigation Menu

Awesome eLearning Templates and eLearning Custom Development

Designing eLearning with a Grid

Websites and magazines have been using grid systems for years to design content and layouts. eLearning courses could benefit from applying this concept as well. It will help organize content and make it easier for a user to sort through and “digest”. Here are some details, resources and examples:

What is a Grid System? (From 978 Grid System)
“A grid is an underlying structure in which a design is built upon. It consists of rows and columns that are used to align text and images. It allows you, as a designer, to make placement decisions easier and more consistently. Typically, a design based on a grid will have excellent readability and a more professional, organized appearance.

Grid-use has been standard practice in print design for at least a half-century or more. This practice is now being applied to web design. In print design, horizontal rows are emphasized as much as vertical columns. In web design, however, the difficulty in controlling vertical space has led to more emphasis on columns.”

Possible Grid Layouts for Learning
Here are some images that might help you create layouts for your eLearning content. Note: You probably won’t have that as much text in your layouts. (Images from Mezzoblue.com “mezzoblue is a weblog about design, the web, and some other things.”)

PowerPoint Grid Designs
Many elearning authoring tools use PowerPoint. Connie did a great post on, “Designing with a PowerPoint Grid“.

Examples, Resources, and Tutorials

Design By Grid (This site has tons of resources.)

Here is a long presentation that covers the history of grids, examples, and how to create one. Grids are Good (Lots of content.)

Tom with Articulate discusses how to use a grid system to create unity.

 

Get Browser Measurements
Here is a resource to help you find the sizes of various browsers on different monitor resolutions. It also has iPad and iPhone screen dimensions. 978 Grid System – Browser Specs

 

Leave a Comment

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>

elearning_template