PRINCIPLES OF EFFECTIVE PAGE LAYOUT
Effective layout is a topic that deserves volumes, but I would like to summarize six principles which every designer should keep in mind. These principles apply to every form of visual layout, from web pages to eLearning modules, to posters and magazines. Let’s examine them now:
Balance exists in two forms: symmetrical and asymmetrical. It deals with distribution of weight. In terms of graphics, weight is measured by the size of an element, its density, darkness or contrast, colour, and the thickness of its lines.
Symmetrical balance means that the elements on the page are arranged in such a way, that there exists a line or lines of reflection. Symmetry can exist horizontally, vertically, across diagonals, or any combination of the above. Certainly, not every graphic and element on the page has to be a perfect reflection of its counterpart, rather, the weight of the elements is considered when establishing symmetry.
Asymmetrical balance doesn’t mean lack of symmetry. It is an arrangement of unlike objects of equal weight on each side of the page. Whether symmetrical or asymmetrical, balance should exist unless you are trying to evoke a feeling of dissonance or uneasiness. If you are too focused on the details, sit back and squint your eyes as you look at the page. Establish whether the page is balanced, or if elements should be moved around to create a better sense of harmony.
The Principle of Proximity states that to group related items on a page, you must bring them physically close to each other. For information to be perceived as cohesive, it should be organized into groups of related elements. This approach will make it both easier to be read and remembered. Proximity implies a relationship. By grouping similar elements together, the page becomes more organized. The reader understands where to begin reading, and the white space becomes more organizes as well.
The Principle of Alignment states that nothing should be placed on a page arbitrarily; everything should have a visual connection to something else on the page. When elements are aligned, they create a stronger, visually cohesive unit. This will help in organizing and unifying the page.
Some aspect of the design should be repeated throughout the entire page. Repetition can exist in many forms, from design elements to font, bullet list, colour, lines or shapes, or even a spatial relationship. Repetition helps to organize the information and unify parts of the design. Repetition can exist on a single page, or throughout a collection of pages. Corporate branding, for example, uses a repetition of the same logo, colour scheme, font use and spacing to establish a strong corporate identity. Repetition creates consistency.
Contrast is a powerful tool to attract attention and add visual interest to your page. If two items on the page are not exactly the same, then make them different – REALLY different!
Contrast can be achieved by combining serif and sans-serif fonts, varying boldness, line thickness, colours, shapes, sizes, spacing, images and so on.
White space, or negative space, is the absence of text and graphics. It doesn’t have to be white, it is whatever colour the background of your page is. White space provides visual breathing room for the eye, and keeps things from being too cramped, busy and overwhelming.
Although white space is the lack of information, it doesn’t mean that it’s unimportant. White space is essential in creating an elegant appearance, composure and harmony. Novice designers often feel compelled to fill the entire page, but it’s important to remember that in design, sometimes less is more.
At our company, we apply the principles of effective page layout in a wide variety of eLearning applications, modules, and graphic materials. If you would like to learn more, please visit our website:
We specialize in bringing eLearning to the next generation through a variety of highly effective means, from traditional classroom training to eLearning and eGaming designed to maximize learning effectiveness and retention.
#pagelayout #design #graphicdesign #layout #effectivelearning #gamecreation #gamedesign #gamedevelopment #mLearning #learninggames