Screen Design

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
[phone]
John W. Hansen
Houston, TX
4800 Calhoun
5
Proximity example 2
College of Technology
[phone]
John W. Hansen
Houston, TX
4800 Calhoun
6
Proximity example 3
John W. Hansen
College of Technology
4800 Calhoun
Houston, TX
[phone]
7
Proximity example 4
UNIVERSITY OF HOUSTON
COLLEGE OF TECHNOLOGY
WHATS HAPPENING IN ...
INDUSTRIAL TECHNOLOGY
November - 1997
8
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
• Doesnt 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 shouldnt 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 dont 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
[phone]
John W. Hansen
Houston, TX
4800 Calhoun
17
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 arent exactly the same, make them
  different

32
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