Website_Design
Site Unity
Organization
Typography
Page_Layout
Style Guide
Audience
Page Size
All Hints
Site_Map
Related_Tutorial
Web Images
Scanning_Images
Summer_98
TechFair_98
|
Establish
sitewide
consistency rules |
Consistency is important
in all design, but it's extremely important with
the Web. Because one mouse-click can send someone
to a new site at any time, a consistent style
provides a significant visual cue to let people
know they're still at the same site. (This site
for example, use the same color, format, and text
style for entire Web site.)
|
Create
style guidelines,
with some contrast
between other sites |
Although it's important to
maintain consistency throughout your site, you
also want to provide enough contrast between its
various site on the same server. PSU, for
example, has many classes on the web, and if they
all looked the same, then the rule above would
still apply. Check out SOC 399, then PSY 523, and notice they all have
the same format, but use font, color, and
graphics to make each site unique.
|
Decide on a
standard width. |
You should decide on a
pixel width for your site before you start
designing individual pages. Two common widths are
485 pixels (Netscape Navigator's Macintosh
default) or 600 pixels (Navigator's Windows
default). The width that's right for your site
will depend on which system most of your audience
uses. You can even tell visitors to resize their
browser window to the width of a horizontal line
on your site's front page. This site uses 600
pixels. |
| Use tables to give
your site a constant grid format |
It's not especially easy
to implement, but a site can have consistent
columns that fall into a grid, much like a
newspaper or a magazine. Because of the
limitations of HTML, horizontal alignment of text
and graphics is difficult to control. But you can
at least define vertical columns by using a
table. Click
here to see how this page was constructed with
tables.
|
Website Design
Site Unity | Organization | Typography | Layout | Style
Guide | Audience | Page
Size
All Hints | Site
Map
Related Tutorial
Web Images | Scanning Images
 |
Contact Nancy
Perrin, or John
Rueter. PSU's FIPSE
Project coordinated by Nancy Perrin and John
Rueter, © 1998. Page constructed by Chris
Miller. Last updated on June 23, 1998. For more
see the About Page. |
|