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...
Prochain SlideShare
Chargement dans…5
×

Designing Display

664 vues

Publié le

Publié dans : Design, Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
664
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 />

×