Text by pengxuebo


 A MM principle: it is important to design
  labels for title screens, menus, & buttons
  using words that have the most precise
  and powerful meanings to express what
  you need to say
   Examples:
     Quit/close,
     Terrific/the answer was correct

 Test the design by letting others try
  to find out what you mean.
 You may want to use thesaurus
Using text in MM
 Inform the user, where to go, how to
  navigate through the project, and
  what will you see when you get there
 Title and Headlines: What's it all
 Menus: Where to go
 Navigation: How to get there
 Content: What you see when you get
More Text Using

 Dual Role:

  Visual representation
   of message
 Graphical Element
 Is a collection of characters of the same
  size, style and belonging to a particular
  typeface family
   Typical font styles: Bold, italic, & underline
   Size measured with points (point = 1/72’)
   Typeface--A family of graphic characters
   Color
Other Terminology
 Serif and san serif: the little decoration at the end of a
  letter stroke
 Leading
 Kerning

 Character metrics: measurements applied to individual

 Case--upper or lower
Creating Your Own Type: ResEdit on Mac
Creating Your Own Type:
Designing with text I
 Use legible (‫ )مقروء‬text for small letter
  typing and don’t use decorative text
  in this case
 Use as few different type faces
  (fonts) as possible in the same work,
  you may change the size or style
 In text blocks adjust the line spacing
  & avoid tightly packed lines (difficult
  to read)
Designing with text II
 Vary the size according to the
  importance of the text
 In large headlines it is important to
  adjust spacing between letters
 Explore different font colors and
  various backgrounds
 Use drop caps and initial caps to
  accent (‫ (توكيد‬your words
Choosing Text Fonts III
 Minimize number of centered lines in a
  block of text
 To bring the attention, use graphically
  altering of the text
 Surround headlines with white spaces
 Use meaningful words
 Bold or emphasize text to highlight ideas
  or concepts
 Distinguish text links with colors and
 In designing your system, the test for
  good navigation design is:

The user never needs help to get to a
  particular destination
Menus for Navigation
 Avoid using more than few levels in
  menus especially if you don't provide
  a map or a way out
 Use short words rather than long
  phrases or sentences.
   Example: play video & press quit are
    shortened to video & quit
Buttons for interaction
 There are three types of buttons: text,
  graphics, and icon
 Rules of text selection apply to text buttons
 There are automatic button-making tools.
  Making the buttons from bitmap gives
  flexibility in designing buttons
 Default buttons are good because the users
  will know exactly what to do with them
Fields for reading
 People prefer reading a hard copy rather
  than reading from screens, thus take the
  following in consideration
   Try to minimize number of paragraphs per
   Use a font that is easy to read rather than
    pretty font
   Try to have a whole paragraph and avoid
    breaks where user have to go back and
 Hypermedia is a multimedia designed with
  links through which the user can navigate
  and interact.
 It is applied to text( coming next) and to
 A complete picture can be decomposed and
  viewed as small parts with more details.
 Examples:
   Multimedia maps.
   Human body.

 Hypertext is a way of linking words to other
 Used especially when the amount of text and
  symbolic content in the project is large.
 Help in retrieving information in a fast,
  nonlinear and intuitive way.
 Using hypertext system, we can electronically
  search the text for important words, locate
  reference to these words, and then
  immediately view the pages containing them.

 Authoring systems incorporate hyperlink
  facilities that allows identifying words (hot
  words) then link them to other words, pages or
  activities such as playing a sound or a video.
 This powerful tool need to be designed so that
  they make sense.
 Hypertext and hyper images are what the
  world wide web is all about.
Lost in Hyperspace ?
   where am I ?
   how did I get here ?
   what can I do here ?
   where can I get to ?
   how do I go there ?
   what have I seen so far ?
   where else is there for me to see ?
 Creating a hypertext link in
 Macromedia Director

 To turn any selected range of text into a
  hypertext link that links to a URL or initiates
  other actions we do the following:
  1. Select the text you want to define as a
  hypertext link.
  2. Open the Text inspector.
  3. In the Hyperlink text box, enter the URL to
  which you want to link, or enter any message
  you want to send to the on hyperlinkClicked
  handler then press enter.
Designing for Interactivity
                                           Edit Text
  Electronic Media -- Vacuum
                                                      for Clarity
 • impact, effects, and implications
 • customs, rules, and laws              Electronic media do not exist
 • untested legal implications
                                         in a legal or societal vacuum
 • litigious society
                                        • They may have broad impact, effects,
                                          and implications.
                                        • They are subject to the customs, rules,
                                          and laws of society.
                                        • However, currently untested legal
           Too cryptic                    implications arise from various forms of
                                          electronic publishing --
                                        • And we live in an increasingly litigious

                                       Clear and understandable
Designing for Interactivity

   Typeface                                       Typeface
  • An Important Message                • An Important Message
   – Conveys mood
                                         – conveys mood
   – communicates attitude
                                         – communicates attitude
  • Reader Understanding
   – Can help, or                       • Reader Understanding
   – Can hinder                          – can help, or
                                         – can hinder

          Distracting                                   Clear

             Limit the Number of Fonts and Type Sizes
Designing for Interactivity
      Use Simple,
             Clear Fonts                                            Uses of Type
                                                                     l   Serif type
        Uses of Type                                                     – works well in smaller sizes, especially in the body of text
                                                                         – looks busy and cluttered when used in large sizes

l   Serif type (for example, Palatino)                               l   Sans-serif
    – w orks w el l in small er sizes, especiall y in the body of        – ideal for large headlines and other displays
                                                                         – difficult to read in long blocks of text
    – looks busy and cluttered w hen used in large sizes
                                                                         – Looks best when surrounded by lots of white space
l   Sans-serif (for example, Arial Narrow)
    – ideal for l arge headlines and other displays
    – difficul t to read in l ong blocks of text
    – Looks best w hen surrounded by l ots of w hite space


Designing for Interactivity
         For Further Reading                             Avoid Hyphenation
 Marr, David (1982). Vision: A computational investi-
                                                         and Underlines
   gation into the human representation and process-
   ing of visual information. Freeman: San Francisco.              For Further Reading
 Parker, Roger (1993). Looking good in print: A guide
   to basic design for desktop publishing (3rd Edi-       Marr, David (1982). Vision: A computational
   tion). Ventana Press: Chapel Hill, NC.                   investigation into the human representation and
 Peretz, Isabel (1993). Auditory agnosia: A functional      processing of visual information. Freeman: San
   analysis. In S. McAdams & E. Bigand (Eds.),              Francisco.
   Thinking in sound: The cognitive psychology of hu-     Parker, Roger (1993). Looking good in print: A guide to
   man audition (pp. 199-230). Oxford University            basic design for desktop publishing (3rd Edition).
   Press: Oxford.
                                                            Ventana Press: Chapel Hill, NC.
 Porkorney, Cornel & Gerald, Curtis (1989). Computer
   Graphics: The principles behind the art and sci-
                                                          Peretz, Isabel (1993). Auditory agnosia: A functional
   ence. Franklin, Beedle & Associates: Irvine, CA.         analysis. In S. McAdams & E. Bigand (Eds.),
                                                            Thinking in sound: The cognitive psychology of
                                                            human audition (pp. 199-230). Oxford University
                                                            Press: Oxford.
Underlined                                                Porkorney, Cornel & Gerald, Curtis (1989). Computer

     and hyphenated                                         Graphics: The principles behind the art and science.
                                                            Franklin, Beedle & Associates: Irvine, CA.

Designing for Interactivity

        Avoid Excessive and
       Improper Use of Color
•   Limit colors to three or fewer
•   Use a plain, contrasting background
•   Use bright colors for foreground
•   Use pale colors for background
•   Be sure colors will appear correctly on the user’s screen
•   Avoid clashing colors
Designing for Interactivity
                    Use Dark Type
                     on a Light

   Easier to read

                    Harder to read

Use of text in multimedia applications varies on:

    The type of application
        Educational, Entertainment, Business
      Audience     ie. Children, teens, adults, Elderly, ESL

For example
  CD-ROM educational titles
  aimed at preschoolers would
  have little text, while adult
  educational titles such as
  foreign language studies might
  rely heavily on text
Font Types

Serif                         Sans-Serif
Tails                         No  tails
Script                        Block-oriented
Body paragraphs               Headings, titles
Times Roman, Courier New,     Arial, Verdana, Helvetica,
Century Schoolbook, Palatino   Arial Black, Comic Sans MS
 Fun Fonts

Try out this website  http://www.fontscape.com/explore?7AR
More Examples

   No Kerning

   Kerning (244)
When designing a MM application, think

                Avoid making 2 elements just
 Contrast      similar, either make them the same
                (same font, colour, etc…) or make
                them VERY different.

 Alignment     Items are aligned - creates
                stronger cohesive unit

 Proximity      Group related items together

                 Repeat some aspect of the design
                 throughout the entire design i.e. Bold
 Repetition     font, thick rule, bullet, colors, font
Design Considerations: CONTRAST

Cool Quotes                       Cool Quotes
•See everything, overlook a
great deal, improve a little.
                                  See everything, overlook a
                                  great deal, improve a little.
•Between two evil, choose
neither; between two good,
choose both.                      Between two evil, choose
•Give with no strings attached,   neither; between two good,
and you will receive in the       choose both.
same manner

                                  Give with no strings
                                  attached, and you will receive
                                  in the same manner
Design Considerations:
Design Considerations:

Fun Things for a Professor            Fun Things for a Professor to
    to do the First Day of            do the First Day of Classes:
                                       Ask students to call you
    Ask students to call you          "Tinkerbelle" or "Surfin' Bird".
   "Tinkerbelle" or "Surfin' Bird".
                                      Growl constantly and address
  Growl constantly and address        students as "matey".
        students as "matey".
                                      Show a video on medieval torture
Show a video on medieval torture      implements to your calculus class.
    implements to your calculus       Giggle throughout it.
    class. Giggle throughout it.
                                                           by Alan Meiss
        by Alan Meiss

   This is Okay                           But this looks better!
Design Considerations:

Examples from: “The Non-Designer’s Design Book by Robin Williams
Design Considerations:
                             The Menu
The Menu
                                  Eggs Benedict
     Eggs Benedict
                                  Pecan Crusted Trout
     Pecan Crusted Trout
                                  Steak and Kidney Pie
     Steak and Kidney Pie
                                  Caesar Salad
     Apple Crisp
                                  Roast Chicken
     Cheese Fondue
                                  Cheese Fondue
     Macaroni and Cheese
                                  Macaroni and Cheese
     Strawberry Cheesecake
     Lemon Mousse
                                  Strawberry Cheesecake
     Caesar Salad
                                  Lemon Mousse
     Roast Chicken
                                  Apple Crisp

 What do you think when you look at the second box
  compared to the first box?
 Remember Physically grouping things together implies
  a relationship
Design Considerations:
Design Considerations:

Brad Pitt                           Repetition of
   Thelma and Louise
                                        Bullet type
   Legends of the Fall                 Spacing
   Oceans Eleven
                                        Light text
Relationships                           Heavy text
    Gwyneth Paltrow
    Jennifer Aniston                   Alignment
    Angelina Jolie
                                        Indentation
    Birthday: December 18, 1963
    Born: Shawnee, Oklahoma
Design Considerations:
 What repetition can you see in this Microsoft web page?
Text and Graphics
Functionality but no Form?
Navigation Strategies
      Linear        Hierarchical

    Hypermedia      Composite
                  Text Leading

 Leading specifies the amount of vertical
  space between lines of text
 Measured in either positive or negative
  points or zero
Greatness is not found in     Greatness is not found in
possession, power,
position or prestige. It is   possession, power, position
discovered in goodness,
humility, service and
                              or prestige. It is discovered
                              in goodness, humility,

                              service and character.
                           Text Size
PIXEL (.ppi aka .dpi)              POINT (.dpi)
Measurement       for monitor     Measurement    for printer resolution
resolution                         #  of dots per inch
# of pixels per inch of monitor   Absolute type size - usually used in
display                            printing
A display   setting of:           Higher dpi = better resolution
1280 x 1024 has 1.3 million DPI,   Points are a print unit of measure
800 x 600 has 480,000 DPI          (used with Word processing software
Text Size: Points – when printing

                    NOTE: A point size of 72, will
                    always give you a font that is
                    one inch high   when
                    If you sent this MS Word
                    Document to a printer and
                    measured between the
                    lines, it would be one inch.
                    For print it doesn’t matter if
                    you print from a Windows
                    machine or a Mac, a 72 point
                    font size on paper is always
                    one inch high.
Text Size: Pixels – when viewing on a monitor

Windows   machines are
set at 96 dpi
Macintosh   machines are
set at 72 dpi

 PC 1/6 of 96 = 16
         (25% larger)

 Mac 1/6 of 72 = 12
 Before we begin building websites, let’s get some
 design basics:

Good Design Is As Easy
                                            Good Design
                                            is as easy as . . .
      as 1-2-3
                                                      Learn the principles
            1. Learn the principles.                  They’re simpler than you might think
    They’re simpler than you might think              Recognize when you’re not using them.
2. Recognize when you’re not using them.              Put it into words – name the problem.
    Put it into words – name the problem.
            3. Apply the principles.                  Apply the principles.
                You’ll be amazed.                     You’ll be amazed.

 Both boxes above say the same thing.
 Which design do you like better?
 Can you put your finger on what makes one “Better” than
 the other.

To top