Web Design Basics
Tutorials   |    Design Basics    |     Colors on the Web    |    Writing Code   |     Graphics
JCDA Internet Publishing Guidelines
A must-read for anyone starting a webpage in the district.
Tutorials

There are numerous, wonderful tutorials available on the Internet that deal with all aspects of web design. Try them.

Design Basics
Source: Lynch, Patrick J. and Sarah Horton. Web Style Guide. New Haven: Yale University Press, 1999

Every web page needs:

  • an informative title
  • the creator's identity - author or institution
  • at least one link to a local home page
  • the home page URL on the major menu pages of the site

Basic design elements:

  • clear navigational aids -- provide basic links on every page and a consistent
  • graphic identity throughout the site; page templates help accomplish this goal
  • logical information design -- the best information designs are the ones users never notice
  • direct access -- minimize steps required to get to the desired information
  • keep loading times to a minimum -- for school network as well as home access
  • design integrity and stability -- keep the site working reliably; check links frequently and update time-sensitive material regularly
  • design for the average user --
    • check designs on small screens (640 x 480 pixels)
    • check designs on screens that display only 256 colors (8 bit displays)
    • turn off graphics and view the page in text-only mode
    • don't design sites that depend on one browser technology or browser plug-ins
Colors on the Web

What is a Web-Safe Color?

"What Makes These Colors So Great?"
Source: http://www.htmlgoodies.com/tutors/non_dithering_colors.html

They won't dither. They always give a nice smooth color on web pages and in graphics. The reason is because these are the 216 colors chosen by Windows and MAC operating platforms to make up their palettes of colors. The colors that aren't represented here are the colors that these try to make up by dithering. Get it?

The color list comes from a mathematical formula using the shades 00, 33, 66, 99, CC, and FF from hex codes.

Using just those 6 hex combinations over red, blue, and green hues, gives us a total of 216 colors that will render perfectly on your screen.

Visit the Visibone Color Lab to view the universal web palette and download web-safe color wheels for Photoshop, ImageReady, Fireworks and Gimp.
Writing Code

Web design programs can offer a quick and convenient way to create a web page, but they can't substitute for knowledge of the behind-the-scenes code, especially HTML. Learning about cascading style sheets, or CSS, is also worth the effort. This can be a real time-saver. Explore some of the code resources to become familiar with code basics. It will be well worth the effort.

Graphics
Source: Adobe Photoshop Seminar '98

SIZE OF GRAPHICS
The most commonly used computer screen sizes are 640 x 480, 800 x 600 and 1024 x 768 pixels. Designers should plan their graphics so that they will always fit on the smallest of these. Therefore, banners and title graphics should be no wider than 600 pixels (less than 468 preferred). Photos and large artwork should be 100-300 pixels (width and height), and buttons and icons should be 20-100 pixels. "If you're designing at a size that forces users to resize their browser to see your page, then you're not really designing for the web."

THE GOLDEN RULE OF WEB DESIGN
Design all web graphics so that their file sizes are the absolute smallest possible. Many visitors to a site will not wait around for all the cool graphics (with large file sizes) to slowly load onto the page. They will click through to the next page or leave the site altogether.

GRAPHIC FILE FORMATS
There are two main graphic file formats for web images: GIF and JPG.

The GIF format is well suited for "icons, buttons, bars, text used as a graphic, backgroungs, line art, and any graphic where [transparency is needed]."

Advantages of GIF format

  • GIF files can make use of interlacing (images loads in stages so viewer initially sees a blurred version which becomes more focused as it finishes loading). Interlacing aadds 10% to the file size, so use only on images larger than 200 x 200 pixels.
  • GIFs allow selection of a transparent color
  • GIFs can be very, very small

Disadvantages of GIF format

  • To create a GIF graphic, the Photoshop image must first be converted to index color (limit of 256 colors), while JPEGs are theoretically capable of displaying 16.7 million colors. Photos saved as GIF images will be less crisp than if saved as JPEG.

TheJPG format is well suited for "photographs and images with gradients or continuous tones. When a graphic has to be high-quality, use JPEG."

Advantages of JPEG format

  • "The main advantage of JPEG is that you can take a very large full-color photographic image and compresses it down very small without a significant loss of quality."

Disadvantages of JPEG format

  • JPEG compression works better on large images. With smaller images, better compression is possible with GIF.
  • JPEG doesn't allow a color to be selected as transparent.

When developing a website, it is desirable to create original graphics in order to avoid copyright violation issues. However, for purposes of experimentation and for pure fun, check out some of the graphic sources linked above.

GPN Home           |           GP Library          |           Virtual Library          |          Computer Tips

Questions and comments about this site may be sent to:     karen.villegas@gpschools.org