Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

Designing Display

2.
Introduction<br />“A well-designed Web site doesn’t just look good; it also works well.”<br />

3.
Introduction<br />Remember: form follows function.<br />Base site design on what users need to do.<br />

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

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

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

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