Deconstructing Design II: This is Your eLearning on Grids

Length: 878 words. Reading Time: ~5 minutes.

Deconstructing Design (DD) is a blog series dedicated to reviewing an instructional design microcosm, typically a single slide or interaction. Readers are encouraged to confirm, challenge, or improve on the logic presented.

Context

In graphic design, grids are used to give a composition structure. Grids organize the elements of a design in relation to each other and the page/screen. To the non-designer, grids can feel restrictive and that they limit creative spark (especially if you're used to putting your design elements wherever you like and at any size you want). But, learning to use a grid effectively in eLearning design will help you bring consistency, harmony, and proportion to your projects. Or, in other words, they’ll help your projects look professionally designed.

In this blog, we’ll explore an eLearning template created for eLearning Heroes Challenge #139. Templates are another tool that can make designers feel restricted and controlled. Much like with grids, success with templates comes down to knowing when to stick with what you’ve got and when to deviate. This template has several different slide styles you can use directly or draw inspiration from.

• See the template here. 
• Download the template here. 
• Download the font family here.

First, The Grid

Grids are made up of columns and rows, that form margins, gutters, hanglines, and spatial zones. These elements provide the scaffolding for building your graphic project.

• Columns and Rows. Form the vertical and horizontal alignment of objects.
• Gutters and Hanglines. Form a consistent space given between objects.
• Margins. Form the white space around the objects and create a container for them.
• Spatial zones. Are the numerous shapes (for text or illustration) that can be formed using the other elements.

The 12 column grid is very popular because it allows you to divided the screen into halves, thirds, fourths, and sixths (and even fifths).

The grid shown here is a 12x8 modular grid; just one of endless possible variations. When dealing with eLearning, and screen real-estate is at a premium, a modular grid is generally most effective. The 12 column grid is very popular because it allows you to divided the screen into halves, thirds, fourths, and sixths. You can also divide the screen into fifths by not including the two outside columns, such as this example:

The objects on this slide are equally-sized and evenly-spaced, which is pleasing to the eye. However, it is their proportionate relationship to the working area that makes them “feel” designed.

Speed

For eLearning developers without a graphic design background, grids can significantly speed up your development time. Because grids give you a framework to build your eLearning on, you’ll spend less time “tinkering” with the position and layout of objects. Building a storyboard becomes faster too, as you can lay out your project on the grid before you begin developing to give your customer a better understanding of the proposed solution. In the following screen capture, the grid made the design process easier and quicker.

• How large should the folder be?
• How much separation should there be between tabs the folder tabs?
• How much of the inside of the folder should be showing?

All of these questions are answered by the grid.

Even in a simple slide such as this, dividing the slide into thirds, quickly identifies the appropriate angle and placement of an overlay shape.

Collaboration

One of the advantages templates is getting similar results when working with a design team. Team members can work on different parts of the course and get a very similar look and feel. However, this constrains the designer from creating unique slides and interactions to match the content. Alternatively, when groups of designers are working with defined styles and a grid system, they can create unique slides that are still consistent with the rest of the course. The following image shows four different slide styles held together by styles and grid alignment.

Grids help create a collaborative environment that can still be creative and flex to meet the needs of the content.

Flexibility

Many developers despise the idea of using a template, because they cramp their creative style and courses become “old hat” quickly. Grids on the other hand, allow you maintain your creativity license while designing quickly and collaborating. The following slide adheres to the grid and styles of the template, but it's hardly your traditional template slide.

Reduce Clutter / Encourage Whitespace

One of the most compelling reasons to use grids might be their ability to eliminate clutter and encourage whitespace. With an underlying grid visible (literally or figuratively) to the designer, the temptation to fill empty space goes away. Instead, the designer can see the grid lines that connect objects, connect the objects to the slide, and connect slides. “Seeing” the underlying grid helps you decide if more is needed, if something needs to be taken away, or if you’ve got it just right.

This could mean using a grid to create a flow chart that the user reveals slowly, such as this:

Or, simply leaving open space in a caption panel, such as this:

Or, opening up the entire screen before the learner engages with the content, such as this:

Conclusion

Grids are a powerful design tool used by the best graphic designers in the world. While you may not be a graphic designer by trade, if you’re building eLearning it’s important for you to build on your understanding of graphic design principles. Composition and layout are just the starting point, colour, shapes, visual hierarchy and many other concepts will help take your eLearning from “drab to fab.”

Follow Me on Twitter

Clint Clarkson is the VP of eLearning at Xpan Interactive, a digital-services firm that specializes in the delivery of custom eLearning solutions. He has 15+ years of evolution in Learning & Development as a facilitator, instructional designer, and leader. Connect with Clint on LinkedIn or follow him on Twitter.

If you liked this, you may also like:

Deconstructing Design I: Dart Flights Comparison