1 / 36

Screen Design

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

chaela
Download Presentation

Screen 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. Screen Design Adapted from The Non-Designers Design Book

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  23. Repetition • Very important in multipage documents • One page documents - establishes continuity

  24. Repetition • Purpose • 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

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

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

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

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

  29. Contrast • Make some items small to create contrast

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

  31. Contrast • Avoid • 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

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

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

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

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

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

More Related