Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Designing Display<br />The Display of Information<br />
Introduction<br />“A well-designed Web site doesn’t just look good; it also works well.”<br />
Introduction<br />Remember: form follows function.<br />Base site design on what users need to do.<br />
Introduction<br />Most Web sites functions fall into one of these categories:<br />The display of information<br />Navigat...
The Display of Information<br />Information can be displayed in any of the following forms:<br />Text<br />Images<br />Ani...
The Display of Information<br />To decide which display forms work best, put yourself in the users shoes!<br />How will yo...
Reading and Viewing:<br />Text and Images<br />Most sites include a lot of text and images…how should they be displayed?<b...
Reading and Viewing:<br />Early Web design looked like existing printed pages<br />PROBLEM: screens aren’t pages<br />Most...
Reading and Viewing<br />* Dots (pixels) per inch<br />
Reading and Viewing<br />Early Web sites sponsored by newspapers and magazines tended to mimic their printed versions.<br ...
Reading and Viewing<br />How are newspaper sites set-up?<br />Why don’t you take a look at one or two of them?<br />The Re...
Reading and Viewing<br />They tend to display headline links which lead to new pages where the story text is displayed.<br...
Reading and Viewing<br />Online magazine publishers<br />Images are KEY.<br />Use thumbnails for image display.<br />Embed...
Reading and viewing<br />Both techniques are examples of two-stage interactive displays of information.<br />Rely on the W...
The Display of Information<br />WARNING<br />Designing the best way to display text and images is not simple or easy<br />...
Watching and Listening<br />Screens are not radios or TVs<br />Cannot display videos the same way<br />Music and voice may...
Watching and Listening<br />User Controls<br />Allow the user to select the song/video<br />Choose the volume<br />
Watching and Listening<br />Embedded or not?<br />Fully embedded: user has no control<br />Embedded with user controls<br ...
Watching and Listening<br />When incorporating sound and video, consider:<br />Size of the files<br />Do you offer both lo...
Tables and Lists<br />Some collections of information are best presented in table format.<br />Information can be presente...
Tables and Lists<br />Tables are used for:<br />Information that must be compared in more than one dimension <br />Compari...
Tables and Lists<br />Restricted screen width:<br />Not everyone has the same screen width<br />Most screens are 800 pixel...
Tables and Lists<br />Interested in the latest browser stats?  Click the link below for everything and more you need to kn...
Nächste SlideShare
Wird geladen in …5
×

Designing Display

682 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design, Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Designing Display

  1. 1. Designing Display<br />The Display of Information<br />
  2. 2. Introduction<br />“A well-designed Web site doesn’t just look good; it also works well.”<br />
  3. 3. Introduction<br />Remember: form follows function.<br />Base site design on what users need to do.<br />
  4. 4. Introduction<br />Most Web sites functions fall into one of these categories:<br />The display of information<br />Navigation through the site<br />Choosing, searching and finding<br />Feedback and interaction<br />Communicating the organization’s identity<br />
  5. 5. The Display of Information<br />Information can be displayed in any of the following forms:<br />Text<br />Images<br />Animation<br />Sound<br />Video<br />Virtual reality<br />
  6. 6. The Display of Information<br />To decide which display forms work best, put yourself in the users shoes!<br />How will your target audience use the page/site?<br />
  7. 7. Reading and Viewing:<br />Text and Images<br />Most sites include a lot of text and images…how should they be displayed?<br />Should your site look like a:<br />magazine? 2-3 columns, images interspersed<br />newspaper? 6-7 columns<br />book? 1 column, images at top/bottom<br />It depends on the purpose of the site and the limitations of the computer screen<br />
  8. 8. Reading and Viewing:<br />Early Web design looked like existing printed pages<br />PROBLEM: screens aren’t pages<br />Most printed format is portraitmode<br />Most monitors are landscape mode<br />
  9. 9. Reading and Viewing<br />* Dots (pixels) per inch<br />
  10. 10. Reading and Viewing<br />Early Web sites sponsored by newspapers and magazines tended to mimic their printed versions.<br />Six columns on a screen…I don’t think so!!!!<br />
  11. 11. Reading and Viewing<br />How are newspaper sites set-up?<br />Why don’t you take a look at one or two of them?<br />The Repository -http://www.cantonrepository.com/<br />Akron Beacon Journal -http://www.ohio.com/<br />New York Times - http://www.nytimes.com/<br />Chicago Tribune - http://www.chicagotribune.com/<br />
  12. 12. Reading and Viewing<br />They tend to display headline links which lead to new pages where the story text is displayed.<br />Text is easier to read on screen if it’s larger than 10-12 point for story text. <br />Also easier to read when displayed in a single column about 5” wide – with lots of white space on the side.<br />Resist the urge to fill the entire screen!<br />
  13. 13. Reading and Viewing<br />Online magazine publishers<br />Images are KEY.<br />Use thumbnails for image display.<br />Embedded small images in the text of a story, link to larger images.<br />
  14. 14. Reading and viewing<br />Both techniques are examples of two-stage interactive displays of information.<br />Rely on the Web’s point-and-click interactivity to make them work.<br />Don’t try to put all the info on one screen<br />Use headlines and thumbnails as links (teasers) to more information<br />Each click opens on demand to display the full-resolution text or images<br />
  15. 15. The Display of Information<br />WARNING<br />Designing the best way to display text and images is not simple or easy<br />It can’t be modeled on traditional media styles<br />Web pages are DIFFERENT<br />Think about all of the functions<br />Size<br />Resolution<br />Interactivity!<br />
  16. 16. Watching and Listening<br />Screens are not radios or TVs<br />Cannot display videos the same way<br />Music and voice may disturb others<br />Users want to control display of sounds and video<br />Think about sites that open with music playing<br />How do you feel about it?<br />You don’t get to choose what’s playing, how loud or for how long<br />YUCK!<br />Think User Controls<br />
  17. 17. Watching and Listening<br />User Controls<br />Allow the user to select the song/video<br />Choose the volume<br />
  18. 18. Watching and Listening<br />Embedded or not?<br />Fully embedded: user has no control<br />Embedded with user controls<br />Opens in a separate window with user controls<br />Limited in size and quality<br />Always ask yourself:<br />Does the sound/video advance the purpose of the site?<br />
  19. 19. Watching and Listening<br />When incorporating sound and video, consider:<br />Size of the files<br />Do you offer both low and high quality options?<br />Quality of the video/sound file<br />Audience<br />Connection speed and bandwidth<br />
  20. 20. Tables and Lists<br />Some collections of information are best presented in table format.<br />Information can be presented:<br />Plain text<br />Bulleted lists<br />Numbered lists<br />Rows and columns<br />Use tables to compare information in two dimensions<br />Models & features of products<br />
  21. 21. Tables and Lists<br />Tables are used for:<br />Information that must be compared in more than one dimension <br />Comparing features<br />Schedules<br />Formatting Web pages into rows and columns like a magazine.<br />A table does not have to display its borders, but can be used to line up information or create columns.<br />
  22. 22. Tables and Lists<br />Restricted screen width:<br />Not everyone has the same screen width<br />Most screens are 800 pixels wide (still most popular)<br />(2006 update: 1024-1280 pixels wide becoming more popular)<br />-300pixels for borders, scrollbars, and navigation<br />500 pixels left<br />100 characters of 12-pt text.<br />
  23. 23. Tables and Lists<br />Interested in the latest browser stats? Click the link below for everything and more you need to know!<br />BROWSER STATISTICS:http://www.w3schools.com/browsers/default.asp<br />

×