Web Design Principles The NittyGritty

1
Web Design PrinciplesThe Nitty-Gritty

• Adapted from Web Design The Complete Reference,
  by Thomas Powell

2
Entrance Pages

• Theoretically, any page in a site can serve as an
  entrance page if the user knows the page's URL.
  Most sites tend to have only a few entry points.
  The home page is the main entry to a site, but
  certain important sectional pages or "subhome"
  pages might also be entry points into a
  siteparticularly if they have special URLs or
  unique domains.
• Suggestion Provide an obvious link to quickly
  skip a splash page.

3
Home Pages

• As a landmark page, a home page should be unique
  from all other pages in a site in its appearance.
  Understand that the home page is often the way
  people visually remember a site. If it is not
  different, users may feel lost in a site, needing
  an obvious starting point.
• In order to be distinct, home pages often are
  more visual than deeper pages in a site and may
  more prominently display organizational identity,
  such as a logo, than other pages.
• A home page should set the visual and
  navigational tone of a site.
• A home page should load fast, but be dramatic
  enough to encourage interest.
• A home page should clearly indicate what's inside
  a site.

4
Home Pages
Home pages should be obvious in structure and layo
ut - Based on their layout, which are home pages?
5
Subpages

• Subpages should follow the style and navigation
  of the home page, at least in spirit.
• While the purpose of the home page is to make the
  user keenly aware of being on a particular site,
  when a user journeys deeper into the site, the
  user's awareness needs to shift to the content.
  If subpages are presenting the user with new
  navigation, new logs, and new color schemes along
  the way, the user's attention will be drawn way
  from the content.

6
Print Pages HTML

• Printed pages should be generally set in smaller
  type and the layout modified to utilize standard
  letter-size paper effectively. Colored text may
  not be important on a printed page, and
  backgrounds will burn more toner or ink than
  provide benefit in most cases. Furthermore, users
  probably do not need to see site navigation.
• Create a special print version in HTML. This
  could be as simple as stripping most of the HTML
  out and placing the text in a single-celled
  table.

7
Print Pages PDF
PDF - Adobe Acrobat DOC - Microsoft Word RTF -
Rich Text Format TXT - Text only

• Another approach to the printing issue is to
  provide a PDF version of the page. Using PDF, it
  is possible to create a high-resolution
  printer-oriented version of the information in a
  page just as it might appear in a brochure. A
  common use of this format is for displaying
  highly complex information such as technical
  specifications or mathematical formulas.
• Clearly indicate Acrobat files with text and an
  icon, and provide information on using these
  files.

8
Exit Pages

• While the home page serves as the main entry
  point to a Web site, is there a defined exit
  point? For content-oriented sites, there may not
  be one, and every page could be considered an
  obvious exit point. However, not all sites can
  afford to lack a point of closure. The exit page
  provides a sense of completion or closure to a
  visit.
• Suggestion Provide a way back to the site from
  an exit page.

9
Layouts TLB

• Top-Left-Bottom pages the top of the page is
  reserved for page labeling, branding information,
  and, potentially, primary navigation. The left
  side of the screen contains navigation elements.
• The major downside of TLB layouts, besides their
  potentially limiting content region, is that they
  generally look more navigationally focused than
  content focused

Figure 9-29. Top-left
bottom design is a very common layout
10
Layouts Header-Footer

• A header-footer design provides navigation on
  both the top and bottom of the page, with the
  entire width of the page used for content.
• This type of design is good for content-oriented
  sites, though it does limit the amount of area
  used for navigation.
• Generally, the top of the screen is used for
  branding, graphical navigation, and page
  headings, while the bottom of the screen is used
  to repeat text links and to provide supplementary
  information such as text links

Figure 9-30.Header-footer design is useful in con
tent-heavy sites
11
Layouts Floating Window Panes

• A pane in the middle of the page with graphics
  all around it
• The region can either be fixed in size from page
  to page or be a scrolling window. Generally,
  fixed cardstyle design won't work unless a very
  limited amount of content is presented.
• The benefit of this style of design is that it
  provides a fixed region to design for but doesn't
  look as unusual on varying screens since it is
  usually positioned within a lush background and
  floats in the center of a screen.
• For more info on creating floating panes, see
  handout

Figure 9-31.Floating window designs can be dramat
ic
12
Fonts

• Common fonts font families
• Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• When using either the tag or CSS,
  list several acceptable fonts, followed by the
  font family to increase the likelihood of the
  users computer having a font that works with
  your design scheme.
• The font families are sans-serif, serif, and
  monospace.
• In CSS, this looks like
• P   font-family Arial, Helvetica, Sans-serif
• In HTML, this looks like
• 
  This should be in a different font

Figure 10-9.Common Web fonts
13
Lines

• Avoid using justified text in webpages it looks
  too impenetrable
• The ideal line length is 50-70 characters 7 to
  15 words this corresponds to about 4 inches,
  which is the width peoples eyes can scan without
  them having to turn their heads.
• The ideal line height for readability is 1.3 to
  1.5 lines. See packet for more information.

14
Pull Quotes

• In print, it is sometimes useful to enhance a
  page of text with one or two pull quotes. In
  addition to varying the text flow, pull quotes
  are used to draw the reader's attention by
  highlighting a statement from the text.
• Pull quotes are generally given in a different
  font and size from the rest of the text, and are
  often given a different-colored background.
• You can create them using either tables or CSS
  coding (see packet)

Figure 10-27.Pull quote created with CSS
15
Sidebars

• Like pull quotes, sidebars stand apart from the
  rest of the text on a page. Instead of drawing
  attention to the main text, however, they serve
  to provide additional information related to the
  subject at hand. This can also be done with
  tables.

16
Page Set-up

• Avoid wide pages, especially those that cause
  rightward rolling
• Rule Try to keep important items such as primary
  navigation in the first screen.
• Some designers call the bottom of the browser
  screen the "fold," and it is wise to make sure
  that a design does not end right before or after
  the fold.
• Suggestion When using fixed page sizes, make
  sure to center your page to reduce the perception
  of empty space on larger displays.
• Suggestion Try to fit content vertically within
  35 screens, if possible.

17
Text-Design Issues for the Web

• Screen resolution is very low
• Glare and refresh rate make reading difficult
• Eyestrain is frequent
• Users read much more slowly online

18
Text-Design Issues II

• Most readers feel that sans serifs fonts are more
  readable online than serifs. Good sans serifs
  include Arial, Verdana, Tahoma, Avant Garde, and
  Tw Cen MT
• When establishing your font hierarchy (which
  fonts and font formats youll use for what page
  elements, including navigation, the various
  levels of headings and subheadings, important
  information within the text, c.), choose fonts
  and styles that are visibly not subtly
  different from one another. Usually, you should
  choose fonts from different families.
• Consider three fonts per page one for page
  labels and headlines, one for body text, and one
  for navigation.

19
Text-Design Issues III

• Navigation-heavy pages require less white space
  than content-heavy pages.
• Keep your text short and concise experts
  suggest that you halve your material when
  translating from hard copy to e-text
• Get to the point right away
• Use headings to orient the reader
• Use pull quotes and highlighted (or boldfaced)
  text to emphasize important elements
• Use lists to summarize important information