2

• Contrast


  When two or more related elements are displayed differently, and the greater the difference, the greater the contrast
• Effective contrast


  • Taking similar elements on a web page and transforming them into unique entities, sections, asides, or containers
• Attributes used to create contrast

  • Color
  • Size
  • Shape
  • Texture
  • Orientation
  • Position
  • Movement
• Two similar elements with a greater degree of contrast do not always equate into a visually appealing experience
• Color contrast


  The foreground color (text) and the background color it is layered on
• Importance of effective color contrast

  • For web accessibility, as many people are color blind or visually impaired
• Proximity


  Similar or related elements should be grouped together, while those that are unrelated or dissimilar should be separated
• Factors related to proximity

  • Isolation
  • Similarity
  • Eye movement and direction
  • Continuance
  • Persistence of vision
• As elements overlap or touch, the top layer typically gets the primary attention
• Whitespace


  The portion of a page left unmarked, the portion that is left blank
• Importance of whitespace

  • It smooths things out and transforms a page into something elegant
  • It reminds us that simpler designs are beautiful and we don't need to create a layout filled with text and graphical elements to deliver a clear and direct message
• Alignment


  Allows us to make conscious decisions about how and where elements are placed on the page
• Importance of alignment


  • It develops order and order conveys harmony
  • It brings together web page elements into a properly balanced blueprint
  • It conveys sound development and composition
  • It provides a standard guide for element placement
• Without an alignment strategy we would end up with arbitrarily placed elements, with little or no connection to additional or similar features
• Constructing an HTML table

  1. Describe the table between <TABLE> and </TABLE> tags

  2. Construct each row with <TR> and </TR> tags

  3. Construct each cell with <TD> and </TD> tags

  
• WIDTH=n%


  Sets the width of the table as a percentage of the screen
• CELLPADDING=n


  Adjusts the vertical dimension of the cells
• CELLSPACING=n


  Sets the space or border around the cells
• ALIGN=(LEFT, RIGHT, or CENTER)

  Horizontally aligns the data in a cell
• VALIGN=(TOP, MIDDLE, or BOTTOM)

  Vertically aligns the data in a cell
• COLSPAN


  Defines the number of columns a table cell should span
• Major components of web page design

  • Page layout design
  • Text design
  • Graphic design
  • Accessibility considerations
• Load time


  The total file size of a web page and all its associated images and media files should be under 60KB
• Perceived load time


  The amount of time a web page visitor is aware of waiting while the page is loading
• Techniques to shorten perceived load time

  • Breaking the long page into multiple smaller pages
  • Image slicing - dividing large images into multiple smaller graphics
• Above the fold


  The portion of a web page that is viewable without scrolling
• Importance of above the fold


  • It can be used to attract and keep visitors on your web pages
• Web page "real estate"


  The location you choose for high-profile components like logo banners, page headings, and navigation
• Most valuable web page real estate

  • The upper-left side and top center of the page
• Avoid placing important information and navigation on the far-right side as it may not be initially displayed by browsers at some screen resolutions
• Horizontal scrolling


  When a web page is too wide to be displayed in the browser window, requiring the user to scroll horizontally
• Optimal web page width for 1024x768 screen resolution

  • 960 pixels
• White space

  Blank or white space placed around blocks of text and graphics to increase readability and make them stand out
• Adequate white space


  • Depends on the target audience, experiment until the page looks appealing
• Target audience


  The group of people the web page is designed for
• Color preferences by target audience

  • Younger audiences prefer bright, lively colors
  • Older audiences prefer light backgrounds, well-defined images, and large text
• Deuteranopia


  The inability to differentiate between red and green, the most common type of color deficiency
• Designing for color deficiency

  • Use high contrast between background and text
  • Avoid using red, green, brown, gray, or purple next to each other
  • Use white, black, and shades of blue and yellow
• Reading level


  Match the reading level and style of writing to the target audience
• Animation


  Use only if it adds to the site, appeals more to younger audiences