visual design of course presentation materials f teaser course

Visual Design of Course presentation Materials


Know what you want your audience to take away.

Present Content

in a Context

that will be RemembeRed.

Exercise How do youR visuals

CuRRently staCK up?

the thought bubble and typeface change serve as visual cues to audience.


your visuals should

SUPPORTyour message without taking over.

When your visuals don’t support your point, your message is lost.


areas to focus on to create professionalpresentations are: 3


areas to focus on to create professionalpresentations are:

1. DESIGN (Layout & Theme)3



1. DESIGN (Layout & Theme)

2. TYPOGRAPHY

3



1. DESIGN (Layout & Theme)

2. TYPOGRAPHY

3. IMAGERY

3

Design layout & theMe


Like with any audience you are building

T R U S T with each slide.

Have a plan.

Don’t show up, unprepared.

Visual Design of Course presentation Materialslayout

create a strong opening slide.

follow it with designs that

clearly reflect and follow

choices made in the first slide,

i.e. color, style, tone, format.

slide courtesy of steven van belleghem @ slideshare.net

slide courtesy of ?????????????????? @ slideshare.netslide CouRtesy of buRson-maRstelleR @ slidesHaRe.net

slide CouRtesy of buRson-maRstelleR @ slidesHaRe.net

instead...

slide CouRtesy of fluid studios @ slidesHaRe.net

slide CouRtesy of aRtstoR

or...

Il et moste opta ant quis sita consequam, core quianis et hil inis et volupta temporeium volecerro endellant ipsum rat et as ut quiatur, aut faccae es quissitis maximintist quia volorepel idusande delitio rehende lloratusant laut aut evenest, coritatati dolor seque nis et et qui dolupicabo. Et quam eaquodi anditio nsequi in rempori aestin repel int, voluptam facestotat fugitiorest, si solecep udipsaperro te qui sitaepe rroreped que nusandam il illuptas alibus endisciatur,

HEADER

or...


HEADER

or at the very least, create

hierarchy with your header,

making it bold and in a color.

even a really light color in the

background.


HEADER IN COLOR

Visual Design of Course presentation Materialscolor palette

piCKing ColoRsPick a 3-10 colors that you can build your presentation around. One of them needs to be a color to use as an accent.

use resources like

www.design-seeds.com

or find a picture and use the color

picker to create your own.

this is the palette being used in this

presentation

typography

Hard to believe but there is more to creating professional looking materials than simply picking the right typefaces.


elements to consider: 12


elements to consider:

1. SERIF OR SANS SERIF12A Aserif

sans serif



1. SERIF OR SANS SERIF12A Aon paper

on screen



1. SERIF OR SANS SERIF

2. TYPE CHOICE12

Exercise type speaKs !!!

image © tRaCi bautista

slide CouRtesy of aRReHome @ slidesHaRe.net

I, ,

UNDERSTAND THAT MY CHOICE OF FONT HAS THE POWER TO SUBCONSCIOUSLY & INCORRECTLY SET THE TONE FOR A PIECE OF PRINTED MATERIAL, AND

AS A RESULT PROMISE TO SERIOUSLY CONSIDER WHETHER COMIC SANS IS AN APPROPRIATE FONT

CHOICE BEFORE USING IT IN ANY PRINTED WORK IN THE FUTURE.

SIGNED

THE COMIC SANS PLEDGE

slide © matt dempsey www.ComiCsansCRiminal.Com




2. TYPE CHOICE

3. COLOR CONTRAST

12

slide CouRtesy of oKlaHoma dept. mental HealtH @ slidesHaRe.net


your typography is doing its job when you don’t notice it.




2. TYPE CHOICE

3. COLOR CONTRAST

4. SIZE

12

slide CouRtesy of fluid studios @ slidesHaRe.net

slide CouRtesy slidesHaRe.net


for printed documents your body type should be between 8 – 11 points.

iMagery

When you use visuals for the sake of shocking your audience, you run the risk of the viewer remembering the image but not the message.

Visuals should support the message NOT subvert it.

Exercise wHat song was madonna singing wHen sHe woRe tHe Cone bRa?


elements to consider: 7



1. PROXIMITY TO THE TYPE7

When type and imagery are too

far apart they connect more with

the outside edge than they do with

each other.

IMAGE

TYPE

Don’t separate the type and image too far or it will appear that the type is repulsed by the image.



1. PROXIMITY TO THE TYPE

2. BACKGROUNDS7

Look for backgrounds that have LOW CONTRAST and are not busy.

Some images make it too difficult to read the type and there is too much type to be able to read the image.

great example of what not to do, this is too

hard to read text or the image behind.

avoId thIs type of desIgn WIth a furry.

you will confuse and frustrate your

reader, losing that trust you have been

building.

slide CouRtesy of slidesHaRe.net



1. PROXIMITY TO THE TYPE

2. BACKGROUNDS

3. GRADIENTS

7

Building

TRUST or building confusion?

gradients muddy the message.

You are putting more importance on the form of the communication rather than focusing on the message.

is this hurting your eyes?