• Introduction
• Graphic Identity
• Publishing in Print
• Publishing for the Web
• Appendix: Style Guide


• Project Initiation Form:
  
  • Complete online
  • PDF to print and fill out

Publishing for the Web

Web site design is very different from print design. The focus should be on presenting the information visually and structurally in a way that makes sense to the user.

• Creating a Web site
• Using the Georgetown Law Templates
  
  • Colors
  • Fonts
  • Graphics
  • Layout
• Help

Creating a Web site
The IST team provides templated Web pages for departments, staff, etc. These templates must be used for content on the Georgetown Law Web site unless you have prior approval to do something different.

Exceptions:

• Official student organizations (must be approved through the Office of Student Affairs)
• Journals
• Some institutes and initiatives
• Faculty Web pages other than the standard faculty pages on the Law Center Web site

Good Web site design is all about the structure of the content, or "information architecture." A first step when creating a Web site could be to draw a "spider map" of how you want it to work. Start with the homepage. From there, where can your user go (link to)? And on each of those subpages, which further links will appear? How do subpages need to be cross-linked? Your spider map might look something like this:

Once you have your structure in place, each square represents a page on your Web site, and it should be relatively easy to drop your content into the appropriate pages.

 

Using the Georgetown Law Templates
The Georgetown Law templates have been designed to allow you as much flexibility as possible while remaining consistent with the look and feel of the Web site as a whole. Therefore, there are some regulations for the colors, fonts, layout etc. that you may use in the Law Center template.

Colors: Please stick to blue, gray or the complementary yellow color when choosing colors for anything on your site.

The University colors for Web purposes are a dark solid blue and a medium neutral gray.
(Web-safe hexachrome designations for HTML design shown below each swatch)

#003366	#666666

 

Other shades of blue and gray may be considered appropriate for Web designs. However, these should be limited to the colors below, and different variations of the blues should not be used in combination with each other.

#003366 (standard)	#000066	#333366	#333399

 

#666666 (standard)	#333333	#999999	#cccccc

The contrasting gold color used in the Law Center templates is:

 

 

Fonts: The same color rules above apply to fonts. There are several font colors and styles to choose from in the "styles" menu of the template; use these rather than other colors. Be wary of using many different colors and sizes of text within one page; this makes it much more difficult for a user to understand your information.

 

Graphics: If you are going to place photos or other graphics on your Web page, they must be prepared for Web use. There are a number of Web-ready campus photos available for use on departmental Web sites. If you have a photo or graphic of your own that you want to place on your Web page, you should run it by the Publications team to ensure that it is has been configured properly for Web use. If you attempt to resize a photo by clicking and dragging a corner of the image, you will end up with very poor quality and likely distortion; going to the Publications team will avoid this problem.

Specifics:
No photo should be larger than 350 pixels in width.
No photo should be more than 100 KB in "weight."
Photos should be in either jpg or gif format.

 

Layout: You must stay within the parameters of the Law Center template's layout. This means the Georgetown Law header/links must remain at the top of the page. You then have a choice of templates with or without left-side navigation.

Be aware that if you create tables or add photos to the content area that are wider than the specified size of the area, you will "break" the template — meaning that the user will see a page that looks distorted or broken. This is why photos need to stay 350 pixels or less; if you create a table, set the width to "100%" — do not drag the edges of the table, simply allow the content to dictate the size. You must follow the guidelines set out in Section I: Graphic Identity.

 

Help

For help with complex Web projects, the Publications team is available to assist you in planning the structure and design of your site, and in some instances, to help with the building of your site.

Revised May 16, 2007 (SD)