Monday, February 20

10 Visual Design Quick Tips

eLearning and slide presentations are highly visual mediums. The visual clarity of screens and slides can have a big impact on learning. If you're unsure what to do and how to go about designing the visuals for a training environment, here are some quick tips that might help.

1. Visual Design is Problem Solving
You solve problems all day long and you're probably pretty good at it. Coming up with a visual design is no different than other problems you must solve. First, define the visual problem (identify the goal and constraints); get ideas by brainstorming, sketching and researching what others have done; make decisions (ideally with input from others); and find a way to execute your solution.

2. The Screen or Slide is a Canvas
You're the painter. Think of the screen as a blank canvas. Don't let it be defined by an existing template. Start fresh by throwing away the standard approach with the title at the top and the content below. You might need it at times, but it will limit your potential solutions if you hang on to that approach at first.

3. Try One Typeface with Varied Styles
Without studying typography, it's difficult to know what typeface to use for an eLearning course or a slide deck. You can simplify this decision by using only ONE typeface in a course. A typeface that has several styles. Certainly bold and italic are necessities, but also heavy and condensed styles add more options. Then consistently vary this one typeface, as appropriate, using different sizes, weights and colors for different purposes. Some of my favorites: Myriad Pro, Helvetica, Franklin Gothic, Garamond, Gill Sans, Futura and Times.

4. Use Proximity to Indicate Relationships
We organize our perceptions according to certain brain rules. One of these is the Law of Proximity. When elements are placed close together, we assume there is a relationship between the elements. Use proximity to indicate which elements are related to each other so learners will know they are part of a group. Avoid using proximity when elements are not related, so you don't give learners the wrong idea.

5. Personalize Your Design
One way to give a design personality is to use a paper background for text or images. Don't overdo it, of course. For example, if you want to add a touch of informality, you might display text on a little note with masking tape or a paper with fold lines, as shown below. If you're going formal, perhaps a finely textured linen paper would work. Stock photo sites sell paper backgrounds or you can digitize one yourself.
6. Space is an Object Too
Think of visual space as an element of design, similar to image and text. Space and form are the yin and yang of visual design; without one, you can't have the other. White space or negative space refers to the area between and around elements and between elements and the edge of the screen. Use white space to provide balance and clarity to your design. This makes it easier for learners to process the visual information.

7. Let Characters Speak for You
eLearning courses tend to drone on. When it makes sense, switch it up and let characters (photos or avatar-types) do the talking.  You can use speech bubbles or just a connecting line to the text. When  characters speak, it transforms the content into a micro-story. Dialogue between two people, first-person statements or internal thoughts are usually better approaches to presenting information than didactic bullet points. (See Alternatives to Bullet Points for more on this.)

8. Crop Photographs for Focus
Your photographs will have more impact if you crop them to show only what's important. Most photos have extraneous visual information that may detract from your purpose. Examine each photo you use and identify where you want the viewer to focus. Then crop the photo so the focal point becomes predominant.

9. Simplify Your Color Palette
There's almost never a reason to go crazy with colors (I can't think of one, but I'm sure somebody will). Generally, using too many colors will confuse your learners, making it harder for them to focus on what's important. Simplify your palette to a few subdued and compatible colors. Then add one or two contrasting colors for accent and emphasis.

10. Repeat Elements to Unify a Design
A sense of unity will make your visual design feel like one integrated composition. One way to create this sense of integration is to repeat certain design elements. If you use some of the techniques in this article, repeat them in a consistent way. This creates a connection between the elements. The trick is to use visual repetition without getting boring.

Keep practicing!

Connie Malamed (@elearningcoach) publishes The eLearning Coach, a website with articles, resources, reviews and tips for learning professionals. She is the author of Visual Language for Designers and the Instructional Design Guru iPhone app.


Kelly Meeker said...

One additional resource on your tip on simplifying color scheme - Melissa Venable introduced me to Kuler and a few other tools:

Kuler specifically helps you select complementary color schemes that enhance presentation with monopolizing all the attention.

Connie Malamed said...

Great contribution! Thanks, Kelly.

Arte R said...

Great tips Connie. Another simple visual tool is to use basic shapes to showcase your ideas so that the focus is on the idea and not on the visuals.

Bartłomiej Polakowski said...

Great tips! However graphic is only one learning channel that has to be connected with others in order to balance cognitive load.

visual designers said...

You have provided great and useful information here in this post.

Connie Malamed said...

Responses to some of your comments:
@Arte R - That's a great tip, Arte. Use basic shapes rather than imagery, if that works for your concept. Thanks.

@Bartłomiej - Not sure about what you mean about "balancing" cognitive load, but yes research seems to say that visuals (including text) are only one learning channel. The other is auditory, if we're talking about eLearning.