Principles of Layout Design

The purpose of this presentation is to demonstrate the four basic steps to effective layout designs.

These steps can be applied to both Powerpoint presentations and Web Page design.

The demonstration begins on the next page

Use <PgUp> and <PgDn> keys to move between slides

Principles of Layout Design

• CContrast – use separation for unlike elements– Bold, Whiting, Line Thickness, Sizes

• RRepetition – repeating aspects of design– Titles (36 pt), underlining, hyperlink (blue), shapes

• AAlignment – justifying to emphasize key points– Left, right, center, top, bottom, flush (text to picture)

• PProximity – limit and separate unlike elements– Separate elements with white space, lines, colors

Highlights of the NCCE

Conference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Contrast (black/white; text/graphics)Repetition (repeating a pattern such as underlining boldfacing titles and major points, theme form slide to slide, shapes, …)Alignment (left, right center, top, bottom, flush justifying …. Blending text and graphics together)Proximity (putting relevant elements together and separating unrelated elements using whitespace, lines, textboxes, …)

Highlights of the NCCEConference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Proximity: Single space title (keep relevant elements together). Leave extra white space to separate elements

Delete one graphic (distracts from text)

Highlights of the NCCEConference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Contrast: Bold and enlarge title

Highlights of the NCCE Conference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Contrast: add black block to enhance contrast

Highlights of the NCCE Conference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Proximity: keep key points together; separate elements that distract from each other

Highlights of the NCCE Conference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Contrast: Optical illusion of subtitles being similar in size to title, therefore enlarge the title.

Highlights of the NCCEConference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Alignment: Right and left justification to improve alignment. Right justify the subtitles; left justify the title. Proximity: Separate the ‘authors’ from the subtitles (they are ‘unlike’ entities)

Highlights of the NCCEConference 2001

Dream Weaver

Design for the Non-Designer

Visual Web Design

Instructional Materials

Jahn/Justino

Alignment: align the image by resizing and left justifying and bottom justifying.

Principles of Layout Design• CContrast – use separation for unlike elements

– Bold, Whiting, Line Thickness, Sizes

• RRepetition – repeating aspects of design– Titles (36 pt), underlining, hyperlink (blue), shapes

• AAlignment – justifying to emphasize key points– Left, right, center, top, bottom, flush (text to picture)

• PProximity – limit and separate unlike elements– Separate elements with white space, lines, colors