Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MELJUN CORTES Multimedia Lecture Chapter8

233 views

Published on

MELJUN CORTES Multimedia Lecture Chapter8

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

MELJUN CORTES Multimedia Lecture Chapter8

  1. 1. Chapter 8 Design and the User Interface MELJUN CORTES
  2. 2. Chapter Objectives • Explain how the planning process and documents are important to good design • List the factors that should be considered in designing the user interface • List and describe five ways to optimize user access and control • Explain the importance of the color scheme and list several basic guidelines beginners should follow in establishing a color scheme Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  3. 3. Chapter Objectives • Define metaphor as it relates to Web design and provide an example of its potential benefits • Explain how Cascading Style Sheets (CSS) can save the Web designer time • List and describe five fundamental design guidelines that apply to Web page design • List and describe the design factors that apply to text, graphics, animation, sound and video • List and describe five “extras” that you should consider including at your Web site Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  4. 4. Introduction  Web design is a tricky topic – Basic design principles – Artistic endeavor – Subjective Planning documents –Storyboards, flowcharts, scripts Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  5. 5. User-Centered Design  Based on design strategy – Detailed purpose – Target audience  Focus on user’s wants and needs Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  6. 6. Designing the User Interface  Users interact with Web sites – Design and visual appeal are integral to the user’s experience – Function is part of form  Goal: fulfill the needs of all users without requiring them to conform or work around an interface full of obstacles – examples Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  7. 7. Optimize User Access and Control  Quick to Load – Threshold of frustration is about 10 seconds – Design small  Minimize Links – Users favor 5-7 link menus – Users favor a few screens with more choices over many screens with few choices • example Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  8. 8. Optimize User Access and Control  Sense of Context – Help users determine where they are at all times – Contextual Clues • • • • • • Familiar and intuitive icons Common color scheme Consistent navigation method Graphic similarity Consistent layout of titles, subtitles, footers and links example Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  9. 9. Optimize User Access and Control  Opportunity for Feedback/Dialog – Give the impression of an ongoing relationship – Direct link to site’s creator, editor or individual responsible for site maintenance – Be prepared to professionally respond to user questions, comments and complaints • example Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  10. 10. Optimize User Access and Control  Equal Access – Disabilities prevent some people from taking full advantage of all media elements – Design for text-based browsers such as Lynx – Synthesized readers read text, not graphics • example – Use the ALT attribute • <IMG SRC = “logo.gif” ALT = “company logo” Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  11. 11. Color Scheme  Powerful communication tool – Convey information – Set mood/tone of site  Color – Hue - color in its purest form – Shade - color when light is added or subtracted  Test against Web-safe color palette Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  12. 12. Color Scheme  Tips for beginners – – – – Avoid working with too many colors Begin by designing in black and white Use a monochromatic color scheme Easier to work with dark on light than light on dark Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  13. 13. Color Scheme  Themes – Preset color schemes – Unified design elements • bullets, fonts, images, navigation bars, other media – Excellent place to start or gain inspiration – Used to give attractive and consistent appearance – Avoid if they appear amateurish Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  14. 14. Metaphor  Figurative representation that links content to an established mental model – Must be concrete and obvious – Well-designed and targeted, they are powerful communication tools – Poorly-designed and inappropriate, they can be distasteful and unnecessary Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  15. 15. Styles  Cascading Style Sheets – Improve • type design • layout • consistency Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  16. 16. Page Design Simple and Consistent  Independent and Functional  Worthwhile/Accessible Content  Balanced Layout  Unified Piece  Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  17. 17. Multimedia Elements  Tips: – – – – Graphics Animation Sound Video Keep media elements to a max of 30K  Keep Web pages including media elements to a max of 100K  Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.
  18. 18. Extras  Links – Separate page of clearly identified, external links  FAQs – Saves time and money for user and organization Contact Information  Last Modified Date  – Confidence that information is up-to-date  Copyright Notice – Further substantiate by applying for a copyright Harcourt, Inc. items and derived items copyright © 2002 by Harcourt, Inc.

×