Web Design

1
Web Design Page layout

• HTML Unit Module B

2
Visual Hierarchy

• The primary task of graphic design is to create a
  strong, consistent visual hierarchy in which
  important elements are emphasized and content is
  organized logically and predictably.
• Graphic design is visual information management,
  using the tools of page layout, typography, and
  illustration to lead the reader's eye through the
  page.

3
Visual Hierarchy

• Readers first see pages as large masses of shape
  and color, with foreground elements contrasting
  against the background field.

4
Visual Hierarchy

• Secondarily they begin to pick out specific
  information, first from graphics if they are
  present, and only then do they start parsing the
  harder medium of text and begin to read
  individual words and phrases.

5
Contrast is Essential

• The overall graphic balance and organization of
  the page is crucial to drawing the reader into
  your content.
• A dull page of solid text will repel the eye.
• A page dominated by poorly designed or overly
  bold graphics or typography will also distract or
  repel users.
• You will need to strike an appropriate balance
  between attracting the eye with visual contrast
  and providing a sense of organization.

6
Importance of Contrast
7

• Visual balance and appropriateness to the
  intended audience are the keys to successful
  design decisions.

8
Consistency

• Establish a layout grid and a style for handling
  your text and graphics, then apply it
  consistently to build rhythm and unity across the
  pages of your site.
• Repetition is not boring it gives your site a
  consistent graphic identity that creates and then
  reinforces a distinct sense of "place" and makes
  your site memorable.

9
Consistency is key!
10
Example
11
Example Explained

• If you choose a graphic theme, use it throughout
  your Web site. The Bridgeman Art Library home
  page banner, below, sets the graphic theme for
  the site and introduces distinctive typography
  and a set of navigation buttons

12
Page Dimensions

• Although Web pages and conventional print
  documents share many graphic, functional, and
  editorial similarities, the computer screen, not
  the printed page, is the primary delivery site
  for Web-based information, and the computer
  screen is very different from the printed page.

13
Page Dimensions
800 x 600 screen area

• A common mistake in Web design is spreading the
  width of page graphics beyond the area most
  viewers can see on their seventeen- or
  nineteen-inch display screens

14
Graphic Safe Areas

• The "safe area" for Web page graphics is
  determined by two factors the minimum screen
  size in common use and the width of paper used to
  print Web pages.
• Most display screens used in academia and
  business are seventeen to nineteen inches
  (forty-three to forty-eight centimeters) in size,
  and most are set to display an 800 x 600-pixel
  screen.

15
Graphic Safe Areas

• Web page graphics that exceed the width dimension
  of the most common display screens look
  amateurish and will inconvenience many readers by
  forcing them to scroll both horizontally and
  vertically to see the full page layout.
• It's bad enough to have to scroll in one
  (vertical) direction having to scroll in two
  directions is intolerable.

16
Screen Samples
17
Things to Remember

• Current browser versions attempt to resolve
  printing problems by providing the option to
  scale the page contents to fit the standard paper
  width. However, many users are unaware of the
  "fit to page" option.
• Another problem is that wide pages that are
  scaled to fit are often illegible because the
  type has been scaled excessively.

18
Graphic Safe Areas
Graphic Safe Areas for 800 x 600 Screens
19
Screen Resolution

• The safe area is the area shown on the screen
  considering that the browser takes up space at
  the top and sides of the page.  Web sites should
  be optimized for 800x600 or 1024x768 pixel
  monitors.

20
Page Design Above the Fold

• Think of web pages as a newspaper it has a
  fold an area that you can see immediately,
  and an area that you must unfold to see.
• "above the fold" the top of your page
  captures the average reader, because that is all
  he or she will see as the page loads.

21
Page Design Functionality

• Vertical scrolling progressively reveals the
  page, and new content appears and the upper
  content disappears.
• Therefore, Web page layouts should be judged not
  by viewing the whole page as a unit, but by
  dividing the page into visual and functional
  zones.

22
(No Transcript)
23
Fixed Versus Flexible

• In web design, tables are used to ensure unity
  and the organization of your design.
• Example Variable-width layout table
• Example Fixed-width layout table
• It is possible to create flexible layout tables
  that resize gracefully without sacrificing the
  integrity of your design, but if you are turning
  to layout tables for precision you will need to
  use fixed-width layout tables.

24
Spacing and Alignment

• Tables can be used to combine different text
  alignments on the page. In this example the text
  in the left column is right justified, and the
  text in the right is left justified.

Example Tables used for alignment
25
Images and Tables

• For your assignment, you will be using tables to
  organize the pictures you include on the web
• Tables give the designer much greater flexibility
  in positioning images on a page than simply
  pasting or placing on a page.

26

• The example at right is shown with borders both
  on and off to depict the underlying table used to
  establish the layout.

27
Frames

• The example at left shows the repeated navigation
  bar and the multiple files that can open in the
  mainFrame by accessing the links provided.

28
Frames

• Frames are meta-documents that call and display
  multiple HTML documents in a single browser
  window.
• Each frame opens a separate HTML files and
  displays them all together.
• BENEFIT naviagation and banner files load ONCE.
• NEGATIVE difficult to print / space may not be
  utilized to the utmost degree.

29
In Conclusion

• Readers experience Web pages in two ways as a
  direct medium where pages are read online and as
  a delivery medium to access information that is
  downloaded into text files or printed onto paper.
  Your expectations about how readers will
  typically use your site should govern your page
  design decisions.