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.
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
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.
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.
|