• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing Display
 

Designing Display

on

  • 754 views

 

Statistics

Views

Total Views
754
Views on SlideShare
753
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://ig.gmodules.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing Display Designing Display Presentation Transcript

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