Web Design Principles The NittyGritty - PowerPoint PPT Presentation
1 / 19
Title:
Web Design Principles The NittyGritty
Description:
... be important on a printed page, and backgrounds will burn more toner or ink than ... rest of the text, and are often given a different-colored background. ... – PowerPoint PPT presentation
Number of Views:60
Avg rating:3.0/5.0
Title: 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
Recommended
CrystalGraphics Presentations
