ProfessionallyProfessionally

Basic Basic Elements Elements of Designof Design

4Classifications

of TypeClassifications

of Type

1. Serif Type:

•Characterized by decorative strokes on the ends of the main strokes

•Very readable type, good choice for body text

Classifications of TypeClassifications of Type

A F s t

2. Sans Serif Type

•Characterized by the lack of decorative strokes on the ends of the main strokes.

•Not as easy to read as serif type; good to use in large sizes, such as for headlines or other display purposes.

A a A A A

Classifications of TypeClassifications of Type

3. Script/Cursive

•Type resembles handwritten letters.

•Can be formal or casual.

•Good for certain types of ads and invitations.

Classifications of TypeClassifications of Type

Classifications of TypeClassifications of Type4. Decorative/Novelty

•Type created for special occasions

•Usually very casual

•Can be used to set mood for story

BasicsBasics•Don’t mix more than two styles

on a page.•Using too many fonts takes away & is distracting. So is using all caps for text font.

•Choose a serif & sans serif & use variations of the fonts like italics, bold, etc. for emphasis.

BasicBasicss• Don’t mix more than two styles on

a page.

• Choose a serif & sans serif & use variations of the fonts like italics, , underline, bold, etc. for emphasis.

Proximity/White Proximity/White SpaceSpace

• Proximity deals with how close each element is to another element.

• Use white space to group info which relates to each other together.

Grouping, Grouping, spacing, spacing, rule linesrule lines

Group information which goes together and

create enough white space around it so that it

is set off from other information.

AlignmentAlignmentThis text is a sample of type, which has been justified, left and right, which means it has equal margins on each side.

This text is a sample of type, which has been aligned left. This means the text is straight on the left and jagged on the right.

This text is a sample of type, which has been aligned right. This

means the text is straight on the right and jagged on

the left.

This text is a sample of type, which has been

centered. This means the text is jagged on both the

left and right sides.

RepetitionRepetition• Repeated visual elements help give a

document or presentation uniformity.

• Use color, shapes, font, texture, spacial relationships, line thickness, sizes, etc.

Screens/Text BoxScreens/Text Box

Screens are where the background

color is any color except white.

Screens/Text BoxScreens/Text Box

Screens are where the background

color is any color except white.

Leading/Rule LineLeading/Rule LineLeading is the amount of white space in between the lines of type. This is typed with normal leading. Using more leading makes the text easier to read.

Leading is the amount of white space in between the

lines. This is typed with more leading. It can be

changed by highlighting text, going to format,

paragraph, line spacing, etc.

Caption EmphasisCaption EmphasisCaptions

can contain

reverse type and

can be different shapes

Traditional captions are found below the picture.

Captions describe action in the picture.Many things can be done with captions. Some captions are written to the side.Captions can also

go on the photo

ContrastContrast• Contrast is created when elements

are DIFFERENT.• If they are “sort of” different, it

creates conflict, not CONTRAST.•If two items are not exactly the same, make them different … very different.

Contrast in FontsContrast in FontsALL CAPS SMALL CAPS

Bold type

Italics underline ShadowShadowShadowShadow

CapitalizationCapitalizationTHIS IS ALL CAPS.

THIS IS SMALL CAPS.

This Is Upstyle.

This is downstyle.

CCoolloorr• Use colors to enhance NOT

distract.• Sometimes using one spot color

from a picture can bring an added level of depth to a product.

• Different colors have different feels so make sure you chose color appropriate for your purposepurpose.

ColorColor

Traditional captions are found below the picture.

Captions describe action in the picture.Many things can be done with captions. Some captions are written to the side.Captions can also

go on the photo

A caption

can contain

reverse type

and can be

different shapes

ColorColor

Traditional captions are found below the picture.

Captions describe action in the picture.Many things can be done with captions. Some captions are written to the side.Captions can also

go on the photo

A caption

can contain

reverse type

and can be

different shapes

ColorColor

Traditional captions are found below the picture.

Captions describe action in the picture.Many things can be done with captions. Some captions are written to the side.Captions can also

go on the photo

A caption

can contain

reverse type

and can be

different shapes

CitationsCitations• Website information compliments of Daniel

O’Kilen – Alief ISD

• Peggy Miller/Dianne Smith – Alief ISD

• Non-Designer’s Design Book – Robin Williams