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

Menus: Where to go Navigation: How to get there Content: What you see when you get

there

More Text Using

Dual Role:

Visual representation of message

Graphical Element

Fonts 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

Arial

Courier

Times

Other Terminology Serif and san serif: the little decoration at the end of a

letter stroke

Leading Kerning

Character metrics: measurements applied to individual characters

Case--upper or lower

Leading

Creating Your Own Type: ResEdit on Mac

Creating Your Own Type:Fontographer

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 (unkerend)

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

underlining

Navigations

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

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

Hypermedia

Hypermedia is a multimedia designed with links through which the user can navigate and interact.

It is applied to text( coming next) and to images.

A complete picture can be decomposed and viewed as small parts with more details.

Examples: Multimedia maps. Human body.

Hypertext

Hypertext is a way of linking words to other words.

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.

Hypertext

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

Electronic media do not existin a legal or societal vacuum

• They may have broad impact, effects,and implications.

• They are subject to the customs, rules,and laws of society.

• However, currently untested legalimplications arise from various forms ofelectronic publishing --

• And we live in an increasingly litigioussociety.

Electronic Media -- Vacuum

• impact, effects, and implications• customs, rules, and laws• untested legal implications• litigious society

Edit Text Edit Text

for Clarityfor Clarity

Too cryptic

Clear and understandable

Designing for Interactivity

TypefaceTypeface• An Important Message

– Conveys mood– communicates attitude

• Reader Understanding– Can help, or– Can hinder

Typeface

•An Important Message–conveys mood

–communicates attitude

•Reader Understanding–can help, or

–can hinder

Distracting Clear

Limit the Number of Fonts and Type SizesLimit the Number of Fonts and Type Sizes

Designing for Interactivity

Use Simple,Use Simple,Clear FontsClear Fonts

Distracting

Clear

Uses of Typel Serif type

– works well in smaller sizes, especially in the body of text

– looks busy and cluttered when used in large sizes

l Sans-serif– ideal for large headlines and other displays– difficult to read in long blocks of text– Looks best when surrounded by lots of white space

Uses of Typel Serif type (for example, Palatino)

– works well in smaller sizes, especially in the body oftext

– looks busy and cluttered when used in large sizes

l Sans-serif (for example, Arial Narrow)– ideal for large headlines and other displays– difficult to read in long blocks of text– Looks best when surrounded by lots of white space

Designing for Interactivity

For Further ReadingMarr, David (1982). Vision: A computational

investigation into the human representation andprocessing of visual information. Freeman: SanFrancisco.

Parker, Roger (1993). Looking good in print: A guide tobasic design for desktop publishing (3rd Edition).Ventana Press: Chapel Hill, NC.

Peretz, Isabel (1993). Auditory agnosia: A functionalanalysis. In S. McAdams & E. Bigand (Eds.),Thinking in sound: The cognitive psychology ofhuman audition (pp. 199-230). Oxford UniversityPress: Oxford.

Porkorney, Cornel & Gerald, Curtis (1989). ComputerGraphics: The principles behind the art and science.Franklin, Beedle & Associates: Irvine, CA.

For Further ReadingMarr, David (1982). Vision: A computational investi-

gation into the human representation and process-ing of visual information. Freeman: San Francisco.

Parker, Roger (1993). Looking good in print: A guideto basic design for desktop publishing (3rd Edi-tion). Ventana Press: Chapel Hill, NC.

Peretz, Isabel (1993). Auditory agnosia: A functionalanalysis. In S. McAdams & E. Bigand (Eds.),Thinking in sound: The cognitive psychology of hu-man audition (pp. 199-230). Oxford UniversityPress: Oxford.

Porkorney, Cornel & Gerald, Curtis (1989). ComputerGraphics: The principles behind the art and sci-ence. Franklin, Beedle & Associates: Irvine, CA.

Avoid HyphenationAvoid Hyphenationand Underlinesand Underlines

Underlined and

hyphenatedClear

Designing for Interactivity

Avoid Avoid Excessive Excessive and and Improper Improper Use Use of of CCoolloorr

• Limit colors to three or fewerLimit colors to three or fewer• Use a plain, contrasting backgroundUse a plain, contrasting background• Use bright colors for foregroundUse bright colors for foreground• Use pale colors for backgroundUse pale colors for background• Be sure colors will appear correctly on the user’s screenBe sure colors will appear correctly on the user’s screen• Avoid clashing colorsAvoid clashing colors

Designing for InteractivityUse Dark TypeUse Dark Type on a Light on a Light BackgroundBackground

Easier to read

Harder to read

Text

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

Use of text in multimedia applications varies on:

The type of application Educational, Entertainment, Business

Audience ie. Children, teens, adults, Elderly, ESL

SerifTailsScriptBody paragraphsTimes Roman, Courier New, Century Schoolbook, Palatino

Sans-SerifNo tailsBlock-orientedHeadings, titlesArial, Verdana, Helvetica, Arial Black, Comic Sans MS

Font Types

Fun Fonts

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

More Examples

No Kerning

Kerning (244)

When designing a MM application, think about:

Contrast

Alignment

Proximity

Repetition

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

Items are aligned - creates stronger cohesive unit

Group related items together

Repeat some aspect of the design throughout the entire design i.e. Bold font, thick rule, bullet, colors, font types

Design Considerations: CONTRAST

Cool Quotes•See everything, overlook a great deal, improve a little.

•Between two evil, choose neither; between two good, choose both.

•Give with no strings attached, and you will receive in the same manner

See everything, overlook a great deal, improve a little.

Between two evil, choose neither; between two good, choose both.

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

Cool Quotes

Design Considerations: CONTRAST

Design Considerations: ALIGNMENT

Fun Things for a Professor to do the First Day of

Classes:

Ask students to call you "Tinkerbelle" or "Surfin' Bird".

Growl constantly and address students as "matey".

Show a video on medieval torture implements to your calculus class. Giggle throughout it.

by Alan Meiss

Fun Things for a Professor to do the First Day of Classes:

Ask students to call you "Tinkerbelle" or "Surfin' Bird".

Growl constantly and address students as "matey".

Show a video on medieval torture implements to your calculus class. Giggle throughout it.

by Alan Meiss

This is Okay But this looks better!

Examples from: “The Non-Designer’s Design Book by Robin Williams

Design Considerations: ALIGNMENT

Design Considerations: PROXIMITY

What do you think when you look at the second box compared to the first box?

Remember Physically grouping things together implies a relationship

The MenuEggs BenedictPecan Crusted TroutSteak and Kidney PieApple CrispCheese FondueMacaroni and CheeseStrawberry CheesecakeLemon MousseCaesar SaladRoast Chicken

The MenuEggs BenedictPecan Crusted TroutSteak and Kidney PieCaesar Salad

Roast ChickenCheese FondueMacaroni and Cheese

Strawberry CheesecakeLemon Mousse

Apple Crisp

Examples from: “The Non-Designer’s Design Book by Robin Williams

Design Considerations: PROXIMITY

Design Considerations: REPETITION

Repetition of Bullet type Spacing Light text Heavy text Alignment Indentation

Brad PittMovies

Thelma and LouiseLegends of the FallOceans Eleven

RelationshipsGwyneth PaltrowJennifer AnistonAngelina Jolie

ChildhoodBirthday: December 18, 1963Born: Shawnee, Oklahoma

Design Considerations: REPETITION 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 possession, power, position or prestige. It is discovered in goodness, humility, service and character.

Greatness is not found in

possession, power, position

or prestige. It is discovered

in goodness, humility,

service and character.

PIXEL (.ppi aka .dpi)Measurement for monitor resolution# of pixels per inch of monitor displayA display setting of:

1280 x 1024 has 1.3 million DPI, 800 x 600 has 480,000 DPI

POINT (.dpi)Measurement for printer resolution# of dots per inchAbsolute type size - usually used in printingHigher dpi = better resolutionPoints are a print unit of measure (used with Word processing software

Text Size

NOTE: A point size of 72, will always give you a font that is

one inch high when printed.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: Points – when printing

PIXELWindows machines are set at 96 dpiMacintosh machines are set at 72 dpi

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

Mac 1/6 of 72 = 12 (smaller)

Text Size: Pixels – when viewing on a monitor

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.

Before we begin building websites, let’s get some design basics:

Good Design Is As Easyas 1-2-3

1. Learn the principles.They’re simpler than you might think

2. Recognize when you’re not using them.Put it into words – name the problem.

3. Apply the principles.You’ll be amazed.

Good Designis as easy as . . .

Learn the principlesThey’re simpler than you might think

Recognize when you’re not using them.Put it into words – name the problem.

Apply the principles.You’ll be amazed.