Visual Design Design Skill Simplicity Design Skill

Preview:

Citation preview

Visual Design

Design Skill

Simplicity

Design Skill

Design Skill

Actual untouched screen shot… Actual untouched screen shot…

Design Skill

My personal favorite… My personal favorite…

Design Skill

Sample White Design• Keep it Clean

• Simply and Elegant

• White backgrounds will glare

• Use images sparingly – but striking

Design Skill

Design Skill

Design Skill

Design Skill

Simple design rules*One point per slide1

2 Few, matching colors

3 Very few fonts

4 Photos, not clipart* Pun intended

Design Skill

Using Fonts

Avoid thin letters1

2 Avoid fonts hard to read3 Serif or Sans serif?

4 Readable Size…

18 20 24 28 32 36 40 44 48 54

6066728088

96 104 112 Design Skill

Design Skill

Design Skill

Design Skill

Ditch Stupid “Rules”

Do you remember the rule:

• 7 lines per slide or less• 7 words per line or less?

• Well, it is just plain stupid• If you follow this “rule”• You get a slide just like this

Cramped.

Boring.

Cramped.

Boring.

Clip Art Hall of Shame

Clip Art Hall of Shame

Design Skill

Design Skill

Design Skill

Avoid Cheese…

Weird sound effects1

2 Flying text

3 Strange animations

4 Random transitions

Contrast

Difference

Design for Non-designers

Design for Non-designers

Contrast is when two elements are different…Contrast is when two elements are different…

If elements are different, make them

very different

Can be created with type, colors and lines

Contrast adds interest and readability

Contrast shows the viewer what is important

If elements are different, make them

very different

Can be created with type, colors and lines

Contrast adds interest and readability

Contrast shows the viewer what is important

Design for Non-designers

White over the PictureBlack over the PictureRed Over the Picture

Design for Non-designers

Semi-transparent background

Design for Non-designers

Design for Non-designers

Repeating Elements

Repetition

Design for Non-designers

Design for Non-designers

Repetition can be achieved through…Repetition can be achieved through…

Fonts – Use only two or three different fonts

Colors – Should be consistent

Lines – Use only one or two line variations

Graphics – Consistent location and size

Fonts – Use only two or three different fonts

Colors – Should be consistent

Lines – Use only one or two line variations

Graphics – Consistent location and size

Design for Non-designers

Intentional

Alignment

Design for Non-designers

Design for Non-designers

Alignment makes elements look connected…Alignment makes elements look connected…

Nothing should be placed on page arbitrarily

Aligned items are connected by an invisible line

Alignment includes adequate boarders

Save center alignment for video

Nothing should be placed on page arbitrarily

Aligned items are connected by an invisible line

Alignment includes adequate boarders

Save center alignment for video

Design for Non-designers

Design for Non-designers

Like things together

Proximity

Design for Non-designers

Design for Non-designers

Proximity makes elements look connected…Proximity makes elements look connected…

Related items should be together

Purpose is to organize page for viewer

Never have more than five separate elements

Proximity can be encouraged with tables

Related items should be together

Purpose is to organize page for viewer

Never have more than five separate elements

Proximity can be encouraged with tables

Design for Non-designers

Design for Non-designers

Chris HeltonTeresa Maze

Emily RyanEmily

Williams

Morehead State UniversityCollege of Business and Information

BITE: The Key to the FutureBusiness and Information Technology Education

Before & After

Before & After

Before & After

Before & After

Recommended