1 / 37

Multimedia & The World Wide Web

HCI 201 Multimedia and the www. Multimedia & The World Wide Web. winny. HCI 201 Multimedia and the www. What is important in web design?. Color Layout Content Text – Important to know that the font you intend may not be fonts in user’s browsers. winny. HCI 201 Multimedia and the www.

Download Presentation

Multimedia & The World Wide Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. HCI 201 Multimedia and the www Multimedia & The World Wide Web winny

  2. HCI 201 Multimedia and the www What is important in web design? • Color • Layout • Content • Text – Important to know that the font you intend may not be fonts in user’s browsers. winny

  3. HCI 201 Multimedia and the www Layout • Layout and design are a very subjective topic, but the important thing is to make sure that there is a layout. • As opposed to just putting information up, make an effort to display it aesthetically. winny

  4. HCI 201 Multimedia and the www Layout… • The web makes it possible to control how your information is presented, there's no reason not to do it. If two companies are selling the same product, and one puts a photocopied flyer under your windshield, while the other hands you a full-color kit while wearing a business suit...which one are you likely to remember? • The stylish side of a web site is very subjective, and everybody will have their own idea of what looks good. Just make sure that you don't minimize the importance of layout and design... • First impressions are hard to erase. winny

  5. HCI 201 Multimedia and the www Don't Make Me Think! • Create a clear visual hierarchy • Split your information into logical sections • Make sure your starting page is attractive and well laid out • Try to have a consistent theme throughout the entire site • Try to use colors, styles and fonts that complement each other • Make it obvious what's clickable winny

  6. HCI 201 Multimedia and the www Visual hierarchy • The more important something is, the more prominent it is. • Things that are related logically are also related visually. • Things are "nested" visually to show what's part of what. (visual hierarchies prevent slower scanning) winny

  7. HCI 201 Multimedia and the www Break up pages into clearly defined areas • Web users know what they are looking for when scanning.  If they find it, they react to the remainder of the web site as if it were not there. • This helps users to make quicker decisions winny

  8. HCI 201 Multimedia and the www Make it obvious what's clickable • Blue, underlined text means that something is clickable. • If buttons are meant to be clicked on, there should be some intuitive indication that they should be clicked on. winny

  9. HCI 201 Multimedia and the www Balance winny

  10. HCI 201 Multimedia and the www winny

  11. HCI 201 Multimedia and the www winny

  12. HCI 201 Multimedia and the www Direction winny

  13. HCI 201 Multimedia and the www winny

  14. HCI 201 Multimedia and the www Unity winny

  15. HCI 201 Multimedia and the www winny

  16. HCI 201 Multimedia and the www winny

  17. HCI 201 Multimedia and the www winny

  18. HCI 201 Multimedia and the www Gestalt Theory • Gestalt psychology was founded in 1910 by three German psychologists, Max Wertheimer, Kurt Koffka and Wolfgang Köhler • Utilizes humans perceptual tendencies • We don’t see things in isolation, but as parts of some larger whole winny

  19. HCI 201 Multimedia and the www Gestalt Theory • Proximity • Similarity • Symmetry • Continuity • Closure winny

  20. HCI 201 Multimedia and the www Proximity • Describes the process of using distance or location to create groups • Things which are closer together will be seen as belonging together • EXAMPLE: text winny

  21. HCI 201 Multimedia and the www Similarity • Grouping by like kind or like type • Things which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together • Repetition of forms in a visual composition is pleasing in much the same way rhythm is pleasing in music winny

  22. HCI 201 Multimedia and the www Symmetry • The whole of a figure is perceived rather than the parts that make it up winny

  23. HCI 201 Multimedia and the www Continuity • Predicts the preference for continuous figures • Groupings are created by the flow of lines or by alignment winny

  24. HCI 201 Multimedia and the www Closure • The process by which we perceive shapes that, in a certain sense, aren’t really there • We mentally complete the shape in our heads • It is a way that our minds impose order and meaning on an incomplete set of data winny

  25. HCI 201 Multimedia and the www winny

  26. HCI 201 Multimedia and the www winny

  27. HCI 201 Multimedia and the www Similarity • Top buttons – Different sizes winny

  28. HCI 201 Multimedia and the www Similarity • Much Better! winny

  29. HCI 201 Multimedia and the www Similarity • Tie it all together winny

  30. HCI 201 Multimedia and the www Continuity winny

  31. HCI 201 Multimedia and the www Continuity winny

  32. HCI 201 Multimedia and the www Remember… • As designers, be conscious of these principles and use them to your advantage • It is not enough to say that a design is “good”. • Know why it is good. winny

  33. HCI 201 Multimedia and the www Page Design Guidelines • The name/logo of the site or sponsor should appear on every page • Avoid busy or distracting backgrounds • Prioritize your content. Call attention to your most exciting content with size, color, and/or screen position. • Minimize less important content winny

  34. HCI 201 Multimedia and the www Page Design Guidelines • Organize information into clearly distinguishable areas. • Chunk related elements into visual groups through the use of space, graphics, or similarities in color, lightness, texture, or orientation • 50-80% of space on a page should be used for content of interest to the user, not navigation or advertising winny

  35. HCI 201 Multimedia and the www Page Design Guidelines • White space is not useless. It can guide the eye and help users understand the grouping of information. • Keep pages simple. Review all of your design elements and remove them one at time. If the design works just as well without an element, kill it. winny

  36. HCI 201 Multimedia and the www Page Design Guidelines • Use consistent • fonts, color palette, graphical elements, • navigation options, • placement of elements on the page • In general, use more short pages instead of fewer long pages. • However, content pages should contain one conceptual unit of content. • In general, people prefer to scroll to continue a single unit of content, such as an article, rather than click from page to page. winny

  37. HCI 201 Multimedia and the www Page Design Guidelines • Never make the user scroll to locate important navigation options or the focal point of the page, such as "Buy Now" • Always use highly visible page titles to provide location feedback and help users remain oriented winny

More Related