web publishing at Penn State
 

Understand WWW   |   Getting Started   |  Visual   |   Functionality   |   Resources


   You are at: Index / Visual /
  Enhancing Visual Appearance
Basic Design Principles

Check the following links for references on basic web design principles:
 
Design advice from WebMonkey
useful suggestions from web professionals.
Web Pages that Suck
design advice in the form of what to avoid, with links to useful resources.
USEIT.com
design wisdom on usability from Jacob Nielson.

Cascading Style Sheets

Incorporating a stylesheet to your web sites would bring three benefits: First, you can make a change once and watch it "cascade" through your entire site. Second, you can exercise greater control over the appearance of your web pages than you otherwise could. And third, you can make your web site more accessible, as stylesheets can be adapted to the needs of users.

Here are some resources on cascading style sheets:
 
Mulder's Stylesheets Tutorial
(A good place for novices to begin)
The World Wide Web Consortium's CSS Home Page
This site has excellent resources for learning and getting the most out of CSS.
CSShark Answers Frequently Asked Questions
This site answers questions for newcomers as well as more advanced developers. In particular, it answers more questions about Netscape 4 than many other esources.
Advanced CSS Layouts: Step by Step
an easy-to-follow tutorial on using CSS to lay out good-looking, readable pages. This site talks you through formatting a complicated page without using tables.

Colors and Fonts

Colors:
You can assign colors to text or other elements, like the background of table cells or the whole page. You can assign colors by name, such as "red" or "cyan" or by hexadecimal number, like "#009900." You should expect, however, that the same color will look slightly different on different platforms, e.g., moving from Windows to Macintosh.

Here is an example of the code that would make a table with three background colors:
  <table width="400" border="1" cellspacing="0" cellpadding="0" >
<tr>
<td bgcolor="blue">&nbsp;</td>
<td bgcolor="yellow">&nbsp;</td>
</tr>
<tr>
<td colspan="2" bgcolor="#009900">&nbsp;</td>
</tr>
</table>

And here is the table the above codes build:

   
 

More references on colors:
 
Webmaster's Color Chart
gives all the details on the 216 web colors; provided by VisiBone.

Fonts:
So long as you ensure that visitors to your site will see the same fonts that you do (such as embedding them in images or allowing them to be downloaded along with your pages) you can use choices of fonts to customize the look of your web pages. Paying attention to fonts can also add to the readability of your site (as the first link below makes clear).

 
Penn State Computing with Foreign Symbols
a comprehensive guide to developing non-English Web sites in the Penn State environment.
MyFonts.com
A place to browse and purchase fonts, for Macintosh or Windows.
The Font Foundry
a large collection of shareware fonts.
SP Fonts
(named for the now-defunct Scholars Press) eight public-domain fonts for scholarly web and print publications: three Hebrew/Aramaic fonts, two Greek fonts, a Syriac Estrangela font, a font with Palestinian as well as Tiberian vowel points, and a font that includes diacriticals and other special characters that allow the representation of numerous Indo-European, Semitic, and other languages.
Where to Get Images
 
Downloadable Penn State Marks
a collection of Penn State marks for use on University pages, along with guidance on using them.
Penn State Image Archive
a huge collection of campus scenes from the Department of Public Information Media Gallery, to be incorporated into University web page.
Animation Factory's Mediabuilder
an excellent source of free buttons, backgrounds, bullets, and other elements for your web sites.
Basic HTML: Manipulating Images
(A good place for novices to begin) a simple introduction to placing images in web pages.