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 Arial Courier Times Color Other Terminology Serif and san serif: the little decoration at the end of a letter stroke Leading Leading Kerning Character metrics: measurements applied to individual characters Case--upper or lower 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 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 society. 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 text – 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 Distracting Clear 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. Clear 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 Background Easier to read Harder to read Text 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 about: 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 types 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: CONTRAST Design Considerations: ALIGNMENT Fun Things for a Professor Fun Things for a Professor to to do the First Day of do the First Day of Classes: 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: ALIGNMENT Examples from: “The Non-Designer’s Design Book by Robin Williams Design Considerations: PROXIMITY 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: PROXIMITY Design Considerations: REPETITION Brad Pitt Repetition of Movies 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 Childhood Birthday: December 18, 1963 Born: 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 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 character. 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 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: Pixels – when viewing on a monitor PIXEL 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 (smaller) 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.