Adapted from The Non-Designers Design Book Screen Design Adapted from The Non-Designers Design Book

Four principles Proximity - related items grouped Alignment - visual connection Repetition - develops organization Contrast - visual attraction

Proximity Group related items together Items seen as cohesive group Non-related - not in proximity to each other Visual cue to organization and content of the page

Proximity example John W. Hansen College of Technology (713) 743-4099 Houston, TX 4800 Calhoun

Proximity example 2 John W. Hansen College of Technology (713) 743-4099 John W. Hansen Houston, TX 4800 Calhoun

Proximity example 3 John W. Hansen College of Technology 4800 Calhoun Houston, TX (713) 743-4099

Proximity example 4 INDUSTRIAL TECHNOLOGY WHAT’S HAPPENING IN ... UNIVERSITY OF HOUSTON COLLEGE OF TECHNOLOGY WHAT’S HAPPENING IN ... INDUSTRIAL TECHNOLOGY November - 1997

Proximity example 5 Industrial Technology What’s happening in ... University of Houston College of Technology What’s happening in ... Industrial Technology November - 1997

Proximity Proximity - implies a relationship Organizes the page Understand where to begin reading Know when finished reading the message White space becomes more organized

Proximity Lists organized into visual groups Identifies information that should be emphasized Doesn’t mean everything is closer together Intellectually related items are connected

Proximity Push proximity to its limits to make your presentation really effective Check for proximate items that shouldn’t be Proximity is not the only solution to a problem page

Proximity Purpose - organize information More likely to be read & remembered Creates an appealing page Check to see if there are more than 3 - 5 visual elements on a page Check to see which elements can be grouped

Proximity Avoid Too many elements on a page Sticking things in the corners or middle Equal amounts of white space unless each group is part of a subset Any confusion about headings Creating relationships when they don’t exist

Alignment Nothing placed arbitrarily on the page Every item should have a visual connection with something else on the page Creates strong cohesive unit

Alignment Elements physically related by an invisible line even though physically separated Tells the reader - even though the parts are physically separated, they are related to the same piece

Alignment example John W. Hansen College of Technology (713) 743-4099 Houston, TX 4800 Calhoun

Alignment John W. Hansen College of Technology 4800 Calhoun Houston, TX (713) 743-4099 John W. Hansen

Alignment Purpose Be conscious of where elements are placed Unify and organize the page Strong alignment leads to different looks Be conscious of where elements are placed Always align

Alignment Avoid More than one text alignment on the page Center alignment unless you want a sedate presentation Use centered alignment consciously, not by default

Repetition Repeat some aspect of the design throughout the entire piece Bold font Thick rule Certain bullet Color Design element Particular format Spatial relationships Anything a reader can visually recognize

Repetition Repetition is consistency Repetition of certain elements makes the pages appear to belong to each other Conscious effort to unify the design

Repetition Take advantage of existing elements used to make a project consistent Make page more visually interesting and increases organization Be stronger and more dynamic

Repetition Very important in multipage documents One page documents - establishes continuity

Repetition Purpose Push existing consistencies further Unify and add visual interest Push existing consistencies further Add additional elements to establish consistency Create repetitions to enhance the design and clarity of information Like accenting clothes

Repetition Avoid Repeating so much it becomes annoying or overwhelming- use contrast

Contrast If two elements are not exactly the same, then make them really different Adds visual interest To be effective contrast must be strong Kind of different = confusion

Contrast Strong contrast draws the readers eyes to the page Contrast critical to the organization of information Purpose and organization of document become clearer

Contrast Typefaces Colors Spacing between elements Textures Determine what you want to emphasize Use contrast to create the focus

Contrast Make some items small to create contrast

Contrast Purpose Create interest in the page Aid in organization of the information Contrast should never confuse

Contrast Avoid If they aren’t exactly the same, make them different Being a wimp - do it boldly Sort of heavy with sort of heavier line Brown text and black headlines Two or more typefaces that are similar If they aren’t exactly the same, make them different

Multimedia Instruction The original Screen Design in Multimedia Instruction Lessons in adding interest and organization John W. Hansen January 1, 2001

Multimedia Instruction Proximity Screen Design in Multimedia Instruction Lessons in adding interest and organization John W. Hansen January 1, 2001

Multimedia Instruction Alignment Screen Design in Multimedia Instruction Lessons in adding interest and organization John W. Hansen January 1, 2001

Multimedia Instruction Repetition Screen Design in Multimedia Instruction Lessons in adding interest and organization John W. Hansen January 1, 2001

Multimedia Instruction Contrast Screen Design in Multimedia Instruction Lessons in adding interest and organization John W. Hansen January 1, 2001