1 / 12

Principles of Layout Design

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

felixbennett
Download Presentation

Principles of Layout Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. Principles of Layout Design • Contrast– use separation for unlike elements • Bold, Whiting, Line Thickness, Sizes • Repetition – repeating aspects of design • Titles (36 pt), underlining, hyperlink (blue), shapes • Alignment – justifying to emphasize key points • Left, right, center, top, bottom, flush (text to picture) • Proximity – limit and separate unlike elements • Separate elements with white space, lines, colors

  3. 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, …)

  4. 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)

  5. Highlights of the NCCEConference 2001 Dream Weaver Design for the Non-Designer Visual Web Design Instructional Materials Jahn/Justino Contrast: Bold and enlarge title

  6. 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

  7. Dream Weaver Design for the Non-Designer Visual Web Design Instructional Materials Jahn/Justino Highlights of the NCCE Conference 2001 Proximity: keep key points together; separate elements that distract from each other

  8. Dream Weaver Design for the Non-Designer Visual Web Design Instructional Materials Jahn/Justino Highlights of the NCCE Conference 2001 Contrast: Optical illusion of subtitles being similar in size to title, therefore enlarge the title.

  9. Dream Weaver Design for the Non-Designer Visual Web Design Instructional Materials Jahn/Justino Highlights of the NCCEConference 2001 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)

  10. Dream Weaver Design for the Non-Designer Visual Web Design Instructional Materials Jahn/Justino Highlights of the NCCEConference 2001 Alignment: align the image by resizing and left justifying and bottom justifying.

  11. Highlights of the NCCE Conference 2001 OriginalSlide OriginalSlide 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, …)

  12. Principles of Layout Design • Contrast– use separation for unlike elements • Bold, Whiting, Line Thickness, Sizes • Repetition – repeating aspects of design • Titles (36 pt), underlining, hyperlink (blue), shapes • Alignment – justifying to emphasize key points • Left, right, center, top, bottom, flush (text to picture) • Proximity – limit and separate unlike elements • Separate elements with white space, lines, colors

More Related