Basic design principles: The tools of the trade
“One only needs two tools in life: WD-40 to make things go, and duct tape to make them stop.”
G. M. Weilacher, American humorist
Once you have decided on the color scheme of your e-Learning course, you can begin considering the other elements that make up your page, slide, or compositional layout. Effective graphic design is not a haphazard collection of elements. It is an arrangement of objects into a visual composition with the intention to communicate effectively. Regardless of profession or medium, the principles of design are fundamental; they apply readily on canvas, film, paper, and even on a Web browser. There are many principles that apply to design, but we will only be covering the five that are of particular interest to us. These directly relate to page composition in an e-Learning courseware. They are: balance, proportion, dominance, rhythm, and unity.
To illustrate the design basics in more concrete terms with which we can relate, we will use the learning modules of The Basics of Employment Standards (http://www.hreuat.gov.ab.ca/employmentstandards/learning/legislation/) as examples. The client, Alberta Employment and Immigration, Canada, wanted to make the provincial employment standards accessible and digestible by the general working population. What would otherwise be an intimidating dry exposition of provincial code and regulations needed to be modular and “friendly” in its presentation, and have a broad appeal. We will briefly describe each principle, give an example, and where appropriate, provide some practice tips.
Balance
Balance is the concept of visual equilibrium. It relates to our physical sense of balance where two opposing forces in a composition work together. In Figure 2A, the combination of texts in the course menu and the slide content make the overall composition lopsided to the upper left. The addition of an image in Figure 2B balances the overall composition. Balance creates a unifying effect as it blurs the individuality of each element on a page into one piece, allowing the viewers’ eyes to flow seamlessly from one element to another.
Proportion
Proportion is about the relationship between two objects, whether it is one to another, or a part to the whole. In a visual composition, proportion can convey weight, distance, and interest. Look at the graphical composition of the Canadian dollar with the percent sign in Figure 3. Using scale (the size of the twenty-dollar and ten dollar bills) and color (the dollar bills vs. the percent sign) creates the illusion of depth. Imagine what would happen if the dollar bills were of the same size, and the percent sign was colored differently. There would be neither depth nor gradation of interest. The graphic would be flat and dull. Creating a page that is well proportioned reduces the feeling of visual clutter; sometimes less is more.
Dominance
The principle of dominance creates degrees of importance and interest. The lack of dominance creates visual chaos and loss of direction. Establishing levels of dominance minimizes confusion and draws the eye to the intended starting point of the composition. In Figure 4, the designer considered that the learner is familiar with the overall purpose of the course menu and the banner indicating the current item on the menu. As a result, the user’s eye goes immediately to the instructions on the page.
Rhythm
Rhythm is the principle of design used to create a sense of movement and pattern. It is typified by a repetition or alternation of elements in set intervals. In Figure 5, a single image representing the idea of “days off” would not have sufficed. To capture that concept, images of activities in shapes of equal size and at regular intervals suggest pattern and relatedness.
Unity
The concept of unity refers to the relationship of the parts to the whole; it is the principle that makes seemingly unrelated elements work together as a whole. Without unity, a courseware page containing a collection of elements is nothing more than that, a collection, rather than a composition.
Figure 6 is both the landing page and the main navigation page of a course. It consists of texts varying in size, color, style, and weight and a navigational graphic (nine puzzle pieces) made up of individual graphic buttons. The text making up the welcome message on the top of the page creates a link with the navigational text (the modules of the course in simple text buttons) at the bottom by stretching across the page from left to right. The title text element (Basics of Employment Standards), in blue, connects to the navigational graphic (each piece representing a module in the course) and the corporate logo using color. The “movement” of the blue ribbons flowing across the graphic towards the text suggests the link between the two types of navigation.
For more information on design principles and other design techniques you can employ when putting together your next courseware, read Joshua David McClurg-Genevese’s article on The Principles of Design.
Conclusion
When we first considered writing this article, we wanted to express our passion … no ... our conviction that visual design is a critical component in e-Learning courseware. As the saying goes, “A picture is worth a thousand words.” And although some say that, “Art is design, and design is art,” it is a fact that design is an acquired skill, the basics of which anyone can apply.
It is an uphill struggle for learners to constantly have to go against their better “judgment,” and convince themselves that what they are reading or learning is indeed worthwhile. Design is about user experience. Knowing that there is a correlation between design aesthetics, first impressions, and its subsequent impact on the overall learner experience is a step in the right direction. Do your learners a favor and invest the time, effort, and resource to create an aesthetically pleasing learning environment to make the learning experience that much more powerful.
References
Brady, Michael. (1998) “Art and Design: What’s the Big Difference?” Eyesite. Retrieved August 15, 2008, from http://www.unc.edu/~jbrady/Essays/Art_Design.html.
Guralnick, D.A. (2006) “User Interface Design for Effective, Engaging, E-Learning”. Retrieved August 16, 2008 from http://www.kaleidolearning.com/Effective%20E-Learning.pdf.
Knutson, J.F. (1998) The Effect of the User Interface Design on Adoption of New Technology. Dissertation Abstracts International: Section B: The Sciences and Engineering 59(3-B), 1399.
Lindgaard, G. (2006) “Aesthetics, Visual Appeal, Usability and User Satisfaction: What do the User’s Eyes Tell the User’s Brain?” Retrieved July 15, 2008 from http://www.swinburne.edu.au/hosting/ijets/journal/V5N1/pdf/Article1_Lindgaard.pdf.
Lindgaard, G., Dudek, C., Fernandes, G., & Brown, J. (2006) “Attention web designers: You have 50 milliseconds to make a good first impression!” Behaviour & Information Technology, 25, 115-126.
McClurg-Genevese, J.D. (2005) “The Principles of Design”. Retrieved August 2, 2008 from http://www.digital-web.com/articles/principles_of_design.
Mynatt, C.R., Doherty, M.E. & Tweney, R.D. (1977) “Confirmation bias in a simulated research environment: An experimental study of scientific inference”. Quarterly Journal of Experimental Psychology, 29, pp. 85-95.
Norman, Donald A. (2004) Emotional Design: why we love (or hate) everyday things. Basic Books.
Rand, Paul. Misawa Lecture, MIT Media Laboratory, November 14, 1996. Quoted in IDEA Magazine, Special Issue February, 1997 by John Maeda. Retrieved September 15, 2008 at http://acg.media.mit.edu/events/rand/ideamag.html.
Wikipedia, The Free Encyclopedia (August 18, 2008) “Art”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Art&oldid=232634849.
Wikipedia, The Free Encyclopedia (August 21, 2008) “Design”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Design&oldid=233299747.
Wikipedia, The Free Encyclopedia. (August 19, 2008) “Graphic Design”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Graphic_design&oldid=232902353.
Wikipedia, The Free Encyclopedia (2008) “Jasper Johns”. Retrieved August 22, 2008 http://en.wikipedia.org/w/index.php?title=Jasper_Johns&oldid=230044106.
Zajonc, R. (1980) “Feeling and Thinking: Preferences need no inferences”. American Psychologist, 35(2), pp. 151-175.
