1. Adapted from The Non-Designers Design Book
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 John W. Hansen College of Technology (713) 743-4099
Houston, TX
4800 Calhoun

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

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

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

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

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 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 John W. Hansen College of Technology (713) 743-4099
Houston, TX
4800 Calhoun

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

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

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

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

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

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

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

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

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