{"id":4722,"date":"2019-03-06T15:28:30","date_gmt":"2019-03-06T13:28:30","guid":{"rendered":"http:\/\/onlinelearning.aalto.fi\/?p=4722"},"modified":"2019-06-18T15:02:40","modified_gmt":"2019-06-18T12:02:40","slug":"creating-visual-material-basic-principles-of-design","status":"publish","type":"post","link":"https:\/\/onlinelearning.aalto.fi\/aol\/blog\/news\/4722-creating-visual-material-basic-principles-of-design","title":{"rendered":"Creating visual material \u2013 Basic principles of design"},"content":{"rendered":"

Your visual material sucks.<\/p>\n

This is a bold statement, but most probably a true one. Many people struggle with creating visual material, and whether it\u2019s a presentation, a poster or a project assignment, badly designed visual material can obstruct your message and frustrate your audience.<\/p>\n

But don\u2019t worry, in this article we will go through 3 simple principles that will help you to create better visual material.<\/p>\n

A quick side note: Every design process should start by defining the purpose, the context and the audience of your material. If you don\u2019t know why and for whom you are creating your material, you won\u2019t produce the right thing. Purpose, context and audience has to guide your whole design process.<\/em><\/p>\n

1. Hierarchy<\/h2>\n

A good hierarchy establishes an order of importance<\/strong> within the material. It helps your audience to navigate the material and extract relevant information.<\/p>\n

Let\u2019s look at an example.<\/p>\n

The piece below is an excerpt from \u201dA Foundation Course in Reading German\u201c<\/a> by Howard Martin. Without a visual hierarchy, titles, objectives and content create one big wall of inaccessible text, making it difficult to understand the underlying information.<\/p>\n

\"An<\/p>\n

This is an extreme example, for sure, and not something you would find often. But notice how a clear visual hierarchy makes this text much more accessible to the audience:<\/p>\n

\"An<\/p>\n

A clear hierarchy in the text allows users to understand the function and content of each section easily and enables them to isolate certain information based on its styling. Prospective students could now quickly skim the objectives to decide whether the workbook matches their learning goals.<\/p>\n

Creating visual hierarchy<\/h3>\n

There are a few basic methods to create visual hierarchy:<\/p>\n

Size<\/strong><\/h4>\n

One of the easiest ways to create hierarchy. Large elements (text, images, etc.) catch the eye first.<\/p>\n

\"An<\/p>\n

Color<\/strong><\/h4>\n

Again an easy way to signify different levels of importance. However, you should avoid relying solely on color to indicate differences. Not only can this cause problems with printed material (think of your black-and-white only office printers), but keep in mind that about 10% of males and 1% of females have some form of color blindness, and thus cannot perceive color or color differences.<\/p>\n

\"An<\/p>\n

Placement<\/strong><\/h4>\n

Placement relates to the placement of elements within a layout and the position of those elements in relationship to each other. The law of proximity<\/em> states that \u201dobjects or shapes that are close to one another appear to form groups\u201c (en.wikipedia.org\/wiki\/Principles_of_grouping)<\/em>, thus creating distinct, related sections. For text especially, this means that line and paragraph spacing have a significant impact on creating hierarchy.<\/p>\n

\"An<\/p>\n

Shape<\/strong><\/h4>\n

For text based material especially, using contrasting fonts (i.e. fonts whose letter shapes differ clearly) can help to establish an order of importance.<\/p>\n

\"An<\/p>\n

Combination<\/h4>\n

In most cases you should use a combination of the above mentioned methods. Which and how many depends on your particular material and audience.<\/p>\n

\"An<\/p>\n

As we have seen in this section, to create an effective hierarchy, the various elements of your material need to be sufficiently different from each other. This leads us to the next point:<\/p>\n

2. Contrast<\/h2>\n

Contrast focuses the attention<\/strong> of the audience. Applying contrast helps to highlight and emphasize important information.<\/p>\n

The following example shows how contrast can be used to lead the attention of the audience to relevant information, while at the same time de-highlighting secondary elements.<\/p>\n

\"An

Without contrast. (Photos by Alexis Brown on Unsplash)<\/p><\/div>\n

\"An

With contrast<\/p><\/div>\n

Contrast is an extremely powerful tool, and can be used for any type of visual material \u2013 posters, videos, websites, paintings and many more.<\/p>\n

Creating contrast<\/h3>\n

Again, these methods can help to create contrast:<\/p>\n

Size<\/h4>\n

\"An<\/h4>\n

Color<\/h4>\n

See the notes on using color in the previous section.<\/p>\n

\"An<\/p>\n

Placement<\/h4>\n

\"An<\/p>\n

Shape<\/h4>\n

\"An<\/p>\n

De-highlighting<\/h4>\n

Rather than adding more elements, one of the easiest ways to effectively highlight important information is to remove or de-highlight irrelevant information.<\/p>\n

\"An<\/p>\n

 <\/p>\n

A word of warning: Be careful when highlighting information. As with its physical counterpart, highlighting too many areas can lead to the opposite of the desired effect.<\/em><\/p>\n

\"Books'

Source: medium.com\/@julia.tincombe\/cramming-101-how-to-study-smart-d9edfc0d0d74<\/p><\/div>\n

3. Consistency<\/h2>\n

As powerful as hierarchy and contrast are as visual principles, neither can work if not used in combination with consistency.<\/p>\n

Consistency unifies your material<\/strong>. It ties together elements with the same function and gives a coherent & professional look. Using colors, fonts, imagery and positioning<\/strong> consistently helps the audience orient themselves and extract information quickly.<\/p>\n

Looking at the following example, you will notice how you need to mentally re-orient yourself on each of the three cards before being able to take in their content. Using different text styles, positioning and picture styles obscures the fact that they essentially present the same type of information, and makes it hard to compare them.<\/p>\n

\"Three

Cat by Michael Sum on Unsplash, openclipart.org\/detail\/306091\/cartoon-dog-portrait, openclipart.org\/detail\/287943\/bird-silhouette<\/p><\/div>\n

Compare this with the following example. Instead of using the majority of your mental capacities for reorienting yourself in the material, you could now use if for more important and relevant tasks. In this specific example, understanding the difference between a cat, a dog and a bird.<\/p>\n

\"Three

Cat by Michael Sum on Unsplash, Dog by Nikolay Tchaouchev on Unsplash, Bird by Mathew Schwartz on Unsplash<\/p><\/div>\n

Not only does it reduce cognitive load, creating consistent visual material can also increase efficiency (e.g. having buttons on a website look and function the same way allows users to navigate quicker) and support recognition (e.g. the consistent use of a certain shade of red makes Coca-Cola cans easily recognizable).<\/p>\n

To sum up:<\/p>\n

\u201cThings that are the same should look the same. Things that look dif\u00adfer\u00adent should actu\u00adally be dif\u00adfer\u00adent.\u201d \u2013 Matthew Butterick, Typography for Laywers<\/em><\/a><\/p><\/blockquote>\n

Recap<\/h2>\n

Each of the three principles in this article is highly effective on its own, and they become even more powerful when used in combination. As I mentioned before, the purpose and audience of your material should always be the guiding ideas behind all your design choices, but asking yourself the following questions can make the difference between confusion and clarity.<\/p>\n

So ask yourself:<\/p>\n

    \n
  1. Hierarchy: <\/strong>Do I establish an order of importance?<\/li>\n
  2. Contrast: <\/strong>Do I lead the focus to the important points?<\/li>\n
  3. Consistency: <\/strong>Do same elements look the same?<\/li>\n<\/ol>\n

    I promise, that keeping hierarchy, contrast<\/strong> and consistency<\/strong> in mind, you will create visual material that wows your audience and communicates your message efficiently.<\/p>\n

    \n

    Further readings:<\/h3>\n