Design

Design Principles

Design Principles Less text More visuals Enhance & support

spoken word

Less text More visuals Enhance & support

spoken word

Unity All elements share

similar style Photos

color or b&w Illustrations

Cartoon or scientific

All elements share similar style

Photos color or b&w

Illustrations Cartoon or scientific


similar style Fonts

Ransom note style Serif / sans serif


Fonts Ransom note style Serif / sans serif

Choose one font for headings, one for body

text and one for emphasis.

Headings look good in bold.

Italics work well for emphasis.

Choose one font for headings, one for body

text and one for emphasis.

Headings look good in bold.

Italics work well for emphasis.


similar style Background


Background


similar style Background Animations


Background Animations

There are many waysThere are many ways

To fly in textTo fly in text

Most of themMost of them

Are distractingAre distracting


similar style Background Animations Transitions


Background Animations Transitions

Space Clutter devalues each

item Putting too many items

on a screen makes it hard to figure out what’s most important

Use empty space to emphasize non-empty space

Less is more

Clutter devalues each item

Putting too many items on a screen makes it hard to figure out what’s most important

Use empty space to emphasize non-empty space

Less is more

Space One idea

per screen

One idea per screen

the decline of modern musicthe decline of modern music

Color ‘color should be used in the

same way that type is used: to emphasize importance, not to decorate a page’

‘color should be used in the same way that type is used: to emphasize importance, not to decorate a page’

Color

easier to achieve consistency with just a few colors (complimentary or contrasting)

easier to achieve consistency with just a few colors (complimentary or contrasting)

Color

warm colors move forward cool colors recede

warm colors move forward cool colors recede

Color graduated tints

look more natural

graduated tints look more natural

Emphasis One clear focal point

Then subordinate supporting points No more than 3 levels deep

One clear focal point Then subordinate supporting points

No more than 3 levels deep

Emphasis size size

Emphasis Use a contrasting color to attract attention Use a drop shadow to increase contrast

Use a contrasting color to attract attention Use a drop shadow to increase contrast

Emphasis proximity proximity


GraphicDesign

Studio

Workshop


Graphic

DesignStudio

Workshop


Graphic

Desi

gn

StudioWorkshop


Graphic

Design

StudioWorkshop

Balance

Symmetrical Centered

Equivalent on both sides Formal Static

Symmetrical Centered

Equivalent on both sides Formal Static

Not necessarily identical

But equal weight Gives impression

of stability unchanging

Not necessarily identical

But equal weight Gives impression

of stability unchanging

Balance Asymmetrical Off-center Dynamic balance Informal Active

Asymmetrical Off-center Dynamic balance Informal Active

Balance Rule of thirds Rule of thirds

Screen Design Concepts Contrast Repetition Alignment Proximity

Contrast Repetition Alignment Proximity

Contrast Sufficient difference between

foreground and background Sufficient difference between

foreground and background Primary and secondary focal

points Use size, bold, italics to draw

attention

C

C

C

Repetition Consistent use of

font, color, background, graphic style, transition, animation … creates unity

Repetition with variation creates emphasis Training your viewer

Consistent use of font, color, background, graphic style, transition, animation … creates unity

Repetition with variation creates emphasis Training your viewer

Alignment Flush left Standard Predictable

Flush left Standard Predictable

Flush right Unusual

Interesting

Flush right Unusual

Interesting

CenteredHarder to read

CenteredHarder to read

Pick one and stick to itPick one and stick to it

Not too close to theedge of the screenNot too close to theedge of the screen

Proximity

Indicate relationships between items by grouping them together

Indicate relationships between items by grouping them together

Allow empty spaceAllow empty space

Building Interaction

Label the parts of the canoe

Building Interaction

Building InteractionThe Pictou Ferryboat is full when it has ten cars on board.

It is also full when it has six trucks on board. The ferryboat never carries cars and trucks at the same time.

The ferryboat made five trips across the river and was full on each trip. It carried a total of 42 cars and trucks across the river.

How many cars did the ferryboat carry altogether in the five trips?

Design

Education

Transcript of Design